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:
Is there a way to make an archive select box in weebly blogs? Because my list with posts is growing and I want to place them in a box so that a visitor can click and select from a drop down box.
By default no option available. You need to customize the archive list to show as a dropdown.
Is the anyway that I can make the sidebar copy to all the other blog pages? So editing the sidebar on one of my page automatically changes the rest, thank you!
Are there any other steps one might need to take to get google fonts into the sidebar titles? I have titles in the sidebar for which the above modifications to change font-family do not work.
For example, if i use h2 blanket selector, I can modify the text-decoration for all elements (in body, and sidebar, etc), but font-family in the same selector doesn’t have same effect in sidebar. Using the web developer inspector in my browser the sidebar titles whose font I want to change use the classes ‘blog-category-title’, ‘wsite-content-title’, and ‘blog-archives-title’, but adding h2 selectors for these specific classes also does not change the font.
Any suggestions?
Try below code to change the H2 headings font family style in the blog sidebar, change the font-family to the one you want:
.blog-sidebar h2 {
font-family: ‘Cabin’ !important;
}
Is there a way of having the weebly blog side bar (complete with categories and archives on every page? For me that side bar is important.
Thanks in advance
Susan
Great. Awesome post though weebly has recently made things easier for begins.
Is it possible to put the side bar on top of the blog post? When mobile mode, sidebars disappear where my ads at.
Sidebar normally will go below the post content when viewed in mobile device. If you want the ad above the content then you need place it inside the header.
Hi, I added the code to allow me to widen the blog sidebar on my Weebly site (I’m using a Div Tag Template.) However, the Drag & Drop Content area didn’t widen to fill the new wider sidebar. Is there a way to fix that? Thank you!
Now Weebly allows to remove blog sidebar under “Settings > Blog” without any need to modify source code.