Change widths of footer widgets plus

Hi,

I have a weather widget centered in the middle of my Cloriato footer with text widgets on the left and right sides.

I want to adjust the widths of left and right areas but after searching the forum I can only come up with css for the right area: ".last {margin-left:20px;}" How do I do the same for the first and middle areas?

Also, how do I change the color of the two vertical lines that seperate the 3 widget areas.

My development site is http://67.227.161.200/~greengab/cms/

Thanks,

Michael

 

1.For your first issue

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.footer_wrapper .footer .footer_widget .widget_inner {
margin-left: 20px;
}

2.For your second issue

It is not possible to change its color because it is an image, If you want to change its color then, Go to images directory present in your theme directory and replace your image with present footer-line image or edit it.

The name of image is "footer-line-black.png"

Note:- Use same name for your edited image and remove the current image.

 

Thanks, that worked great - the only problem is it also did the same "margin-left" on the other two widget areas as well. How do I control each area independently?

Michael

 

Hello Michael,

Just add your widget code inside <div> in text widget area.
For example:
In first footer widget
<div class="widget1">your code</div>
In second footer widget
<div class="widget2">your code</div>
In third footer widget
<div class="widget3">your code</div>

After that give separate css for each class
like:
.widget1{
margin-left:20px;
}
and so on.

 

Thanks, but I want to move the heading of the widget area too - not just the contents.

Michael

 

Hello,

Remove title from your text widget title area and add it in the text area and use same process that is given above for your heading also.

For example

Code:

In first footer widget
<div class="widget1"><h3>Enter your title</h3></div><br>
In second footer widget
<div class="widget2"><h3>Enter your title</h3></div><br>
In third footer widget
<div class="widget2"><h3>Enter your title</h3></div><br>

Sending image for reference




Now ,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

.widget1 h3 {
margin-left: 20px;
}

Use same process for others also.

 

That seems an awkward way to move the widget area and leaves room for potential errors when a "less than savy" client goes in to change the contents and deletes part of the div code by mistake. I'm not interested in a panicked call from clients.

I was looking for a more permanent "behinds the scene" solution so took your first suggestion and came up with this - controls all three independently and works great.

The first line of code by it self will control all 3 widget areas equally, but when you add lines 2 and 3 they become independent of each other.

.footer_wrapper .footer .footer_widget .widget_inner {margin-left: 35px;}
.footer_wrapper .footer .footer_widget .widget_inner.lebo {margin-left: 5px;}
.footer_wrapper .footer .footer_widget .widget_inner.last {margin-left: 30px;}