Archived topic
Need Assistance With Styling - Horizontal Line Above Featured Image
5 replies · Started by Marty on February 23, 2021
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!
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. :)
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.
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.
Thank you so much, that did the trick! :D
No problem. :)
