Unordered list in sidebar has a border where there used to be none

[lypa]

Hi there

We use an “unordered list” style as a sidebar menu style for our products page (https://www.morga.ch/sortiment/). After several updates this style seems to be lost, and menu items are showing in the typical X-menu look. I tried to fix it, but can not find the correct CSS selector or style to fix it (screenshot):

Would you mind taking a look at that?

Thank you,
lypa

[mldarshana]

Hi Lypa,

Thanks for writing in! Could you please try adding the following CSS rules into your X > Theme Options > CSS area and see if that helps.

.widget ul, .widget ol {
    border: none;
}
.widget ul li, .widget ol li {
    border-bottom: none;
}
.widget ul li a, .widget ol li a {
    border-bottom: none;
}

Hope that helps.

[lypa]

Hello there,

Thank you for helping. The grey border is now gone, but there are still some things different from the style we used to have:

• white flat “hover” style (instead of red text hover)
• white ghost borders between lines
• indents on the left where there should be no padding
• too much line-height

The link list on the first sidebar paragraph (“MORGA Produktgruppen A–Z”) still has the correct style and this is what all other links lists on this “products” page should look like.

Also, all other pages should be untouched from these changes. Now, they show the same “wrong” style (e.g. https://www.morga.ch/ueber-uns/).

I assume this is why we used a special class “products” for this ul in the widget which was

<ul class="products" style="list-style: none; margin-left: 0; padding-left: 0; line-height: 2em;">

This was used as a special style just for the products page, not as a global style. I had to comment the style out for now, because it should not affect other sections of our site.

Would you mind taking another look at it?

Thanks a lot,
lypa

[Prasant]

Hello Ipya,

Thanks for updating the thread.

Please add following CSS to change the hover color:

.x-sidebar.left .widget ul li a:hover {
    color: #6b626f !important;
}

Other Widget box style looks fine to me. However, if you would like to mimic the style of first list item then add followng CSS:

.x-sidebar.left .widget ul li a:hover {
    color: #6b626f !important;
}

.widget ul li, .widget ol li {
    box-shadow: none;
    border: 0 !important;
    padding: 2px;
}

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

.widget ul li a {
    border-bottom: 0;
}

.widget_text ol li:hover, .widget_text ul li:hover{background-color: #fff;}

If you would like to limit the changes to particular or group of pages then please use page id feature of WordPress. You can take a look at following tutorial for more information:

How to Locate Post IDs | Themeco Docs

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[lypa]

Hello Prasant,

thank you for helping. I am not sure if i articulated my problem well enough. We use inline CSS within the widget to “stick” the style to this item.

And before the latest theme etc. updates this worked perfectly well and looked like this:

But after the updates it started to show those “boxes” around the link lists like this:

And if i am trying to fix it inline like here (widget - backend):

I get this (frontend):

So from my point of view something “broke” because of updating the theme. Would you mind taking another look at this and help me figure out how i can fix this within our current setup? Please understand that I do not have the time to re-structure everything because of an update.

Thank you,
lypa

---

Hello Paul,

yes now it looks good again. I noticed a little typo (border “;” instead of “:”) in this line

.widget.widget_text_icl ul.products li a {

border;0;
}

which kept the dotted underline, but after correcting that to

.widget.widget_text_icl ul.products li a {
border: 0;
}

everything looks fine now.

Thanks a lot,
lypa

[paul.r]

Hi Lypa,

It looks like you are using different text widgets?

To make it look the same, you can add this in Theme Options > CSS

.widget.widget_text_icl ul.products li {
    text-decoration: none;
    border: 0;
    padding: 0;
    background-color: transparent;
    box-shadow: none;
    outline: none;
}

.widget.widget_text_icl ul.products li a {
   border;0;
}

.widget.widget_text_icl ul.products {
   border:0;
   box-shadow:none;
}

.widget.widget_text_icl ul.products li:hover {
    background-color: transparent;
}

Hope that helps.