Paul Broughton's Blog

To talk about all things APEX and generally techie with some random stuff thrown in!

Its a Theme changer

A couple of times recently I have been asked how you can change the colours of APEX report and change the styling of the application without changing the theme.   I created a quick app so I could give example.

 

The way I tend to do this is create a separate style sheet that overwrites the standard APEX style sheet.  I also use firebug to help me do this as it certainly makes life easier.

 

If you dont have firebug Its definitely something I would recommend, my preferred browser to use it with is firefox but you can get lite versions for other browsers too.

 

First of all I would find the styling for what I want to change by inspecting the element in firebug and change it on the fly to preview my changes

 

Here’s how my homepage looks before any changes with the logo currently been inspected

 

Next I want to show my current CSS shown in firebug when I have inspected the logo text on my page

 

Next my CSS after I changed it in firebug on the fly

 

Now my logo with styling changed

 

I can then very easily copy and paste my changes I made in firebug into an external CSS file that will be used to overwrite the standard CSS permanently.

I also changed the styling of my employee report and the region title by changing it on the fly then copying it into my file

 

Once I have created my file I can then either store it on my server or upload to APEX

To upload to to APEX you can navigate to shared components then Cascading Style Sheets and upload the file

By doing this I can then reference the file inside my page template underneath the standard CSS or alternatively on each page by adding to the header text in the page definition

 

Once I have then linked the file my changes are then included on the page

One thing to be aware of is if you include the CSS in the page template then it will be modified on every page.

Category: Uncategorized

Your email address will not be published. Required fields are marked *

*