The CreatorCon Call for Content is officially open! Get started here.

Can you set a background image on a knowledge article template

Alex319
Giga Guru

Hi All, Is it possible to set a background image to always appear when creating a knowledge article with a specific knowledge template. 

i.e. you create a new article and it automatically sets an image in the background. 

Alex319_0-1677848269995.png

Any help would be amazing, 

Thanks

Alex

1 ACCEPTED SOLUTION

Laszlo Balla
ServiceNow Employee
ServiceNow Employee

Hey Alex,

 

On a template, you can define this in the Field Style (once you add a field to the template), like this:

LaszloBalla_0-1677861013112.png

Note: it will not be displayed while creating the article, even in the source code. However as soon as the article is published, it is applied.

 

View solution in original post

3 REPLIES 3

Laszlo Balla
ServiceNow Employee
ServiceNow Employee

I am not aware of a simple way to do that out o the box. Right now I can think of two "workarounds".

 

  1. Edit the HTML source code of the article, or template.
    Text entered in the article is typically broken down into individual paragraph elements. You can add a background image by applying the style property to one or more paragraphs, or you can also wrap the entire article in a dev element and style that. Here is an example with a div (would be the same for paragraph - I have remove actual text to make the code block smaller):
    <div style="background-image: url('https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg'); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%;">
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
    </div>​
    This is how this looks with lorem ipsum text:
    LaszloBalla_0-1677857730522.png

     

  2. For portal usage, you could create a "wrapper" widget.
    Basically a custom widget, that would "embed" the out of the box 'Knowledge Article Content' widget (or whatever you use), but would have your custom CSS in it. On the server side of the widget, you could look up which template the article is based on (by using 'sys_class_name'), and then based on that, apply whatever values you want for the panel-body class. Here's a screenshot where I just added a background image to that class in dev console of the browser:
    LaszloBalla_1-1677858290879.png

    You can see it fills the whole section. Of course you can target any specific element or class in your css.



Hi Laszlo, Thank you for your reply. 

So you know where I can edit the source code for a template? 
I can see in the knowledge article itself but not where to put it when creating a template?

Thanks
Alex

Laszlo Balla
ServiceNow Employee
ServiceNow Employee

Hey Alex,

 

On a template, you can define this in the Field Style (once you add a field to the template), like this:

LaszloBalla_0-1677861013112.png

Note: it will not be displayed while creating the article, even in the source code. However as soon as the article is published, it is applied.