How do I create a box around the post titles?

Community Forums Forums Design Tips and Tricks How do I create a box around the post titles?

This topic is: resolved

This topic contains 7 replies, has 3 voices, and was last updated by  laura 1 year, 6 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #35156

    laura
    Participant
    Post count: 69

    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

    #35159

    braddalton
    Participant
    Post count: 10217

    Add this CSS code to the end of your child themes style.css file:
    [css]
    .entry-title {
    background-color: #F5F5F5;
    clear: both;
    padding: 7px 10px 5px;
    }
    [/css]


    #35165

    laura
    Participant
    Post count: 69

    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.

     

    #35167

    laura
    Participant
    Post count: 69

    @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?

    #35168

    bill scheider
    Participant
    Post count: 13

    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

    #35176

    braddalton
    Participant
    Post count: 10217

    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?
    [css]
    .home h2 {
    background-color: #F5F5F5;
    clear: both;
    padding: 7px 10px 5px;
    }
    [/css]

    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:
    [css]
    .home h2 a, .home h2 a:visited {
    background-color: #F5F5F5;
    clear: both;
    padding: 7px 10px 5px;
    }
    [/css]

    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.


    #35179

    braddalton
    Participant
    Post count: 10217

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

    Looks responsive to me on all those sizes.


    #35243

    laura
    Participant
    Post count: 69

    @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 !

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.