Thursday, 30 April 2015

Top CSS Additions to Your Blog



Since opening Twenty-One designs (you can see the full post here) many of you have ordered a new design or a single design element to add to your blog. However, many choose to design their own blogs to save costs or just personal preference, so I thought I would share with you some of the top CSS codes I found useful for my blog. CSS code is really quick and easy to use - this post is for Blogger as I have no experience in Wordpress or other blogging platforms - and you can add these by going Template // Customise // Advanced // Add CSS. Any CSS you add here will go automatically before the ]]></b:skin> tag, if you wanted to add your CSS 'by hand', so to speak. 

Automatically resize images to fit post area
People who have been reading this blog for a while may have noticed that I recently changed the post images to be a lot bigger, so that they align with the post text. I always think this looks so much neater and I wanted to add this to my blog for a while, but couldn't find a code that worked until a couple of days ago! First of all, you need to resize all of your images to Original Size (I recommend doing one to begin with, to check it works!)

 .post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto; 
box-shadow: none;
border: none;
padding: 0px; 
}

Make image fade on hover
I always think this looks really creative, especially if you have a PinIt button on your blog they flip back and forward when you hover! It also adds a professional feel to your blog, and this code eases the opacity in and out instead of 'flashing' upon hover!

img {
opacity: 1.0;transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-webkit-transition: opacity 1s ease-in-out;}
a:hover img {opacity: .6;transition: opacity 1s ease-in-out;-moz-transition: opacity 1s ease-in-out;-webkit-transition: opacity 1s ease-in-out;}

Make post title uppercase and centered.
Although this code applies to only the post title, you can easily customise it to be date header by replacing .post-title with .date-header! You can try different code patterns until one works, the CSS style usually goes in the same format as the post and date header, but you can get the odd one out. Usually, if you Google it then there will be a solution!

.post-title {
text-align: center;
text-transform: uppercase;
}

Did you like this post? What CSS additions do you recommend?

10 comments:

  1. These are super helpful, thank you!

    ReplyDelete
  2. Thanks for sharing the fading images one! I recently had to redo my blog so anything to improve it is helpful. :) My tip would be just to learn it; it's a useful skill to have up your sleeve. E.g. my blogger navbar was weird so I just made my own!

    ReplyDelete
    Replies
    1. It's always a good idea to know what you are doing, so if anything goes wrong, you know how to fix it!

      Delete
  3. I've slowly been perfecting my blog design and these codes are a great help!

    ReplyDelete
  4. Thanks for sharing these! CSS is always confusing (for me at least) so this is helpful!

    xo, simplydavelyn.com

    ReplyDelete
  5. I know this is an older post, but I was hoping you could tell me if I'm doing anything wrong, Paige. I want to use the image-fading CSS code, but after adding it in, only a few of my images fade on hover. My more recent ones do not. Is this common?
    ~ Sanjana
    peridotcove.blogspot.com

    ReplyDelete
    Replies
    1. Hello Sanjana! I have visited your blog and hovered over about 20 images, and they all seem to be fading upon hover? Perhaps it could be your computer screen or something?
      Paige x

      Delete

Hello! Feel free to leave a comment, but please be nice! See my full commenting rules here