Sorbet Responsive Blogger Template Download & Customization

Sorbet is a new responsive blogger template that was released by Automattic recently. It is a two column template with clean design and high readability.

Demo | Download

Customization

Customizing Header

The header section of this template has the following defaults:

.site-header {
background: #242d36;
border-bottom: 5px solid #1e252d;
margin: 0;
position: relative;
width: 100%;
z-index: 100;

You can change the ‘background’ and ‘border-bottom’ colors as per your wish. For e.g., If Changing the default background color of header section from


to


and border-bottom color to ‘#9B1111’ with extended border to ‘15px solid’ looks like as follows,



You can also change ‘position’ from ‘relative’ to ‘absolute’. Don’t edit this property unless you are a pro designer. Because the improper value of ‘position’ property can spoil the layout of the template.

Note: Changing ‘width’ property to pixels would affect the responsiveness of the template.

Customizing Titles & Body Background

Post Titles in the template has the following defaults:

.entry-title a {
color: #f45145;
text-decoration: none;
}

You can change the color of the post title by replacing the default value ‘#f45145’ to any other value of your wish.

If you want to see the title differently, change the ‘text-decoration’ value to ‘overline’ or ‘line-through’ or ‘underline’.

Post body in this template has the following defaults:

.hentry {
background-color: rgb(56, 37, 37);
border-top: 8px solid #f45145;
margin: 0 0 81px;
padding: 27px 27px 22px;
position: relative;
}

Replace the ‘background-color’ with either hexadecimal or rgb color codes.

Customizing Fonts

The body fonts have the following defaults:

body {
color: #656e7f;
font-family: "PT Serif","Source Sans Pro", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 27px;
}

Change the defaults to your custom values. Customizing fonts doesn’t need any pro designer experience.

Go to www.google.com/fonts, choose a font name and replace it with primary ‘PT Serif’ and secondary ‘Source Sans Pro’ font positions.

Customizing Footer

The footer section of the sorbet template has the following defaults. Find the ‘site-footer’ code in the template and customize it to your needs.

.site-footer {
background: #242d36;
border-top: 5px solid #1a2027;
clear: both;
color: #f0f1f3;
font-size: 0.73333em;
line-height: 1.8em;
margin: 27px auto 0;
padding: 27px;
text-align: center;
width: 100%;
}

These are the basic customizations one can do for a template. Comment below if you need any assistance in customizing the template! We’re happy to help you!