1. How to access the template's files and folders

All the code changes are made using the template's files and folders. To access the files and folders for our templates, go to EXTENSIONS/TEMPLATES/TEMPLATE and access the template you want to edit:

FavThemes code template files

2. Find the custom.css file

Access the template's files and folders and open the custom.css file inside the CSS folder. The custom.css file is a special file created to be used for all the custom CSS code changes:

FavThemes code custom css

3. Add the code inside custom.css

1 DEFAULT HEADER STYLE

To change the background color for the header of the template with a custom color, use this code:

#fav-headerwrap {
    background-color: #EEEEEE;
}

To change the background color for the header of the template with a custom color when the Header Position is set to FIXED inside the template's settings, use this code:

#fav-headerwrap.fav-fixed, 
#fav-headerwrap.fav-fixed.favheader {
background-color: #EEEEEE;
}

Save your changes and reload the front-end of your website for the changes to take effect.

The color code #EEEEEE is a hexadecimal value which can be changed with your own. For a haxadecimal color code, either use our color picker from the template's settings or use a color picker provided by the browser. You can also use color names, RGB or HSL values, all and any of the color formats supported by CSS.
The code provided above changes the header's background color only when the Header Style is set to the DEFAULT option inside the template's settings.

2LIGHT HEADER STYLE

To change the background color for the header of the template with a custom color when the Header Style is set to the LIGHT option, use this code:

#fav-headerwrap.fav-light {
background-color: #EEEEEE;
}

To change the background color for the header for a LIGHT Header Style and a FIXED Header Position, use this code:

#fav-headerwrap.fav-light.fav-fixed, 
#fav-headerwrap.fav-light.fav-fixed.favheader {
background-color: #EEEEEE;
}

Save your changes and reload the front-end of your website for the changes to take effect.

The color code #EEEEEE is a hexadecimal value which can be changed with your own. For a haxadecimal color code, either use our color picker from the template's settings or use a color picker provided by the browser. You can also use color names, RGB or HSL values, all and any of the color formats supported by CSS.
The code provided above changes the header's background color only when the Header Style is set to the LIGHT option inside the template's settings.

3DARK HEADER STYLE

To change the background color for the header of the template with a custom color when the Header Style is set to the DARK option, use this code:

#fav-headerwrap.fav-dark {
background-color: #333333;
}

To change the background color for the header for a DARK Header Style and a FIXED Header Position, use this code:

#fav-headerwrap.fav-dark.fav-fixed, 
#fav-headerwrap.fav-dark.fav-fixed.favheader {
background-color: #333333;
}

Save your changes and reload the front-end of your website for the changes to take effect.

The color code #333333 is a hexadecimal value which can be changed with your own. For a haxadecimal color code, either use our color picker from the template's settings or use a color picker provided by the browser. You can also use color names, RGB or HSL values, all and any of the color formats supported by CSS.
The code provided above changes the header's background color only when the Header Style is set to the DARK option inside the template's settings.

The Joomla! name is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries. FavThemes is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.