January 5, 2014

Weebly Tricks #2 -Adjusting and Removing Sidebar

Posted by Domz at 1/05/2014

Adjust or remove Weebly's Side Bar


Side bar plays a vital role in blogs. It is the location of the most important elements like archives, subscription forms, about the author and more. Keeping a well crafted side bar can help your site visual appearance improve as well as navigation. By default, blog side bar on Weebly’s site is short and wasn't appealing especially if you intend to put recent posts or comments.



There is a simple code I found at Weebly forums which teaches us on how to adjust it. Just follow the steps and you will be fine.

1. Go to Weebly > Design > click on the "Edit CSS/HTML" on the bottom left.


2. Click on the "main-style.css" on the upper left side.

3. You will see sets of codes on the right panel. Scroll it till the very bottom.

4. Paste the following in a new line:

.blog-sidebar {
width: 250px;
}
.column-blog {
float: right;
width: 235px;
margin: 0;
padding: 0;
}

The blog side bar width is the area it occupies while the column blog width is where the visibility of the elements can be seen. Of course, there will always be a thin space between the body and the sidebar. Keep an aspect ratio in adjusting. I used 345px for both widths as a standard for most widgets I added.

If you want to completely remove the side bar just add this code below from the code mentioned above.

.blog-sidebar {
display: none !important;
}

Planning ahead what size to choose is a good idea for later use of advertisements and widgets. Never forget that the sizes of both blog body and its sidebar must be appropriate with your site container width.

Hope this helps.

Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

7 comments:

  1. Hey there! thanks for this site! After I changed my left side bar width, it shifted the left side content. how do i changed the left side content width so it doesnt get so shifted around? thanks =)

    ReplyDelete
  2. Never mind. it seems that it fixed it on its own. fabulous! I have another question. How do I add a column in the side bar that doesnt run down the whole side bar?
    thanks again.

    ReplyDelete
    Replies
    1. Hi Hannah,

      Glad to know you've successfully edited your site. On your next question, I really can't get what you mean...

      Delete
  3. This is a very helpful post. Thank you. Do you know how I can put a Weebly blog sidebar on a regular Weebly page? I have seen other forums talk about cutting and pasting the sidebar code but no one talks about where the sidebar code begins and ends. Basically, I want to create a landing page/splash page but I want it to have the same sidebar as the blog and blog posts. Thanks for your time!

    ReplyDelete
  4. Do you know if there's a way to have sidebars on both sides of the blog posts?

    ReplyDelete
    Replies
    1. Yup, but both will be the same. Unless you simply create a custom sidebar to each page.

      Delete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top