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

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

Accessing the last request value from a page submission

Image
When you submit the page, you will typically have page processes that run. For me, I use these request values to determine which processes are run. This is rather straight forward for on submit processes as you can just specify the condition request = Expression 1 Or, if you have multiple requests that link to this process, Request is Contained within Expression 1, and Expression 1 would be a comma delimited set of values. Request simply refers to the bind variable :REQUEST (or apex_application.g_request). If we try and do the same on a page rendering process, we no longer have access to this value - which makes sense. If you update the branch, to set the request portion of the URL, we will then be able to access the bind variable :REQUEST in all page rendering processing points. This has the obvious downside that if the user wants to reload the page,  clicks in the address bar and hits enter (or clicks refresh), the processes on that condition
Read more

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