• 0
Sign in to follow this  
Followers 0

Minor CSS Tweak - Stuck

Question

Posted · Report post

I am baffled with changing the H3 font here: http://cl.ly/3F323r1e1A062p1v0B3l I cannot seem to find the right selector to target the CSS that controls this selector only.

.fboxtitle h3 {
	    color: #F0141E;
	    font-family: 'Alfa Slab One',sans-serif;
	    font-size: 35px;
	    font-weight: normal;
	    letter-spacing: 0.02em;
	    padding-bottom: 0.4em;
	    padding-left: 0;
	    padding-right: 0;
	    padding-top: 0;
	}

In other words I only want to change the font size for these 3 boxes. And since I am using Boxes elsewhere, changing the code I have above will not help me as my change will take affect on all boxes. When I look at the CSS with Firebug I see this for the first video: "

". Moving up the chain I find this: "". So I believe that this is where I need to be. But I cannot get things to take properly in custom.css. "It is the bain of my existence"! Somebody please toss me some CSS love..... @};-

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted · Report post

You can.. 1. Target the page with [code].page-id-16[/code] 2. Target each box separate with [code]#fbox_7562[/code] (plus the selectors for the other boxes) I see a .fboxtitle h3 in your custom CSS but I can't tell if it's in the custom CSS box or in the child theme. Make sure you don't have that selector in both places. custom CSS box always overwrites child theme. Hope that helps!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@simple_mama: Like this Jenny?: [code] .page-id-16#fbox_7562.fboxtitle h3 { color: #F0141E; font-family: 'Alfa Slab One',sans-serif; font-size: 35px; font-weight: normal; letter-spacing: 0.02em; padding-bottom: 0.4em; padding-left: 0; padding-right: 0; padding-top: 0; }[/code] PS All of my custom CSS is handled in the Base Theme CSS file.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Well all of that isn't really necessary. You should really do one or the other. So if you want all boxes on that page to use the same h3, then you only need to use [code].page-id-16 .fboxtitle h3[/code] But if you're only going to change, say, half of the boxes on that page, then skip the page declaration entirely and use individual box css selectors, like (ps. the space is needed after 7562) [code]#fbox_7562 .fboxtitle h3[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks a bunch Jenny (@simple_mama)! I chose option number 2: http://paste.pagelines.com/8lu as I needed to keep the H3 Title tag at a larger font size. It looks much better: http://cl.ly/2Z3l1U2q2N1x142S1A2C You really are teaching me alot about CSS. I am beginning to appreciate the power of the granularity.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yes that looks much better. :) And I'm glad to help!

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  
Followers 0