You can customize Weebly Blog and the Blog Side Bar if you are a little comfortable with adding a few lines to main-style.css. Lets take the example of Custom-Blog from Informal Theme which has a few changes to the side bar and fonts.
Weebly Blog customized to adjust Side Bar, Fonts etc
This Weebly Blog page has a wider than normal side bar
and a bigger font size for post title. To adjust the size of side bar, you need to add a couple of tags to main-style.css which can be accessed from Design –> Edit HTML/CSS. The tags .blog-sidebar and .column-blog define the width of side bar. For the Inform.al Theme, we chose a width of 250px for side bar and 235px for the contents in the side bar. If you choose a different width, change them proportionally. Maintain a 15px gap to keep the side bar contents separate. Add the following lines to main-style.css
.blog-sidebar { width: 250px; }
.column-blog { float: right; width: 235px; margin: 0; padding: 0; }
The next thing we would like to mention is the Font size and Style of the Post Title. This can be changed by adding the following lines to your main-style.css and modify it to your taste.
#blog-title {
padding-top:10px;
font-size:18px;
line-height: 22px;
font-weight: bold;
font-family: 'Lucida Grande',
'Lucida Sans Unicode', Verdana, Sans-Serif;
}
For the inform.al theme, we chose Bold & 18px size for the title font. You can change this to your taste.
Now, if you would like to remove the Weebly Blog Side bar altogether, just add
.blog-sidebar { display: none; }
These tags defining the style of Blog are generally derived from common.css which can not be edited by user. But, whenever a tag is defined in main-style.css, the definition you add in main-style.css takes precedence over the default definitions.
Weebly Blog customized to adjust Side Bar, Fonts etc
This Weebly Blog page has a wider than normal side bar
and a bigger font size for post title. To adjust the size of side bar, you need to add a couple of tags to main-style.css which can be accessed from Design –> Edit HTML/CSS. The tags .blog-sidebar and .column-blog define the width of side bar. For the Inform.al Theme, we chose a width of 250px for side bar and 235px for the contents in the side bar. If you choose a different width, change them proportionally. Maintain a 15px gap to keep the side bar contents separate. Add the following lines to main-style.css
.blog-sidebar { width: 250px; }
.column-blog { float: right; width: 235px; margin: 0; padding: 0; }
The next thing we would like to mention is the Font size and Style of the Post Title. This can be changed by adding the following lines to your main-style.css and modify it to your taste.
#blog-title {
padding-top:10px;
font-size:18px;
line-height: 22px;
font-weight: bold;
font-family: 'Lucida Grande',
'Lucida Sans Unicode', Verdana, Sans-Serif;
}
For the inform.al theme, we chose Bold & 18px size for the title font. You can change this to your taste.
Now, if you would like to remove the Weebly Blog Side bar altogether, just add
.blog-sidebar { display: none; }
These tags defining the style of Blog are generally derived from common.css which can not be edited by user. But, whenever a tag is defined in main-style.css, the definition you add in main-style.css takes precedence over the default definitions.