Remove background from recent posts on sidebar

[Lorie]

Hi. Is there a way to remove the background from recent posts in the sidebar? Also - I’ve use this css to make the full title display, but is there a way to show hyphenation? And how do I take the date off of the posts?

.x-sidebar .x-recent-posts .h-recent-posts {
font-size: 14px; white-space: normal}
}

https://lorie.warrenhardy.com/get-in-touch/

Thank you so much!

[Prasant]

Hello Lorie,

Thanks for asking.

You can add following CSS under Pro > Theme Options > CSS:

.x-code {
    background-color: transparent !important;
}

.x-recent-posts .x-recent-posts-date {
    display: none;
}

Can you please let us know where yo want to place hyphens?

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.

[Lorie]

Hi. That got rid of the date, but not the background.

Thanks. Lorie

[nabeel]

Hi again,

Please add the following code as well:

code, pre {
    background-color: transparent !important;
    padding: 0 !important;
    border: 0 !important;
}

For the hyphenation please see https://stackoverflow.com/questions/42685806/css-break-word-with-hyphen or https://stackoverflow.com/questions/32598675/how-to-make-a-word-break-with-hyphen-by-using-css

Hope this helps!

[Lorie]

Cool. Thanks. It’s getting really close! So I don’t really want hyphens, I just want the entire word to break to the next line. It’s weird that it’s breaking the words in half. See example where Spanish is on two lines. It looks ridiculous. Also - is there any way to add some padding between the posts? I’ve tried a bunch of things but can’t get any of them to work. You are the best. Thank you!

[paul.r]

Hi,

To break the entire word and add space, you can add the code below in Theme Options > CSS

@media(max-width:979px) {
.x-sidebar .x-recent-posts .h-recent-posts {  
    word-break: break-word;
}

.x-sidebar.right .x-recent-posts a {
    clear: both;
    margin-bottom: 20px !important;
    margin-right: 0 !important;
}
}

Thanks

[Lorie]

Thank you! I figured out that it was a Firefox problem and I had to set word-break to normal. It’s all perfect now!

[nabeel]

We’re glad we could help.

Cheers!