Removing Dividers in Widgets

[kandulek]

Hi All,

Do you know whether it is possible to remove the default dividers in widgets, and how to accomplish this?

Thank you in advance for any hints!

[Tanushree Maiti]

Hi @kandulek 

To remove the default dividers in widgets , you have to override CSS of your widget or theme CSS.

Refer the example given in this post: https://www.servicenow.com/community/servicenow-ai-platform-forum/remove-the-border-box-from-widget-...

[Aditya_hublikar]

Hello @kandulek ,

To remove the divider from the widget, you need to make some changes to the corresponding widget, mainly in the CSS.

If this helps you then mark it as helpful and accept as solution .

Regards,

Aditya

[RaghavendraGund]

Hello @kandulek 

yes, you can remove it. I tested this on my PDI, I choose Employee Center Portal and here's what i found.
Before you start reading the reply, please look at he the images i attached 
Screenshot before change and screenshot after change

Where the divider comes from

On the Employee Center homepage, the widget header is a div with the classes panel-heading b-b. Two rules in the portal's Bootstrap CSS both put a border under it:

.b-b adds a grey bottom border.
.panel-heading also sets a bottom border. Its colour is transparent, but .panel-default > .panel-heading sets the border colour to the same grey.

If you override only .b-b, the line stays. The .panel-heading border shows as crossed out in DevTools, which makes it look inactive, but that's only because .b-b currently wins. When .b-b is gone, the .panel-heading border takes over and draws the same grey line. I confirmed this by unchecking the rules in DevTools: the line disappeared only after both were unchecked.

How to check this on your own portal

Open the portal page where you see the divider.
Right-click the widget title (for example, "News") and choose Inspect. You can also press F12 or Ctrl+Shift+I to open DevTools.
In the Elements tab, the title element is highlighted. Click the div one line above it, <div class="panel-heading b-b">, which is the header that draws the line.
In the Styles pane, scroll down until you see the .b-b and .panel-heading rules.
Optional: hover over border-bottom in each rule and untick the checkbox to watch the line disappear. This only changes your browser view until you refresh.

If your header has different classes, your widget or theme uses different markup. In that case, use the classes you see in the CSS below.

Refer screenshot: devtools_divider_rules

The fix

Switch your application scope to the application that owns your portal's theme (for Employee Center, that's Employee Center) and use a named update set.
Go to sp_css.list and click New. Give it a name and add this CSS:
css
.panel-heading.b-b { border-bottom: none; }
Go to sp_css_include.list and click New. Set Source to Style Sheet and select the style sheet from step 2.
Open Service Portal > Portals, open the portal where you see the divider, and note its Theme. In my PDI, the Employee Center portal uses Employee Center Coral Theme. First check whether other portals use the same theme, because this CSS will apply to all of them. Then, on that theme's CSS Includes tab, click Edit..., add your include, and save. Set its Order to a high value (I used 100) so it loads after the out-of-box includes.

Only want to remove it from one widget?

Put that widget's container class in front of the selector. Each widget has its own container class. For example, Favorites uses your-favorites-container, and Quick Links uses link-container:

css
.your-favorites-container .panel-heading.b-b { border-bottom: none; }

When I tested this, only the Favorites divider disappeared and the other widgets kept theirs. To find your News widget's container class, use the Inspect steps above and look at the div that wraps the header.

Note: this CSS applies to every page on every portal that uses this theme, not only the homepage, so check a few other pages after you add it.

Hope my reply helps!!
Please mark Helpful if my reply added any value, replicated this scenario to answer your question