A Universal Theme Adventure: Header Height

This will be the first post in a series of posts covering some aspects of working with universal theme, where I hope to explore some more of Universal Theme and broaden my knowledge in the process.

What first? I want to change the height of the header bar.

To get started I create a brand new application - accepting any and all defaults. Any changes to a design/theme usually begins with Theme Roller, so first off:

Theme Roller

The first, and most obvious way is to leverage Theme Roller. Running the application, in the developer toolbar and select Theme Roller off to the right. 

Within Theme Roller, there is one section titled Layout. This gives us a number of options, one of which is Header Height:

 

This gives us a slide with some preset options between 40 and 80 pixels, with increments of 4 pixels. (It's worth a brief mention that this range is defined from the Input Parameter File URLs given by the path: #THEME_IMAGES#less/theme/Vita.less, in the theme settings).

As you adjust the slider, you will notice on the page our first region is no longer rendered in the correct position. For example, I increased it to the maximum of 80 pixels, and look - the header seems to be overlaying the top of the breadcrumbs.


Don't worry, this is just temporary. APEX behind the scenes is working out the top margin based on the height of that header bar. So, you just need to force a redraw of the page by resizing the window and things will look normal again.

side note: This can also be resolved from an undocumented Theme42 JavaScript API: apex.theme42.util.fixLayout(). Use at your own peril

Further, we can see that the content body has a top margin that directly aligns with what we set the height of the header bar to be, as an inline CSS style rule.


Custom CSS

So far so good. However, suppose I want a different height not in the pre-defined range.For this scenario, we can write our own CSS rules with more explicit design rules.

To figure that out I could inspect the page DOM, but actually instead I decided to review the CSS rules that Theme Roller/APEX generated for me. We can find the CSS filename from our theme by going to Shared Components -> Themes -> Universal Theme 42. Here, in the Styles section, we will see all our themes - predefined ones and any additional ones we have saved. Go into the details and you will see that the setting Output CSS File URL has the value something to the effect of #THEME_DB_IMAGES#42141118889762532262.css.

With this information, when we view the page source of a page in our application we can search file the link to this style rule in order to view it. For example, in my application it is:    

href="my_workspace/r/9663/files/theme/42/v66/42141118889762532262.css"

When we view it, what we can do is search the rules for the height we set the header to, or if that value is too common the next step would be to do a diff on this file output compared to what was previously there.

The height I set (80px) was unique enough it was easy enough to find what rules had been applied. The specific rules I found were:

.t-Header-branding {
  height: 80px;
}

.t-Body-content {
  min-height: calc(100vh -  80px);
}

.apex-side-nav .t-Body-nav,
.apex-side-nav .t-Body-actions,
.apex-side-nav .t-Body-title {
  top: 80px;
}

I can take a copy of these rules, replacing 80px with the height I want the header bar to be, and past into the Custom CSS section of my Theme Roller style. As Theme Roller notes, custom CSS rules are added to the end of the generated file. In CSS, two rules with the same selector, the rule that comes last is the one that gets applied. 

Great, that's working. 

However, I'd prefer to have my custom rules in a file so that I can version control and make it easy for maintenance in the future. To use this strategy, I can go back into my theme style in Shared Components. Here there is one property,  File URLs. In here, we can specify paths to additional CSS files, and these will be added to the page rendering through the placeholder #THEME_STYLE_CSS# in the page template. However, keep in mind, these files go before the file generated from Theme Roller. 

So, do use this strategy, we will need to make our CSS rules more explicit to ensure they take precedence over the rules that come later (the rules generated from Theme Roller). 

I'll leave that as an exercise for you if that's the path you go down.

And of course, depending on your architecture you could also include a theme file as part of your User Interface Attributes. However, if you'll probably want to self-contain the theme as much as possible so if others subscribe to it they don't have to perform additional steps to get the same look and feel.

Popular posts from this blog

Installing Oracle Instant Client on Ubuntu

Report row buttons firing a dynamic action

APEX 5 blob column uploads