netology
Jr. Member
Offline
Posts: 18
|
|
« on: 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
|
|
|
Logged
|
|
|
|
siona73
Jr. Member
Offline
Posts: 31
|
|
« Reply #1 on: 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
|
|
|
Logged
|
|
|
|
netology
Jr. Member
Offline
Posts: 18
|
|
« Reply #2 on: November 24, 2014, 12:45:50 PM » |
|
Thanks Siona73
|
|
|
Logged
|
|
|
|
mikenicoll
|
|
« Reply #3 on: November 24, 2014, 05:44:04 PM » |
|
Let us know if you have any further questions.
|
|
|
Logged
|
Mike Nicoll ------------ Shape 5 Team - Need a great host for your website? We highly recommend siteground.com!
- Put your trust in the hands of our extremely qualified staff to get your job done right! - Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:Install Firebug
|
|
|
netology
Jr. Member
Offline
Posts: 18
|
|
« Reply #4 on: 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
|
|
|
Logged
|
|
|
|
siona73
Jr. Member
Offline
Posts: 31
|
|
« Reply #5 on: November 25, 2014, 09:28:25 AM » |
|
Nick do you have a link to your site or are you working on localhost?
|
|
|
Logged
|
|
|
|
siona73
Jr. Member
Offline
Posts: 31
|
|
« Reply #6 on: 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.
|
|
|
Logged
|
|
|
|
mikenicoll
|
|
« Reply #7 on: 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
|
|
|
Logged
|
Mike Nicoll ------------ Shape 5 Team - Need a great host for your website? We highly recommend siteground.com!
- Put your trust in the hands of our extremely qualified staff to get your job done right! - Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:Install Firebug
|
|
|
netology
Jr. Member
Offline
Posts: 18
|
|
« Reply #8 on: November 26, 2014, 08:11:16 PM » |
|
Thanks all your help. I will give it a go
Nick
|
|
|
Logged
|
|
|
|
mikenicoll
|
|
« Reply #9 on: November 27, 2014, 12:55:37 AM » |
|
NP
|
|
|
Logged
|
Mike Nicoll ------------ Shape 5 Team - Need a great host for your website? We highly recommend siteground.com!
- Put your trust in the hands of our extremely qualified staff to get your job done right! - Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:Install Firebug
|
|
|
netology
Jr. Member
Offline
Posts: 18
|
|
« Reply #10 on: 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/balmainfcNick
|
|
|
Logged
|
|
|
|
mikenicoll
|
|
« Reply #11 on: 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.
|
|
|
Logged
|
Mike Nicoll ------------ Shape 5 Team - Need a great host for your website? We highly recommend siteground.com!
- Put your trust in the hands of our extremely qualified staff to get your job done right! - Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:Install Firebug
|
|
|
|