Lessons in CSS/Blog Design

I just refreshed our blog layout, and while it's still far from perfect (I can't decide if I should center the header and do the home/about/we believe tabs under the header??), it's good enough for tonight!  Every time I do this I wish I had taken notes from the last refresh I did.  So for my future reference and in case anyone out there is trying to manipulate their blog in Blogger, here are a couple of things I found helpful:

To center (or adjust the placement of) your header:

1. Go to Layout > Template Designer > Advanced > Add CSS
2. Copy and paste this exact text into the "Add CSS" box:

.header-outer {
margin-left:0px;
}

3. Change the number before "px" (which is currently zero) and you will see your header's position move in the display of your blog below.  Play around with the number until you find the perfect spot.

To center the post title:

1. Go to Layout > Template Designer > Advanced > Add CSS
2. Copy and paste this exact text into the "Add CSS" box:

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

To center the post's date:

1. Go to Layout > Template Designer > Advanced > Add CSS
2. Copy and paste this exact text into the "Add CSS" box:

.date-header {text-align: center;}

To remove the white shadow box around photos in Blogger:

1. Go to Layout > Template Designer > Advanced > Add CSS
2. Copy and paste this exact text into the "Add CSS" box:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,

.BlogList .item-thumbnail img {

  padding: none !important;

  border: none !important;

  background: none !important;

  -moz-box-shadow: 0px 0px 0px transparent !important;

  -webkit-box-shadow: 0px 0px 0px transparent !important;

  box-shadow: 0px 0px 0px transparent !important;

}

To reduce the space between sidebar gadgets:

1. Go to Layout > Template Designer > Advanced > Add CSS
2. Copy and paste this exact text into the "Add CSS" box:

.widget {

    margin: 1px 0 0 0;

}

3. Change the number before "px" (which is currently one) and you will see the spacing between the sidebar gadgets move in the display of your blog below. 

To remove the title on sidebar image gadgets:

1. Type this exact text into the place for "title" in the image gadget

<! - ->

To change the post title's color:
1. Go to Layout > Template Designer > Advanced > Add CSS
2. Copy and paste this exact text into the "Add CSS" box:

.post-title a
{
color:#000020;
}

.post-title
{
color:#000020;
}

3. Change both numbers after "#" (both numbers are currently 000020) and you will see the color change for the post's title in the display of your blog below.  You can google around for the numbers of different colors or find them in Photoshop.

To create a transparent background in Photoshop for your blog header:

1. Create a new file in Photoshop by going to File > New > Blank File.  Make sure to select "transparent" for background contents.
2. Create the blog header that you want in Photoshop
3. Select Layer > Flatten Image
4. To save, select File > Save for Web.  Then select "PNG 24" in drop down menu and make sure you check the transparency box. You can adjust the sizing if you want and then hit "OK" which will prompt you to save the file.
5. In Blogger, go to Layout and then edit your header.  Upload your saved image.

How to add Instagram slideshow to sidebar

1. Go to snapwidget.com and follow instructions to get your free widget
2. Go to Layout in Blogger and add a new "HTML/JavaScript" gadget on your sidebar
3. Copy and paste the code that snapwidget.com gave you into the content box of the gadget.

Note: SnapWidget is what I currently use for this but I think there could be a better option out there.  It works well enough though for now.

How I created my sidebar tabs:

I used Photoshop Elements but you can do this using PowerPoint, GIMP or any other image program. Here was my step by step process:

1. Create the image (I used in Photoshop Elements)
2. Save to computer
3. Go to Layout in Blogger and create a new image gadget in sidebar
4. Upload the image and select "shrink to fit"
5. Put <! - - > for the title (so that the title doesn't appear)
6. Copy and paste the link to the website you want that image to link to (for example, for my "Home" tab I put the link "aaronandcarolinemckell.blogspot.com", for my "About" tab I put the link to the About Page I had created under "Pages" in Blogger, for Instagram I put "instagram.com/carolinemckell", for the archives tabs I put the link to each of my labels for that topic, etc.)

Other things to note:
-When in doubt I always google my questions or search on Pinterest.  There are tons of blogs out there dedicated to explaining blog design.
-I try to avoid doing anything that forces me to "Edit HTML."  It just seems riskier to open up and change all the hardwiring of your blog.  I always prefer to add CSS into the Advanced option under Template Designer.



Hope this helps someone out there! And at the very least, it'll be helpful for me to reference back to :)

Goodnight!