SUBSCRIBE TO GET FREE UPDATES
RSSRSSEmailEmail
       "Keep learning ~~ keep smiling ~~ keep sharing"     

Monday, September 27, 2010

Add CSS in the Template Designer to restyle your blog's appearance

My first attempt at modifying the appearance of this blog after a makeover with the Blogger's Template Designer, by editing its Template via Design | Edit HTML, was quite a handful! But armed with the extra knowledge acquired since and further experimenting with the Designer for my other blog, Peacockflower's World, I'm extremely happy to have discovered the easier alternative way to do it.

No need to go about the long and winding way of editing the blog's template (i.e. Edit HTML) which can be quite intimidating and may risk messing up the codes! Just use custom CSS (cascading style sheets) to restyle the feel and look of your blog! Once you've learned how-to, it's really quite simple, fast and fuss-free!

Follow these steps to
add custom CSS to your template, using the Template Designer :
  1. Sign in to your Blogger account. At Dashboard, click Design | Template Designer.

  2. Go to Advanced | Add CSS tab. Add your custom CSS code snippets in the field box provided on the right. The best part about this method is changes you make will be reflected instantly in the live preview below which makes it so easy to keep amending the values, etc until you're finally happy with the results. You can click the Expand Preview if necessary for a broader view.

    Screen shot of Blogger's Template Designer to illustrate how-to add custom CSS

  3. If you're satisfied with the changes, just click the orange Apply to Blog button to save changes.

  4. Finally, click the Back to Blogger button to quit the Blogger Template Designer and return to the Page Elements page. That's all to it!
Note: Moreover, it's as easy to undo the changes! If you ever want to remove or amend the changes made to your blog, just return to the Template Designer anytime and edit the related CSS snippets that you've added earlier. Remember though, that your custom CSS will remain there, but, like other customizations, they will be removed if you ever change your template design.
All the custom CSS added via the Template Designer will also be shown in the blog's template at Design | Edit HTML page, just before the code: ]]></b:skin> where you can edit them or add new ones too.

Now, let's take a look at the kind of custom CSS code snippets that can be added to your template to restyle your blog's appearance. There are so many, just check out at W3Schools CSS Tutorials for more in-depth examples and Dave Raggett's W3C Introduction to CSS.

To assist and give you an idea, below is appended a summarized guide to some of the popular CSS tweaks that you may want to try. You'd notice that each CSS code snippet starts with a tag or selector name, and then followed by a list of style properties and a semicolon, inserted between the curly brackets { and }. If there is more than one style property in the list, separate them with a semicolon.

CHANGES YOU MAY WANT TO APPLYCSS CODE SNIPPETS TO ADD
(you can change the px value, color, etc. as highlighted in orange or remove the unwanted style properties as desired)
1. HEADER SECTION:
- Blog's title: how-to center-align text or set a specified left/right position, the latter being useful if you've added an untitled header image.
Also, reduce the height of the top margin, it's okay to use negative values.
.header h1 {text-align:center; top-margin: -0.3em;}

Just change the position center to left or right and the value in px as you wish. Alternatively to set a specified left position, follow example as below:

.header h1 {margin-left:255px;}
- Blog's title: how-to change the font family, size and text transformation. Also, how-to include letter-spacing..header h1 {font-family:'Apple Chancery', cursive; font-size:300%; text-transform:uppercase; letter-spacing:0.1em;}
- Blog's description: how-to center-align, capitalize and bold the text, change the font-family and font's size, and reduce the top and bottom margin to shorten the wide gap/space between the title and description..header .description {text-align:center; text-transform:capitalize; font-weight:bold; font-family:georgia, serif; font-size:90%; margin-top: -10px; margin-bottom: -5px;}
2. PAGE LIST (TABS) SECTION:
- Page tabs: how-to change the font style, size and color..tabs-inner .widget li a {font-family:'Lucida Handwriting', cursive; font-size:120%; color:red;}
- Tabs default background: how-to remove the background color, shadow, etc..tabs-cap-top, .tabs-cap-bottom, .tabs-outer, .PageList, .PageList ul, .PageList .widget-content {border:none; background:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none ;}
.tabs-inner .section {border:none;}
- Other widgets below the tabs: how-to center-align and decrease the height of margins between them..tabs-inner .widget {text-align:center; margin:5px 0;}
3. BLOG POST SECTION:
- Images/pictures: how-to remove border and shadow around images..post-body img {padding:0px; background:transparent; border:none; -moz-box-shadow: none; -webkit-box-shadow:none; box-shadow:none;}
- Post footer: how-to add a background color and change/reduce the font size..post-footer {background-color:#f2f1f2; font-size:85%;}
4. SIDEBAR SECTION:
- Widgets' title:
a) how-to text-transform the title;
b) change the font-family;
c) remove shadow in the background
.sidebar .widget h2 {text-transform:uppercase; font-family:'Lucida Handwriting', cursive; text-shadow:none;}
- Gadgets (widgets): how-to reduce or shorten the height between gadgets..sidebar .widget {padding-bottom:0px;}
- Profile image: how-to remove background color, border and shadow around the image.#Profile1 img {padding:0px; background:transparent; border:none; -moz-box-shadow: none; -webkit-box-shadow:none; box-shadow:none;}
- Realign the vertical top of sidebar column: how-to align the top of sidebar column with that of the main post column..main-inner .column-right-outer {margin-top:0.6em}

