Spacing between widgets

[Anonymous]

Morning. I am using the Contango Pro theme and I want to include a 3rd party slider widget on the home page (rather than using the default sliders that come with the theme). On the home page I have the new slider, followed by the services widget. The problem is that they are stacked too close together and I need to create some space between them. As a quick fix I added in a text widget, containing 2
statements. This worked fine, but would like to know if the is an alternative/better solution?

Regards, Graham

[admin]

Hi Graham,

On the home page I have the new slider, followed by the services widget. The problem is that they are stacked too close together and I need to create some space between them.

You can create margin/padding very easily. Your newly added widget will have some “unique class” just like our built-in widgets as,

After viewing source code,

Our Nivo Sider widget has class: widget_nivoslider-wrapper
Our Services widget has class: widget_services-wrapper
etc..

So you can create margin/padding by using your slider widget class. Just follow the steps,

– Identify your slider widget class SAY it is widget_slider-wrapper
– Go to Appearance > Contango Options > Extend Settings > Use Custom Style(s) > yes
– Enter the code in the Custom Style(s) like

.widget_slider-wrapper {
margin-bottom: 25px
}[/CODE]

CODE is just an example.

Thanks[CODE].widget_slider-wrapper {
margin-bottom: 25px
}[/CODE]

CODE is just an example.

Thanks

[Anonymous]

Perfect – much cleaner solution – I’ll give that a try. Thanks for your support!

[admin]

Thanks for the feedback.

[Anonymous]

Okay I tried the method you suggested. It did not work!
I am using the revolution slider and tried the following custom style sheet settings
.rev_slider_wrapper {
margin-bottom: 30px
}
#rev_slider_1_1_wrapper {
margin-bottom: 30px
}
Using firebug I can see that the default margin setting for the slider is set to margin: 0px auto
How do I override this value for either the object or class?

Note: there should be a visible shadow effect at the base of this slider..

The url for the site is http://www.computervisionlabs.com

What do you suggest?
Thanks for your support..

[Author]

Posts