Footer text an social icons styling

Support
#1

Hi there,

It seems I have some styling issues regarding the footer.

I have currently this:

And it needs to be something like this, but then only facebook and instagram icons:

The “website design” text should have a link.

The whole footer should be small like in the second screencast.

  1. My footer has now two widgets, one text and one html.
    html:

Also some css:
footer.x-colophon.top {
background-color: #454545; /Change to your preferred background color/
}
footer.x-colophon.top .h-widget {
color: black; /Change to your preferred color/
}
footer.x-colophon.top {
text-align: center;
}
.textwidget .x-social-global {
text-align: center;
}
.textwidget .x-social-global a {
font-size: 24px;
margin: 4px 15px;
text-decoration: none;
}
.textwidget .x-social-global a:hover {
opacity: 0.7;
color: #fff;
}
.x-colophon.bottom .x-social-global a {color: #000;}
.x-colophon.bottom .x-nav li a {text-decoration: none;}
.x-colophon.bottom .x-nav li a {color: #000; font-size: 18px;}

  1. It also seems i have this second footer menu area, which is probably enabled from an old theme.
    I cannot find a way to remove it.

Could you help out?

#3

Hey @switteveen,

To turn your text into a link, wrap it with an anchor tag like this:

Use the Custom HTML widget and not the Text widget if you’re using the latest version of WordPress.

To make text and links in Ethos widgets white, add this code to your CSS

.widget,
.widget a {
    color: #fff;
}

Ethos widgets also have a top border design so to remove that, add this CSS

.widget:before {
    display:none;
}

Hope that helps.

#4

Hi this helped! Do you by chance have a suggestion to narrow down the footer hight, and to delete the so called colophon bottom placeholver (white)? This seems to be a reminder of an old theme but i’m struggling with footer menu’s on this topic.

#5

Here’s the CSS

/* Narrow the top footer section */

.x-colophon.top {
    padding: 2% 0 2.25%;
}

/* Hide the bottom footer section */

.x-colophon.bottom {
    display: none;
}

Hope that helps.

#6

yeah thanks!

#7

You are welcome!

#8

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