(Note: change the em value accordingly to fit your template design. Use a negative value if the sidebar's top is lower than the top of main column)
5. FOOTER SECTION:
- How-to center-align widgets and change the font-size of text..footer-outer {text-align:center; font-size:90%;}
- How-to reduce or shorten the height between specific widgets.(First, you have to identify your widgets' ID - go to Design | Page Elements, and mouse over the specific gadget's Edit link. The widgetId can be read on the browser's status bar. Example widgetId=HTML3 will be referred to #HTML3 in the CSS. You can group the widget # [each gadget is followed by a comma, except for the last one] and add a style for them as seen below.)

#HTML3,#HTML6,#Attribution1 {margin:2px;}
6. GENERAL:
- How-to reduce or shorten the height (space) between the Header section (or the PageList widget if you've added one) and the Columns below..main-inner {padding-top:20px;}

Other related links:
Enjoy!

Keep learning~~keep smiling~~keep sharing!!

Last edited: November 11, 2010

97 comments:

  1. Just went to peep at the Peacock blog, looks distinct against the black background! Thanks for sharing!

    ReplyDelete
  2. Thanks, dear friend! Something different for a change, huh!

    ReplyDelete
  3. Hi Jacqueline,

    Cheah from No-Frills Recipes refer me to you and I would like to get some helps from you.
    I've tried to hide the Navbar in my blog http://anncoojournal.blogspot.com.
    But after hiding the Navbar can you please tell me how to sign in to own blog. Thanks for your help :)

    ReplyDelete
  4. Hi Anncoo!
    I've never done what you did but googling for answers on how to sign in after hiding the navbar led me to understand that you'd need to sign-in at www.blogger.com and if you've already signed in it will transfer you direct to the Dashboard. So, best to bookmark that site for easy access.

    ReplyDelete
  5. Thanks Jacqueline for the information.
    I really learnt a lot from your site :D

    ReplyDelete
  6. You're most welcome, Anncoo! Thanks for the positive feedback! Great to know that you've found the site useful.

    ReplyDelete
  7. Thanks again Jacq! I managed to use Auto hide Navbar.
    The Auto hide works when visitors mouse over to the top of the original navbar then the navbar will appear and if visitor move the mouse down (not in the navbar area) then automatically navbar will disappear and this is also easier for me to sign in and goes directly to the dashboard.

    ReplyDelete
  8. Yes, Anncoo! Thanks to your request for help that I stumbled upon this mouse over effect when googling to provide you answers.

    I wasn't happy with the disappearing navbar which I experimented after responding to your enquiry because though I can sign in via blogger.com, I couldn't find the way to sign out or go to dashboard (the admin area) when in the blog's homepage. Thus that made me google-search again for a solution and was delighted to learn about the mouse over effect and applied straightaway at my other blog, http://peacockflower.blogspot.com/ and KIV to write a tutorial about it later.

    Thought of informing you when I eventually do that but you beat me to it! Glad that you've discovered this better alternative too! :-)

    ReplyDelete
  9. thank you thank you thank you :)
    I've been trying to remove the border from my images for ages finally something that worked!

    ReplyDelete
  10. The pleasure is all mine, Josie! I'm so happy for you and really appreciate your feedback. Thanks!

    ReplyDelete
  11. Really Nice piece of information, it helped

    Thanks
    Navneet Singh Chauhan
    http://navneetsinghchauhan.blogspot.com/

    ReplyDelete
  12. My pleasure, Navneet! Great to know it helped. Thanks for taking the time to show your appreciation.

    ReplyDelete
  13. Jacqueline,

    I went through many blogs but, your blog has the most useful information whch is very easy to understand and implement.

    Thanks a lot.

    I have a small question:
    Do we really need to use custom templates to make our blog more SEO friendly or to give it web site style look?

    Thanks again
    Umesh Mishra

    ReplyDelete
  14. Oooh Umesh, thanks for the big grin you've put on my face with your lovely compliment! :)

    I really don't know much about SEO friendly but my elder son who is computer savvy had advised me to always write good and useful content, using appropriate keywords if I wished to have my posts noticeable by search engines.

    In my opinion, content and keywords are the key, not the blog's template or design. Following your enquiry, I did a google-search and found info at these sites educative:
    1. Creating SEO friendly content. and
    2. What is SEO friendly content?

    Hope this helps!

    ReplyDelete
  15. Great and informative content,but i have an urgent problem.

    How do i insert google adsense and chitika codes within posts for texts to wrap around with the new blogger templates?

    Thanks

    ReplyDelete
  16. Thanks for the thumbs-up, lokoyizone!
    Sorry though that I'm unable to advise further re your request.

    ReplyDelete
  17. hi there.. Tried editing my blog with the CSS codes, esp for centering the header and tabs etc..,doesnt seem to work !! what may be the reason??

    ReplyDelete
  18. Hi Mom Chef,
    Do try again and follow the tutorial very closely, especially the CSS codes. For centering your blog's title, you'd need to add the following CSS code in the Template Designer, which is already included in my tutorial:
    .header h1 {text-align:center;}
    There should be a full-stop before the word header which you may have omitted as viewed from your page source.
    Hope this helps.

    ReplyDelete
  19. Hi, this is so awesome. Thanks a huge amount. I've used some of your CSS to customize my blog. I've been googling around trying to find the CSS to reduce the amount of space/pad between my widgets. I added your code above to the CSS and it didn't seem to have an effect? Could it be a different property?
    http://mmmcrafts.blogspot.com

    ReplyDelete
  20. Thanks for feedback, Larissa!
    Try this CSS instead:
    .sidebar .widget {margin:20px 0;}
    where the 20px value to be changed as you like. Best to add this CSS snippet at the Template Designer so that you can preview the changes instantly rather than at Edit Template which may fail if incorrectly coded/positioned.
    In fact, I've just experimented this at my test blog and it worked fine. Hope it's OK for you this time!

    ReplyDelete
  21. hi Jacqueline:
    I did try the Blog title centering once more, even with the ".header" and followed the CSS tutorial.. still didnt work :( however, other CSS snippets that you gave were so helpful!

    ReplyDelete
  22. @ Mom Chef - Sorry, I can't help you further in this issue.

    @ Kristin - You're very welcome! Appreciate your positive feedback. Thanks.

    ReplyDelete
  23. Can you help to centre my picture in the header by adding the correct the css code?

    ReplyDelete
  24. Found this from in blog forum from: westerntom's discussions

    In the Add custom CSS box, add some style for the image:

    #Header1_headerimg {margin:0 auto;}

    The preview should show the change. If you cut and paste above, it may not show. Add some letters (kjh) after } and as soon as the preview shows, delete the letters.

    Click APPLY TO BLOG.

    View the blog.

    This worked for me! ;-)

    ReplyDelete
  25. Thanks for sharing this tip on header image centering, Jenny! I'm sure there are bloggers who'd find this most useful. Moreover, you've saved me much time to find an answer to your previous question. ;-)

    ReplyDelete
  26. i stumbled on your blog while searching for tips on how to remove border images. thanks for these tips!

    ReplyDelete
  27. You're most welcome, Janie. Delighted to know they were helpful and thanks for feedback.

    ReplyDelete
  28. Me newbie to tech. Learning a lot in this blog. Requested to provide 1. Email subscription to post (feed burner) 2. Search in this site (including comments). Thank You Wish Regards.

    ReplyDelete
  29. Great to know you've found this blog helpful, Ifinder.
    Re email subscription, I haven't the time to look into that matter as yet. Meanwhile, if you wish, you can sign in as a follower and will automatically receive updates to your Reading List at your Dashboard.
    On the second request, I've already provided 2 search boxes - one at the top of sidebar and the other located just above the footer.

    ReplyDelete
  30. Sure to join as a follower, after myself free to regularly visit and participate here. I used to follow my email and occasionally dashboard. Requested to set boxes here to search within comments also.- I Have some requirements and problems in blogging. May I request for your guidence? Thanking you again with high regards.

    ReplyDelete
  31. Sorry, Ifinder! Instead, please feel free to browse the many tutorials I've made available in this blog and see what suits your taste. Check them out at the Archives page at the navigation bar above.

    ReplyDelete
  32. Thank you so much for this - it is saving me so much time :).

    One question, is there a css code to make the right sidebar in a 3 column layout align right? I'm working on a test blog design and it seems to align left by default.

    Thanks again :)

    ReplyDelete
  33. You're most welcome, Pat.
    I'm sure there is a CSS code for that purpose but I'm not so tech-saavy to help out. I did experiment using the following CSS:
    .sidebar .widget {text-align:right;}
    but it aligned right for both the sidebars. Sorry!

    ReplyDelete
  34. Really,learnt a lot from your site,take a look at my blog,and comment.

    ReplyDelete
  35. I must say THANK YOU!!!

    I was hating those borders!!

    Glad I found this post.

    I will look around your site some more.

    ReplyDelete
  36. My pleasure, Sue Sueper. Delighted that you're happy now and hope your scouting around will give you more joy! :)

    ReplyDelete
  37. You are a lifesaver!! Seriously! I was so frustrated with the borders around my pictures and couldn't find out how to remove them until now. THANK YOU!!!

    ReplyDelete
    Replies
    1. You're most welcome, Elizabeth! Thanks for your sweet comment and appreciation.

      Delete
  38. Thanks for such an informative article and the extensive explanation, it's been very usefu

    ReplyDelete
    Replies
    1. My pleasure in sharing and your positive comments are my reward! Thank you!! :)

      Delete
  39. Do you know of a CSS snippet for increasing the width of only the left blog margin? Which would make the post area smaller, too. Thanks!

    ReplyDelete
    Replies
    1. If you're using one of the new templates offered by Blogger Template Designer, then there's no need to add a CSS snippet for adjusting your required width.
      Instead, at your dashboard, select Template > Customize, then at Blogger Template Designer, select Adjust widths and follow through from there.
      Hope this helps, Brianne.

      Delete
  40. thank you! you made my day!!! finally found out how to change that f....ing sidebar alignment!

    best wishes
    penny lande

    ReplyDelete
    Replies
    1. Happy to know you're delighted with the result, Penny! Thanks for your appreciation.

      Delete
  41. Thanks.. This is good stuff.. Any help to change the padding and/or margins for the blog.. I have dead space to the right and left of my blog that I need to utilize.

    ReplyDelete
    Replies
    1. My pleasure in sharing, Donnie. Thanks for your positive comments and appreciation.
      To adjust the widths of your blog, just go to your 'Dashboard', click 'Template' and 'Customize' (which is below the image 'Live on Blog') and scroll to 'Adjust widths' on the left menu and adjust the columns as you desire.
      Hope this helps.

      Delete
  42. Thanks Jacueline...I've updated the width of the main section of the blog and the side bar but the actual width is 100 pixels wider because of the padding and/or margins. If you create a blog that is 790 px wide and place it in a iframe that is 790 px wide you will notice that there is a horizontal scroll bar unless you make he width of the blog 690 px. Hope this isn't too confusing.

    ReplyDelete
  43. Hi Sir,

    I am trying to design my blog tabs. I am successful in applying the color. But i wants to show the currently selected tab in a different color.
    Please help me in this.
    the current CSS of my blog is as below.

    .tabs-inner .widget li a {font-family:'georgia', cursive; font-size:110%; color:#fff;}

    The url to my page is - http://learnstockmarketbasics.blogspot.in/

    Please help me this.

    thanks

    ReplyDelete
    Replies
    1. Hi V.investor! Just remove your related current CSS. Then at your dashboard, select 'Template', select 'Customize' to go to Blogger Template Designer. Scroll down to 'Advanced' and choose 'Tabs Background' or 'Tabs Text' (since you're using the Watermark Template) on the left menu. On the right, choose 'Selected Colour' as desired. That's all.
      Hope this helps

      Delete
  44. Thanks, I've been unable to edit my blog title colours with the regular editor. This CSS helped!

    ReplyDelete
    Replies
    1. Great to know that, Dwaynejave... and thanks for your appreciation!

      Delete
  45. Hi Jacqueline. FINALLY a couple of useful things to apply without a great deal of CSS knowledge. And they work :-). I am happy. Great job. However, there is one little challenge that I can't overcome on my blog. www.storiesfromaboat.com. I want the header image to fit in the white main frame without any margins to see. This is driving me crazy for days now. Any suggestions? Your help would be much appreciated. Thanks, Kosta

    ReplyDelete
    Replies
    1. Thanks for your kind compliment, Kosta and glad you're happy. However, I'm sorry that I'm unable to solve your problem as I'm not that tech-savvy.

      Delete
  46. These are awesome and very helpful tips - thank you for sharing.

    ReplyDelete
    Replies
    1. You're most welcome, Mable. Thanks for the positive feedback... it made my day! :)

      Delete
  47. Wow very nice information! I'll integrate it to my blog soon. Thanks anyway :D

    ReplyDelete
  48. I searched a lot for these tips. Thanks a lot for the tips.You saved my time..

    ReplyDelete
    Replies
    1. You're most welcome, Nithya! Happy to know the tips were helpful.

      Delete
  49. Hi I am trying to move my tabs closer to my header, I have tried lots of different things but can't seem to remove the padding between them and it is driving me nuts! my blog is http://www.carlottasbeautyspot.com thanks alot! xx

    ReplyDelete
    Replies
    1. Hi Charlotte! One easy way is to crop the lower portion of your header image by about half an inch or less in height and then upload it to replace the current one. It will then automatically move your page tabs higher to the header and hence reduce the wide padding between them.

      Delete
  50. good tutor i like can visit to here

    ReplyDelete
  51. Thanks so much for this resource Jacqueline — I've just been able to play around with some of the options you supply and gratifyingly (and quite intuitively) tweak my design to my current desires!

    ReplyDelete
    Replies
    1. You're most welcome, A.Publishing. I'm delighted to know that it helped. Thanks for positive feedback.

      Delete
  52. Oh my gosh, thankyouthankyouthankyou! You're a life saver!!

    ReplyDelete
    Replies
    1. My pleasure in sharing, Melissa! Your happiness is my reward. :)

      Delete
  53. css created my blog look like a professional one. i love to add css in my blog. Thank You.

    ReplyDelete
  54. I think the admin of this website is really working hard in favor of his website, as here every data is quality based data.
    website design

    ReplyDelete
    Replies
    1. Thank you. You're too kind with your comment.

      Delete
  55. Very helpful tutorial... glad to find this.

    ReplyDelete
    Replies
    1. Delighted you're happy, Samantha. Thanks for penning your generous thoughts. :)

      Delete
  56. Hi
    How to reduce the divider blank space between header and blogposts in awesome blogger templates

    ReplyDelete
    Replies
    1. Try using the sample CSS snippet as shown at #6 in the table above, and change the px value as desired. Hope this helps.

      Delete
  57. It´s been an awesome reading, really had a great time. Also thanks for sharing this information, which is pretty valuable to me.

    ReplyDelete
    Replies
    1. You're most welcome... thanks for the kind words!
      Have a nice day.

      Delete
  58. Hello. I need some Tips with my blog design, trying to move the tittle and description close enough and add my logo. Any advise is appreciated.

    ReplyDelete
  59. Thanks a lot man, really needed the footer section tips.

    ReplyDelete
  60. I have been trying to sort my page list out for months and now I've finally managed to do it using this page! Thankyou so much.

    ReplyDelete
    Replies
    1. Great to know it had helped you, Katie Bradley! I love sharing and it's a bonus when bloggers like you take the trouble to pen your thoughts and appreciation. Have a nice weekend. :)

      Delete
  61. Thank you so much for sharing all the set up process of changing the blog appearance! I appreciate creative thinking which helps others!!

    ReplyDelete
    Replies
    1. You're most welcome. Thanks for your appreciation and kind thoughts. :D

      Delete
  62. Hi Jacqueline, thanks for this article, very helpful! I couldn't find what I was hoping to change but i'll never know if I don't ask! I added a png image to the About me profile gadget blogger. The only issue is that the space between the bottom of the image I added and my profile picture is very spacious.. Here's the blog to see what I mean... http://indigobluepsychicreadings.blogspot.co.uk/ I would like to reduce that but cannot find anything online about it! Would you happen to know? xx

    ReplyDelete

Welcome! Kindly leave your comments which are very much appreciated with a thankful heart.

Custom Search