How to Remove and Customize Weebly Blog Sidebar?

Weebly offers a simple blogging platform for webmasters to start their own blog. Blog’s content area consists of main content area and the blog sidebar and Weebly blog elements are not part of the main CSS. Hence, it is not possible to customize the blog elements unless you know the class name of each element. This article explains the customizing options for Weebly blog sidebar elements like Author, Archives, Categories, RSS Feed Link and Flickr Badge along with a technique to completely remove the sidebar.

Remove Blog Sidebar

Sidebar occupies considerable portion of the blog layout and if you are not interested in the sidebar, here is the simple way to remove it so that you will get more area to display your content. Follow the below steps to remove the Weebly blog sidebar:

• Login to your Weebly account and go to Weebly editor.
• Go to “Design” tab and click on the “Edit HTML/CSS” button.
• Click on the “main-style.css” and add the below code anywhere in the page. Ensure to paste it outside other element styles so that other styles will not get disturbed.
• Save your theme and check your blog page to see the sidebar is disappeared.

.blog-sidebar {
display: none;
}

Note: Now you can enable or disable Weebly blog sidebar without modifying source code. The option is available under “Settings > Blog > General > Blog sidebar”.

Customizing Width of Default Sidebar

You can increase or decrease the width of normal sidebar using width attribute. Add the below code in your “main-style.css” to make the sidebar of total width 230px with padding 20px:

.blog-sidebar {
width: 230px;
padding: 10px;
}

Customizing Archives and Categories

You can customize the font size and color of the archives and categories. Both title as well as the list can be customized as per your requirement. Below are the sample codes for customizing blog archive and categories along with the sample blog sidebar.

CSS Code for Blog Archive:

.blog-archives-title {
color: Blue;
font-size: 30px;
text-decoration: underline;
font-family: 'Courier New', Georgia, Serif;
}
.blog-archive-list {
font-size: 20px;
font-weight: bold;
font-family: 'Dotum', Georgia, Serif;
}

CSS Code for Category:

.blog-category-title {
color: Blue;
font-size: 30px;
text-decoration: underline;
font-family: 'Calibri', Georgia, Sans-serif;
}
.blog-category-list {
font-size: 20px;
font-weight: bold;
font-family: 'Bell MT', Georgia, Serif;
}

Customizing RSS Feed Link and Author

RSS Feed Link and Author titles can be customized as the manner like archive and categories. Sample codes to be used in the CSS are given below:

.blog-feed-link {
color: Pink;
font-size: 20px;
text-decoration: underline;
font-family: 'Calibri', Georgia, Serif;
}
.blog-author-title {
color: Blue;
font-family: 'Calibri', Georgia, Serif;
font-size: 30px;
text-decoration: underline;
}

Customizing Flickr Badge

Even it is possible to customize the Flickr Badge element added in the Weebly blog sidebar. Add the following code in the “main-style.css” or “main.less” to add a rounded border around the Flickr images displayed in the blog sidebar as shown in the above picture.

.clearfix {
border-style:solid;
border-radius:5px;
border-color:green;
border-width:3px;
}

How It Will Look?

The final customized blog sidebar using the above codes will look like below in your Weebly site: