Configure fonts and colours on Employee Center

spike
Mega Sage

Does anyone know how you configure the fonts and colours for this page? The Branding Editor doesn't do it. I've tried messing with the EC Theme as well and that only seems to cover some of it.. any pointers would be appreciated.

Thanks.

 

spike_0-1742488447294.png

 

1 ACCEPTED SOLUTION

Community Alums
Not applicable

Hi @spike ,

 

Yes, this is achievable. You can use page-specific CSS to implement it.

 

Steps

  • Press CTRL + Right Click on the page where you want to make changes.
  • image.png
  • A configuration popup will appear.
  • Select "Instance in Page Editor" from the options.
  • You will be redirected to the sp_config page.
  • image.png
  • Scroll down and add your custom CSS as needed.
  • image.png
  • Make sure you find the correct class used for that particular element.
  • Define the same class and appropriate css properties.

 

To find a correct class used for styling: 

  • Right-click on the element.
  • A configuration popup will appear.
  • Select "Inspect" from the bottom.
  • Use the selector tool to target the correct element and identify its class

image.png

 

Before

image.png

 

After

image.png

 

Mark this as Helpful / Accept the Solution if this helps

 

View solution in original post

2 REPLIES 2

Community Alums
Not applicable

Hi @spike ,

 

Yes, this is achievable. You can use page-specific CSS to implement it.

 

Steps

  • Press CTRL + Right Click on the page where you want to make changes.
  • image.png
  • A configuration popup will appear.
  • Select "Instance in Page Editor" from the options.
  • You will be redirected to the sp_config page.
  • image.png
  • Scroll down and add your custom CSS as needed.
  • image.png
  • Make sure you find the correct class used for that particular element.
  • Define the same class and appropriate css properties.

 

To find a correct class used for styling: 

  • Right-click on the element.
  • A configuration popup will appear.
  • Select "Inspect" from the bottom.
  • Use the selector tool to target the correct element and identify its class

image.png

 

Before

image.png

 

After

image.png

 

Mark this as Helpful / Accept the Solution if this helps

 

This is fantastic. I didn't know you could do those things. You've really help here!

I made the changes and actually it doesn't look any good. But I've used the same mechanism to do something slightly different.

Many thanks again!