Uploaded image for project: 'HawtIO'
  1. HawtIO
  2. HAWNG-490

Branding styles cannot override PatternFly styles with :root selector

XMLWordPrintable

    • Icon: Story Story
    • Resolution: Done
    • Icon: Major Major
    • 4.0.0
    • 4.0.0-TP1
    • Hawtio React
    • None

      The following branding css doesn't override the PF global variables. The PF default styles always take precedence over the branding styles.

      .pf-c-login,
.pf-c-about-modal-box__hero {
  background-image: url("./background.png") !important;
  background-size: cover;
}
:root {
  --pf-global--primary-color--100: #B21054;
  --pf-global--primary-color--200: #B24E78;
  --pf-global--primary-color--light-100: #B24E78;
  --pf-global--primary-color--dark-100: #B21054;
  --pf-global--active-color--100: #B21054;
  --pf-global--active-color--200: #B24E78;
  --pf-global--active-color--300: #B24E78;
  --pf-global--active-color--400: #B24E78;
  --pf-global--link--Color: #B21054;
  --pf-global--link--Color--hover: #B24E78;
  --pf-v5-global--primary-color--100: #B21054;
  --pf-v5-global--primary-color--200: #B24E78;
  --pf-v5-global--link--Color: var(--pf-v5-global--danger-color--100);
}

          1.
          		 Development - Branding styles cannot override PatternFly styles with :root selector Sub-task Closed Major Tadayoshi Sato
          2.
          		 Review Test - Branding styles cannot override PatternFly styles with :root selector Sub-task Closed Major Martin Muzikar
          3.
          		 Review Documentation - Branding styles cannot override PatternFly styles with :root selector Sub-task Closed Major Unassigned

              rhn-support-tasato Tadayoshi Sato
              rhn-support-tasato Tadayoshi Sato
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Created:
                Updated:
                Resolved: