Sidebar

Hey Guys well i think that’s not much complicated task.You can do it by visit that url:

ablereach.com/wordpress/wide-sidebar-and-header-for-wordpress-default-theme/

@paulinepkehoe: Catch Everest Pro theme is responsive design. So, it is not recommended to change the layout. If you change the layout. You need to change all the way down to mobile devices.

But if you just want to adjust only in the large screen, then add the following css in “Appearance => theme Options => Custom CSS” box.

@media screen and (min-width: 1060px) { 
#primary {
    width: 60%;
}
#secondary {
    float: right;
    width: 35%;
}
}

@rbrt_bene: Send me your site URL and then I will check in.

@rbrt_bene: You can add the following CSS in “Appearance => theme Options => Custom CSS” box.. The following CSS will work for screen size above 960px. Below 960 is mobile devices. So, I advice not to change that. Change

@media screen and (min-width: 960px) {	
#primary { width: 70%; }
#secondary { width: 25%; }
}

@rbrt_bene: I see you have issue in your custom css box. Can you paste all your CSS from custom CSS to http://pastebin.com/ and send me the url.

@rbrt_bene: There is missing closing } in your css. Please copy as below.

#hgroup-wrap { padding-bottom: 1rem; }
#site-logo { padding-top: 0; }
#secondary ul li { border-bottom: 1px solid #e6e6e6; }
.page .entry-title { display: none; }
.page.page-blog .entry-title { display: block; }
@media screen and (min-width: 960px) {	
#primary { width: 70%; }
#secondary { width: 25%; }
}

Hi Sakin, I also find the sidebar too big. I have resized it according to your instructions above but with a much narrower gap between content and sidebar, see following:

@media screen and (min-width: 960px) {
#primary { width: 70%; }
#secondary { width: 29.5%; }
}

Now I would like to make the gap between the widgets (above and below) narrow too, can you advise me on the custom CSS please?

Sarah
http://thejuiceplanet.com

@Sarah: If you are talking about the the gap between the widgets then it’s margin button and you can adjust as per you need and add the following CSS in “Appearance => Theme Options => Custom CSS” box.

.widget {
    margin-bottom: 30px;
}

But if you are talking about the padding then it will be as below:

.widget {
    padding: 30px;
}

Hi Sakin,
Since I changed from two to three columns the padding instructions you gave above no longer work. Can you help me with the custom CSS so that I can have a narrow gap between my three columns and the footer please?

Here is the custom CSS I currently have which isn’t working:

@media screen and (min-width: 960px) {
#primary { width: 70%; }
#secondary { width: 29.5%; }
}

.widget {
margin-bottom: 5px;
}

.widget {
padding: 10px;
}
.entry-title, .entry-title a { color: #cc6600; }

ins.adsbygoogle { padding-bottom: 30px; }

Hi Sakin,
When I had two columns I had primary at 70% and secondary at 29.5%, so I am guessing that meant I had 0.5% between the two columns. Now I have three columns and so I would like to have a really narrow space between the three columns. If you could give me the code I can play with the numbers to get the layout that looks right to me.

I also want to make the padding around the widgets narrower. You originally gave me the codes above which were:

.widget {
margin-bottom: 30px;
}

.widget {
padding: 30px;
}

Do these codes still apply or are the codes different now that there are two sidebars?

While I have you, is there any way to get rid of the big white space above the header image so that the header image starts immediately below the browser?

As much as I love the design of this template, overall everything is just too spaced out and I’m trying to tighten it up.

Hope that is easier to understand. Thanks 🙂
http://thejuiceplanet.com