WordPress.org

Ready to get started?Download WordPress

Forums

Snapshot
Text are background color CSS code (12 posts)

  1. chika7
    Member
    Posted 9 months 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 9 months 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 9 months 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
    Forum Moderator
    Posted 9 months 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 9 months 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 9 months 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 9 months 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 9 months ago #

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

  9. chika7
    Member
    Posted 9 months 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 9 months 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
    Volunteer Moderator
    Posted 9 months 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 9 months 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.

Reply

You must log in to post.

About this Theme

About this Topic