250 Theme Sub-Menu Background

[Pete Foulkes]

Hi,

I wanted to change the background of the sub-menu tabs on the default theme '250'. The tabs currently have a translucent background but I would like it to be a solid colour to make the button text more visable. If anyone knows of the HTML code I need it would be greatly appreciated as i'm relatively new to coding.

 

Many thanks in advance.

Pete

[Graham Quince]

Hi @Pete Foulkes,

The class for the menu is 'tab'.   You might want to identify just that theme's class though, which you can find by right-clicking on the menu, choosing Inspect, then in the developer tools, looking for the DIV for data-site-name.  Alongside that will be the theme's UUID.   

I have a feeling the theme UUIDs are the same across all Frogs), so if you add this HTML to the dashboards, then any site using that theme will retain the styling.

<style>
  div[data-site-theme="78F572742002C10A67732FA11DCEC3069A12D6FCFBDD49E8"] .tab {
   	background:rgba(0,0,0,0.5); 
  }
<style>

 

[Pete Foulkes]

Hi Graham,

This works great for the main tabs, do you know the bit I need to add in for the sub-tabs/headings to be effected also? (see attachment) I'm guessing it's the 'tab' bit that needs replacing with something.

I was also wondering if the button rollover background could be changed so it has more contrast to the other buttons, making it easier to identify which page is selected?

Thanks for the support.

 

[Graham Quince]

Sorry, not understanding what you want.  These sub-menus already have a background?

you might want to chain this div    

<style>
  div[data-menu-level="2"] .tab {
    background:#FF0000;
  }
</style>

 

 

[Pete Foulkes]

They have a background but it's transparent so it's difficult to read the button text due to the site title appearing behind it. And rather than having the white line which indicates which page is currently selected, if the whole tab could change colour that would be cool. Not sure if this is possible?

Also, when you say chain, should it look like this? Sorry i've got very basic knowledge of coding.

<style>
  div[data-site-theme="CA9F34482002C3FC235F7F9F2BF4DE0D463B921CAD2BE9B5"] .tab {
       background:rgba(0,0,0,0.5); 
        div[data-menu-level="2"] .tab {
    background:#FF00320;
  }
<style>

 

Many thanks,

Pete 

 

[Graham Quince]

Hi Pete,

This is probably the right code:

<style>
  div[data-site-theme="78F572742002C10A67732FA11DCEC3069A12D6FCFBDD49E8"] .tab,
  div[data-site-theme="78F572742002C10A67732FA11DCEC3069A12D6FCFBDD49E8"] div[data-menu-level="2"] .tab {
   	background:rgba(0,0,0,1) !important; 
  }
<style>

Note the 1 at the end of the background line, rgba stands for red, green, blue, alpha, so setting this to 1 should make it a solid colour.

!important overwrites any previous setting.

[Pete Foulkes]

Just tried that code Graham but doesn't seem to be working. It's gone back to the default look. Sorry to be a pain.

 

-Pete

[Graham Quince]

Hi Pete,

I've logged into your Frog and added the code to the Design and Technology site.  

Graham

[Pete Foulkes]

Perfect thanks Graham, I see where I went wrong now.

Is there a way to change the font size of the tabs/sub-tabs using html?

 

Pete

[Graham Quince]

Yes, in the same bit of code:

font-size:16pt;

you might not be aware, but in the Austen release (early June) we are updating all of our (non-custom) themes, the default theme is getting a background for the menu.

[Pete Foulkes]

Cheers Graham.

Thats a cool idea. Hopefully the theme update won't have too much of an effect on our department sites.