Main Region

Change tab color when selected
2 answers | 2715 views

Jan 13, 2014 16:43 +00:00

Hi Matt,

We want to change the color of the selected tab in our app. We have many tabs on our main page that are within a layout.(Foex demo site, workspace = fx_ws_221, app = 293, page = 200)We can see that these tabs are highlighted when selected, but we'd like to change them to a darker color.

I've read other posts that pointed me in the right direction, but I haven't been able to figure it out. I noticed many classes that seem to be involved, such as x-tab-default-active, and x-tab-active, but when I add them to the "Inline" section of the Apex page header, setting a different background color, nothing changes. e.g.

.x-tab-top-active { background-color:#AFDE8C; }

.x-tab-active { background-color:#AFDE8C; }

.x-active { background-color:#AFDE8C; }

.x-tab-default-active { background-color:#AFDE8C; }

I also looked in the Foex plug-ins and found "Foex Tab Switch", which tells me that if I want to listen for the "After" tab switch event I need to look in "Foex Layout Tab Change". The problem is that I can't find "Tab Change" within the "Foex Layout" plug-in.

I really wanted to figure this out on my own, unfortunately we are under time constraint.

Thank you for your time.



Eric Jan 14, 2014 22:01 +00:00 

Hi Matt, I took a look at the Foex Demo site. The CSS that you added doesn't seem to change anything--the tab colors don't change when active. I've been playing around with many different ideas, but none have solved the problem. I'm a beginner in CSS and HTML, so the assumptions I'm making towards solving the problem are probably way off, and because this is declarative programming I get lost easy without the "how" things work. Could you please get the Foex Demo example working? Again, we just need the shading/background color of the tab to change color when it is active. Thank you. Eric

Eric Jan 14, 2014 22:21 +00:00 

Hi Matt, Sorry to post two back to back messages, but Chris just had the idea that it may be working in Firefox, which I can assume you used, and not working in Chrome, which I was/am using. He was right. I checked the Foex test site using Firefox and it's working fine. Would you happen to know how I can make this work in Chrome? Thanks again. Eric

Eric Jan 14, 2014 23:18 +00:00 

Thank you very much, I'll take a look at that. The good news is we got it to work on our end by changing "background-image: -webkit-linear-gradient(center top , #FFFFFF, #AFDE8C) !important;" to "background-image: -webkit-gradient(linear,center top,center bottom, from(#FFFFFF), to(#AFDE8C)) !important;" Oh, sorry if you had to delete the CSS from the Inline twice, I was messing around in there until I realized that you were probably working in there as well, ha. Thanks again.

Eric Jan 16, 2014 15:58 +00:00 

I've implemented your After Regions process and it's working great! There is one more thing; the color of certain buttons still will not change, e.g. the Search button within a Grid, and the Apply button within a Form. We want as much consistency as possible. How can I make sure these change as well?

Eric Jan 16, 2014 16:01 +00:00 

I meant "Reset" button within a Form, not "Apply".

Matt Nolan Jan 18, 2014 01:25 +00:00 

At the moment you can't the styling of the reset button for a form as there is no way to uniquely identify it on the page. I will log an enhancement request that will add a class which you can then define and add your own styling to.

For the grid search button unfortunately this is not changeable unless you override the .x-form-search-trigger background-image property since the entire button and icon is a background image.

Jan 14, 2014 22:57 +00:00

I have added the PLSQL process region to your page and uploaded the CSS file to the Cascading Style sheets section (this is the preferred method and is more maintainable and centrally controllable). Please look at the solution.

The reason why chrome is not working is due to the beahviour of overriding styles and CSS specifity. You need to play around with CSS and find out what works best. I recommend firebug or devloper tools to do this on the fly.

The fix for chrome was just to change the background-color to background e.g.

.x-tab-top-active {
    background: #AFDE8C !important;

Jan 13, 2014 22:58 +00:00

Hi Eric

I did advise in the following thread how to go about colour changes:

However what I failed to state was that in order to ensure that the CSS overrides the Ext JS CSS definitions is that they need to be defined after the Ext JS stylesheet and not in the page header. To do this you would:

  1. Add your CSS styles to a file and upload them to your APEX application using the Cascading Style Sheets section in shared components. e.g. myCssfile.css
  2. Create a PLSQL page process which runs in the position "After Regions" and you would include the following:


( p_name            => '#WORKSPACE_IMAGES#myCssfile.css'
, p_directory       => NULL
, p_version         => NULL
, p_skip_extension  => TRUE

Alternatively you can define them in the page header and use the !important flag (which I have done in your demo applciation on page 200 as an example)

/* Green Active Tab */
.x-tab-top-active {
    background-color: #AFDE8C !important;
    background-image: linear-gradient(center top , #FFFFFF, #AFDE8C) !important;
    background-image: -o-linear-gradient(center top , #FFFFFF, #AFDE8C) !important;
    background-image: -moz-linear-gradient(center top , #FFFFFF, #AFDE8C) !important;
    background-image: -webkit-linear-gradient(center top , #FFFFFF, #AFDE8C) !important;
    background-image: -ms-linear-gradient(center top , #FFFFFF, #AFDE8C) !important;

You must log in or sign up to post questions and answers.