Add Glowing Color to Banner Image in NetSuite

The process of adding a glowing color around a banner image in NetSuite involves customization using Sass. This not only enhances the visual appeal but also allows site administrators to modify the color easily.

How to Add a Glowing Color

Step 1: Create Custom Variable

To allow for color customization, start by exposing a variable in the Sass file. You'll add the variable and a comment that includes the editable() function, enabling the preprocessor to recognize it for Site Management Tools (SMT).

Step 2: Organize Your Custom Module

It’s best practice to create a new module for this customization. In your local Workspace/Modules directory, create the structure:

GlowyModule@1.0.0/
  Sass/

Step 3: Create the Sass File

In the newly created Sass folder, create a file named _glowy.scss and populate it with the following code:

1$color-glowy: #3bfbfd; /* editable({
2    "type": "color",
3    "label": "Glowy Color",
4    "description": "For when you want extra glowy stuff"
5})*/
6 
7@keyframes glowy {
8  0% {box-shadow: 0 0 -10px $color-glowy;}
9  20% {box-shadow: 0 0 100px $color-glowy;}
10  40% {box-shadow: 0 0 200px $color-glowy;}
11  60% {box-shadow: 0 0 200px $color-glowy;}
12  80% {box-shadow: 0 0 100px $color-glowy;}
13  100% {box-shadow: 0 0 -10px $color-glowy;}
14}
15 
16.glowy {
17  animation: glowy 1500ms infinite;
18}

In this code:

• The first part defines the editable color variable, sets a default value, and includes metadata for the variable to ensure it is editable within SMT.
• The @keyframes definition creates the glowing animation, and the .glowy class is used to apply this animation to any HTML element.

Using this implementation, administrators can enjoy the flexibility of customizing banner images with a dynamic glow that enhances site aesthetics.