• open panel

How To Change The Fonts, Sizes, Width of Weebly Blogs and Side Bar

 

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 Custom Blog with custom side bar

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.

 
Raju Nunna

About Raju Nunna

Raju Nunna is the Founder of "Weebly Forums"

One Response to “How To Change The Fonts, Sizes, Width of Weebly Blogs and Side Bar”

  1. The blog on my page doesn't sit within the content and want to give the blog a left margin of 35px I can't find how to do this for the blog content, I've tried adding a margin to each element ie .blog-title { margin-left: 35px; } but this doesn't work even when I do it for .blog-body hmmmmm any ideas? is there a #blog something that needs to be Added to the css before the .blog-whatever classes are grouped underneath?

     
Weeblyforums.com is neither affiliated with nor endorsed by Weebly
© 2013 Weebly Forums, a CrossWeb.ca venture

Facebook

Follow WeeblyForums on Facebook
%d bloggers like this: