I'm noticing that WPForo is interfering with the styling of some elements in the sidebar (Specifically an Elementor button - attached an example).
The button looks correct on all other pages on the website, just not on WPForo.
How can I prevent wpforo styles being applied to the sidebar?
Hi @vanessa,
It because you use the wpForo Sidebar. We could help to remove the CSS conflict if you leave the forum URL where we can see the widget.
Thanks, here's an example of the page where it's not showing correctly: https://transgenderheaven.com/community/
Scroll to the bottom and see the last item in teh sidebar.
Here's an example of what it should look like: https://transgenderheaven.com/the-magic-of-memories/
At the top (attached for reference as well).
try
#wpforo #wpforo-wrap .elementor-143034 .elementor-element.elementor-element-8efddb1 {
display: flex;
background-transition: 0.3s;
overlay-opacity: 0.5;
padding-block-start: 20px;
padding-block-end: 20px;
padding-inline-start: 20px;
padding-inline-end: 20px;
}
#wpforo #wpforo-wrap .elementor-element .elementor-widget-container {
border-radius: 3px;
}
#wpforo #wpforo-wrap .elementor-element .elementor-widget-container h2 {
font-weight: 300;
line-height: 36px;
font-family: open sans;
font-size: 26px;
margin-bottom: 15px;
}
#wpforo #wpforo-wrap .elementor-element .elementor-widget-container h3 {
font-weight: 300;
line-height: 28px;
font-family: open sans;
font-size: 22px;
margin-bottom:10px;
}
#wpforo #wpforo-wrap .elementor-button-content-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
#wpforo #wpforo-wrap .elementor-button-text {
font-size: 16px;
}
#wpforo #wpforo-wrap .elementor-143034 .elementor-element.elementor-element-e5c9a41 .elementor-button {
fill:#FFFFFF;
color:#FFFFFF;
background-color:#1E6595;
padding:20px 20px 20px 20px;
}
#wpforo #wpforo-wrap .elementor-143034 .elementor-element.elementor-element-e5c9a41 .elementor-button:hover,
#wpforo #wpforo-wrap .elementor-143034 .elementor-element.elementor-element-e5c9a41 .elementor-button:focus {
background-color:#2C98E0;
}
#wpforo #wpforo-wrap .elementor-143034 .elementor-element.elementor-element-e5c9a41 .elementor-button svg {
fill: #FFFFFF;
color: #FFFFFF;
}
#wpforo #wpforo-wrap .elementor-button-icon .e-font-icon-svg {
height: 1.2em;
width: 1.2em;
}
#wpforo #wpforo-wrap .elementor-143034 .elementor-element.elementor-element-e5c9a41 .elementor-button .elementor-align-icon-left {
margin-right: 14px;
}
@tutrix Thank you! Very much appreciated!