Make a variable type Label bold on Service portal

[CatalogCat]

I have a variable of type Label. It is on the form in between other input variables to provide some essential information to the user. Is there any way I can make it Bold? 

Found various examples on the forum but they all seem to refer to the ServiceNow interface of the form. I need to bold the text on Service Portal. 

I would also like to know if I can change the color of my label to make it stand out even more. 

Thanks

[Omkar Mone]

Hello,

Try the below code in your Page css

label {
font-weight: bold !important;
}

Hope this helps

Regards

Omkar Mone

[ChrisBurks · Accepted solution]

If "label" is used as the selector then this will apply to all the label elements on the page.

If your variable is of type label and it is required to modify that specific label, it looks like Service Portal makes a div with the id of the name field of label variable and a child div then the actual label element.

ie: <div id="label_name">
 ...
         <div> 
 ...
                <label>

Apply CSS by using a selector that follows that pattern.

ie:   div#label_name div label {

             /* add styles */

}

For instance if I created a Label variable and set the Question text to My Label and the name was my_label the structure would look similar to:

<div id="my_label">
   <div>
        <label>My Label</label>
   </div>
</div>

Then I could put the following in the theme or on the Page CSS field

div#my_label div label {
       color: #ff0000;
       font-size: 2em;
}

and also go as far as to pull up that horizontal rule

div#my_label div hr {
       margin-top: 0;

}

[Brandon R1]

I need to change the style of a Label variable I have on a catalog item. Where on the service portal can I add the <div> tags, etc ??

[ChrisBurks]

Hi Brandon R,

You wouldn't be adding <div> tags. The platform is going to create the label structure for you.

My example above was just to demonstrate how to apply CSS with the use of the CSS selector, in that case by "id" attribute.

If you need to simply change the color of the label then CSS needs to be applied. To find out how to select that specific label then use the browser inspector to see the html markup.