CSS Styling Widget are like footer?

[mhkatz]

Hi Apex,

I’m wondering if you have some basic CSS markup that styles the font style widget area so it can be the same as the footer.

On the default settings I’m finding it too big and taking up to much of the page I’s like to just make something as clean as the footer text but utilize that in the four column and structure of the widget area.

[mldarshana]

Hi There @mhkatz

Thanks for writing in! Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and change your CSS values accordingly.

.widget ul li a, .widget ol li a {
    font-size: 1.4em;
    font-family: "PT Sans",sans-serif;
}

Hope that helps.

[mhkatz]

Perfect! Wonderful support as always. I modified it to this to add a few more parameters and I can play around with it.

.widget ul li a, .widget ol li a {
font-size: 12px;
color: hsl(196, 100%, 37%);
padding: 3px;
text-transform: uppercase;
font-family: “PT Sans”,sans-serif;
}

Is there code for adjusting that footer section for the following parameters?

Margins / padding
Make the boxes disappear
Background color.

Also code for adjusting the Titles in that section in a similar way we did the links?

That would be really helpful and give X users total control over the CSS styling in that section!

[Prasant]

Hello @mhkatz,

Thanks for updating the thread.

Please add following CSS under X > Theme Options > CSS:

footer.x-colophon.bottom {
    padding: 20px;
    background-color: #ddd;
}

footer.widget ul, footer.widget ol {
    border: 0;
}

footer.widget ul li, footer.widget ol li {
    border: 0;
    box-shadow: none;
}

footer.h-widget {
    font-size: 20px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.