Hiding the toolbar in a v8 theme

One thing I often do in a portal theme is to hide the upper navigation bar, so that it is only visible when you mouseover.

This is the content spot that renders the navigation in question:

<a rel="dynamic-content" href="dyn-cs:id:80theme_topNav"></a>

The classes below work for an upper navigation bar that’s wrapped in a div with a class called “wpThemeHeader”.

This selector is the main toolbar class:

.wpThemeHeader {
background-color: #333; <<– the border appears as a thin line of this colour in normal rendering.
border-bottom: 1px solid #111111;  <<– this is optional, it appears when the border is minimized.
    height: 44px;
    margin-top: -41px; <<– Better to do this than to set the height to 3px, because of the transition; if you do the height then the button bar doesn’t slide in smoothly.
overflow: hidden;
text-align: left;
transition: margin-top 0.3s ease 0s; <<–The transition controls how long it takes for the bar to appear
padding: 5px 0;
font: 75%/1.5 Arial,Helvetica,sans-serif;
}

This selector makes the header appear when you mouse over in view mode.

.wpThemeHeader:hover {
    margin-top: 0;

This selector makes the header appear as normal when you put the Portal in Edit mode. This is needed because otherwise modal dialogs for editing parameters etc are displaced.

.edit-mode .wpThemeHeader { 
margin-top: 0;
}

Advertisements

Portal 8 – Refreshing page layout in the v8 theme

The portal v8 theme uses HTML layout templates to describe the structure of rows and columns on the page. The portal caches these layouts for each page and provides a button in the GUI to refresh the page layout on an individual page.

Clearly, though, this would be tedious and time consuming to do for a whole portal and, luckily, there is a config engine task to refresh page layout more globally:

WebSphere Portal Family wiki : IBM WebSphere Portal 8 Product Documentation : Task refresh-page-layout.