WordPress.org

1. impossiblebottle
   Member
   Posted 5 months ago #

   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

2. ChristiNi
   Member
   Posted 5 months ago #

   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:

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

   Hope this helps!

3. impossiblebottle
   Member
   Posted 5 months ago #

   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("http://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

4. pano1
   Member
   Posted 5 months ago #

   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.

5. impossiblebottle
   Member
   Posted 5 months ago #

   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.

6. pano1
   Member
   Posted 5 months ago #

   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

7. impossiblebottle
   Member
   Posted 5 months ago #

   Wonderful, many thanks!

Reply

You must log in to post.