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