Posted by Chris, Weebly Tricks

How to apply cSS To individual pages in Weebly

July 20, 2017
Let's say you have 2 pages in your Weebly site that are using the header page layout, but you want to hide the banner image on one of them. How do you do this? You could simply apply the no header page layout to one of them, but the no header page layout has a sidebar -- ​you don't want a sidebar on either of these 2 pages. You could add some CSS in a <style> bracket to the "Footer Code" area of that individual page, but if you use this method for other pages, then you have CSS scattered all around your site in various locations.

The solution is to use a page's body class. Every page you create in Weebly automatically generates a unique body class from the name you give the page​. For example, a page in your Weebly site called "Contact" would generate the body class ".wsite-page-contact". In another example, a page in your Weebly site called "About Us" would generate the body class ".wsite-page-about-us". The exception to this rule is the homepage which will always have the body class ".wsite-page-index". Now,​ for this tutorial, let's hide the banner image on the "About Us" page.