Adjust and Customize Weebly Sidebar

Weebly sidebar is set to be default for blog page only. But sidebar is noticeably narrow as its current width is set to be 250px which some ad code or third party plugin might not work well on this.

This tutorial will be short and as simple as copy and pasting. This customization works on any version of weebly themes and weebly4 compatible. I will be adding customization comments for you to alter as per your liking.

First things first, create a blog page.

Go to your Weebly dashboard > Pages > select the + icon and choose Blog page

Let's proceed on adding the CSS

Select  Theme tab > click "Edit HTML/CSS" at the bottom of the left sidebar. 

Copy this CSS code and save it in your notepad as we need it later.

.blog-sidebar {
width: 350px;  /*Increase the value to make it wider*/
}
.column-blog
{
float: right;
width: 320px;  /*Increase the value to make it wider*/
border: 1px solid #eaeaea;  /*change the value to 0 to make this hidden*/
margin: 0;
padding: 10px;
}

Quick Tip: The 30px difference on the Blog sidebar and the Column blog is the margin. So if you make the Blog sidebar wider make sure you leave at least 30px margin.


Now on your Weebly code editor locate the main_style.css or the main.less and simply paste the copied code above at the very bottom of your css.

Adjust the CSS for any customization you might need and click save.