Remove borders from App Launcher widget

[nechauhan]

We need to remove the borders from all Applications on all tabs of the OOB App Launcher (“My Applications”) widget on the Employee Center Pro portal homepage. We attempted to do this via widget instance CSS, but the borders are still visible. Please see the below widget instance CSS. Could someone help identify the correct element or selector to target to hide the border.

.app-launcher-card,
.app-launcher-heading,
.app-launcher-heading .panel-heading,
.app-launcher-panel,
.sc-category-card,
.sn-widget-list-item,
.app-card {
border: none !important;
box-shadow: none !important;
}

.app-launcher-skeleton .skeleton-loader-body,
.app-launcher-skeleton .panel-heading,
.app-launcher-skeleton .skeleton-loader-card-app-launcher,
.app-launcher-skeleton .skeleton-item-app-launcher .skeleton-item,
.app-launcher-skeleton .skeleton-app-launcher-grid
{
border: none !important;
box-shadow: none !important;
}

.ec-app-launcher .card,
.ec-app-launcher .card-body,
.ec-my-apps .card,
.ec-my-apps .card-body {
border: none !important;
box-shadow: none !important;
outline: none !important;
}

[class*="app-launcher"] [class*="card"],
[class*="app-launcher"] [class*="tile"],
[class*="my-app"] [class*="card"],
[class*="my-app"] [class*="tile"] {
border: none !important;
box-shadow: none !important;
}

.sn-polaris-card,
.sn-polaris-card--outlined,
.now-card,
.now-card--outlined {
border: none !important;
box-shadow: none !important;
}

.tab-pane .app-item,
.tab-content .app-item,
.tab-pane .application-card,
.tab-content .application-card {
border: none !important;
box-shadow: none !important;
}

.v806f40990fab2300b7b2c8337a767e6f,
[widget-id="sn-app-launcher"],
.app-launcher-container {
border: none !important;
box-shadow: none !important;
}

.b {
border: 0px transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}

[Tanushree Maiti]

Hi @nechauhan 

Can you check if the page css is overriding the widget instance CSS. Change the color and test .

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

[lauri457 · Accepted solution]

It's the class "app-launcher-link".

.app-launcher-link {border:none;}

It is trivial to look it up by inspecting the dom. You can also alter the css in your browser devtools to test it out

[nechauhan]

Hey Lauri,

Thank you so much. It worked. can you please help me understand how you found the class name?

[lauri457]

You can inspect the html "tree" with your browser devtools. On firefox for example: point at roundabout the element you want to inspect and mouse right click -> inspect. 

It will open the inspector tab and highlight the selected element on the document. Hover over the tags to highlight the element on the page and select the one you're looking for. When you select a tag it will show the css applying to it and what class etc it comes from. 

You can turn off any property from inside the declaration on the right to see how it affects your page.