Background Colour in Header

baz mckinnon

Purity111 Displays the site name in the header, above main menu. I provided the name via templates/edit styles/Purity11/Theme. It goes me 4 options Theme, Logo Type, Site Name and Slogan. Theme is set to Red and the site name appears perfectly above the menu but in white txt with an odd shade of red background. Can the background be colour matched or made transparent?!

Many Thanks,
Baz

dominic

Hi baz mckinnon,
Very hard to check this issue, I need to check on your site, you can give me the URL when publish the site.
Or you can find the class of this section via F12 or hover over this section and click right-mouse select the inspect then use the class name as the following code:

.classname {
    background: transparent; 
}

NOTE: Add the CSS code to the templates/ja-purityIII/css/custom.css file.

baz mckinnon

Hi Dominic,
Many thanks - will have a 'play'. I've used Joomla! since 1998, but have never had any need to deviate from standard template options available - so no need to tinker with code. I'm coming to Joomla 5 after a layoff of about 9 years and its like learning to walk again.. Fortunately I'm under no time (or financial) pressure as this is for a local social club. I have an additional problem that may, by accident, fix this one. The club would like the Theme to be a mid blue rather than the default Red or Orange.

In my naivety I assumed that I could copy the Red Theme folders and rename them 'Blue' then I could do a simple find and replace of the hex for the shade of red used with #4169e1 (or whatever blue they choose)
Am I so far off the mark?
Any help really kindly received.
Barrie

baz mckinnon

HI Again,
I've just changed the Theme setting to DEFAULT and I've got the blue I need!! Now just the problem of the transparency which is still an issue but a different colour!

Barrie

dominic

Hi baz mckinnon,
You can add the following CSS Code to the Backend > Site template styles > ja_purity_iv - Default > Tools > Custom CSS:

.t4-topbar {
    background-color: transparent; 
}