Support » Themes and Templates » CSS code to add a post title background similar to a widget title background

  • Mark

    (@fifaskillgames)


    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

Viewing 8 replies - 1 through 8 (of 8 total)
  • Michael

    (@alchymyth)

    Forum Moderator

    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/

    Mark

    (@fifaskillgames)

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

    Michael

    (@alchymyth)

    Forum Moderator

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

    wrong – can be very different.

    post a link to your site.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    Mark

    (@fifaskillgames)

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

    roseandmoon

    (@roseandmoon)

    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

    Michael

    (@alchymyth)

    Forum Moderator

    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

    Mark

    (@fifaskillgames)

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘CSS code to add a post title background similar to a widget title background’ is closed to new replies.