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 Kudos in red color. How to achieve this ?

    • 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;