How to make Announcement widget transparent in service portal

[Nithin12]

Hi Community,

Can any one help me on make Announcement widget(Cloned out of box) transparent. Where text or data inside the widget should be visible on background Image rather than white back ground.

Please refer the screen shot, Where i need Announcement widget should be transparent where in such a way back ground Image should be visible.

Thanks,

Nithin.

[Allen Andreas]

Hi,

Please see if you can ctrl+right-click on that widget and uncheck the box that says "show panel". That should remove that for you.

If that's not a choice, some widgets it is, some it's not...I would recommend looking in to the client script OR the HTML for information relating to a "Panel" and test removing some of it.

Please mark reply as Helpful/Correct, if applicable. Thanks!

[Dan Conroy]

Try adding some CSS to the widget instance.

ctrl + right click on the widget instance, select instance options, select open in platform from the hamburger menu, then add some SCSS to the widget instance.

.panel.spw-announcements-root, .panel.spw-announcements-root div.panel-heading {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

[Andrew112]

This is great!  I used the following to make my announcement widget transclucent:

.panel.spw-announcements-root, .panel.spw-announcements-root div.panel-heading {
background: rgba(220,220,220,.5);
border-color: rgba(220,220,220,.5);
box-shadow: none;
}

However, when announcements are shown, the panel that shows the actual announcement and background for that is not transclucent.... how can I add that?