0

Hi Spartacus experts,

I have created a PageTemplate called xyz via Impex, in frontend the cx-page-layout element will receive the class xyz, but how can I add additional classes to this cx-page-layout element? I use the template for 2 cases (each case uses a different cx-page-slot and it would be great to apply different CSS styles to the cx-page-layout with xyz class depending on which case is being applied.

It is important to say that the style is supposed to be applied to the PageTemplate in CSS, not the slots.

Enyang
  • 1
  • 1

2 Answers2

0

Would it be better to apply classes to the page template class in your css? Adding classes to dynamically rendered <cx-page-layout> elements doesn't seem like a good idea and you already have a class available as a way to modify the page template styling through inheritance.

Here are a few ways to inherit properties depending on if/which preprocessor you are using: Can a CSS class inherit one or more other classes?

Caine Rotherham
  • 306
  • 1
  • 5
  • hi, thank you for the answer! I need to apply different styles to the class for `cx-page-layout`, depending on the class in the child element `cx-page-slot`, it is not possible through CSS/SCSS, I thought maybe there is a way to do this within Spartacus :) – Enyang Jan 19 '21 at 10:00
0

My solution to solve the original issue relies on CSS purely. As it is just a issue of positioning: I added display: flex so I can apply the align-items: center to the cx-page-slot called EmptyCartCenterContent, while other cx-page-slot was not affected by it.

.CartPageTemplate{
  margin: 0;
  display: flex;
  height: 100%;
  padding: map_get($spacers, 6) 0 0 0;
  max-width: none;

  .EmptyCartCenterContent {
    align-items: center;
  }
}
Enyang
  • 1
  • 1