[Support request] How do I get this border?

Home Forums Support [Support request] How do I get this border?

Home Forums Support How do I get this border?

Viewing 15 posts - 1 through 15 (of 40 total)
  • Author
    Posts
  • #2197271
    Heath

    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.

    #2197294
    Leo
    Staff
    Customer Support

    Hi there,

    Please link us to the live site that shows the example.

    #2197347
    Heath

    I put it in the private window.

    #2197424
    Ying
    Staff
    Customer Support

    Can you also link us to your site and point out where you want to apply this border to?

    #2197436
    Heath

    Yes. I’ll notate it in the private section.

    #2197452
    Ying
    Staff
    Customer Support

    Do you want something like this?
    https://www.screencast.com/t/Z7MXE5Qe

    If so, try these steps:

    1. Set the headlineblock align 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 the headlineblock under spacing section.

    #2197475
    Heath

    Yes that’s what I want. I’m sorry….I’m not getting step 3.

    #2197479
    Heath

    Still not sure about step 3 but this is not working.

    #2197536
    Ying
    Staff
    Customer Support

    Select the headlineblock (Baseball), set its bottom border size to 2 or any size you want:
    https://docs.generateblocks.com/article/headline-overview/#spacing

    #2197544
    Heath

    Hmmm….unfortunately this is not doing anything for me.

    #2197607
    David
    Staff
    Customer Support

    Hi there,

    after setting the Bottom Border on the Headline Block, go to the Color settings and give it a Border Color

    #2197964
    Heath

    I’ve done that but the CSS doesn’t give me that shape I am looking for.

    #2198755
    Ying
    Staff
    Customer Support

    1. 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/Vt1ZrMeARRy

    #2198855
    Heath

    I 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.

    #2198925
    Fernando
    Customer Support

    Hi 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/4guKGyGL

    Then 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. 🙂

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