Changing color/dimensions/position in widget áreas 1, 2 y 3

Sparkling
1

Hi!

I want to change the size and position of the widget areas 1, 2 and 3, from columns to horizontal sections one below the other.

I also like to change the background color and the titles color of those widget areas to allow differentiation between them.

How would that be possible?

thanks in advance!

2

Hi @petrizzo,

I hope you are well today and thank you for your questions.

I want to change the size and position of the widget areas 1, 2 and 3, from columns to horizontal sections one below the other.

You can try achieving this by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

.col-sm-4.footer-widget {
    width: 100%;
}
I also like to change the background color and the titles color of those widget areas to allow differentiation between them.

You can also achieve this by using the following CSS code.

.col-sm-4.footer-widget {
    background-color: #cfcfcf;
}
.col-sm-4.footer-widget h3.widgettitle {
    color: #000;
}

Please change the color value in the above code to whatever you want to use by referring the following pages.

http://www.w3schools.com/html/html_colorvalues.asp
http://www.w3schools.com/tags/ref_colorpicker.asp

Best Regards,
Movin

3

Hi!

Excellent. but I don’t want to change the “footer” areas but the “widget” areas 1, 2 and 3.

In my site (http://otrasvoceseneducacion.org) this areas are located below the map, and have “Noticias recientes” “Informes, reseñas y documentos” y “artículos recientes” links.

I prefer those links in horizontal way instead columns way.

Thanks in advance!

4

Maybe something like this:

.col-sm-4.home-widget {
width: 100%;
}

??

5

Hi (again)

I did it and it works.

and … If I want customize the right sidebar in the same way, wich would be the css code to use?

Thanks!

6

Awesome great to see you got that worked.

and … If I want customize the right sidebar in the same way, wich would be the css code to use?

Right sidebar displays all widgets in one column so i am not sure what you want to achieve there.

Please advise.

7

Hi!!

yes! I know that =). The dimensions are OK for me, I prefer sidebar in vertical way. In sidebar I want to change only the background and title colors …

=)

Thanks!!

8

You can change the background color and title color of it using the following CSS code.

#secondary .well{
    background-color: #cfcfcf;
}
#secondary h3.widget-title {
    color: #000;
}