Service Portal : How can we help: how to make this text align to the left and change font size

[rody-bjerke]

Hi,

How is it possible to make the text "How can we help you?" align to the left and change the font size of the text?

Best regards,

[xostmoen · Accepted solution]

Hi Rody,

This is possible, but you would have to create a copy of the widget that is presenting the text.

1. Open the wiget "Homepage Search" in the Widget Editor.

2. Clone the widget

Type in a logical name, then submit:

3. The properties for the size of the title, and the alignment of the text is in line 3 of the HTML Template:

<h1 class="text-center text-4x m-b-lg sp-tagline-color" ng-bind="options.title"></h1>

Change this to something like this to make the text align to the left and be smaller:

<h1 class="text-left text-2x m-b-lg sp-tagline-color" ng-bind="options.title"></h1>

See screenshot:

4. Now finally in the Page Designer, open up the Service Portal Index page, and replace the old widget, with the new:

5. Select the edit icon to add a the title:

Now the result should be different:

Please mark me as helpful or correct if you see me accordingly. Thank you 🙂

[Matthew Smith]

Nice post - was just about to post something similar (but in far less detail) myself!

The only thing I can add to the above is that I had issues resizing the text using the HTML Template section, so ended up adding an extra couple of lines into the CSS field:

.sp-tagline-color {
color: $sp-tagline-color;
}

h1 {
font-size:80px /*whatever font size here.
}

Thanks

Matt

[rody-bjerke]

I totally agree, that's what i ended up doing 🙂

[amit_a_vajpeyi]

Hi,

I had similar requirements and I did it by adding css to my Instance of "Homepage Search" widget.

Go to the Portal>Homepage(Index)

Look for the " Homepage Search" widget

In the CSS section,add below code :-

h2 {
text-align: left;
font-size:medium;
}