WordPress.org

Support

Support » Themes and Templates » [Resolved] Editing CSS….Where do I start?

[Resolved] Editing CSS….Where do I start?

  • Hey all,

    I’m a pure noobie at this so please have mercy.

    For the last hour, I’ve been trying to edit my css file and am curious as to how to edit a certain text on my homepage (www.wwcministries.org).

    As you’ll see on the page, the events on the right hand side aren’t visible, that is because they’re coded to be the same color as the main text on the page. So my question is, how do I go about editing the color/css for the events widget on the right side.

    Any help and direction would be appreciated.

Viewing 15 replies - 1 through 15 (of 16 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    You may benefit from browser inspector tools, whereby you view the HTML structure of elements and CSS applied to them.
    I recommend Google Chrome’s built in ‘Inspect element‘ feature.

    Using Google Chrome’s Inspect element feature, I found this style;

    .ai1ec-agenda-widget-view .ai1ec-event .ai1ec-event-title {
     font-weight: normal;
    }

    Apply the color within that.

    Hi Andrew…thanks for your reply.

    Is that the element that apply’s to my site. I am using firefox and I have firebug active if that is along the lines of what you’re speaking of.

    My issue is how to find the code pertaining to the font that I cannot see as it is in #FFFFFF color, and changing it to something like #000099.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    It’s on line 338 of style.css.
    EDIT: Actually the file is 45.css.

    body.home #sidebar a {
     color: #fff;
    }

    If you can’t find the colour through Firebug, try searching the stylesheet for the style and find the most relating selectors.

    Andrew would you be able to give me a step by step layout on how to modify it possibly?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    What have you tried?

    Michael

    @alchymyth

    Forum Moderator

    the color is actually set in this linked stylesheet:

    <link rel="stylesheet" href="http://sftheme.truepath.com/45/45.css" type="text/css" media="screen" />

    which is weird because this file is hosted with the theme’s provider or web host (?); and makes it difficult for you to edit those styles.

    I personally would copy all styles from that stylesheet, and paste them to the end of style.css of your theme; and remove that stylesheet link from the head section (in header.php ?).

    if you don’t do that, you will need to use !important when you add any of those styles to style.css, in case you want to change a style that is defined in that stylesheet;

    example:

    body.home #sidebar a {
     color: #009!important;
    }

    What have I tried?

    Well I uploaded the jetpack plugin to my wordpress dashboard. Supposively that plugin is suppose to allow me to edit my css. Then I go to my homescreen http://www.wwcministries.org and click on the firebug in the upper right corner which immediately gives me code options such as console, html, css, script, dom…etc.

    When I get to that point I am virtually “stuck” and do not know what to do next.

    Ok I found the part in firebug that you recommended

    body.home #sidebar a {
    color: #fff;
    }

    is this what i need to modify?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Yes.

    Ok, I modified that, pressed enter, refreshed the screen and saw no changes.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Have you cleared your browser cache?

    I can see Upcoming Events on the right sidebar, if that helps.

    how about now smittie?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    If you’ve resolved this issue, mark it resolved.

    No sir. The squares are visible but the text is not.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘[Resolved] Editing CSS….Where do I start?’ is closed to new replies.
Skip to toolbar