THEMEZIER blog

While Weebly fully adopted the use of sections for all of its themes, many who simply wanted a sidebar on Weebly's "Standard" page were forgotten.

Well, we're here today to tell you that you haven't been forgotten and that a section-type of layout for a website doesn't work for all websites. You've been heard, and with this tutorial, we'll show you how to easily create a sidebar layout.

Step 1: Create a new page layout

At the top, click on "Theme", and on the bottom-left, click on "Edit HTML>CSS".

On the left under "HEADER TYPE", select either "header.html" or "no-header.html".

Note: If you want your sidebar page layout to have a banner, go with "header.html", or to not have a banner, go with "header.html".

Once you've chosen your header type, on the right, copy all of the code in this file. Now click the "+" icon to the right of "HEADER TYPE" and select "New Header Type". Name this new page layout "sidebar.html".

On the right, delete all of the code in this file and paste the code you copied from the header type you chose.

Step 2: Adjust HTML Code

Locate the main content area's coding. For this tutorial, our demo site's main content coding looks like this:

You Might Also Like

Breadcrumbs help visitors to your blog navigate your posts by automatically displaying the post their viewing and what page that post can be found under. This tutorial will show you how to install breadcrumbs into a Weebly "Blog" page.

Step 1: Add HTML Code

Go to "Theme" at the top and select "Edit HTML/CSS" in the bottom-left corner.

On the left, under "PARTIALS", select "blog>post.tpl". On the right, directly above the white "{{#custom_header_html}}" mustache code, add the HTML code below:

Some Weebly themes come with a theme option to change its size. For the rest of us, we need to modify some CSS codes. This tutorial will show you how to change (i.e., widen or narrow) the size of a Weebly site.

Step 1: Locate CSS Class

At the top, click on "Theme", and on the bottom-left, click on "Edit HTML>CSS".

​On the left under "STYLES", click on "main.less", and on the right, click the search icon at the top and search for ".container". Once you locate this CSS class code, change its "max-width" to change the size of your Weebly site as shown below in bold:

Note: If the above step didn't change the size of your Weebly site, please read on to the additional information below.

Additional information

Weebly themes, from a layout standpoint, tend to be broken up into 4 main parts: ​

Logo & Navigation (i.e., Header)

Banner

Main Content

Footer

Within each of these layout parts resides the exact same area known as a "container", which is why changing the ".container" class above can change the size of all of these part at the same time.

However, if changing the ".container" class in step 1 doesn't change the size of all of these 4 parts at once, then your CSS file likely has another code dedicated to the size of one, or more, of these 4 areas.

The solution? Just locate and change that dedicated code in the CSS file -- that's it! For example, if your banner area has a dedicated width code, it will look something like this:

.banner .container { max-width: 960px;}

Tip: If you want to change the size of just one of these 4 areas in your Weebly site, you can just add a dedicated width code to your CSS file. For example, a code dedicated to changing the size of just the footer would look something like this:

.footer .container { max-width: 1000px;}

Lastly, you may have a Weebly theme that has these 4 areas, but no "container" area within any of them. In this case, the width of your site is likely controlled by a "wrapper", which is an area that encompasses all of these 4 areas.

​To change the width of this type of Weebly site, you guessed it, look for the "#wrapper" or ".wrapper" CSS code in the CSS file and adjust accordingly as shown below in bold:

At the moment, Weebly doesn't allow you to put your blog posts into columns, but by adding some CSS codes, we can easily change that. This tutorial will show you how to put your Weebly blog posts into columns.

Google Fonts provides a plethora of fonts you can use on your Weebly site for free. This tutorial will show you how to install the Google Font "Mouse Memoirs" into your Weebly site and apply it to Weebly's "Title" element in the header.

Weebly used to offer its paid customers a fullscreen slider, but since responsive themes took over, this slider has been missing in action. Fear not, as this tutorial will show you how to easily turn Weebly's "Slideshow" element into a fullscreen slider.

Step 1: Create a new page layout

At the top, click on "Theme", and on the bottom-left, click on "Edit HTML>CSS".

On the left under "HEADER TYPE", select "header.html", and on the right, copy all of the code in this file. Now click the "+" icon to the right of "HEADER TYPE" and select "New Header Type". Name this new page layout "slider.html".

On the right, delete all of the code in this file and paste the code you copied from the "header.html" page layout. Now locate and delete the banner coding, and in its place, add the following HTML code:

​<div class="slider">{slider:content}</div>

Step 2: Add CSS codes

On the left under "STYLES", click on "main.less". On the right, scroll all the way to the bottom and add the following CSS codes:

All Weebly sites, at the moment, come standard with the text "- Home" to the right of the page title in the browser tab on the home page. This tutorial will show you how to get rid of it so your site's title can stand beautifully by itself in the browser tab.

Note: Removing the "- Home" text to the right of the page title in the browser tab on the home page will also get rid of the site title to the right of the page title in the browser tab on all other pages of your Weebly site.

Step 1: Delete site title

Go to "Settings>Site Title" and delete all of the text within the "Site Title" input box. Click "Save".

Step 2: Add Page Title To Home page

Go to "Pages" at the top​ and click on your home page. Under "HEADER TYPE", click on "Settings". Add a page title, site title, or both -- it's your choice -- to the "Page Title" input box.

Note: If you don't repeat this step for every other page on your site, then the browser tab will just display the page's name. Adding a page title to a page will override the page name in the browser tab.

The final product

Once the steps above are completed, publish the site. You can now see in the image below that just "My Site" is present in the browser tab instead of "MY SITE - Home". It's easier on the eyes and less cluttered looking.