[Resolved] How to style hooks?

Home Forums Support [Resolved] How to style hooks?

Home Forums Support How to style hooks?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #923831
    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?

    #923834
    David
    Staff
    Customer Support

    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;
    }
    #923847
    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?

    #923851
    David
    Staff
    Customer Support

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

    #923853
    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?

    #923861
    David
    Staff
    Customer Support

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

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

    #923863
    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.

    #924092
    Tom
    Lead Developer
    Lead Developer

    You could adjust your CSS:

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

    Let me know 🙂

    #924130
    Sonja

    Ahh, that does the trick. Thanks a lot!

    #924170
    Tom
    Lead Developer
    Lead Developer

    You’re welcome 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.