Archived topic
How to style hooks?
9 replies · Started by Marius on June 9, 2019
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?
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;
}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?
Can you link me to the page so i can take a look?
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?
This visual hook guide will show you where else you can place it:
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.
You could adjust your CSS:
.custom-recent-posts {
padding: 40px;
background-color: #cccccc;
margin-top: 20px;
margin-bottom: 20px;
}Let me know :)
Ahh, that does the trick. Thanks a lot!
You're welcome :)
