Custom CSS for thumbnails doesn’t work after updated

Resolved

(@wasserbogen)

Hi, I have been using Custom CSS for years to get the thumbnails as what I want while the “Rounded thumbnails” styles option has been chosen. The thumbnails were as the first screenshot showing below: no border or shadow, square corners, smaller title font size.

Yesterday I updated the plugin to the latest version and found out the thumbnails showing like below. They have borders so they are bigger than before and 6 thumbnails don’t have enough room to array in one line, and there are round corners and bigger title font size. Whether I have the Custom CSS or not the results are the same. So I think for some reasons the Custom CSS doesn’t work any more.

I’d like to change the thumbnails back to what I had before(like the first pic), could you give me some advices please? Thank you!

The Custom CSS I currently have was from this forum too, many years ago. I put them below.

.crp_related {
	clear: both;
	margin: 10px 0;
}
.crp_related h3 {
	margin: 0 !important;
}
.crp_related ul {
	list-style: none;
	float: left;
	margin: 0 !important;
	padding: 0 !important;
}
.crp_related li, .crp_related a {
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
}
.crp_related li {
	margin: 5px !important;
	border: 0px solid #ddd;
	padding: 0px;
}
.crp_related li:hover {
	background: #eee;
	border-color: #bbb;
}
.crp_related a {
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
}
.crp_related a:hover {
	text-decoration: none;
}
.crp_related .crp_title {
	color: #fff !important;
	position: absolute;
	display: block;
	bottom: 0;
	padding: 3px;
	
	font-size: .6em;
	text-shadow: 1000 .1em .1em .2em;
	background: rgb(0.5, 0.5, 0.5);
	background: rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.crp_related li:hover .crp_title {
	background: rgb(0.2, 0.2, 0.2);
	background: rgba(0, 0, 0, 0.8);
}
.crp_related li {
	vertical-align: bottom;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.crp_clear {
	clear: both;
}
.crp_title:visited {
	color: #fff !important;
}

This topic was modified 3 years, 9 months ago by wasserbogen.

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author Ajay
(@ajay)

3 years, 9 months ago

If you’re using rounded thumbnails please can you change the above selectors to use .crp_related.crp-rounded-thumbs

In line with the below CSS:
https://github.com/WebberZone/contextual-related-posts/blob/master/css/rounded-thumbs.css
Thread Starter wasserbogen
(@wasserbogen)

3 years, 9 months ago
Thank you very much! After I replaced all with “.crp_related.crp-rounded-thumbs” it works.

And after testing several times I also realize that only three parts are necessary for the effect I want:
```
.crp_related.crp-rounded-thumbs li {
	border: 0px;
        padding: 0px;
}
.crp_related.crp-rounded-thumbs .crp_title {
	font-size: .6em;
	border-radius: 0px;
}
.crp_related.crp-rounded-thumbs li {
	box-shadow: none;
	border-radius: 0px;
}
```
PS: I’m just wondering what the codes with “webkit-“”moz-” relate to. Whether I removed them or not，nothing changed.
- This reply was modified 3 years, 9 months ago by wasserbogen.
Plugin Author Ajay
(@ajay)

3 years, 9 months ago

That was for the older version of FF because of the way borders were handled. They can be deleted now. I’ll clean them up eventually.

Thread Starter wasserbogen
(@wasserbogen)

3 years, 9 months ago

I see. Thank you very much for the explanation!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Custom CSS for thumbnails doesn’t work after updated’ is closed to new replies.

Tags