Footer without lines in widgets

[iknhh]

He there,
I wand to to build a footer with columns instead of the normal footer menue. Unfortunately, the theme sets lines in the pages and blog widgets (see screenshot). It’s possible to to make changes in this footer area? In which css file I have to add (or delete) code?

1. How can I get rid of the lines?
2. I’d like to have normal typo in the blog widget.
3. In best case list icons like the other columns in the blog widget as well.

Many thanks in advance,
kind regards
Daniel

[ruenel]

Hello There,

Thanks for writing in!

• To get rid of this lines, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

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

• To have a normal font style, you can use this code:

.widget > *,
.widget a {
  font-weight: normal !important;
}

• To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Please let us know how it goes.

[iknhh]

Hello RueNel,

thanks a lot for the quick help! I provide you with the URL, of cource. But it’s a kind of staging or test system with htaccess. You get the data via secure note.

Well, meanwhile I put your code in the global CSS section but same lines and font as before.

Kind regards
Daniel

[christian]

Hey @iknhh,

Please try replacing the CSS provided previously with this.

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


.widget_nav_menu ul li a, .widget_meta ul li a, .widget_pages ul li a {
    border-bottom: 0;
    box-shadow: none;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

Hope that helps.

[iknhh]

Hi there,

yes, that works, great. Thank you very much!

Well, unfortunately I can’t change the manually or individually. So I tried to insert a HTML widget with a copy of the code made by WP. But the HTML wiget gets the class “textwidget custom-html-widget” (instead of “widget widget_pages”), so there are a extra tab but no list symbols and no black font colour.

Do you have a code system for using HTML widget for the second and third footer colums that looks exactly like the pages widget? If it’s possible to change the “class in the class”?? The > befor headline would be okay.

Thanks again,
kind regards
Daniel

[basanta]

hi There,

Thanks for writing in!

The text widget having its own CSS so the list item looks different than other widgets.

You have to add custom css to make similar list item and there is no option to ad class, you have to customize the code to do that.

Please use this css to make the text widget list look similar to others.

.widget_text ul {
margin: 0px;
}
.widget_text ul li a {
    display: block;
    padding: 0.65em 0.85em;
    color: #191e1f;
}

.widget_text ul li a:after, .widget_text ul li a:before {
     line-height: 1;
    opacity: 0.35;
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.widget_text ul li a:before {
    content: "\f0da";
    padding-right: 0.4em;
}

Hope this helps.
Thanks

[iknhh]

Hi there,

yes, I think it works. There one last thing, I guess. Site links are defined with peche colour (including hover), so if the footer is HTML right now, the links are peche, not black.

I tried to change the color in .widget_text ul li to #000000 but it doesn’t work.

Sorry, I`m not a coder…

Thanks a lot,
regards
Daniel

[iknhh]

Hi again,

I had a cache problem, it does not work, unfortunately. There are no list symbols.

Kind regards
Daniel

[thai]

Hi There,

Please change the previous CSS to this:

.widget_text.widget ul {
    margin-top: 1.5em;
    margin-left: 0;
}
.widget_text.widget ul li a {
    color: #000;
    padding: 0.65em 0.85em;
    display: block;
}
.widget_text ul li a:before {
    content: "\f0da";
    padding-right: 0.4em;
}

Hope it helps

[iknhh]

Hi there,

no, unfortutaley not, it’s lind of strange, isn’t… Would you like login to backend, maybe that helps?

Thank you very much!

Kind regards
Daniel

[thai]

Hi There,

Please provide us with your admin account and password.

Thank you.

[iknhh]

Here we go:

Thank you very much!

[lely]

Hi Daniel,

Thank you for the credentials. Try this:

#custom_html-4 .custom-html-widget li a:hover {
    color: rgb(255,146,121);
}
#custom_html-4 .custom-html-widget li a {
    color: #191e1f;
}
#custom_html-4 .custom-html-widget li a:before {
    content: "\f0da";
    padding-right: 0.4em;
}

See this: https://screencast-o-matic.com/watch/cFeje7DocO

Hope this helps.

[iknhh]

Hi there,

thank you very much for the great help! But I don’t bnow, how you got these frontend output, unfortunately. I could change the global CSS the way you recommended, nothing change. Bevause of this and fpr no mistake: I take the first code snipet from RueNel to deaktivate the frame lines and so on, plus the last code from Lely, right?

BTW, why do you don’t change the widget function to make a individual order of pages instead of three fix options? For my site I only need a difrent order, nothing more.

Kind regards
Daniel

[ruenel]

Hello There,

The code and the thread is getting longer and longer? I am confused of what do you want to display the footer. Instead of using a custom html for the links, why don’t you create a custom menu and assign it to your footer? Something like this:

So I went ahead and created a custom menus in Appearance > Menus. I saved my changes and went to Appearance > Widgets. I have inserted a Navigation Menu widget and selected the menu which I have created previously.

Please check your site. Hope this would help.

[iknhh]

Hi all,

I have to apologize! A custom menus as navigation menus in the footer is the right way, yes of course and sorry! I didn’t have a clue…

Thank you!

[jade]

No problem.

Glad to hear it’s sorted.