[Resolved] How to add padding around an object inserted using GP Hooks

Home Forums Support [Resolved] How to add padding around an object inserted using GP Hooks

Home Forums Support How to add padding around an object inserted using GP Hooks

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1626882
    Tom

    Hi I used the Hooks feature to add an item after my title. I would like to add more margin/padding to this item, what is the best way to do this?

    Image: https://drive.google.com/file/d/132OXxk2GZRIKXYRQGwmC_qwPrNaNNw5b/view?usp=sharing

    Thanks,
    Tom

    #1626937
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know 🙂

    #1627044
    Tom

    Yes okay, I put the example page in the private info.

    #1627060
    Leo
    Staff
    Customer Support

    Try this CSS:

    .span-reading-time.rt-reading-time {
        display: block;
        padding-top: 15px;
    }
    #1627140
    Tom

    Thanks, that works. I adjusted it a little.

    For the hooks feature, is there a way to place two elements at the same hook location but have them parallel? i.e. I am thinking of having the author name on the left side and the reading time on the right side on the same line as each other.

    #1627153
    Elvin
    Staff
    Customer Support

    Hi there,

    For the hooks feature, is there a way to place two elements at the same hook location but have them parallel? i.e. I am thinking of having the author name on the left side and the reading time on the right side on the same line as each other.

    It’s certainly possible with CSS. You can change the display property of your “reading time” from display: block; to display: inline-block; so it says inline with all its other sibling elements.

    You can add in the author name and let us know so we could check the HTML structure of of your site and help you out with the CSS write up to achieve the desired layout.

    Let us know.

    A wise man once said:
    "Have you cleared your cache?"

    #1629713
    Tom

    Thanks, Elvin. So I have both items that I want to place there now and I used “display: in-line block;” as you suggested.

    If you take a look at my screenshot attachment (in private info), I would like to align right the “reading time” element while keeping the “written by Author” element on the left side. I tried “text-align: right;” but it doesn’t seem to work. Also, adding the “in-line block” part seems to override my previous padding/margin adjustments, is there a way to get those to work as well?

    Thank you!
    Tom

    #1629928
    Leo
    Staff
    Customer Support

    Not sure if I understand what you are after here.

    Can you explain a bit more?

    Please also copy and paste your hook content here. Make sure to highlight the code and click the code button in the editor.

    #1632902
    Tom

    Here is the image explanation: https://drive.google.com/file/d/1x1K2djb4CQNHK8Q3ECY_vx1k1MF0UKk9/view?usp=sharing

    Hook code:
    [rt_reading_time label="" postfix="min read" postfix_singular=""]

    Hook code:
    [molongui_byline before='Written by ']

    I am using two separate hooks here.

    #1633116
    Ying
    Staff
    Customer Support

    Hi Tom,

    You just wanna the reading time after written by?
    If so, try to switch the 2 short code’s order in hook content area.
    Let me know 🙂

    #1634499
    Tom

    Hi, no I want “Written by” on the left side (left align) and “Reading Time” to be right aligned, but both on the same line. Please see my image.

    #1634551
    Tom

    So here is a screenshot of the CSS I’m using (based on previous replies in this thread): https://drive.google.com/file/d/1dOF7dE0umCIEXD7e–n000lLPH2MCtuW/view?usp=sharing

    The problem is this: I need to keep display: in-line block; or else the “reading time” element will not stay on the same line. But if I keep this part, the text-align: right; doesn’t work anymore and the adjustments in padding and margin don’t work either.

    See this screenshot of what happens without the in-line part: https://drive.google.com/file/d/1yyI8SdUhG33QSkj5o1j5OXqF-asGxx7v/view?usp=sharing

    Hopefully that clears things up. My objective is to have i) the 2 elements on the same line (I have the shortcodes in the same hook now), ii) “reading time” aligned on the right side, and iii) make small adjustments to the padding/margin so it shows up nicely.

    Thanks!

    #1634672
    David
    Staff
    Customer Support

    Hi there,

    try:

    .span-reading-time.rt-reading-time {
        float: right;
    }
    #1634704
    Tom

    Perfect, that worked. Thanks, David!

    The last thing I’m trying to do is adjust the padding/margin. Is it possible to apply the CSS to everything inside the hook? (I am using the hook: generate_after_entry_title). Or do I have to apply it to each individual class?

    I ask because I know how to adjust the CSS for .span-reading-time.rt-reading-time but the other item “Written by Author” comes from a shortcode (by a third-party plugin) and I don’t see a class for it in HTML inspector.

    Thanks,
    Tom

    #1634901
    David
    Staff
    Customer Support

    You will need to wrap all the content in its own <div> eg.

    <div class="custom-container">
    Your current code in here
    </div>

    you can replace the custom-container class with whatever you want eg. toms-meta-box then some style can be added to that eg.

    .toms-meta-box {
        padding: 20px;
    }
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.