CSS in Agency theme

Community Forums Forums General Discussion CSS in Agency theme

This topic is: not resolved

Tagged: , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Bill Murray 1 year, 10 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #20994

    fiddles5
    Participant
    Post count: 28

    Hi — Here is the category page: http://www.portsmouthhistory.org/newdev/category/events/ It is a post, and I have styled a div in the CME for the date, time, etc. I used Firebug to investigate at the classes and id’s — and tried to move the CSS from the editor into a class in the style.css document. I gave the rule the name .event-info, and changed the editor to <div class=”event-info”> but it did not recognize the style in the style.css.  I’ve tried putting it in as #content .event-info, and as .post .event-info, and a bunch of other selectors but I can’t figure out exactly how to make this work. Right now, it works fine with the <div style=”…”> in the editor, but I’d rather not leave it that way because a non-code person will be taking over the posting on the site, and I want to make this as simple as possible for them, by adding the needed style to the style.css.  Any suggestions about what string of selectors is needed? Firebug didn’t appear to be any help with this.

    #21005

    Bill Murray
    Participant
    Post count: 575

    The should be all you need. If it didn’t work, double check that

    * the visual editor didn’t strip out your div
    * you have the class name perfectly correct
    * you did a hard refresh in your browser

    You can prove to yourself that the class I listed is all you need by using Firebug to change your inline styled div to one with that class, and adding the rule on the CSS tab in Firebug.

    If your theme is mobile responsive, you’ll also have to evaluate the impact on the media queries at the bottom of your stylesheet.


    Web: https://wpperform.com or Twitter: @wpperform

    We do managed WordPress hosting.

    #21011

    fiddles5
    Participant
    Post count: 28

    I’m not using the visual editor. The text editor isn’t stripping out the
    div. The class name is correct. I did a hard browser refresh.

    But your Firebug suggestion helped me figure out what I needed to do and
    mentioning the media queries is what helped the most! Here is what I did:

    #content div.event-info {style rules}

    and I moved this entry in the style.css file up to the “Content” area of
    the style sheet. It was at the very bottom before, and apparently was
    getting stripped out before it made it to the browser.

    So now it works!

    thank you Bill!

    #21026

    Bill Murray
    Participant
    Post count: 575

    Glad it works. You don’t need the #content div.event-info . All you need is a class, as in

    .event-info

    and then to put that class on your div. More specificity can be good or bad, depending on how you end up using that class.


    Web: https://wpperform.com or Twitter: @wpperform

    We do managed WordPress hosting.

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

You must be logged in to reply to this topic.