In this post, I will explain How to customize the Contempo Blogger themes by removing or change the color of the .bg-photo background, hide top-aside-sidebar and increase or decrease the text font size in aside-sidebar gadgets by using the Blogger Theme Designer.
Change Background of ,bg-photo
In order to change the background of the Header you have to add the CSS below in Advanced-Add CSS Section of the Blogger Theme Designer.
.bg-photo {
background:#000000!important;
The highlighted text code can be changed to whatever color you want.
Hide Top Aside Sidebar
There is a Top Aside Sidebar in the Contempo themes, which is used to add the About Me/Profile Gadget. If you do not want to add that gadget it leaves a large blank space at the top of the Sidebar.
In order to hide the Top Sidebar, the CSS given below should be added thought the Blogger Theme Designer.
aside.sidebar-container.container.sidebar-invisible {
margin-top: 0px !important;
}
The highlighted top margin can be changed to whatever margin you want to leave.
The text font size of the text in the gadgets in the sidebar of the Contempo Blogger themes can be controlled by adding the below CSS.
aside.sidebar-container.container.sidebar-invisible {
font-size: 80%!important;
}
The percentage highlighted in the CSS can be changed to whatever font size you want.
Many times if you have heavily customized the Contempo Blogger themes and if the CSS does not work, you have to edit the template and manually add the above codes above - ]]></b:skin>
But before doing that do not forget to back up your theme.
Change Background of ,bg-photo
In order to change the background of the Header you have to add the CSS below in Advanced-Add CSS Section of the Blogger Theme Designer.
.bg-photo {
background:#000000!important;
The highlighted text code can be changed to whatever color you want.
Hide Top Aside Sidebar
There is a Top Aside Sidebar in the Contempo themes, which is used to add the About Me/Profile Gadget. If you do not want to add that gadget it leaves a large blank space at the top of the Sidebar.
In order to hide the Top Sidebar, the CSS given below should be added thought the Blogger Theme Designer.
aside.sidebar-container.container.sidebar-invisible {
margin-top: 0px !important;
}
The highlighted top margin can be changed to whatever margin you want to leave.
The text font size of the text in the gadgets in the sidebar of the Contempo Blogger themes can be controlled by adding the below CSS.
aside.sidebar-container.container.sidebar-invisible {
font-size: 80%!important;
}
The percentage highlighted in the CSS can be changed to whatever font size you want.
Many times if you have heavily customized the Contempo Blogger themes and if the CSS does not work, you have to edit the template and manually add the above codes above - ]]></b:skin>
But before doing that do not forget to back up your theme.
Hi, how can I change the color of the sidebar from light pink to grey?
ReplyDeleteGo to Blog Customizer - Advanced - Sidebar - Background Color and click on add to select your color.
Delete