Recreate "Full-width" text box from Dante?

[rwolfenden]

Hi,

I also use your Dante theme and find the “Full-Width” text box useful with the small triangle it features.

Can this be replicated in Cardinal? I know I read some CSS somewhere to do this but I can’t seem to find it.

Thanks,
Rob

[Kyle – SUPPORT]

Hi

You’ll need to add a Row asset, with a text box inside it. Add an extra class like ‘bottomarrow’ to the Row. Then please provide your link so I can provide you with the custom css

– Kyle

[rwolfenden]

This reply has been marked as private.

[Kyle – SUPPORT]

Try adding this to your custom css, this is for the bottom one. If it does not work please provide me with a login

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

– Kyle

[rwolfenden]

This reply has been marked as private.

[Kyle – SUPPORT]

Add this:

.spb_parallax_asset.bottomarrow-row {
  overflow: visible;
}

– Kyle

[rwolfenden]

Perfect! I’ve changed the colour but spot on!

[Rui Guerreiro – SUPPORT]

Great. Thanks Kyle
-Rui

[rwolfenden]

What would I edit to recreate it on the top version?

Thanks again folks! 🙂
R

[Kyle – SUPPORT]

Try:

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

– Kyle

[rwolfenden]

Perfect, thanks Kyle!

R

[Kyle – SUPPORT]

No problem 🙂