WordPress.org

Support

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

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

    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.
Skip to toolbar