Separate style for Post Text VS Sidebar Text

  • craggy

    #7569

    It appears that the definition of the body text within Graphene Options also defines the sidebar text. I would like to make them different. Serif style for text in posts and in the slider, sans-serif for sidebar text.

    I am guessing I need to define the font in a Child Theme or in Custom CSS but am not sure which style name to adjust.

    I added this to the Custom CSS

    /* Sidebar Text definition
    
    */
    .sidebar p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 18px;
    }

    but it only appeared to change the text in one side bar widget (the donations widget, R sidebar), not all of them. So, I’m a bit unclear on where to cause the change I want. I want to keep the coloring that exists (modified in the options panel), but change the font-family for sidebar text.

    See my site here: http://www.demo.earnyourturns.com

    Thanks for your help

    Mod

    Kenneth John Odle

    #38651

    Try

    #sidebar1, #sidebar2 {font-family: Verdana, Arial, Helvetica, sans-serif;}

    The items in individual widgets are <li>‘s not <p>‘s, so if you want to target only those, you’ll need to add that to the above definition.

    Try installing Firebug. It makes this sort of thing a piece of cake!

    Mod

    Kenneth John Odle

    #38652

    Moved to Support. Please post in the correct section next time. Put code in between backtick (

    Code:
    `

    ) characters. It’s usually located above the Tab key on your keyboard. I have corrected this for you.

    Be sure to refresh your browser cache after making changes. If the above code doesn’t work for you, let us know.

    craggy

    #38653

    Thanks for the speedy reply.

    1) Meant to put that in the Support section – but when I tried to edit it to switch it to Support that option did not appear available.

    2) I have installed Firebug, but I’m still figuring it out.

    3) Your suggested code did it! Thanks again!!!

    Another silly newbie Q. When you say, put the code between the backtick ` character…do you mean when I am showing an example of the (CSS) code on a forum post? or something else? I do see those backtick characters in the php code sections. Intend to learn php after I get a bit more proficient at CSS.

    Mod

    Kenneth John Odle

    #38654
    Quote:
    Meant to put that in the Support section

    No problems.

    Quote:
    2) I have installed Firebug, but I’m still figuring it out.

    Try having a look at Josh’s tutorial:

    http://www.joshlobe.com/2011/10/using-mozilla-firebug-to-inspect-css-files/

    I learned a lot from that video.

    Quote:
    when I am showing an example of the (CSS) code on a forum post?

    Yes. This is code without backticks:

    selector {property: value;}

    and this is code with backticks:

    selector {property: value;}

    Putting code between backticks highlights it and makes it easier to read. Also, with scripting languages such as HTML and PHP, it prevents the browser from parsing (interpreting) the code. When that happens, we see the results of your code, rather than the code itself.

    Quote:
    Intend to learn php after I get a bit more proficient at CSS.

    PHP is lots of fun. But you will need to have a PHP engine installed on your computer in order to do it offline. (XAMP, WAMP, MAMP, LAMP, etc.). Don’t forget JavaScript, either!

    craggy

    #38655

    Actually, I did install WAMP on my computer but I’m running in to other problems with that. It doesn’t like to show any of the posts, just the home pages for the sites I have already attempted to develop offline. Obviously I screwed something up, but not sure what. Will probably go back to Lynda and be more fastidious in copying all the steps that, apparently, I sidestepped on at least one. If you know a good tutorial for setting that up that is NOT a video, but a well documented step by step procedure me and the lurkers would appreciate it.

    Thanks for the suggestion on Josh Lobe. So far I’m finding that the ability to highlight various sections of the site and see what the controlling code is is easier to understand in Chrome using the Inspect Element function, than in Firebug.

    Oh gawd, not JS too. 😉

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.