Make a Weblog

By default, eleven40 pro’s primary sidebar Width is set to be 250px wide. This doesn’t gives you more room for your 300*250 adsense ads. But if you would like to have more space on your primary Sidebar, below is a helpful CSS hack. The example below will make your primary sidebar 300px wide and show you the 300*250 banner ad fully without truncation. 

Note: Always make sure you have a current backup before editing code so you can go back to your original backup copy in case something goes wrong. To do this, go to Appearance > Editor and select all your current CSS code and copy over to a plain text editor such as NotePad, and store it on your local machine. You can always restore it from there. 

While the eleven40 Pro theme comes with six different layouts, i will only focus on one layout, which is the Content-Sidebar layout. Lets start off by looking at the /* Primary Sidebar */ section of Eleven40.

This is the code where you’d change your primary Sidebar Width.

/* Primary Sidebar */

.sidebar-primary {
float: right;
width: 250px;
}

Increase the sidebar width by 50px to 300px.

Note that if you increase the sidebar areas, you will need to decrease the relevant content areas by the amount you increase the sidebar, so that all the pieces of the layout fit together correctly. For instance, if you increase the primary sidebar area by 50px, you have to reduce the main content area by 50px. If you don’t, it will throw off your header.

To adjust the width of the content area, you’ll need to look for the /* Content */section. It will look something like this

/* Content */

.content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
float: right;
padding: 32px 40px 24px;
padding: 3.2rem 4rem 2.4rem;
width: 850px;
}

Reduce the content width by 50px to 800px and hit Save changes. You’re done.

Note that you can change the sidebar width to whatever you want, just make sure you change the content width by the same amount.

Hope this helps!

The post How to Increase the sidebar width in eleven40 Pro Theme appeared first on Make a Weblog.