Jump to content
Sign in to follow this  
karengrovesdesignnet

General question re: Editing CSS for H1, etc.

Recommended Posts

karengrovesdesignnet

Hi - Is using the Theme Options/Custom Code area the only way to change the Hex color of a h1, h2, a tags, etc? I could have sworn I'd changed colors in one of the CSS style sheets that comes with the theme, but I can not find it now. I am using the blue theme. My Site Firebug does not reference any of the style sheets. If the Hex color isn't in one of the style sheets, how is the color being generated? Thanks, Karen

Share this post


Link to post
Share on other sites
karengrovesdesignnet

Just a quick update to this. I changed the h3.wtitle, h1.pagetitle colors by adding them to line 75 in styles.css. However, adding h1, h2, h3, etc., here does not work. I noticed that the colors for the h1, h2, etc., are being inserted as an inline style into the HTML on all pages.

<style type="text/css">
		h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a{color: #014A5B;}
		#nav ul{width: 950px;}
		.headline h1 a {
	color:#577BBA;
	}
	</style> 

I want to be able to control this in the external css sheet. Right now, any changes I make to h1, h2 in styles.css (Line 197) is being over-ridden by this in-line style. At least I think that's what is going on? Thanks for any help, K

Share this post


Link to post
Share on other sites
bryan-hadaway

Although you're free to do as you please with your theme, we do not recommend directly editing the stylesheets and to indeed use: Theme Options > Custom Code > Custom CSS That way you can save your options and not have to reapply them every time you upgrade. Let's start fresh, let me know exactly what font and titles, links etc. you want to style and how and where they are, feature titles, post titles etc. This is important because CSS precedence problems usually revolve around specificity like `h2{color:#000}` may only apply to h2's that aren't specifically styled already, but for example `.post h2{color:#fff}` would take precedence and the headers would be white. Thanks, Bryan

Share this post


Link to post
Share on other sites
karengrovesdesignnet

OK, so starting over, I want all headers the same color. So, page title, post title, widget title, feature titles on home page slider, h1, h2 and so on. Using This Page as an Exampleyou can see I've changed most of these colors, except the H3 subhead on this page (which I can't figure out). This is what I'm going for, in addition to the homepage feature title in the slider. I'd like to make this a global change and do it once. Thanks, Karen

Share this post


Link to post
Share on other sites
cmunns

Hey Karen, I don't see any subheaders that haven't been changed? Which header in particular should I be looking at?

Share this post


Link to post
Share on other sites
karengrovesdesignnet

Hi Adam - On the page link above, it's the subhead halfway down the page "Massage Menu" and the one inside the quote box "Case study: Massage for Stress Relief". Can't figure out how to change those two colors. Thanks, Karen

Share this post


Link to post
Share on other sites
bryan-hadaway

`#content h4{}` Thanks, Bryan

Share this post


Link to post
Share on other sites
karengrovesdesignnet

Thanks Bryan - That worked. Just need to change two more things now: the headline in the homepage slider (Says "Welcome to") and also in the full width footer at the bottom of each page. What are the classes for those two? Thanks, K

Share this post


Link to post
Share on other sites
catrina

Hello, The headline in the slider: <div class="fheading"> (within <h2> tags) The full width footer at the bottom (contains "Fluid Movement & Massage, LLC..."): <div id="fullwidth_bottom_widgets" class="widget">


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
karengrovesdesignnet

Hi - What should the code look like for this in the Custom CSS area? Earlier, I had tried the following:

#fheading{color:#5779BB}
and
.fheading{color: #5779BB}

Neither worked. K

Share this post


Link to post
Share on other sites
karengrovesdesignnet

Thanks Catrina! - That worked perfectly and

div.widget h3 {color: #5779BB}

worked for the footer headline. Karen

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×