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

Elliottz

New member
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;
}
 

Attachments

  • Screenshot 2023-11-11 at 9.50.18 PM.webp
    Screenshot 2023-11-11 at 9.50.18 PM.webp
    13.2 KB · Views: 7
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.
 
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%);
}
 
Back
Top Bottom