How can you adapt the styles of nebular components?

I have been trying to adapt the styling of various components without any luck. There are two things I have been trying to do without success. 1) adapt the card-body background color to transparent. 2) adapt the position of a popover (i don’t want it to appear exactly in the middle when in ‘top’ position).

I have tried to create classes and ID’s for this but when I place keys for the classes in the scss the components do not change. I am not sure if they are being overwritten or whether I am attempting to access the components incorrectly. I tried to find documentation on how to adapt nebular style components, the documentation is good for how to set up the theme system, but I couldn’t find an example of how to adapt it?

example: <nb-card class="adapted"></nb-card>

scss: .adapted { background-color: rgba(0,0,0,0) }

The above code doesn’t change anything.

[ilgiznurgaliev]

Hi.

Could some one please show any example how to change theme variable for card? I need to change card-header-text-font-size variable for example.

Thank you in advance.

[alfredott]

Hi @happyxhw If I’m not mistaken, you can style each of your layouts independently by adding a css class to them, kind of this way :

<nb-layout class="my-css-class">
  ...
</nb-layout>

nb-layout.my-css-class {
  ...
}