XF 2.2 How to change guest welcome message register button background color?

[Elliottz]

I would like to make the following changes to the guest welcome message register and log in buttons:

1) Change the background color of the register button to #FF4500.
2) Change the current outline color and text of the log in button to #0C0AEE.
3) Add the color on hover of the log in button outline and text from #0C0AEE #FFFFFF

I thought I'd add the styling below into extra.less, but it doesn't seem to be making any change. I'd appreciate your thoughts on how I could try making these updates. I'm using a theme by XenFocus, if that helps.

.p-navgroup-link--register {
background-color: #FF4500;
}

.p-navgroup-link--logIn {
background-color: transparent;
color: #0C0AEE;
border-color: #0C0AEE;
}

.p-navgroup-link--logIn:hover {
background-color: #0C0AEE
color: #FFFFFF !important;
}

 

[Paul B]

You may be better off asking in the style thread but the browser inspector shows the classes as:

 

[Elliottz]

Awesome, got it. Thanks Paul.

 

[Mr Lucky]

Rather than the html colour code I find it useful to use the colour variables from the style properties color palette. That way if you adjust your style colors the button changes to go with it.

 

[Elliottz]

Great to know, thank you.

 

[SeaWolf]

I would like to make the following changes to the guest welcome message register and log in buttons:

1) Change the background color of the register button to #FF4500.
2) Change the current outline color and text of the log in button to #0C0AEE.
3) Add the color on hover of the log in button outline and text from #0C0AEE #FFFFFF

I thought I'd add the styling below into extra.less, but it doesn't seem to be making any change. I'd appreciate your thoughts on how I could try making these updates. I'm using a theme by XenFocus, if that helps.

.p-navgroup-link--register {
background-color: #FF4500;
}

.p-navgroup-link--logIn {
background-color: transparent;
color: #0C0AEE;
border-color: #0C0AEE;
}

.p-navgroup-link--logIn:hover {
background-color: #0C0AEE
color: #FFFFFF !important;
}

That's what i did for mine

.p-navgroup-link--logIn,
.p-navgroup-link--register {
background-color: xf-intensify(@xf-chromeBg, 18%);
}