Chapter 12. Change built-in pages By the end of this section, you will be able to modify, and configure the visibility of any element in the system-generated pages. Some elements generated by the system are not possible to modify from the Developer Portal, such as the Signup, Dashboard, and Account pages. This guide shows how to customize with CSS and JavaScript the content on these pages. The system-generated pages follow backend rules for access and visibility so their URLs must be specific and hard coded values. A Knowledge Base article in the customer portal provides a list of system-generated pages and their URLs . Caution The 3scale system-generated pages are subject to change, although infrequently. These changes may break any customizations that you implement following this guide. If you can avoid using these hacks, please do so. Before you continue, be sure that you can monitor for any disruptive changes, and do the necessary maintenance work to keep your portal functioning. 12.1. Identify the elements The first and most important thing to do is identify what you want to hide. To do that, use Firebug (or any other developer tools such as Chrome Developer tools or Opera Dragonfly). Choose the desired element, and in the console, right click on it and select Copy CSS path. This way you save the exact CSS path to make it easy to manipulate. Remember, if the element is a part of the sidebar navigation widget, you will also have to specify which position in the list. For this, you can use either the "+" selector (for example, to choose 3rd li element: ul + li + li + li) or the :nth-child(n) CSS3 pseudoclass. 12.2. Modify or hide the elements Now, having identified the elements, you can change their display settings. Depending on the type of element, you can choose from two possible methods: CSS manipulation or jQuery script. CSS manipulation is more lightweight and reliable, but does not work well for some kinds of elements that exist on a number of pages, for example, the 3rd element in the sidebar of the Admin Portal's Dashboard also exists in the Account section but has a different value. Some trickier implementations require use of CSS3 which is not supported by old browsers. In the two steps, you will see both of these approaches. 12.3. Option A: CSS As an example, try to hide the latest element from the Dashboard page. Following the first step, you have identified its CSS path as: Keep in mind that it is the second box with the same path, so you will use the "+" selector. Your path will now look like this: .main_layout #three-scale .dashboard_bubble + .dashboard_bubble /* or */ .main_layout #three-scale .dashboard_bubble:nth-child(1) Changing display property to none makes that box invisible: .main_layout #three-scale .dashboard_bubble:nth-child(1) { display: none; } 12.4. Option B: jQuery If you have a trickier element to hide such as a sidebar menu element, it is better to use some jQuery. The CSS path of these elements is identical on the Dashboard and Account sections, and you do not want to hide elements in both sections. So choose the element based on the CSS path and the content. In this example, assume you want to hide the messages section from the Dashboard's sidebar. Your CSS path is: In order to match the content, use the .text() function. Also, include the code inside the document's head and inside the ready function, so it is run after all the content has been generated. The resulting code snippet will look like this: USD(function() { USD('#three-scale #submenu li a').each(function() { if (USD(this).text() == "Messages") USD(this).parent().css('display', 'none'); }); }); This is not the only solution. It just shows one possible way of doing it. The same example could be done using pure CSS with CSS3 selectors basing on the attributes values. For the complete CSS3 selectors specification, take a look here .

Commands:
#three-scale .dashboard_bubble
.main_layout #three-scale .dashboard_bubble + .dashboard_bubble /* or */ .main_layout #three-scale .dashboard_bubble:nth-child(1)
.main_layout #three-scale .dashboard_bubble:nth-child(1) { display: none; }
#three-scale #submenu li a
USD(function() { USD('#three-scale #submenu li a').each(function() { if (USD(this).text() == "Messages") USD(this).parent().css('display', 'none'); }); });