Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

Apply custom CSS to service portal service catalog pages

Fraggle Rock
Tera Expert

Hi there

We are wanting to style  a text block on the catalog pages within our Service Portal. the block of text is added Description test added on the Category page

FraggleRock_1-1715828376659.png

and displays on the catalog pages

FraggleRock_2-1715828488218.png

What we want to do is increase the font size 

 

i  have hound this page within the portal designer ans am hoping i can use the page specific CSS feild to add some magic code but not sure how to target it to just that block of text 

FraggleRock_3-1715829103521.png

inctance/$spd.do#/sp/editor/sc_category/

FraggleRock_4-1715829122657.png

 

any help would be great

 

 

1 ACCEPTED SOLUTION

James Chun
Kilo Patron

Hi @Fraggle Rock,

 

You can modify the CSS of the widget instance.

  • Within the Page Designer, select the edit button of the SC Category Page widget
  • Select the hamburger icon on the pop up page and select Open in platform

JamesChun_1-1715831374472.png

  • In the form, modify its CSS value to something like the below and save: 

 

 .hidden-xs.break-word{
  font-size: 40px;
}
​

 

 

Outcome:

JamesChun_2-1715831430317.png

 

Cheers

View solution in original post

2 REPLIES 2

James Chun
Kilo Patron

Hi @Fraggle Rock,

 

You can modify the CSS of the widget instance.

  • Within the Page Designer, select the edit button of the SC Category Page widget
  • Select the hamburger icon on the pop up page and select Open in platform

JamesChun_1-1715831374472.png

  • In the form, modify its CSS value to something like the below and save: 

 

 .hidden-xs.break-word{
  font-size: 40px;
}
​

 

 

Outcome:

JamesChun_2-1715831430317.png

 

Cheers

thanks that worked a treat