How to style hooks?

[Sonja]

Hello,

after the content, i want to have a colored box with recent posts, because I have no sidebar.

I have create a hook after primary content area and I have put the code for that in the field.
[su_posts template=”templates/list-loop.php” posts_per_page=”10″ order=”desc”]

This code i from the shortcode ultimate plugin, and shows a list of recent posts.

I can see these posts, put it sits without margin close to the content.

How can i tyle that, so that it sits in a colored box with margin? I also want a title for this post, how can I do that?

[David]

Hi there,

you would need to add some HTML around your shortcode to style it for example:

<div class="custom-recent-posts">
<h2>Recent Posts</h2>
[su_posts template=”templates/list-loop.php” posts_per_page=”10″ order=”desc”]
</div>

Then we can add some styles to it with this CSS:

.custom-recent-posts {
    padding: 40px;
    background-color: #cccccc;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sonja]

Ahh, yes that works, thanks. But the colored box has no padding and sits direct beneath the text. How can I put a padding to this box?

[David]

Can you link me to the page so i can take a look?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sonja]

unfortunately it is not public. I have noticed, that the box have only on sites no padding. In posts, there is a padding. Maybe I use the wrong hook for that?

[David]

This visual hook guide will show you where else you can place it:

https://docs.generatepress.com/article/hooks-visual-guide/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sonja]

Yes, I have changed it to after content, but the colored box has still no padding. With this hook, there is no padding on posts too.

There must be a way to make a little bit of space between text and the hooks.

[Tom]

You could adjust your CSS:

.custom-recent-posts {
    padding: 40px;
    background-color: #cccccc;
    margin-top: 20px;
    margin-bottom: 20px;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sonja]

Ahh, that does the trick. Thanks a lot!

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts