[Support request] How do I get this border?

[David]

Ok so its all set up and i think it looks as you need it? Can you confirm ?

[Heath]

The categories one is spot on but the latest articles one seems a little weird.

[David]

This is what i am seeing ?

[David]

On the latest articles you can adjust the left and right margin of the Headline block to align it horizontally, but don’t adjust anything else 🙂

[Heath]

On my mobile device it is showing really weird. There’s a white line and the color isn’t matching.

Also I tried to update a post to see if it would show the same and I did the same steps but just got an underline.

[Fernando]

Not sure if this whitespace is apparent on real device. Tried view it from my personal phone and couldn’t replicate the whitespace. Are you seeing this on a real phone?

You can also try replacing this:

.my-custom-headline mark:after {
    position: absolute;
     content: '';
     width: 0;
     height: 0;
     border-style: solid;
     border-width: 1.6em 0 0 1.6em;
     border-color: transparent transparent transparent var(--contrast-2);;
     top: 0;
     right: -1.6em;
}

With this:

.my-custom-headline mark:after {
    content: "";
    position:absolute;
    left:0;
    bottom:0;
    width:116%;
    height:103%;
    background-color: var(--contrast-2);
    z-index:-1;
    -webkit-clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 100%, 0% 100%);
    -moz-clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 100%, 0% 100%);
}

.my-custom-headline mark {
    z-index: 999;
    position:relative;
    white-space:nowrap;
}

With regards to the color of the border bottom, the colors are the same/matching. It seems to only appear like it doesn’t probably because of the white background.

Hope this clarifies. 🙂

[Heath]

Thanks. I will give that a shot. How do I get this same thing on other Headlines?

[Fernando]

To apply this to any other Headline Block, kindly highlight the text of the Headline Block, and add my-custom-headline to its classes as such: https://share.getcloudapp.com/2NuzQdjZ

Hope this clarifies. 🙂

[Heath]

Last couple of questions on this.

1. Why is this not working for the Baseball headline?

2. Can I make each headline a different color and still keep that same shape?

[Fernando]

1. The code only works for highlighted Headline Blocks. Example: https://share.getcloudapp.com/GGulgz6B. The Baseball Headline isn’t highlighted.

2. Are you referring to the Background Color or the text color? Both are currently set through code. For the Background color, you’ll need custom code once more to modify them independently. For the text color, you can try removing the color rule(color: #fff;) in your code:

.my-custom-headline mark {
	position: relative;
	padding: 5px 10px;
	background-color: var(--contrast-2);
	color: #fff;
}

then, set the color in the Block settings.

Hope this clarifies. 🙂

[Author]

Posts