WordPress.org

Support

Support » Themes and Templates » How to add a border around posts and pages?

How to add a border around posts and pages?

  • 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.

Viewing 10 replies - 1 through 10 (of 10 total)
  • 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;
    }

    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?

    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.

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

    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.

    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?

    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; }

    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.

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

    Could I get the code for widget areas?

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘How to add a border around posts and pages?’ is closed to new replies.