WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Editing CSS....Where do I start? (17 posts)

  1. aaronavtr
    Member
    Posted 1 year 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.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  3. aaronavtr
    Member
    Posted 1 year ago #

    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.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  5. aaronavtr
    Member
    Posted 1 year ago #

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

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    What have you tried?

  7. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    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;
    }
  8. aaronavtr
    Member
    Posted 1 year ago #

    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.

  9. aaronavtr
    Member
    Posted 1 year ago #

    Ok I found the part in firebug that you recommended

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

    is this what i need to modify?

  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    Yes.

  11. aaronavtr
    Member
    Posted 1 year ago #

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

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    Have you cleared your browser cache?

  13. Smittie
    Member
    Posted 1 year ago #

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

  14. aaronavtr
    Member
    Posted 1 year ago #

    how about now smittie?

  15. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  16. Smittie
    Member
    Posted 1 year ago #

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

  17. aaronavtr
    Member
    Posted 1 year ago #

    I haven't. However instead of carring this thread further, I will simply just change them premade template to another. Seems as though the widget words are coded with the premade template. So by switching them, it'll change it over automatically.

    Hence what smittie saw.

    Thanks guys for all of your assistance.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.