Blogger: customize the Contempo theme

on

In this post I collect some CSS and JAVASCRIPT code found on the web for customize Blogger's theme Contempo. I hope it can be useful. I will keep the post updated with new CSS codes. Notify me of broken codes.

Attention: Before modifying the template, it is recommended to MAKE A BACKUP OF THE BLOG AND ITS CONTENTS. See the Blogger Help Center for the correct task.

There are 2 methods to add custom CSS code into your Blogger template:
  • direct editing HTML
  • the "Add CSS" function that override the default theme code

I prefer the Add CSS feature, more safer than direct editing HTML. The Blogger Help Center shows it.
Remember: you can add more than one CSS code and save the mod with floppy disk icon on right bottom of the screen.

JUSTIFY TEXT IN POST SNIPPETS:

body {
text-align: justify;
}

REMOVE OVERLAY SHADOW EFFECT FROM HEADER BACKGROUND IMAGE:

.bg-photo-overlay{
display:none!important;
}

ADD SOLID BACKGROUND COLOR TO HEADER:

  1. First we need to remove the image with the Customize feature. Click Theme in Dashboard
  2. On top right, under My Theme, click Customize
  3. In background section, click on that little triangle next to "Page Text" to expand more options.
  4. Click Remove Image
  5. Save changes. Click floppy disk icon on right bottom of screen.
  6. Now, copy and paste the following code in the Add CSS feature section. Before, in the CSS code, change the word color, with the HTML color you want; eg. black, 000000. 
.bg-photo {
background: #color;
}

BACKGROUND IMAGE FILL THE WHOLE PAGE:

.bg-photo-container, .bg-photo-overlay {
height: 100%;
position: fixed;
}

DISABLE SIDEBAR'S SCROLLBAR:

.sidebar-container .sidebar_top {
overflow: hidden!important;
}
overflow   disable both scrollbars
overflow-x disable the horizontal scrollbar
overflow-y disable the vertical scrollbar

KEEPING THE LABEL WIDGET ALWAYS EXPANDED BY DEFAULT IN THE SIDEBAR:

  1. In the Layout menu, add a HTML/Javascipt gadget.
  2. Drag the newly gadget to the bottom of the sidebar, after the Label gadget and save the arrangement.
  3. Copy and paste the following code into it:
<script type="text/javascript">
var d=document;
var divs=d.getElementsByTagName('div');
for (var i=0;i<divs.length;i++){
if (divs[i].className=='widget Label'){
var details = divs[i].getElementsByTagName("details");
details[0].setAttribute("style", "height:auto");
details[0].setAttribute("open", "open");
break;
}}
</script>
  1. Before saving, be sure the visible box in the HTML/Javascipt gadget is cheked.
  2. The gadget separator (the dashed line) in the sidebar is still visible. To make it disappear you need to add the following CSS code to the Add CSS function. In the code replace the HTML/JavaScript gadget number with the correct one. For me is the first, so in the CSS code I use HTML1. 
#HTML1{
display: none!important;
}

Comments

Post a Comment