Adding borders to blog posts

  • Hi

    I recently set up this blog. I have very limited html or css knowledge, so I used an online tutorial to integrate the blog to look like the rest of my website.

    I would like to add a border around each post (and possibly change the post width), as all the content seems to be merging into one at the moment.

    To do this I believe I need to make some amendments to the style.css sheet. However, I am simply referencing the style.css sheet from my static website, so if I go amending this, won’t this make changes across the whole site? I only want to tinker with the blog really.

    Please help!

    Thanks

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi impossiblebottle,

    Before making any changes to your style sheet, I would suggest making a Child Theme. This will also allow you to make changes to just the styles for your WordPress theme.

    The best way I have found to determine what CSS rules are applied to the various elements on your page is to use the Firebug extension with either Firefox or Chrome.

    Once you have determined the rules and elements, you can then add a border to that element:

    https://www.w3schools.com/css/css_border.asp

    Hope this helps!

    Thread Starter impossiblebottle

    (@impossiblebottle)

    Hi ChristiNi

    Thanks for your reply. The tutorial I followed showed how to turn my website into a theme – this is what I have done, so is this the same as a child theme?

    At the moment my theme is simply referencing the style sheet from my website:

    @import url(“https://www.impossiblebottle.co.uk/css/base.css”);

    Because my website had no blog to start with, there are no rules governing anything to do with blog elements. Do I need to add these in?

    Please forgive all the questions – I’m a complete newcomer to this, and really do need it spelling out!

    Thanks again

    Every post in your website links to .post class so you can add something like that in your css.

    .post {border:2px #ccc solid;}

    If you use the post class in your static website, it will change in there too. If you don’t want that, make a .new_post class and attach your static page tag to it.

    Thread Starter impossiblebottle

    (@impossiblebottle)

    Hi pano1

    Thanks for that – if you take a look at my blog you’ll see there are two problems now:

    1) How can I space out the borders so they don’t run into one another?
    2) How can I bring the text in so it doesn’t touch the border?

    Thanks a bunch for your help – much appreciated.

    1) How can I space out the borders so they don’t run into one another?

    margin:12px 0

    2) How can I bring the text in so it doesn’t touch the border?

    padding:10px;

    add those in .post

    Thread Starter impossiblebottle

    (@impossiblebottle)

    Wonderful, many thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Adding borders to blog posts’ is closed to new replies.