Forum Support

Shape 5
March 28, 2024, 07:09:19 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Heading colors  (Read 688 times)
netology
Jr. Member
**
Offline 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 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 Smiley
h1, h2, h3, h4, h5, {
color: #DA5711;
}

see if that takes Smiley
Logged
netology
Jr. Member
**
Offline Offline

Posts: 18



« Reply #2 on: November 24, 2014, 12:45:50 PM »

Thanks Siona73  Grin
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« 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 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 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 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
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #7 on: November 25, 2014, 06:51:11 PM »

Hello,

The default coding for this on your Template is here:

Code:
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.


Code:
#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 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
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« 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 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/balmainfc

Nick
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« 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
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.