WordPress.org

Forums

Snapshot
Text are background color CSS code (12 posts)

  1. chika7
    Member
    Posted 1 year ago #

    Could someone please help me with setting up a grey text area background so that my posts are readable when I have a background image. Here is my website and it's the Snapshot theme. If you could advise me on the CSS code I need to use and where I need to put it in the CSS file, that would be great! Thank you!

    http://sjulab.com/backoffice/uncategorized/first-official-test-post-for-lab-200/

  2. Josiah
    Member
    Posted 1 year ago #

    Hi,

    The following needs to be edited:

    style.css line 830:
    #post-main {
    float: left;
    margin-right: 25px;
    min-height: 10px;
    width: 440px;
    }
    to something like:
    #post-main {
    background-color: #333;
    float: left;
    margin-right: 25px;
    min-height: 10px;
    padding: 10px;
    width: 500px;
    }

    I also added some padding so that should help with the look, otherwise your text is right on the border.

    I would recommend not editing the main file style.css because if you ever update your theme, all of your changes will be over-ridden (which is no fun, I promise).

    Instead you can use a child theme, which will make the changes to your website but not be over-written on updates. Here's some info on a child theme:
    http://codex.wordpress.org/Child_Themes

    I hope that helps.

    Josiah

  3. chika7
    Member
    Posted 1 year ago #

    Hi, thanks Josiah but it's not working for this site:
    http://dominiqueam.com

    It seemed to work for my test site above, though!

  4. Andrew
    Nuh uh moderator
    Posted 1 year ago #

    You need to let us know in advance the websites you want it to work on. Are there any more sites?

  5. Josiah
    Member
    Posted 1 year ago #

    Try this. I could not find text except for in the footer area:

    #footer .widget {
    -moz-box-sizing: border-box;
    color: #898989;
    float: left;
    font-size: 12px;
    padding: 0 7px;
    width: 33.3333%;
    word-wrap: break-word;
    background: #333333;
    }

  6. chika7
    Member
    Posted 1 year ago #

    Sorry, I didn't know if could post my student's websites in the forums, but I will do that from now on, the site I am working on is the second one: http://dominiqueam.com

    I will try Josiah's second suggestion. Thank you

  7. chika7
    Member
    Posted 1 year ago #

    Hi Thanks, the background color for the blog posts area is now fixed but now the links don't work on the main page - I can't click on any of the blog posts!

    http://dominiqueam.com

  8. Josiah
    Member
    Posted 1 year ago #

    hmmm... that is strange. Did you make any other css adjustments or php changes?

  9. chika7
    Member
    Posted 1 year ago #

    Yes, we may have... but won't remember where or when, I'll check for answers in another forum. Thanks - is there an easy way to compare the original css with the new one to find inconsistencies?

  10. Josiah
    Member
    Posted 1 year ago #

    Were you using a child theme or custom css editor? If so, you can always compare those notes.

    It's highly recommended to use a child theme for this reason.

  11. WPyogi
    Forum Moderator
    Posted 1 year ago #

    The links seem to be working for me - but are you aware that all of your changes will be erased when the theme is updated? That's why using a child theme is a much preferred way to modify themes.

    http://codex.wordpress.org/Child_Themes

    is there an easy way to compare the original css with the new one to find inconsistencies?

    You can download a new copy of the theme and use a file comparison program to compare them - http://www.diffchecker.com/

  12. chika7
    Member
    Posted 1 year ago #

    Hi Thanks for reply, we'll be redoing all this with a child theme shortly... no, my links for the posts below the header/banner image are not working. None of the squares will let me click on them. Thanks again.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic