50k- IT dump: Customise Blogger Mosaic Theme

22.5.13

Customise Blogger Mosaic Theme - Knowledge Base:

Theme: Mosaic

The Mosaic pre-made theme is available with all Pro plans. In addition to uploading a custom banner image, you can also use Custom CSS with the Pro Unlimited and higher plans to customize the theme.

Add Banner

To upload a banner image, go to Design > Banner. Click the Browse button to locate the image on your computer. Then click Save Changes to update your blog.
The banner image should be 950px wide by 248px high or smaller to fit.
Why is the banner tiled?
If your banner image is not exactly 950px wide by 248px high, the image will tile within the banner area. Additionally, the banner may tile if the blog's title and description is more than one line.

Set Color

The Mosaic Theme has two color options which can be selected at Design > Colors. The Dark color uses a black background. The Light color uses a grey background.

Custom CSS Tips for the Mosaic Theme

Custom CSS is a feature available with the Pro Unlimited, Premium, and Business Class plans. You can use CSS to make big or small changes to your design. Each pre-made theme requires different CSS code to make changes. Below are some CSS tips specific to the Mosaic Theme.
All CSS can be entered at Design > Custom CSS to apply the design changes to your blog.
Hide Blog Title and Description
The Blog Title and Description will display in a bar running across the Banner with the Mosaic Theme. If you have included the title of your blog within the Banner image, you may want to hide bar covering your banner using the CSS:
#banner-inner { background: none; }
#banner-header, #banner-description { display: none; }
Change Border Color
In the Mosaic Theme, there is 2px of padding around the container in a contrasting color. To change the color and width of the band around the container, use the below CSS:
#container { background-color: #000000 !important; padding: 2px !important; }
The color code and padding width can be adjusted. Set the padding width to 0px to remove the band entirely.
Adjust Column Widths
The CSS required to change the column widths will vary depending on the layout chosen at Design > Layouts.
The container width will always been the total of your columns - alpha, beta, gamma - plus some extra pixels depending on the selected layout. The extra pixels are to accommodate for the borders and padding for the columns.
The Mosaic Theme features a static background image which will not adjust to match changes to the column widths. The #pagebody-inner { background: none; } code can be included to hide the background image.
Grab the CSS for the selected layout below and adjust the column widths as necessary. Make sure to adjust the container width the equivalent of the changes to the other columns. For example, if you increase the beta column width 100px, the container will also need to be increased 100px.
Two Column Right Layout
#container { width: 1000px; }
.layout-two-column-right #alpha { width: 800px; }
.layout-two-column-right #beta { width: 200px; }
.layout-two-column-right #pagebody-inner { background: none; }
Two Column Left Layout
#container { width: 1032px; }
.layout-two-column-left #alpha { width: 200px; }
.layout-two-column-left #beta { width: 800px; }
.layout-two-column-left #pagebody-inner { background: none; }
Three Column Right Layout
#container { width: 1360px; }
.layout-three-column-right #alpha { width: 800px; }
.layout-three-column-right #beta { width: 200px; }
.layout-three-column-right #gamma { width: 300px; }
.layout-three-column-right #pagebody-inner { background: none; }
Three Column Layout
#container { width: 1280px; }
.layout-three-column #alpha { width: 200px; }
.layout-three-column #beta { width: 800px; }
.layout-three-column #gamma { width: 200px; }
.layout-three-column #pagebody-inner { background: none; }
One Column Layout
.layout-one-column #container { width: 800px; }
.layout-one-column #alpha { width: 800px; }
.layout-one-column #pagebody-inner { background: none; }
Add Banner of a Different Height
The default height for a banner uploaded to the Mosaic Theme is 250px. If you prefer to use a banner image of a different height, however, you can by using Custom CSS to add a banner image of any height.
The width of the banner should be kept at 948px.
First, go to Library > File Manager to upload the banner image. Click Browse or Choose File to locate the image on your computer and click Upload. After the image has uploaded, click on the Filename to open the image in a new browser window. Copy the URL for the image from the browser address bar.
At Design > Custom CSS, enter the below the code in the text field. The highlighted sections will need to be replaced with the specifics for your banner image.

#banner { 
height: 250px !important;
padding: 0 !important;
background: url(http://example.typepad.com/image.jpg) no-repeat center !important;
}

#banner-inner { 
position: relative !important; 
top: 175px !important; 
}

Replace http://example.typepad.com/image.jpg with the URL of the image uploaded to the File Manager. The height should be set to the actual banner height.
The position of the blog title and description which overlays the banner can be adjusted by changing top: 175px !important;.
After completing the edits to the Custom CSS, click Save Changes to update your blog.

50k- IT dump