Formatting headlines in Footer

Support
#1

Hi there, I’ve searched the forums and haven’t quite found the answer I need. I don’t know any CSS. When I put widgets in my footer, the font has shadows and sizes that I don’t want (see image).

I just want the font to show up without any extra formatting.

Also, I’d like to lose the lines around the left-most widget (Contact Aveil, Resources, etc) and lose the arrows so it looks more like this (but still white font on a gray background).

Thanks, Jena

Footer widgets spacing + headline color
#2

Hello Jena,

Thanks for asking. :slight_smile:

Can you please share website URL so we can give you the CSS codes?

Thanks.

#3

yes, it’s www.aveil.org.

#4

Hello @jenaolson,

Thanks for asking. :slight_smile:

I see a coming soon page on the website. Can you please share website login details in a secure note so that we can give you the CSS required to make required changes in footer?

Thanks.

#5

I deactivated the Under Construction widget, hopefully it works now.

#6

Hello @jenaolson,

Thanks for asking. :slight_smile:

Have you removed widgets from footer as I don’t see any widgets in that area? https://cloudup.com/cnWbAOd-rQg

Thanks.

#7

I did. I got sick of trying to figure out and gave up on it. :slight_smile: I put it back so you can see the code.

#8

Hello @jenaolson,

Thanks for updating thread. :slight_smile:

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

footer.x-colophon.top .widget {
    text-shadow: none;
}

footer.x-colophon.top label {
    color: #fff;
}

footer.x-colophon.top .widget_nav_menu ul li a {
    border-bottom: 0;
    box-shadow: none;
    color: #fff;
}

footer.x-colophon.top .widget_nav_menu ul li a:before, .widget_meta ul li a:before, .widget_pages ul li a:before{display:none;}

footer.x-colophon.top .widget_nav_menu ul li ul, .widget_nav_menu ul li .sub-menu {
    box-shadow: none;
}

footer.x-colophon.top .widget ul {
    border: none !important;
    box-shadow: none;
}

Thanks.

#9

Thank you! How do I lose the light white line around the navigation area, and change the size of the font? Also, I added some regular text in the middle widget area that shows up as dark font, but I want it to be white.

Basically, I want it to look almost identical to the image I referenced originally (except using our font). Thanks.

#10

Hello @jenaolson,

Thanks for updating thread. :slight_smile:

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

footer.x-colophon.top .widget ul {
    box-shadow: none;
    border: none;
}

footer.x-colophon.top .widget_nav_menu ul li a {
    font-size: 16px;
    padding-left: 0;
}

footer.x-colophon.top .widget_nav_menu ul li a:hover {
    background-color: transparent;
    color: #ededed;
}

footer.x-colophon.top p {
    color: #fff;
    font-size: 16px;
}

Thanks.

#12

Hey, you withdrawn your post is everything fine now?

Thanks,

#13

Yes, realized I had some wayward text in the CSS that was messing it up. Deleted it and all went back to normal.

#14

Hi There,

It could be related to a caching issue as well. If you’re using any caching plugins, make sure to purge your server cache and also clear your browser cache before testing.

Thanks!

#15

One more question on the footer. I’d like to reduce the space between the heading (QUICK LINKS, CONTACT) and the links below them. How do I do that?

#16

Hi There,

Please add this to Theme Options > CSS

.x-colophon .widget {
    margin-top: 15px;
}

Feel free to adjust the value where you see fits,

Cheers!

#17

Perfect, thank you!

#18

You are most welcome.:slight_smile:

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.