How to create a simple HTML Widget like this

[Vidya Lakshmi]

Hello Team,

How to create the simple widget like below,

The HTML Code is as below,

<div class ="c_full-d widget headlind_news">
<div class ="headlind_news--wrapper">
<header class = "headlind_news--titlex">
<a style="padding-top:5px" href="?">
<img src="icon_announcement.png" width="45px" height = "45px" role = "presentation">
</a>
</header>
<ul class="headlind_news--list"> </ul>
<marquee direction="left" scrollamount ="3">
"Thanks for creating a Marquee"
</marquee>
</div>
</div>

Can someone help me with the CSS script on how to define the class?

Or any help on creating the HTML Script for creating the below Widget inside which a text has to be scrolling from left to right?

[Siddhnath Pande]

Hey Vidya,

Yes there is many way, one of the easy way I sharing with you you can try this.

here is the code:

<table style="width:100%">
  <tr>
    <th>
      <a style="padding-top:5px" href="?"><img src="{{data.image1}}" width="42" height="29"/></a>
    </th>
    <th>
      <marquee direction="left" scrollamount ="3">"Thanks for creating a Marquee"</marquee>
    </th>
	</tr>
</table>

Hope this will achieve your goal, still you need any change, you can change with the help of CSS.

If the above code helps then please mark my answer Correct and Helpful.

Thanks and Regards:
Siddhnath Pandey

[Utpal Dutta1]

Hey Vidya,

For creating this widget you just need to Insert an Image with scrolling HTML code. The below HTML code will help you achieve scrolling effect.

To create a Widget just navigate to Service Portal> Service Portal Configuration> Widget Editor> Create a new Widget. 

You can use below HTML code for Scrolling text:

<marquee behavior="scroll" direction="right">Here is some scrolling text... left to right!</marquee>

Also to create a CSS class use script: 

<style>

.intro {
background-color: yellow;
}

</style>

CSS class creation link: https://www.wikihow.com/Define-a-CSS-Class-Style

If the above code helps then please mark my answer Correct and Helpful.

Thanks and Regards:

Utpal Dutta

[Gaurav Shirsat]

Hi Vidya

This Link Will Give you some help regarding your Work.

also follow some concepts on widget in servicenow:-

Widgets in ServiceNow:-

https://docs.servicenow.com/bundle/orlando-servicenow-platform/page/build/service-portal/concept/ser...

some extra Learning Purpose:-

 https://javascript.info/styles-and-classes

https://cran.r-project.org/web/packages/htmlwidgets/vignettes/develop_intro.html

Please Mark Correct and Helpful

Thanks and Regards

Gaurav Shirsat