Docs

[jrhager84]

Hi all… I’m at my wit’s end trying to incorporate these custom dividers into my x theme site. I’ve pored through the knowledge base, tried code in other threads, and have even watched tutorials on working with this code to no avail. I’m trying to use the separators that are listed here > http://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/ but I can’t get *any* of them to work, primarily because I feel like there’s something I need to declare before this stuff works. Please advise.

In a perfect world, I’d like to be able to set each separator as a class type, so I don’t have redundant code for each sections that uses it. Thanks!

[Christian]

Hey there,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[jrhager84]

There are threads in here where you’ve helped other people with this very same issue…? Also — I don’t need help with the code — I need help understanding what X is doing that makes it *not* work. It works on CodePen. It works on Fiddle. The code isn’t the issue; It’s how X is executing it.

[jrhager84]

The code:

section::before,
section::after {
	position: absolute;
	content: '';
	pointer-events: none;
}

.ss-style-doublediagonal {
	z-index: 1;
	padding-top: 6em;
	background: #2072a7;
}

.ss-style-doublediagonal::before,
.ss-style-doublediagonal::after {
	top: 0;
	left: -25%;
	z-index: -1;
	width: 150%;
	height: 75%;
	background: inherit;
	transform: rotate(-2deg);
	transform-origin: 0 0;
}

.ss-style-doublediagonal::before {
	height: 50%;
	background: #116094;
	transform: rotate(-3deg);
	transform-origin: 3% 0;
}

[Rupok]

Hi there,

If you have the right HTML with right classes (same as the selector used in CSS) then it should work. There is nothing different in X to execute. You need to use the HTML within RAW Content or Text element if you use Cornerstone and add the CSS to page level CSS or Customizer > Custom > CSS.

Thanks!

[jrhager84]

I’m adding the code in custom css as a class, and then assigning each section I want to affect as that class. Is that not how one would use the class system in Cornerstone?

[jrhager84]

Keep in mind, I’m trying to affect the sections in cornerstone. I can make my own section via HTML and it works fine. It’s getting this code to apply to the sections that is not working for me.

[Jade]

Hi there,

Please provide us with the URL of your site so that we could have a look as it might be some problem with the CSS CSS selectors that’s why the code is not working.

[jrhager84]

http://www.guardiancheer.com/recreational is what I’m trying to use the triangles code from Codrops:

section::before,
section::after {
	position: absolute;
	content: '';
	pointer-events: none;
}

/* Triangles */
.ss-style-triangles::before,
.ss-style-triangles::after {
	left: 50%;
	width: 100px;
	height: 100px;
	-webkit-transform: translateX(-50%) rotate(45deg);
	transform: translateX(-50%) rotate(45deg);
}

.ss-style-triangles::before {
	top: -50px;
	background: inherit;
}

.ss-style-triangles::after {
	bottom: -50px;
	z-index: 10;
	background: inherit;
}

Ends up poking out the left side. Dunno what the deal is. :/

[jrhager84]

[jrhager84]

http://prntscr.com/b82t9l

[Christopher]

Hi there,

Is this your site URL?http://www.guardiancheer.com/recreational/

You currently achieve it, can you clarify what exactly you’re trying to achieve?

Thanks.

[jrhager84]

I want the triangle on the *bottom* of the section; Not the left side (as seen in the picture above) hahaha

[jrhager84]

Like the one in your container on the x theme website http://prntscr.com/b8bq02

This is why I know this code is possible! lol

[Rupok]

Hi there,

Your code seems not correct as there is no <section> tag so the below code won’t affect anything :

section::before,
section::after {
	position: absolute;
	content: '';
	pointer-events: none;
}

You can try using the section class :

.x-section::before,
.x-section::after {
	position: absolute;
	content: '';
	pointer-events: none;
}

Although we can’t assist on such customization but you can try this.

Thanks

[Author]

Posts