Docs

[Rue Nel]

Hello Again,

To add a right border, simply use the given css code:

.ss-style-triangles::after {
    border-right: solid 1px;
    border-color: inherit; 
}

http://prntscr.com/b9dsil

This code will only give right border to the :after of the section with the custom ss-style-triangles class. Since you added an inline border-width: 0px 0px 1px; css in the section, this would mean that the :after will inherit the bottom border but no right border. That is why we have to add a right border which is by using the code above.

Hope this explains it briefly.

[jrhager84]

Right. I understand that point, however, now that border is static. Therefore, if I add a border of say 2px, this code will only apply a 1px border to that one side. If I’m reading that correctly.

It also leads me to believe that CSS has no way of looking at what another value is in the code. Am I correct in that assumption. If so — Bummer.

[Christopher]

Hi there,

Currently you added inline CSS to your sections and it overwrite custom CSS inside child theme or customizer.

Please edit section #2 style field and update the inline CSS border-width: 0px 0px 1px; to border-width: 0px 1px 1px 0;
See the attachment.

Hope it helps.

[jrhager84]

I’m assuming the ‘inline’ css that you’re referring to is the GUI border from Cornerstone, which is what I want to control all of it. As it stands now. I can adjust the type of border and the color/size, and everywhere except the right side of that triangle follow. If I add a right border, a right border will appear on the section as well; Not just the triangle. That’s why I wanted the right side to inherit either the bottom of the same child element, or it’s parent (the section). That way, I can set the border type and color in Cornerstone, and the class will automatically inherit what I set.

[Rue Nel]

Thanks for sharing.
If you need anything else we can help you with, don’t hesitate to open another thread.

[jrhager84]

So does that mean there’s no way in CSS for the right border of the ::after pseudo to inherit the bottom-border property of it’s parent container to the right border? Is it something I’ll have to code in JS?

[Christopher]

Hi there,

If you don’t want to use CSS to style the element you should add right border to section #2, otherwise you can achieve it with current CSS that you already added:

.ss-style-triangles::after {
    border: inherit;
    border-right: solid 1px;
    bottom: -26px;
    z-index: 0;
    background: inherit;
}

Hope it helps.

[jrhager84]

I feel like we’re ‘circling the airport’ so-to-speak. I understand all of that, and I appreciate the help getting there. What I’m now finally asking is whether or not it’s possible for the right border to inherit the bottom border of itself, or the bottom border of its parent. That’ll tell me everything I need to know. If I add a right border in section #2, it’ll put a right border down the right side of that container as well, which obviously isn’t desired… Thanks, and sorry for the confusion…

[Rupok]

Hi there,

Thanks for writing back and sorry for the confusion. When we are okay with few tweaks, we really can’t assist on something unusual or complex custom development. Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[jrhager84]

That’s all I’m asking. If it was too complicated for you guys, so you can’t provide a solution, then say it. I just find it odd that getting a right border to inherit a bottom border property was so ‘complex’ or convoluted, and find it even *more* odd that it took this long for us to finally get to this point in understanding what I was asking.

At least I know where we stand now. Thank you for clarifying, Rupok.

[Rad]

Hi there,

Sorry for the confusion, but let me answer your question 🙂

So does that mean there’s no way in CSS for the right border of the ::after pseudo to inherit the bottom-border property of it’s parent container to the right border? Is it something I’ll have to code in JS?

Yes, it’s not possible. The CSS is rather a hack to achieve the border on 3 side element. Changing one side will not change the other, all sides should be changed. A slight change from another side will affect the overall look of your 3 side element. And it can’t be done through javascript since elements that use pseudo selectors such as :after or :before aren’t selectable through javascript.

Thanks!

[jrhager84]

…but what if I created a function where .ss-style-triangles (or whatever the variable is) adopts the border-right value by looking at the border-bottom of its parent container outside of the pseudo? Then, the ::before and ::after pseudos could have an inherit call, and it should work, correct? and if I wanted to override it, I could just denote the pseudo declaration !important, if I am not mistaken.

My mind is slowly wrapping around the nuance, so it’ll take some time. Though, through this excursion, I’ve learned quite a bit already.

[Rad]

Hi there,

By manually changing border-right and copy border-bottom, then yes, it’s possible. But to do it automatically, it’s not possible.

Border style inheritance will not work on pseudo selectors.

What you could do is create predefined class names (eg. .ss-style-triangles1, .ss-style-triangles2, .ss-style-triangles3, and so on) with different values, then toggle it with javascript.

Hence, you can indirectly change the value of :before and :after’s border by switching classes through javascript.

Thanks!

[Author]

Posts