Forum Discussion

saideepak's avatar
saideepak
Contributor
6 years ago

styling Out Of The Box (OOTB) for Lithium

Suppose, if i want to change/customize the style of OOTB (Out Of The Box) component, how to do it? Is it possible to do it?   Example: There is a Top Kudos OOTB, i want to print the text of Top Kud...
VarunGrazitti's avatar
VarunGrazitti
Boss
6 years ago

saideepak - Yes, you can do that. Simply use the CSS to update the colors. Likewise, you can also override the components as described here.

  • saideepak's avatar
    saideepak
    Contributor
    6 years ago

    VarunGrazitti  Thanks for the reply. But i am wondering where can i find the CSS of OOTB components to override the existing styling with my custom styling? I am finding many fields related to CSS in _variables.scss (res/skins/sass folder) when i created the custom skin. how to identify which field is being used for which component?

    for example: following are defined in _variable.scss and i know that by overriding these fields, custom values will be prioritized over the default values. But how to know what are all fields is being used for which OOTB?

    //$btn-font-weight: bold;
    //$btn-primary-color: $li-text-color-inverse;
    $btn-primary-bg: #ff0000;
    $btn-primary-border: #ff0000;
    $btn-inverse-primary-color: #ff0000;
    //$btn-inverse-primary-bg: transparent;
    //$btn-inverse-primary-border: $brand-primary;
    //$btn-default-bg: $gray-lighter;
    //$btn-default-border: $gray-lighter;
    //$btn-secondary-color: $li-text-color-inverse;
    //$btn-secondary-bg: $gray-light;
    //$btn-secondary-border: $gray-light;
    //$btn-inverse-secondary-color: $gray-dark;
    //$btn-inverse-secondary-bg: transparent;
    //$btn-inverse-secondary-border: $li-border-dark;
    //$btn-link-disabled-color: $gray-lighter;
    //$btn-sm-font-weight: normal;