Hi,
I’m trying to add styling to the recent posts shortcode, but there are a few things I still can’t get to work.
what I want to achieve.
I’m using the shortcode: [recent_posts count=“5” orientation=“vertical” style=“width: 306px;”].
-
Remove Border, increase margin at bottom of posts, increase width. (these I think are all done)
-
Remove Image when hovering. (this I think is also done)
-
have the opacity of 0.9 when hovering… (this I can’t get to work and instead it shows opacity of the Site Links colour, selected by the theme options… instead I want the opacity to be 0.9 of the image itself just for user experience to show it been clicked.
-
Show the entire title in the content of the recent posts. (this I think is done now)
-
I’m not sure if this is possible, but when the feature image is being scaled, it’s cutting the edge of the image so the whole image doesn’t get shown.
-
remove the “permalinks: title” when hovering over the recent post, I have tried using JS to do this but it hasn’t worked.
This is the code im currently using in custom CSS section:
/* Recent Posts Styling */
/* Removes all padding (border),
increases width to 305px,
creates margin between each recent post.*/
.x-recent-posts a {
padding: 0;
margin-bottom: 30px;
width: 305px;
}
/* Removes date from the post content */
.x-recent-posts .x-recent-posts-date {
display: none !important;
}
/* removes whitespace to show full title */
.x-recent-posts .h-recent-posts{
white-space:normal;
}
/* Removes the link icon when hovering */
.x-recent-posts .x-recent-posts-img:before {
display: none;
}
/* Recent Posts Styling */
This is the code im using in the JS Section:
jQuery('.x-recent-post5 with-image a').removeAttr('title');
URL: https://www.fm-society.com
Any help would be awesome!