- This topic has 39 replies, 5 voices, and was last updated 1 year, 10 months ago by Fernando.
-
AuthorPosts
-
April 22, 2022 at 10:21 am #2197271Heath
I am wanting to see how I get this border on the categories. I want the border shape that is in red and have no idea how to get it.
April 22, 2022 at 10:44 am #2197294LeoStaffCustomer SupportHi there,
Please link us to the live site that shows the example.
April 22, 2022 at 11:49 am #2197347HeathI put it in the private window.
April 22, 2022 at 2:06 pm #2197424YingStaffCustomer SupportCan you also link us to your site and point out where you want to apply this border to?
April 22, 2022 at 2:18 pm #2197436HeathYes. I’ll notate it in the private section.
April 22, 2022 at 2:44 pm #2197452YingStaffCustomer SupportDo you want something like this?
https://www.screencast.com/t/Z7MXE5QeIf so, try these steps:
1. Set the
headline
blockalign left
.2. Add this CSS:
p.gb-headline.gb-headline-c3626160 span.gb-headline-text { background-color: black; padding-left: 1em; padding-right: 0.5em; position: relative; margin-left: -1em; } p.gb-headline.gb-headline-c3626160 span.gb-headline-text:after { position: absolute; content: ''; width: 0; height: 0; border-style: solid; border-width: 1.5em 0 0 1.5em; border-color: transparent transparent transparent #000; top: 0; right: -1.5em; } p.gb-headline-c3626160 .gb-icon { z-index: 2; }
3. Add
bottom border
for theheadline
block under spacing section.April 22, 2022 at 4:17 pm #2197475HeathYes that’s what I want. I’m sorry….I’m not getting step 3.
April 22, 2022 at 4:56 pm #2197479HeathStill not sure about step 3 but this is not working.
April 22, 2022 at 9:10 pm #2197536YingStaffCustomer SupportSelect the
headline
block (Baseball), set itsbottom border
size to2
or any size you want:
https://docs.generateblocks.com/article/headline-overview/#spacingApril 22, 2022 at 9:52 pm #2197544HeathHmmm….unfortunately this is not doing anything for me.
April 23, 2022 at 2:08 am #2197607DavidStaffCustomer SupportHi there,
after setting the Bottom Border on the Headline Block, go to the Color settings and give it a Border Color
April 23, 2022 at 8:31 am #2197964HeathI’ve done that but the CSS doesn’t give me that shape I am looking for.
April 24, 2022 at 10:44 am #2198755YingStaffCustomer Support1. Set the headline block to align left.
2. I’m not seeing a bottom border added to the headline block, can you make sure?
https://www.screencast.com/t/Vt1ZrMeARRyApril 24, 2022 at 2:58 pm #2198855HeathI am doing this on a page that is not published yet. I’ve done all the steps that you have advised and it still does not have that shape.
April 24, 2022 at 7:18 pm #2198925Fernando Customer SupportHi Heath,
If you would like this dynamically to any Headline you want, kindly add class
my-custom-headline
to the Headline Block as such: https://share.getcloudapp.com/4guKGyGLThen replace the current CSS code with this:
.my-custom-headline span.gb-headline-text { background-color: black; padding-left: 1em; padding-right: 0.5em; position: relative; margin-left: -1em; } .my-custom-headline span.gb-headline-text:after { position: absolute; content: ''; width: 0; height: 0; border-style: solid; border-width: 1.5em 0 0 1.5em; border-color: transparent transparent transparent #000; top: 0; right: -1.5em; } .my-custom-headline .gb-icon { z-index: 2; }
Now, add the Border Bottom as such: https://share.getcloudapp.com/2NuzoXQe
Kindly let us know how it goes. 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.