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.

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.

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

<div class="content-wrap">
    {{#sections}}
        <div class="container">{content}</div>
    {{/sections}}
</div>

Remove the white section and content mustache codes as shown below in bold:

<div class="content-wrap">
    {{#sections}}
        <div class="container">{content}</div>
    {{/sections}}
</div>

Add HTML codes to create the sidebar layout as shown below in bold:

<div class="content-wrap">
    <div class="container">
        <div class="left">{content}</div>
​        <div class="right">{sidebar:content}</div>
    </div>
</div>

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

​/* Sidebar */
​.content-wrap .container {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.left {
    width:60%;
}
.right {
    width:36%;
}
@media screen and (max-width: 767px) {
    .left {
      margin-bottom:2em;
    }
    .left,
    .right {
      width: 100%;
    }
}

Now replace the ".content-wrap" class above with your main content area's ID or class. For example, if your main content area is "id="main", then your code will look like this:

​#main .container {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

As another example, if your main content area is "class="main-content", then your code will look like this:
​
​.main-content .container {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

Click "SAVE".

Go to "Pages" at the top, choose the page you want to apply the sidebar to. Go to "HEADER TYPE" and select "sidebar".

​You can now drag and drop elements into the main content area on the left or the sidebar on the right.

By default, the coding above will yield a global sidebar. This means that any changes made to the sidebar will automatically reflect on any page that's also using the "sidebar" page layout.

If you would rather the sidebar not be global, add the following bold code to the CSS code from step 2 as shown below:

<div class="content-wrap">
    <div class="container">
        <div class="left">{content}</div>
​        <div class="right">{sidebar:content global="false"}</div>
    </div>
</div>

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.

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:

<div id="crumbs">
    <a class="crumb-line-1"></a>
    <div class="crumb-slash">></div>
    <a class="crumb-line-2"></a>
</div>

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

​/* Bread Crumbs */
#crumbs {
    display:flex;
    align-items:center;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: .3px;
    color: #008aff;
}
.wsite-blog-index #crumbs {
    display:none;
}
.crumb-slash {
    color: #008aff;
    padding: 0 5px;
    box-sizing: border-box;
}
#crumbs a {
    color:#008aff;
}
#crumbs a:hover {
    text-decoration:underline;
}

On the left, under "ASSETS", click on "custom.js". On the right, directly beneath the "jQuery(function(){" code, add the jQuery codes below:

// Breadcrumbs  
var pathname = window.location.pathname;
var hyphenRemove = pathname.replace(/\-/g, ' ');
var arr = hyphenRemove.split('/');
  
// Blog URL
$(".crumb-line-1").html(arr[1]);
var slashRemove = (pathname.split('/').slice(0,2).join('/'));
$('.crumb-line-1').attr('href', slashRemove);
  
// Blog Page URL
$(".crumb-line-2").html(arr[2]);
$('.crumb-line-2').attr('href', pathname);

Click "SAVE".

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.

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:

​.container {
    overflow: hidden;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

Click "SAVE".

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

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:

.wrapper {
    max-width: 960px;
}

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.

Go to "Settings>SEO>Header Code" and add the following CSS codes:

​<style>
.wsite-blog-index #wsite-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
/* Desktop Width */
.wsite-blog-index .blog-post {
    width:31%;
}
/* Tablet Width */
@media screen and (max-width: 992px) {
    .wsite-blog-index .blog-post {
         width:48%;
    }
}
/* Mobile Width */
@media screen and (max-width: 767px) {
    .wsite-blog-index .blog-post {
        width:100%;
    }
}
</style>

​Click "Save".

Tip: If you want to change the amount of columns you have for the desktop, tablet, and mobile versions, simply adjust the width percentages in the above bold codes to the corresponding list below:

• 1 Column: 100%
• 2 Columns: 48%
• 3 Columns: 31%
• 4 Columns: 23%

Note: Your blog posts will be put into columns only on the live site. The reason is the Weebly Editor is a quasi-browser, in which the codes above are not interpreted the same as a real web browser.

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.

Go to Google Fonts and find a font you'd like to use.

Once you've found a font, click the "+" icon to the right of the font's name. At the bottom of the screen, click on "1 Family Selected>@IMPORT" and copy the CSS code provided as shown below:

​@import url('https://fonts.googleapis.com/css?family=Mouse+Memoirs');

Go back to your Weebly site, and 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". On the right, paste the code you copied at the top of the page, preferably near other imported fonts.

Now scroll down and locate the banner h2's CSS code and apply the Google font to it as shown below in bold:

.banner-wrap .banner h2 {
    margin-bottom: 15px;
    color: #ffffff;
    font-size: 140px;
    font-family: "Mouse Memoirs";
}

​Click "SAVE".

With this tutorial, you can just as easily apply the Google font to any type of text within your Weebly site. To do this, you just need to find the corresponding CSS code.

​Here is a list of common texts in Weebly and their likely corresponding CSS code:
​

• Site Title: ".logo a"
• "Title" element: "h2" or ".wsite-content-title"
• "Text" element: "p" or ".paragraph"
• Banner "Title" element: ".banner h2" or "#banner h2"
• Banner "Text" element: ".banner p" or "#banner p"
• Navigation: ".nav ul li a"

Note: The corresponding CSS code for your theme may be slightly different from the list above, but with a little trial and error, you'll locate it.

Troubleshooting: If the Google Font doesn't work even after correctly completing this tutorial, you may need to set the corresponding text to the default font under "Theme>Change Fonts".

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.

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>

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:

/* Fullscreen Slider */
​​.slider {
  overflow:hidden;
}
.slider .wslide-slide-inner1 {
  top: 0;
  left: 0;
  bottom: 0;
  right:0;
  width: 100%;
}
.slider .wslide-slide-inner2 {
  top: 0!important;
  left: 0!important;
  bottom: 0;
  right: 0;
  width: 100%!important;
}
.slider .wslide-slide-inner2 img {
  width: 100%!important;
  object-position: 50% 50%;
  object-fit: cover;
}
/* Desktop Height */
.slider .wslide-slide-inner2 img,
.slider .wslide-content {
  height: 400px!important;
}
/* Tablet Height */
@media screen and (max-width:992px) {
  .slider .wslide-slide-inner2 img,
  .slider .wslide-content {
    height: 300px!important;
  }
}
/* Mobile Height */
@media screen and (max-width:767px) {
  .slider .wslide-slide-inner2 img,
  .slider .wslide-content {
    height: 250px!important;
  }
}

Note: You can come back later and adjust the height of the fullscreen slider for the desktop, tablet, and mobile versions of your site as shown above in bold.

Click "SAVE".

Go to "Pages" at the top and click on the page you want to apply the fullscreen slider to. Under "HEADER TYPE", select "Slider".

​Go to "Build" at the top, and on the right, grab Weebly's "Slideshow" element and drop it into the drag and drop area above the main content area. Select "Simple Slideshow" and upload your images.

Recommended image dimensions are 1920x1070.

Once your images are uploaded, click on the slider and go to "Spacing" and set the "Top Margin" and "Bottom Margin" to "0".

Note: Since this is a hack that externally modify's Weebly's "Slideshow" element, only the "Fade", "Slide", and "Mosaic" transitions will work at this scale.

Thank you for purchasing our Weebly theme Solar! This guide will help you install and setup Solar for first time use.

Once you've downloaded Solar to your computer, you can upload it to your Weebly account by going to "Theme>Change Theme>Import Theme".

Once Solar has uploaded, scroll down to locate it and then click "Choose".

Note: If a prompt to change your theme appears, click "Confirm".

You'll be greeted with Solar's Blog Automation screen. You can deactivate this for now by going to "Theme>Change Options">Automation [Editor Only]".

Note: Even if you already have a home page, you'll need to create a new one since Solar needs a blank page to automatically pull in your blog posts. You can hide your old home page for now.

Go to "Pages" at the top and click on the "+" icon. Then select "Standard Page", name it, and under "HEADER TYPE", select "Solar". Click "Done".

Note: If you already have a blog with at least 3 categories, then you may skip to step 4.

Go to "Pages" at the top and click on the "+" icon. Then select "Blog Page", give it a name, and under "HEADER TYPE", select either "Header" or "No Header".

Now create 3 new blog posts -- they can be real or test posts. Make sure you apply a unique category to each of the 3 blog posts. Once your blog posts are published, publish the entire site as well.

Go to "Theme>Theme Options>Automation [Editor Only]". Now put the URL of your blog and the URL of the 3 blog categories in the input boxes below.

For example, let's say our blog's url is "www.mysite.com/blog" and we created 3 blog categories called "blue", "yellow", and "green", the blog automation input boxes should be setup as shown below:

• www.mysite.com/blog
• www.mysite.com/blog/category/blue
• www.mysite.com/blog/category/yellow
• www.mysite.com/blog/category/green

​
Publish the site and you should now see the blog posts on the home page of the live site. If you have any additional questions on Solar, please feel free to ask them below!

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.

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

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.

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.

We get it. There are a lot of third-party companies offering incredible Weebly themes. So why should you try one of ours?

​We could sit here and write a boring list of why WE think we're good, but instead, we'll just tell you how we do themes and ultimately let you decide.

THEMEZIER has been a part of the Weebly community since 2011. This means we've seen Weebly grow from its first generation UI, to the present day. We know Weebly really well and love it!

In fact, we love Weebly so much that we've built this site on Weebly. That's right, this is a Weebly site! That's how much we enjoy using Weebly and are confident in the platform.

​Go ahead, the next time you purchase a Weebly theme, ask the creator what site building platform they used to sell you that theme. Just a thought.

If it's not obvious from our site's layout and design, we like to keep things simple; EZIER to use, if you catch our drift. But keeping things simple doesn't mean lacking innovation. Our themes are built around a simple principle of making your user experience as simple as possible, of which innovative theme features emanate from.

We don't provide instructions for working with our themes because we've built them to be as intuitive as possible. Building it intuitive the first time ensures not having to do so the second time. ​​Sure, a question may arise, but you can always ask us and we'll be happy to help out.

While our theme building philosophy revolves around a simplistic principle, boy do we love to innovate. We innovated a lot of Weebly theme firsts such as automation, bread crumbs, notifications, and more -- all built into select themes and incredibly easy to operate.

And most importantly, once you purchase one of our themes, you're not on your own, but the complete opposite in fact -- you're part of the THEMEZIER family and we've got your site building back!

Surely it sounds, and may just be, cheesy -- oh, here comes the cheese -- but we love to build themes and we love Weebly. Helping people bring their visions for a website to reality is a truly rewarding satisfaction for us. It's almost addictive, in a way.