Editing CSS….Where do I start?

  • Resolved aaronavtr

    (@aaronavtr)


    12 years, 2 months ago

    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)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Thread Starter aaronavtr

    (@aaronavtr)

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Thread Starter aaronavtr

    (@aaronavtr)

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What have you tried?

    the color is actually set in this linked stylesheet:

    <link rel="stylesheet" href="https://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;
}
    Thread Starter aaronavtr

    (@aaronavtr)

    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 https://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.

    Thread Starter aaronavtr

    (@aaronavtr)

    Ok I found the part in firebug that you recommended

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

    is this what i need to modify?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yes.

    Thread Starter aaronavtr

    (@aaronavtr)

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Have you cleared your browser cache?

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

    Thread Starter aaronavtr

    (@aaronavtr)

    how about now smittie?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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 ‘Editing CSS….Where do I start?’ is closed to new replies.