Shape 5

Joomla Templates => Corpway - Club => : netology November 24, 2014, 03:24:12 AM



: Heading colors
: netology November 24, 2014, 03:24:12 AM
I would like to change the colors of H1, H2, H3 and H4 to color #DA5711 (see screenshot)

I was able to change it in Firebug but I could not trace it back in the CSS for permanent change

Also how to I reduce the line spacing after the headings such as H3?


Many Thanks in Advance


Nick


: Re: Heading colors
: siona73 November 24, 2014, 11:11:06 AM
Hi. I'm not a mod, just a fellow user.
Put the following code in corpway/custom.css
(is better not to screw with template.css because they have stuff scattered all over, and is hard to keep track of your custom css changes. Custom.css takes over any template.css code, is the equivalent of a template child in wordpress. Anyway :)
h1, h2, h3, h4, h5, {
color: #DA5711;
}

see if that takes :)


: Re: Heading colors
: netology November 24, 2014, 12:45:50 PM
Thanks Siona73  ;D


: Re: Heading colors
: mikenicoll November 24, 2014, 05:44:04 PM
Let us know if you have any further questions.


: Re: Heading colors
: netology November 24, 2014, 07:47:25 PM
I modified - /templates/corpway/css/custom.css

I added
h1, h2, h3, h4, h5, {
color: #DA5711;
}

Unfortunately the colors of the headers did not change

Nick


: Re: Heading colors
: siona73 November 25, 2014, 09:28:25 AM
Nick do you have a link to your site or are you working on localhost?


: Re: Heading colors
: siona73 November 25, 2014, 10:04:43 AM
I modified - /templates/corpway/css/custom.css

I added
h1, h2, h3, h4, h5, {
color: #DA5711;
}

Unfortunately the colors of the headers did not change

Nick

delete that and then add this
#s5_component_wrap_inner h2, #s5_component_wrap_inner h1 {font-size: 1.8em;
font-weight: 300;
color: #DA5711;
padding-bottom: 20px;
margin-bottom: 20px;}
see if that takes.

IS hard for me to
assume where the code is if I do not have a live site to check.


: Re: Heading colors
: mikenicoll November 25, 2014, 06:51:11 PM
Hello,

The default coding for this on your Template is here:

:
Template.CSS - Line 38

#s5_component_wrap_inner h2 a {
    color: #676767;
}

If you wanted to override this you can either manually change the color in the Template.CSS file or you can use a !important override in the custom.css file which will override any default color preset by the Templates CSS File.


:
#s5_component_wrap_inner h2 a {
    color: #FF0000 !important;
}

Any other links on the site I suggest using a tool called Firebug or Chrome Dev Tools to hover over the element and inspect its inherit CSS values and where they come from. We have a tutorial for this here:

http://www.shape5.com/documentation/Miscellaneous/How-To-Use-Firebug


: Re: Heading colors
: netology November 26, 2014, 08:11:16 PM
Thanks all your help. I will give it a go

Nick


: Re: Heading colors
: mikenicoll November 27, 2014, 12:55:37 AM
NP


: Re: Heading colors
: netology November 27, 2014, 08:54:52 PM
Thanks for all your help
entries in my custom.css does not seem to be read.

I had to do some other mods - eg reduce the size of module position Custom_2 so I resorted to editing the Templat.css
I did use !important parameter


The site is still in development at www.netology.net.au/balmainfc

Nick


: Re: Heading colors
: mikenicoll November 28, 2014, 07:40:17 PM
Hello,

The code you have in your custom.css file needs the link attribute such as the coding I provided you with an

a {

At the end of the code to signify a link.