Footer Widget

blissfulaiks · Member · Oct 30, 2014 at 9:13 pm
Copy link

Add topic to favorites
Hi!
Thanks for being so responsive to my questions.
Can I have please the CSS code to adjust the sizes of the footer widgets? I have a 3 column widgets and I think the sizes are too big. I would like to adjust the sizes?

Thanks

The blog I need help with is: (visible only to logged in users)
pcosta88 · Member · Oct 30, 2014 at 9:51 pm
Copy link
Hello!

From what I gather it seems that if you were to shrink the footer-widget’s sizes the content inside would not shrink in equal proportion. They would just get cut off. This would mean you would have to shrink everything else inside the content area to fit accordingly, which could be done but it may be more of a hassle.
See here for example on your site: http://pbrd.co/1tn66bY

Perhaps another forum user can given an alternative response?
You might also consider also asking the designer, since healthy living theme is premium.
See Here for Designer: http://theme.wordpress.com/themes/by/anariel-design/
See here for contact info: http://en.gravatar.com/anarieldesign
hallluke · Member · Oct 30, 2014 at 11:04 pm
Copy link
Can you explain in a little more detail how you would like them to end up? I’m not sure whether you want to make them narrower (with bigger gaps between widgets) or just change the text size, or something else entirely!
blissfulaiks · Member · Oct 31, 2014 at 1:11 am
Copy link
I would just like to change the text size of each widget. The whole 3 column widget has to decrease in size. The content should just remain the same.

Thanks
hallluke · Member · Oct 31, 2014 at 1:21 am
Copy link
This example will change the text size of the widget content and titles (separately) in your footer. Add it to your custom CSS and change the values to whatever you like:
```
.footerwidgets .widget {
  font-size:0.8em;
}

.wf-active .footer .widget-title,
.wf-active .footer .widget-title a,
.wf-active .footer .widgettitle {
  font-size:1em;
}
```
blissfulaiks · Member · Nov 5, 2014 at 5:15 am
Copy link
Hi Halluke! Thank you so much for your help! I truly appreciate it!
Another questions, for my side bar, what is the CSS code to reduce the length and sizes/ distance among widgets. For instance, “search in the box” and “categories” are away from each other. Is there a way that those widgets will be closer to each other.

Thanks
http://blissfulangelie.com/
thesacredpath · Member · Nov 5, 2014 at 3:57 pm
Copy link
Hi, the widgets have a top and bottom padding (top: 36px, bottom: 30px). Try the following CSS which sets the bottom padding to 0. You can adjust the value as desired. Zero (0) looks pretty good.
```
.sidebar-widget-area .widget {
    padding-bottom: 0;
}
```
blissfulaiks · Member · Nov 5, 2014 at 7:54 pm
Copy link
Thanks Sir! Is there a way for me to design this sidebar? Like the fonts pop up or show in different color once the mouse is hover?
thesacredpath · Member · Nov 6, 2014 at 12:26 am
Copy link
You can use this selector and the apply any hover styling you wish to the links in the sidebar.
.widget a:hover
As an example, here is an obnoxious gree hover color.
```
.widget a:hover {
    color: #11ee11;
}
```
I would suggest staying away from making the font weight different as it can cause things to jump around and make visitors cranky.

You can also add a text decoration, such as an underline, with the following (same obnoxious green color).
```
.widget a:hover {
    color: #11ee11;
    text-decoration: underline;
}
```

No items found.