How do I create a box around the post titles?

[laura]

Hi

I have the Magazine child theme.  I want to have a light grey box around the post title.  Similar to the light grey box around the text at the bottom of the posts (post-meta?).

Can someone tell me how to do that?

Thank you so much

Laura

[Brad Dalton]

Add this CSS code to the end of your child themes style.css file:

.entry-title {
    background-color: #F5F5F5;
    clear: both;
    padding: 7px 10px 5px;
}

---

Tutorials for StudioPress Themes.

[laura]

Mmmm... it didn't work.  I must be doing something wrong :-S

Here's a site that has what I want: they have a box around the title on their home page (I am also displaying a running tab of posts on my home page), as well as a box around the title on each post page.

 

[laura]

@braddalton - when I was checking the mobile responsiveness of my site, I noticed that it did work - but only for devices with small screens?!

So I think maybe I need to add the code you gave in other places as well, and not only at the end of the style.css file?

[bill scheider]

Hi Laura,
Your links are being entered incorrectly, so they go to the error page for the studiopress forum. When adding a link if you make sure the http:// is present, that should take us to the page or site you'd like us to see.

I think you use @Brad code but make the declaration this:
h1.entry-title
that should work.

Bill

[Brad Dalton]

I tested the code in Firebug as a new CSS rule and it worked perfectly by adding a box exactly the same as what you wanted from the post meta because that's exactly where i got the code.

I simply changed the selector to the entry title however you can target the h1 titles only if you like which will not add the box to the archives because they are using h2.

Do you want the box on all archives or single posts only?

Do you want it full width or only around the title itself?

Please clear your browser cache and reload your homepage.

By the way, please link to your site like this: http://momgoesonline.com

There's different ways you can add the box. Do you want to full width?

.home h2   {     
background-color: #F5F5F5;    
clear: both;   
padding: 7px 10px 5px; 
}

Otherwise you can use this code which will only add it to your home page and only add the box around the title but not full width:

.home h2 a, .home h2 a:visited  {
    background-color: #F5F5F5;
    clear: both;
    padding: 7px 10px 5px;
}

Note: All code tested on your site using Firebug.

I cannot view the link to the site with your example because it returns a 404 page not page error message.

---

Tutorials for StudioPress Themes.

[Brad Dalton]

Here's the tool you can use to check your site http://www.studiopress.com/responsive/

Looks responsive to me on all those sizes.

---

Tutorials for StudioPress Themes.

[laura]

@brad, @bill

Sorry for the silence - it was night here (Australia)

I placed the code higher up in the css, and it worked.  Thank you so much for all you help!

My mistake is that I had put it right at the end, which is the responsive section of the css, so it only picked it up for the small screen version of my site.

Again - thank you so much for taking the time to help me out - I really appreciate it

Cheers, Laura

PS - thx for pointing out that I am entering links incorrectly !

[Author]

Posts