Service Portal help to add boxes around Widgets.

[Danny Barker]

Hello, I am working on a Service Portal page layout.  I have added "icon link" widgets.  The Template I have used is "Top Icon".  We are looking for a way to put a box around the icon to include Title and short description as well. 

I have been researching CSS settings to do this but still new at the configuration piece.  Any help would be much appreciated.  See screenshot below of current setup and desired look.

[Clara Lemos · Accepted solution]

Hi @Danny Barker ,

Navigate to Service Portal > Pages

Open the page that contains your icon links ( example : csm_index)

On the page record click on 'instance with a link'  associated with you widgets, for example:

Now, on your CSS field add the following code:

.iconlink{
border-style:solid;
border-color: black; 
}

If that helps please mark my answer as correct / helpful!
And if further help is needed please let me know

Cheers

[Clara Lemos · Accepted solution]

Hi @Danny Barker ,

Navigate to Service Portal > Pages

Open the page that contains your icon links ( example : csm_index)

On the page record click on 'instance with a link'  associated with you widgets, for example:

Now, on your CSS field add the following code:

.iconlink{
border-style:solid;
border-color: black; 
}

If that helps please mark my answer as correct / helpful!
And if further help is needed please let me know

Cheers

[Danny Barker]

Thanks Clara that did it. Thanks so much!  Now would there be a quick and easy CSS code to add a shadow box style?

[Clara Lemos · Accepted solution]

@Danny Barker  you can add an extra line to your code with something like this 🙂 

box-shadow: 5px 5px 10px 1px #000000;

[Danny Barker]

Thanks Clara.  That worked as well.  I was able to add the shadowing behind each widget and modify the shadow size and color as needed.  Looking at one last item on the widget.  Could I change the spacing in the same location or should i got to the widget settings.  See spacing dilemma below.  We want the icon to go down some in the box and bring up the spacing on the bottom as well. 

Looking for it to be more centered like below