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

Now that Oracle has enabled us to download instant client without any click through for accepting the license , I wanted to revisit a seamless install of the instant client on a new set up. Ubuntu has the documentation about installing the instant client here: https://help.ubuntu.com/community/Oracle%20Instant%20Client. First - because Oracle provides their releases in RPM archive format (or a tarball), in order to have an installer you need to create a DEB archive. There is a package in the archives, alien, which aids this process. This gives the start of the script: #!/bin/bash # Install dependencies sudo apt install alien The 3 packages the Ubuntu documentation tells us to retrieve are: - devel - basic (I opt for basiclite instead) - sqlplus So, over at the downloads page: https://www.oracle.com/database/technologies/instant-client/linux-x86-64-downloads.html we can grab the link. # Download files. Example specific to 19.3 # Some links were not correct on the do...
Read more

Report row buttons firing a dynamic action

Image
A lot of the time on reports of data, we'll define a link column, and specify an image which is the beloved pencil icon. Which is good and all, but looking in the Sample Database Application (packaged application), they have taken a different approach to style links - a button that stretches the width of it's containing cell. So, the UI ends up looking like so: So, is this done? Well first, you define a new column for the placeholder. Suppose I want my link column to be Report, I define an extra column in my query: , 'Report' report_link Then I need to go to my new column's attributes, and change the column type to a link. And, in the link attributes, set the text to what you want displayed. Here, I'm just going to display the value of the new column and point to my desired page. So I set the target page, then also the Link text as #REPORT_LINK#. At this point the report will just show link text, as we expect. So, then to replicate t...
Read more

Customising APEX built-in validation messages

Image
I was working on an application and when trying to save some data, I was getting these error messages despite the fact I had no validations on my page. And what I wanted to know, how do I change these message contents? APEX does some default checking based on entered data. A prime example of this is a date field. On a brand new application, I created a region and added a page item with the type as "Date Picker". If I enter text into the date input field that is not a date conforming to the date format, I will get the following error: "Date Field does not match format DS."   First of all, DS? What is that? This particular application was created by uploading a spreadsheet, and I did not set that. In fact, my spreadsheet had no date data to begin with. In saying that, a quick search in the globalization attributes, and somehow this application has the date format set to "DS". So first, let us change that - I like to use DD-MON-YYYY. So that fixes the error ...
Read more