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: