CSS not Working for Elementor Widget

I’m trying your plugin and I need to style it.
I’m using elementor so I use the widget inside it to put it in a section.
I’ve activated also “Automatically add related posts to” page and post. So I view both, widget and low bar created directly by the plugin.
Then with this setting I’ve styled the widget with custom css field. But the automatic bar didn’t change. This is the css used:

.crp_related_widget img:hover {
  opacity: 0.8;
}

.crp_related_widget {
	clear: both;
	margin: 10px 0;
}
.crp_related_widget h3 {
	margin: 0 !important;
}
.crp_related_widget ul {
	list-style: none;
	float: left;
	margin: 0 !important;
	padding: 0 !important;
}
.crp_related_widget li, .crp_related_widget a {
	float: center;
	overflow: hidden;
	position: relative;
	text-align: center;
}
.elementor-widget-container .crp_related_widget li {

	margin: 5px !important;
	//border: 1px solid #ddd;
	padding: 6px;
        -webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.crp_related_widget li:hover {
	transition: .5s ease;
        background: rgba(0, 0, 0, 0.7);;
	border-color: #bbb;
       -webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.crp_related_widget a {

	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
}
.crp_related_widget a:hover {
	text-decoration: none;
}
.crp_related_widget .crp_title {

  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
        transition: .5s ease;
        opacity: 0;
	color: #fff !important;
	position: absolute;
	display: block;
	bottom: 0;
        left: 15;
	padding: 13px 50px;
	font-size: .9em;
	text-shadow: .1em .1em .2em #000;
	background-color: #181B31;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.crp_related_widget li:hover .crp_title {
      opacity: 1;
	background-color: #0099FF;
}
.crp_related_widget li {

	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
	box-shadow: 0 1px 2px rgba(0,0,0,.4);
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	list-style-type: none;
}
.crp_clear {
	clear: both;
}
.crp_title:visited {
	color: #fff !important;
}

So the widget was styled fine. Now I need to remove the automatic bar. So I go to deactivate the automatically setting, update the page, and widget has no style css.
The custom css is still there, in the right field, so I don’t undestand. Why the custom css is not applied if auto bar is deactivated? And how to solve that?

• This topic was modified 4 years, 7 months ago by BigBlack.