Help to make a 'static' color box from icon link widget

[Moedeb]

As the title says I want to make a 'static' color box from icon link widget so I can use the widget in a record producer as a nice message/link.

Like this:

I've had a bit of a look at the code, but I really don't know what I should delete or keep or edit to make it work as I'd like.

If someone can either edit the widget for me, or advise me I'd be very appreciative.

[Ct111]

Hi ,

CHeck the below link

https://community.servicenow.com/community?id=community_question&sys_id=fc70e476dbc8670423f4a345ca9619c0

And for other variations check these as well

https://community.servicenow.com/community?id=community_question&sys_id=63e383e5dbd8dbc01dcaf3231f96193a

https://community.servicenow.com/community?id=community_article&sys_id=25dc439ddb4c945cfeb1a851ca96196a

Mark my ANSWER as CORRECT and HELPFUL if it helps

[Moedeb]

Whilst these links are nice they don't really show me how to make any values 'static'.

I really just want to be able to have an icon to the left of some text (title and short description) that is a link when it is clicked on.

[Moedeb · Accepted solution]

Ok so I worked it out for myself eventually.

Here it is for anyone else who may want to do it in the future:

HTML:

<div class="iconlink">
<a ng="(link_template == 'Color Box')" class="color_box" target href="https://servicenow.com" target="_blank"> 
  <div class="fa fa-video-camera fa-3x "></div> 
  <h2 class="ng-binding">Test Title</h2> 
  <span class="ng-binding">Test short description</span> </a>
</div>

CSS:

.iconlink a label,h2 {
  display: block;
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.1;
  padding: 0;
  margin: 0 0 10px 0;
}

a.color_box {
  display: block;
  position: relative;
  padding: 20px 20px 20px 82px;
  border-radius: 4px;
  margin-bottom: 20px;
  background: #00a7d3;   /*set the color for the box background*/
  color: #dfe0de;        /*sets the font color*/
  
  text-align: left;     /*set where the text in the box will appear*/
  border-style: solid;
  border-width: 5px;
  border-color: white;  /*This adds a white border so it is always there, but not visible. This means when adding it for the mouse hover the screen doesn't move*/
  border-radius: 10px;
  margin-bottom: 20px;   /*Adds a gap at the bottom before the next box*/
  margin-top: 20px;
}

/* Changes the background color when the mouse is over it */
a:hover {
  color: black;
  border-style: solid;
  border-width: 5px;
  border-color: #0085B3;
  border-radius: 10px;
  margin-bottom: 20px
}

/*sets where the glyph will appear*/
a.color_box .fa {
  position:absolute;
  left: 20px;
  top: 20px;
  width:42px;
  text-align: center;
}

  &:hover {
    color: darken($brand-primary, 60%);
  }
}

Server Script:

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */

})();

There might be better ways, but this worked for what I wanted to do