Alter css of recent posts per post category

[clefler]

I would like to change the way the recent posts look but only when I have put the shortcode in the sidebar widget of a specific category.

The biggest change would be to have the text wrap instead of run off.

Thanks!

[mldarshana]

Hi There,

Thanks for writing in! As we cannot provide modifications for your custom development requirements, I can guide you on where you can find the related function and how you can override it using your child themes. If you haven’t setup a child theme yet, please follow this guide (https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57).

Basically the related function you can locate under your Cornerstone plugin (/wp-content/plugins/cornerstone/includes/shortcodes/recent-posts.php).

To extend it’s functionality, you can copy the function x_shortcode_recent_posts (line no 6 to line 87) and place it into your child theme’s functions.php file. Then rename the function header for example x_shortcode_recent_posts_extended_version.

Then below your function, you can add the following code.

add_action('wp_head', 'extend_recent_post_shortcode');
function extend_recent_post_shortcode() {
  remove_shortcode( 'x_recent_posts' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_extended_version' );
}

Now you can add any customization to your recent post shortcode within your child theme.

Hope that helps.
Thanks!

[clefler]

So you are saying I can make as many copies of the recent posts shortcode function as I need and just reference them whenever I place the shortcode?
So instead of using [recent_posts count=“1”] it could be [recent_posts_extended count=“1”]…?

Also, could you provide the css to make recent posts wrap instead of run off?

Thanks!

[rad]

Hi there,

Yes, that’s how shortcode works. But you can only use them as a shortcode and not a cornerstone element.

What do you mean by running off? Is it the image or the title? I checked a sample and I’m not sure what you wish to wrap, but I think it’s doable with a bit of CSS snippet.

Thanks!

[clefler]

For example…the image below shows a recent posts title ending in “dot dot dot” instead of the title wrapping to the line below.

[jade]

Hi there,

Please try to add this code in the custom CSS:

.x-recent-posts .h-recent-posts, 
.x-recent-posts .x-recent-posts-date {
    overflow: visible;
    text-overflow: inherit;
    white-space: inherit;
}

Hope this helps.