Change spacing/padding between sidebar widgets? « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Shoutbox

closed

resolved

Change spacing/padding between sidebar widgets?

13 posts from 4 voices

Started 10 months ago by demozeno
Latest reply from Mya
This topic is closed
This topic is resolved

Tags:

demozeno
Member

I'm trying to change the spacing/padding between the adverts in the sidebar of my blog – http://golovegreece.com/. Currently, the spacing/padding is too wide. I think I've found the CSS code using Web Inspector. It gives me the following:

{
.sidebar .widget
float: left;
margin-bottom: 20px;
overflow: visible;
padding: 20px;
width: 260px;

}

In Web Inspector, when I turn off margin-bottom and padding it gives me the effect I'm after, which is to squeeze the ads together.

In the Quick CSS editor, I put in the following code

{
.sidebar .widget
float: left;
margin-bottom: 20px;
overflow: visible;
padding: 20px;
width: 260px;
margin-bottom: 0px;
padding: 0px;

}

But it doesn't take effect on the page.

What am I doing wrong here? Thanks

Posted 10 months ago #
Ismael
Moderator

Hello,

Try to apply the following code on your custom.css

Regards,
Ismael

Posted 10 months ago #
demozeno
Member

Hello Ismael

There is no code in your reply. At least, I can't see anything. Can you post it again. Thanks

Posted 10 months ago #
Ismael
Moderator
Hello,

Sorry for that, here's the code
```
.sidebar .widget {
margin-bottom: 50px;
}
```
Regards,
Ismael
Posted 10 months ago #
rumblefish
Member

You need to put the open parenthesis

{

after

.sidebar .widget

not before it.

Put the code in your custom.css file.

Posted 10 months ago #
Ismael
Moderator

Hey rumblefish,

Thanks for helping out.

Regards,
Ismael

Posted 10 months ago #
demozeno
Member

I inserted the following code:

.sidebar .widget {
margin-bottom: 50px;
}

into my custom. css file but, unfortunately, to no effect.

What I'm trying to do is narrow the spaces between ads, so changed the px to 5 and 0, and still nothing. I tried inserting the code into Quick CSS and nothing doing here either.

Just to be clear, I located the custom.css file using my host's FTP file manager. I went wp-content>themes>shoutbox>css>custom css. And put the code in the custom.css file. Is this the right process?

What am I doing wrong here? Thanks

Posted 10 months ago #
rumblefish
Member

I don't see the code in your custom.css file. All I see is a load of css commands inside some odd plugins. Are you sure you uploaded the new custom.css file correctly into your theme files? If you change it using a control panel, remember to save the altered file.

If you have conflicting css priorities because of the plugins, you might want to try putting something like:

.sidebar .widget {
margin-bottom: 50px !important;
}

so that the new command has priority.

You can use negative spacing values too if you really want to close up the spacing, ie -20px

Posted 10 months ago #
Ismael
Moderator

Hi,

@rumblefish: thanks for helping again. :)
@demozeno: kindly follow rumblefish's instructions. :)

Regards,
Ismael

Posted 10 months ago #
demozeno
Member

HI and thanks for the advice.

After the code failed to work I deleted it from the custom.css file, which is why you couldn't find it. Still, this is the first time I've tried to customise css in the custom.css file - previously I've made all my css changes in the quick css editor - so I have no idea what you mean when you describe 'a load of css commands inside some odd plugins', or how this happened. Is this something I need to rectify - and how do I do this?

However, the good news is that I tried a negative spacing value - of -32px - and this works perfectly! I put the code in the css quick edit section.

Posted 10 months ago #
Ismael
Moderator

Hi demozeno,

You could just have the styles/codes removed in custom.css instead of deleting the file. Anyways, glad that you have fixed it. :)

Regards,
Ismael

Posted 10 months ago #
rumblefish
Member

When I scanned your widget code with firebug, it only showed css styling commands from inside some plugin css. I thought those were conflicting with what you were doing, but since you took out the commands anyway, it wasn't the case.

The easiest way to edit the custom.css file is to connect to your server with an ftp program and download the file. Change it with a text editor and then upload it again to replace the original one.

Glad you got it working anyway :O)

Posted 10 months ago #
Mya

Thanks for helping out rumblefish!

Regards,
Mya

Posted 10 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top