CSS to Stop Hover Effect in Pro Theme Integrity Stack Widgets with Lists (UL, OL)

Support
#1

Hello. I’ve struggled with this for hours. Usually I can find the right selectors to change something in CSS, but the Inspector isn’t helping me find what I need…

In the Integrity Stack there is “hover effect” styling somewhere that causes a white background behind the list element… which then makes my links in my Blog Categories widget disappear because they are white. Regardless of changing the link color, I do not want the white hover background.

I’ve tried lots of things, some of them are below and got rid of borders, text shadows, box shadows, etc… but, I still can’t figure out the specific CSS to stop the white background hover effect in the integrity-light css styling.

.widget {
text-shadow: none;
border: none !important;
box-shadow: none !important;
}

.widget ul, .widget ol {
border: none !important;
box-shadow: none !important;
transition: none !important;
background-color: none !important;
}

.widget ul li {
border: none !important;
box-shadow: none !important;
transition: none !important;
}

I tried using a:hover in the list css, but the hover isn’t on the link… it’s on the space that the link is in, and nothing I’ve tried changes it.

Please help. I can’t get rid of the white hover background. Thanks!

I love Pro theme, I do, but it’s maddening really, the amount of time I spend trying to isolate and kill excessive styling in a stack because we are forced to use stacks. Fine, please create a stack called “None” with no styling. It would take less time than this, for everyone. :slight_smile:

#2

Hello Michael,

Thank you for the very detailed post information. The hover styling were applied to the list item. You may need to update your code and use this:

.widget ul li,
.widget ul li:hover {
  border: none !important;
  box-shadow: none !important;
  transition: none !important;
  background-color: transparent;
}

For more details about the :hover, please check this out:

We would love to know if this has worked for you. Thank you.

#3

Hi. Thank you. That made some progress. I didn’t think about the “transparent” style being an option.

I have this now in total for those elements:

.widget {
text-shadow: none;
border: none !important;
box-shadow: none !important;
}

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

.widget ul li,
.widget ul li:hover {

border: none !important;
box-shadow: none !important;
transition: none !important;
background-color: transparent;
}

That got rid of borders, shadows, and background colors…

Now esthetically all I need for that sidebar is to be able to control the vertical spacing between the lines for the blog categories and the recent posts widget areas.

I am not sure what the best approach is. I tried line-height on one of the widget CSS selectors, but for some reason that only worked on the blog categories and not the recent posts (it still had large gaps).

I also tried playing with padding, but that didn’t quite behave either.

Question:

  1. What is the best way to decrease vertical space between the li elements on all those widget areas, without wacking out the other styling (padding, etc.)?

Thanks for the help!

#4

Hello Michael,

The space between the list items were coming from the top and bottom padding. If you want reduce the space, you will have to override the default paddings.

.widget ul li, .widget ol li {
 padding: 0.65em 0.85em;
}

Feel free to increase/decrease the paddings. For more details of the css property, please check this out:

#5

Worked perfectly, thank you!

Is there a list of the selectors that are being targeted by the Integrity stack in Pro theme for the Woocommerce tabs/custom tabs?

I’ve been able to do mild restyling for the tab text and pane background with these, which helps:

.x-nav-tabs.top > li a {
color: rgb(52,67,91);
font-weight: 600;
}

.x-tab-content .x-tab-pane {
background-color: rgba(52,67,91,0.3);
}

But, there are other things I can’t find with the inspector:

borders on the pane,
borders on the tabs,
other styling on the active tabs that does not stay symmetrical with the first tab because of outline/border effects, etc.

I can find some selectors to target, but only just enough to make it look wonky.

Any insight as to which selectors will give me total control over those things?

Thanks?

#6

Hey Michael,

As you see this requires custom development as this is not a theme feature by default and is outside of our support scope, but we could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here. However If you need more in depth changes, you may wish to consult with a developer.

One of the best things you can do to get a good overview of the classes and associated stylings is take advantage of the Inspect Element feature in Chrome . To do so, simply right-click on any part of your page that you want to take a look at and select Inspect Element from the dropdown that appears. Once you do that, a popup should appear at the bottom of your browser with markup ( HTML ) on the left and styling ( CSS ) on the right. You can then browse the markup of your site, select certain elements, and see what styling is applied to these elements via their selectors. This is a great tool to take advantage of if you have any questions about how an element is styled and what you can do to alter it.

If you’re still having issues finding the selectors then this thread will be helpful to you Tab Borders, Shapes, and Colors Product Pages

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

#7

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