Jump to content


Photo
- - - - -

Minor CSS Tweak - Stuck


  • Please log in to reply
5 replies to this topic

#1 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 28 June 2012 - 04:33 PM

I am baffled with changing the H3 font here:

Please Login or Register to see this Hidden Content



I cannot seem to find the right selector to target the CSS that controls this selector only.

Please Login or Register to see this Hidden Content


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..... @};-

#2 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 28 June 2012 - 06:51 PM

You can..

1. Target the page with

Please Login or Register to see this Hidden Content

2. Target each box separate with

Please Login or Register to see this Hidden Content

(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!

#3 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 28 June 2012 - 07:08 PM

@simple_mama: Like this Jenny?:

Please Login or Register to see this Hidden Content


PS All of my custom CSS is handled in the Base Theme CSS file.

#4 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 28 June 2012 - 07:33 PM

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

Please Login or Register to see this Hidden Content


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)

Please Login or Register to see this Hidden Content



#5 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 28 June 2012 - 08:32 PM

Thanks a bunch Jenny (@simple_mama)! I chose option number 2:

Please Login or Register to see this Hidden Content

as I needed to keep the H3 Title tag at a larger font size. It looks much better:

Please Login or Register to see this Hidden Content

You really are teaching me alot about CSS. I am beginning to appreciate the power of the granularity.

#6 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 29 June 2012 - 03:28 AM

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