Triangle as extra class

[consult-one]

Hi there,

it seems as this defines the triangle under a colored full width text.

.alt-three.full-width-text:after {
    border-top-color: #252525;
}"

Is it possible to make this appear under a row too?

Thanks.

[consult-one]

I’m talking about that:

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Yes, if you could please provide me with a link I will see what I can do

– Kyle

[consult-one]

This reply has been marked as private.

[Kyle – SUPPORT]

.spb-row-container:after {
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 25px solid transparent;
  bottom: -25px;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -30px;
  position: absolute;
  width: 0;
}

Then for the color/image or the arrow you will have to use an extra class:

.extra-class:after {
  border-top-color: #111111;
}

– Kyle

[consult-one]

Where do i have to put these codes? Both codes in custom.css and “extra-class:after” as extra class in the row?

[Kyle – SUPPORT]

Add both of the codes to Theme Options > Custom CSS

Then in your Row asset go to the extra class field at the bottom and add the extra class name

– Kyle

[consult-one]

I put both in the Custom CSS an added “extra-class:after” or “extra-class:after spb-row-container:after” in the extra class field but it wont work

[Kyle – SUPPORT]

Nooo, all you need to add in the extra class field is the name of your extra class

For e.g., lets same the name of your extra class was called row-arrow-one, you would add that to your extra class field. Then in your Theme Options > Custom CSS you would add:

.row-arrow-one:after {
  border-top-color: #111111;
}

– Kyle

[consult-one]

I tried that too without the “:after”, but it’s still not showing the triangle under the row

[Kyle – SUPPORT]

Add this to your custom css:

.row-arrow-one {
  overflow: visible;
}

– Kyle

[consult-one]

Now it works fine, thanks

[Kyle – SUPPORT]

Great 🙂

– Kyle

[consult-one]

Oh, one more thing. The class somehow creates a big gap underneath

[Kyle – SUPPORT]

You’ve got a blank spacer set to 2000px?

– Kyle