How to change the font of the only Welcome message of Service portal

Vikas47
Tera Contributor

Hello!

 

I was curious to know how we can change the font (customer specific) of only welcome message of homepage search widget of the Service portal(/sp) highlighted in red colour box in below screenshot. #ServicePortal 

Vikas47_0-1686844541683.png

 

If anyone has any suggestions or ideas or has done this already, then please share your input.

 

Thanks in advance!

 

Thanks!

Vikas

 

1 ACCEPTED SOLUTION

ChrisBurks
Mega Sage

It can also be done without cloning by applying CSS.
That text is in an "h2" element that is within a "div" element with the id of "homepage-search".

 

Since it's only for this page you can put the CSS at the page level or at the widget instance level. Either one can be accessed by going to the page editor.

See screenshots:

go_to_page_editor.pnggo_to_CSS_field.pngnew_font_family_applied.png

 

If you need to add the customer specific fonts to the theme style so that they are available to the theme then take a look at this article: https://serviceportal.io/using-custom-fonts-service-portal/

View solution in original post

6 REPLIES 6

jMarshal
Mega Sage
Mega Sage

You'll need to clone (copy and customize) the "homepage search" widget and do it in HTML or CSS:

 

jMarshal_0-1686845286403.png


once you have the custom version, use  Service Portal Configuration to edit the SP homepage and replace the default widget with yours.

There may be a way to do it in Service Portal Configuration using branding and themes, but I don't believe so -- and if it does, it'll probably affect more than just that specific spot (the font will change lots of places if done through branding and themes).

Vikas47
Tera Contributor

Hi Marshal,

 

Thanks for your reply, however, I don't see anything in branding and themes of SP configuration to change the font of the homepage search widget.

 

ChrisBurks
Mega Sage

It can also be done without cloning by applying CSS.
That text is in an "h2" element that is within a "div" element with the id of "homepage-search".

 

Since it's only for this page you can put the CSS at the page level or at the widget instance level. Either one can be accessed by going to the page editor.

See screenshots:

go_to_page_editor.pnggo_to_CSS_field.pngnew_font_family_applied.png

 

If you need to add the customer specific fonts to the theme style so that they are available to the theme then take a look at this article: https://serviceportal.io/using-custom-fonts-service-portal/

Right, didn't think about that -- page editor to mod the css at the widget instance level to get just that widget.

This is definitely better than cloning the widget.