PDA

View Full Version : How to put a page title background



suizka
Sep 22nd, 2011, 07:22 AM
Hi!

Im trying to put a color background strip to my page title "Silent auction in aid of Children’s Tumor Research" on this website (http://villascostarica.com/competition/), I would like the strip to extend to the length of the text box.

And if there is anyway to minimize the white space between the page title and the navigation bar?

Thanks so much

SB65
Sep 22nd, 2011, 12:20 PM
Hi!

Im trying to put a color background strip to my page title "Silent auction in aid of Children’s Tumor Research" on this website (http://villascostarica.com/competition/), I would like the strip to extend to the length of the text box.

Assuming you just want to add a colour background to this page's title:


#post-32 .entry-title {
background-color:red;/* or whatever...*/
padding:3px;/* adjust to expand the coloured block */
}

Here post-32 is the Wordpress page id - so this code will only apply to elements with class of entry-title within elements with id post-32


And if there is anyway to minimize the white space between the page title and the navigation bar?

Amend the 40px top padding in the css below as required.


#main {
clear: both;
overflow: hidden;
padding: 40px 0 0;
}

suizka
Sep 22nd, 2011, 06:50 PM
Thanks so much!

I was just wondering to change the background page title, where would I put the code, is it in the css file too?

SB65
Sep 22nd, 2011, 08:13 PM
Yes, in the css file.

suizka
Sep 22nd, 2011, 08:35 PM
Sorry to be a pain but Im not sure where to put the code in the CSS, would it be in this section:


.page-title {
color: #000;
font-size: 14px;
font-weight: bold;
margin: 0 0 36px 0;
}
.page-title span {
color: #333;
font-size: 16px;
font-style: italic;
font-weight: normal;
}
.page-title a:link,
.page-title a:visited {
color: #888;
text-decoration: none;
}
.page-title a:active,
.page-title a:hover {
color: #ff4b33;
}
#content .entry-title {
color: #000;
font-size: 21px;
font-weight: bold;
line-height: 1.3em;
margin-bottom: 0;
}
.entry-title a:link,
.entry-title a:visited {
color: #000;
text-decoration: none;
}