Modify the height of announcement banner that appears at the top in service portal.

pooja_gouri
Giga Contributor

Hi All,

I am working on announcement in service portal, currently i am displaying the announcement with TYPE as Banner,widget.

I want to reduce the height or remove the padding of the banner.Rest of the portal is appearing something messy for the existing announcements.

Does anyone know where to reduce the components(CSS) of the banner in service portal.

Is it displaying at the top due to widget configuration or something other than that please let me know.

find_real_file.png

Thanks in advance!!!

5 REPLIES 5

Jon Barnes
Kilo Sage

If you right-click -> inspect the announcement element on the page, you can find the various elements/css that create what you see there. From there, you can traverse the element tree to find where the styles are that you want to change. From there, you can add css classes to your portal theme to override the standard css for those announcements.

Mark Roethof
Tera Patron
Tera Patron

Hi there,

Below some screenshots to help you get started.

Just locate the appropriate CSS elements you want to influence. You can easily overrwite these thru for example the main CSS of the Service Portal.

find_real_file.png

find_real_file.png

In this case I wanted to influence the padding. See the code below. Code is tested and oke!

.sp-announcement-root .sp-announcement-list .sp-announcement {
  padding: 0px;
}

If my answer helped you in any way, please then mark it as helpful.

Kind regards,
Mark

---

LinkedIn

 

Kind regards,

 

Mark Roethof

Independent ServiceNow Consultant

10x ServiceNow MVP

---

 

~444 Articles, Blogs, Videos, Podcasts, Share projects - Experiences from the field

LinkedIn

Thanks it helped me at lot!!!

However changing the css of the banner is through portal.

What if i don't want to display the summary at the top of the banner,I have modified the  announcement widget not to include the summary but at the banner its still displaying.So what is the component??

Does anyone know about it??

kushi1
Tera Contributor

I got it.

 

added the below codes to css 

 .content
{
display:none;
}

 

Its displaying in the widget but not in the banner.