Styling for Recent Post

Support
#1

How can I get rid of the box shadow for recent post.
I would also like to be able to control the size of the post as well.
Thank you

#2

Hi Nat,

Please add this code in X > Theme Options > CSS:

.x-recent-posts a {
    box-shadow: none;
}

.x-recent-posts .h-recent-posts {
    font-size: 20px;
}

.x-recent-posts .x-recent-posts-date {
    font-size: 12px;
}

Hope this helps.

Recent Posts Class Element
#3

Awesome thank you.
Couple of more questions

  1. How can I align the copy to the image
  2. How can I control the size of the recent post.
    Please see the attached image for reference
    Here is the code I am currently using.
    /* Recent Posts Styling /
    /     Removes all padding (border),
    increases width to 305px,
    creates margin between each recent post.*/
    .x-recent-posts a {
    padding: 0px;
    margin-bottom: 0px;
    width: 100%;
    text-align: center;
    font-size: 20px;
    border: none;

}
/* 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;
}
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after {
opacity: 0.90;
}
.x-recent-posts .x-recent-posts-img {
padding-bottom: 55.3;
background: center center/contain no-repeat;
}
Thanks,
Image of my ultimate goal
.

#4

Hello Nat,

Thanks for updating the thread.

Further we require the website page URL to share the correct solution. Please share the website URL for us to take a closer look at the setup.

Thanks.

#5

Here you go
https://www.hustlehardercontent.com towards the bottom of the page.
Thank you

#6

Hi Nat,

Try this:

.x-recent-posts article.hentry>.entry-wrap {
    text-align: left; /*Change to your preferred alignment*/
}

Note that recent post by default will occupy the entire container. If you want to control it’s width, please set maximum width on the ROW where this is added.

Also, note that CSS added on Theme Option > Global CSS will work on all recent post. If you intend those adjustment on that page only, please add it on the Page > Content CSS.

For more guidance on CSS adjustment, please check the following:

#7

Thank you guys so much!
Also thank you for the reference for CSS.
Last question.
How do I get rid of the padding on the left and right of the post?
Text is currently align left but to the padding not the image.
Thank you!

Picture below is reference

#8

Hello Nat,

Thanks for updating the thread. :slight_smile:

Please add following CSS under Pro > Theme Options > CSS:

.x-recent-posts .x-recent-posts-img {display: list-item;}

.x-recent-posts .x-recent-posts-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#9

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