[Resolved] Need Assistance With Styling – Horizontal Line Above Featured Image

Home Forums Support [Resolved] Need Assistance With Styling – Horizontal Line Above Featured Image

Home Forums Support Need Assistance With Styling – Horizontal Line Above Featured Image

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1669969
    Marty

    Hey guys, sorry to bother you! However, despite searching plus trying some custom CSS on my own I have not been able to resolve this correctly.

    I am using an Element with Hook > generate_after_entry_title placement to insert a simple horizontal line above the featured image, regardless of whether or not the featured image appears.

    I am hoping to replace the shortcode with something simple & lightweight like a CSS snippet, etc. When I tried to do this I ended up with line on the top edge of the featured image.

    The Shortcodes Ultimate line element is 1px wide, solid, color #e3e3e3, 10px margin on the top & bottom. (Please see included URL)

    Thank you very much. I really appreciate your help!

    #1669972
    Elvin
    Staff
    Customer Support

    Hi there,

    Can you specify how you want it styled? Do you have any mockup images or a reference site you want to replicate?

    Let us know. πŸ™‚

    #1669988
    Marty

    Hello Elvin I’m sorry if I wasn’t clear. I just want to replicate what I’m currently doing with a shortcode 1px width, solid #e3e3e3 with about the same spacing top & bottom.

    But replace the shortcode with something like CSS if possible. Thank you so much! πŸ™‚

    **Yes, you should see my example URL when I opened the thread.

    #1669996
    Elvin
    Staff
    Customer Support

    Ah right.

    Well, you can always create your own divider.

    Example:

    <div class="my-divider"></div> to be placed on the Hook Element.

    With this as styling:

    .my-divider {
        height: 1px;
        background-color: #e3e3e3;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    height value is the thickness of the divider line, background-color is the color of the line. width is the lenght of the line and the margins control the alignment.

    #1670116
    Marty

    Thank you so much, that did the trick! πŸ˜€

    #1670119
    Elvin
    Staff
    Customer Support

    No problem. πŸ™‚

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