[LaurenReneL]

Hi,

I have a couple questions on how to make changes to my current theme.

I am currently using Adventurous Pro for my website: http://www.ourdogjourney.com

1. How can I reduce the padding around each widget within the right-optional sidebar? Right now I feel like there is too much space between each widget.

2. How can I reduce the padding that is at the bottom of my social media bar at the top of my site? (The space between my main header and the social icons).

3. Is there a way I can add a line or divider between my page content on the left and my optional right sidebar?

That’s all for now.
Thanks!

[LaurenReneL]

Also one more question:

How can I change the white background (behind my social media links) at the top right hand corner of my site to black? I want that entire white bar at the top to be black that is above my header.

Thanks!

[Sakin]

@LaurenReneL:
1. You can change the margin and padding as per your need to reduce the spaces between widget. After changing it, you can add it in “Appearance => Theme Options => Custom CSS” box.

#secondary .widget {
    padding-bottom: 30px;
    margin-bottom: 30px;
}

2. Add the following css in “Appearance => Theme Options => Custom CSS” box.

#masthead { 
    display: none;
}

3. Try adding following css in “Appearance => Theme Options => Custom CSS” box.

.right-sidebar #primary {
    border: 1px solid #eee;
}

4. Add the following css in “Appearance => Theme Options => Custom CSS” box.

#header-top {
    background-color: #000;
}

[LaurenReneL]

Hi Saikin,

The first code you provided me to reduce the margin/padding for my homepage sidebar widgets is not working. Any ideas why or another way to fix?

[LaurenReneL]

Actually, none of the codes you gave me seem to have worked…

[Sakin]

@LaurenReneL: It’s not working as when I check in your Custom CSS and see that there was missing closing brackets } before the css I have you. So, go to “Appearnace => Theme Options => Custom CSS” box and then you will see the following css
#branding ul.menu li { display: inline-block; float: none;
See there is missing closing brackets }
So, it needs to be:
#branding ul.menu li { display: inline-block; float: none; }

Then all the css will work.

[Author]

Posts