sIFR header class color not changing

Question

Hi, I have two h1 classes - one needs to be green and one needs to be blue. In sifr-config I have it set like this:

sIFR.replace(aldo, {
  selector: 'h1',
  css: '.sIFR-root { color: #b2bc35; font-size: 24px; }'
});

sIFR.replace(aldo, {
  selector: 'h1.blue',
  css: '.sIFR-root { color: #569fd3; font-size: 24px; }'
});

and in my code I have the h1 set like this:

<h1 class="blue">The Need</h1>

however, the color isn't changing. Does anyone know how to fix this? Thanks!

Answer 1

Try it like this:

sIFR.replace(aldo, {
  selector: 'h1.blue',
  css: '.sIFR-root' { 'color': '#569fd3', 'font-size': '24px' }
});

Answer 2

You don't have to use two replace functions, you can select the h1 tag with "sIFR-root", and the h1.blue tag after that. Like so:

sIFR.replace(aldo, {
    selector: 'h1',
    css: [
      '.sIFR-root {color: #b2bc35; font-size: 24px;}', //this is the h1 tag itself
      '.blue {color: #b2bc35; font-size: 24px;}'
      ]
});

EDIT: Actually I'm not sure it works this way... it does work for things like links (a), but not sure it would work with classes.

Answer 3

Replacing h1 already takes care of replacing h1.blue. Replacing h1.blue first will let you define different styling.

You could also wrap the text inside the <h1> in a <span class="blue"> and then use .blue as a selector to give the text a blue color.

Answer 4

From the sIFR 3 Docs: If you want to use a general selector and more specific ones, make sure the most specific one is replaced first. i.e. 'h1.foo' is higher on the page than 'h1'

So it's just a matter of reordering the elements:

sIFR.replace(aldo, {
  selector: 'h1.blue',
  css: '.sIFR-root { color: #569fd3; font-size: 24px; }'
});

sIFR.replace(aldo, {
  selector: 'h1',
  css: '.sIFR-root { color: #b2bc35; font-size: 24px; }'
});