UI Page title - Change the font size?

Anish Reghu
Kilo Sage
Kilo Sage

As part of accomplishing a survey requirement, I prepared a survey definition and published the survey.

Now, I have a feedback on the "View Survey URL" link accessible by the end user (Public access).

find_real_file.png

They want to change the font size of the title where it reads "Service Manager Survey". I guess it is to be done on the UI Page assessment_take2. But how exaclty?

I checked one of the threads where it suggests the following into the XML code:

find_real_file.png

What is the code to change the header font size and the font-family?

 

Regards,

Anish

 

1 ACCEPTED SOLUTION

Yes, you can make it work specific to survey. You can use something as below.

<j:if test="${!jvar_instance}">

<j2:if test="$[typeGR.name=='Service Manager Survey']">
<h1 class="navbar-title" style="font-size:200%">$[typeGR.name]</h1>
</j2:if>
										
<j2:if test="$[typeGR.name!='Service Manager Survey']">										
<h1 class="navbar-title">$[typeGR.name]</h1>									
</j2:if>
									
</j:if>

View solution in original post

9 REPLIES 9

Ankur Bawiskar
Tera Patron
Tera Patron

Hi Anish,

I think that is the name of the Survey right?

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader

Hi Ankur,

Thanks for checking again. Yes this is the Survey Definition name.

Regards,

Anish

Jaspal Singh
Mega Patron
Mega Patron

Hi Anish,

 

Couple of steps as below.

1. Create a new Style sheet form Content Management >> Design >> Style Sheets 

2. Name is suppose newtitle & pass below code in the Style field

.newtitle
{
font-size: 25px;

}

3. Go to the UI Page: assessment_take2

4. Paste below line possible in line 7 or 8

<link href="sys_id_of_record_created_instep1.cssdbx" rel="stylesheet" type="text/css"></link>

5. Look for line

<h1 class="navbar-title">$[typeGR.name]</h1> in the HTML field

& replace it with below.

<h1 class="newtitle">$[typeGR.name]</h1>

Replace is to comment which will be <!--<h1 class="navbar-title">$[typeGR.name]</h1>-->

6. Save it & output as below.

Before:

find_real_file.png

 

After:

find_real_file.png

Chander Bhusha1
Tera Guru

Hi Anish,

You can include a custom style block in the page and it will update the font size and font style as shown below:

You have to update the style block with the code below: Use the same style block which you have in the assessment page.

<style>

.navbar .navbar-title {
font-size: 24px;
font-family: "Times New Roman", Times, serif;
font-weight: bold;
margin: 9px 0 9px 5px;
vertical-align: middle;
color: #303a46;
}
</style>

 

The font-size and font-family is the place where you will define the fontsize and font family.

 

 

 

After making update:

find_real_file.png

 

 

Please mark answer correct and helpful

Thanks,

CB