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

    Thread Starter BetsyS

    (@betsys)

    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 https://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.

    Thread Starter BetsyS

    (@betsys)

    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.