Docs

[jrhager84]

AH! So with x, the sections are switched to x-section. That makes sense! I’m going to give that a try. That was what I was referring to in regards to specific tags that I may have missed that are specific to x.

[jrhager84]

THIS is EXACTLY what I was talking about. Man — You guys really are top-notch. That is EXACTLY what did it. Man, X support is second-to-none…

I’m going to spread far-and-wide that it’s the custom section fields that are throwing off the codes that are floating around. I was tearing my hair out. Now, I can finally play around with the values. Thanks again!!!

[jrhager84]

Is there a location where I can view how x names each class/item/div/etc.? I think a lot of my problem is assuming it’s a standard name, and it’s actually renamed in x.

**EDIT**

Quick question: Is there something that would cause the separators to appear on the top *and* the bottom? If it’s outside the scope that fine, I just was curious if you have an off-the-top-of-your-head idea as to why these separators are happening below *and* above the sections. Thanks!

[Joao]

Hi There,

Thanks for the kinds words, we really appreciate.

Regarding the first question I guess this can be helpful:

https://community.theme.co/kb/documentation/

Regarding the Edit, could you please provide us the URL so we can have a look on what is happening?

Thanks

Joao

[jrhager84]

http://www.guardiancheer.com/recreational

[jrhager84]

I believe I have fixed it, but I”ll ask if it is a ‘clean’ way to fix it.

It appears as the effect has a ::before and ::after pseudo-element, which (I believe) corresponds to the top (before the code) and bottom (after the code). I changed the ::before z-index to -9999, which got rid of it. Is that the best way to accomplish that?

[Rue Nel]

Hello There,

Thanks for the updates!

You can get rid of the :before and :after selector simply adding this custom css code:

.element:before,
.element:after {
  display: none;
}

If you need anything else, please let us know.

[jrhager84]

So, how do I get the border to appear on *both* sides of the triangle separator like in your theme? When I add a bottom-border, it only affects the left side of the triangle, as it’s really the bottom of a rotated square. How do I set it to where the right border of the rotated square assumes the same border as one assigned to it through it’s parent? Is that how you’re doing it on your site? Thanks!

[jrhager84]

Image for reference :

http://prntscr.com/b8yhsr

[Rue Nel]

Hello There,

To fixe the border colors of your custom separators, please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.ss-style-triangles::after {
  border: solid 1px hsl(3, 58%, 47%);  
  border-top: none;
  border-left: none;
}

http://prntscr.com/b8ykbv

Please let us know if this works out for you.

[jrhager84]

I apologize. I was not clear. I know I can add the code for the border to match the separator, but because I have the class set up as a ‘general class’ I will have multiple sections pulling that info, so I want the styling to be dynamic. Like how the backgrounds and colors are automatically inherited from the parent, so I don’t have to make a ss-style-triangles for *each* section, because each will have different colors. In a perfect world, I’d like the border-right of the rotated square to inherit the border from either the bottom border of the same square, or the border of the parent. Is there a way to make a right border follow what a parent bottom border is?

Parent border-bottom sends to > Child border-bottom sends to > Child border-right

or

Parent border-bottom sends to > (child border-bottom + child border-right)

Let me know if that is clear. I apologize I’m having difficulties articulating my questions. 🙁

[Rue Nel]

Hello There,

Thanks for the updates! You can update the given code and use this as a general form:

.x-section::after {
    border-right: solid 1px;
    border-color: inherit; 
}

And if you do not want to use the .ss-style-triangles::before and .ss-style-triangles::after, you can use .x-section::before and .x-section::after in your code.

Please let us know if this works out for you.

[jrhager84]

…but wouldn’t that give a right border to the section independently, and only inherit the color? If I use a separator without a border, wouldn’t it give a 1px border on the right because of this? …and what if I use a thicker border? I wish I knew the terminology, so I could ask the right questions… hahaha

I would like a modular setup. So the border/color/etc are all dependent on whether or not it’s on the container, and what is specified there. If that makes sense. As it is now, everything aside from the right border on the triangle all work flawlessly within Cornerstone. I set it there, and all but the right border are working.

Hopefully I’ve explained it well enough with my limited understanding. Thanks!

[Rue Nel]

Hi Again,

Are your referring to this right borders (http://prntscr.com/b9czq8)? The given code will not give a right border of the section because it only reference to the before and after element and not the whole section element. If you think that your triangle code is now working flawlessly in Cornerstone, then you should only use the triangle separator code to add the right border.

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

I am not sure if we are already in the same page because I am already confused on what you are trying to do with the separator. Do you want it to appear on all sections or would only like to have it on selected sections.

Please let us know how it goes.

[jrhager84]

No — By ‘right border’ I’m referring to the right border of the square that’s rotated to make the triangle shape. So, the right side of the triangle (which happens to actually be the right side of the rotated square. I think if I explain my setup, it’ll make sense.

Rather than having x number of the same code, I opted to have each separator class as a modular setup. In that way, the effect inherits all of the custom data from the Cornerstone section that has its class. So when you have a container that’s tagged that has a border of 3px that’s orange, the data will be inherited, so I don’t have to write custom code for each section, and I merely have to right which class I want applied to the section.

All of it works perfectly right now, *except for the right border of the rotated square (i.e. the right side of the triangle). http://prntscr.com/b9dphz

[Author]

Posts