WordPress.org

Ready to get started?Download WordPress

Forums

CSS code to add a post title background similar to a widget title background (9 posts)

  1. Mark
    Member
    Posted 1 year ago #

    Hi, does anyone know the CSS Code needed to add a post title background to the homepage similar to the widget title background?

    Thanks Mark

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

    http://www.w3schools.com/css/css_background.asp

    post a link to your site if you don't manage to find the right css selectors by using, for instance, Firebug http://getfirebug.com/

  3. Mark
    Member
    Posted 1 year ago #

    Im relatively new to CSS. do you happen to know the code? (I presume it's the same or similar for all themes?)

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

    I presume it's the same or similar for all themes?

    wrong - can be very different.

    post a link to your site.

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Alchymyth suggested techniques to teach you CSS, telling you 'the code' will less benefit to you.

  6. Mark
    Member
    Posted 1 year ago #

    that's true, I teach myself most aspects as I go along. my site is http://www.fifaskillgames.com

  7. Dave
    Member
    Posted 1 year ago #

    Find the color of the widget titles using ColorZilla and add it to the background style of the post titles which you can find, as alchymyth said, with Firebug

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

    Firebug or a similar browser tool will show you that the widget titles are styled by (line 333 in style.css):

    .widget-title{font-size:18px;color:#444;text-shadow:none;padding:3px;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;margin: 0 -10px 0 -10px;padding: 2px 10px 2px 10px;border-bottom: 1px solid #aaa;background: #f8f8f8;/* Old browsers */background: -moz-linear-gradient(top,  #f8f8f8 0%, #ededed 40%, #dddddd 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(40%,#ededed), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  #f8f8f8 0%,#ededed 40%,#dddddd 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  #f8f8f8 0%,#ededed 40%,#dddddd 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  #f8f8f8 0%,#ededed 40%,#dddddd 100%); /* IE10+ */background: linear-gradient(top,  #f8f8f8 0%,#ededed 40%,#dddddd 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */}

    you could apply a similar formatting (backgrounds only) to .home .post_container h2 (which is a possible css selector for the post title on the front page.

    example:

    .home .post_container h2 {text-shadow:none;padding:3px;border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;margin: 0 -10px 0 -10px;padding: 2px 10px 2px 10px;border-bottom: 1px solid #aaa;background: #f8f8f8;/* Old browsers */background: -moz-linear-gradient(top,  #f8f8f8 0%, #ededed 40%, #dddddd 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(40%,#ededed), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top,  #f8f8f8 0%,#ededed 40%,#dddddd 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top,  #f8f8f8 0%,#ededed 40%,#dddddd 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top,  #f8f8f8 0%,#ededed 40%,#dddddd 100%); /* IE10+ */background: linear-gradient(top,  #f8f8f8 0%,#ededed 40%,#dddddd 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */} }

    obvious problem is that .post_container has some padding which stops the title background to reach fully to the edge;

    compensate this with another added style; for example:

    .home .post_container{padding:0 10px 20px!important;}

    btw: .home is the output by body_class() which is unique to the front page. http://codex.wordpress.org/Function_Reference/body_class

  9. Mark
    Member
    Posted 1 year ago #

    Thanks very much for that! Found it very helpful. Mark

Topic Closed

This topic has been closed to new replies.

About this Topic