WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
How to add a border around posts and pages? (11 posts)

  1. BetsyS
    Member
    Posted 1 year ago #

    Hi - My site is here. It's still under construction.

    I'd like to outline the light page/post background with either a border or a box shadow.

    I do have a child theme installed, and I do know how to use Firefox to find CSS, but I assume I have to put some php files into my child theme and create some sort of change in those files as well as in the CSS. I don't know which theme coding to change, to make a wrapper or whatever it is I have to do.

    Thanks for any help with this.

  2. zeaks
    Member
    Posted 1 year ago #

    I'm not sure if you mean the entire light color background, or the actual post area of that page.

    This will put a border around the post area of the front page

    .template-front-page .site-content article {
        border: 3px solid #333;
    }

    This will put a border around the entire page area, there's already box-shadow on it

    body .site {
        border: 3px solid #333;
    }
  3. BetsyS
    Member
    Posted 1 year ago #

    Wow, thanks for the super-fast reply!

    I mean the entire page area, the whole light-colored area.

    So, I only have to add the border styling above to my child-theme stylesheet? I don't have to do anything with template files?

  4. zeaks
    Member
    Posted 1 year ago #

    Right, use the second example I posted to your stylesheet. Unless you're making drastic changes, you can usually do most modifications through CSS.

    I just finished a Twenty Twelve child theme for my own website http://zeaks.org/ and it's almost all CSS.

  5. phillipc421
    Member
    Posted 1 year ago #

    Hey zeaks, I really like what you did to the theme? Any tips on how you achieved that?

  6. zeaks
    Member
    Posted 1 year ago #

    Thanks Phillip. I started off setting the site background transparent, set the content white and added padding and went from there. The menu was a bit of work to keep it looking ok for some devices, I think I have it all working properly now.

    You can view the stylesheet in the source of my site.

  7. phillipc421
    Member
    Posted 1 year ago #

    I'll mess around with it, thanks! Does the above question and solution put a border around individual posts? If not, do you know the CSS for that?

  8. zeaks
    Member
    Posted 1 year ago #

    The first code above would put a border around each post but only if it's front page template, this will for normal posts

    .site-content article { border: 1px solid #000000; }

  9. phillipc421
    Member
    Posted 1 year ago #

    Thank you again, that worked. This should add space between the border and content correct?
    padding: 3em;

    Without messing up any sizes or device compatibility? Seems to be, just making sure the site will work no matter the medium of access.

  10. BetsyS
    Member
    Posted 1 year ago #

    Thanks, zeaks. The little border snippet you gave me is perfect.

  11. phillipc421
    Member
    Posted 1 year ago #

    Could I get the code for widget areas?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic