Label Custom Styles

Overview

Each plugin label has additional option to apply any custom styles to it. This makes it possible to add styles for labels that are not available with the standard styling options.

For example, create label text shadow. Or set background image pattern. Or add some CSS animation for the label. All these things any many more other can be done via custom styles. There are no limitations to what you can do.

How to use it

A custom CSS option field can be found under label edit page -> Set custom styles options group.

Custom CSS option field

In this field you need to specify CSS selector and styles that must be applied to it. In order to know which selectors with which styles to use, you first need to know the structure of label markup. It looks like this:

Label type - Shape with text

<div class="awl-label-wrap">
    <span class="awl-product-label awl-type-label awl-type-label-standard">
        <span class="awl-label-text">
            <span class="awl-inner-text">{LABEL_TEXT}</span>
        </span>
    </span>
</div>

Label type - Image

<div class="awl-label-wrap">
    <span class="awl-product-label awl-type-image">
        <span class="awl-label-image">
            <img alt="{LABEL_TITLE}" src="{IMAGE_URL}">
        </span>
    </span>
</div>

After you know labels markup you can use css selectors like .awl-label-wrap, .awl-product-label, .awl-label-text, .awl-inner-text, etc. to customize your labels.

For example, to create text shadow use following value for Custom css option:

.awl-inner-text {
    text-shadow: 1px 1px 3px #ff0000;
}

Custom css for label text shadow

Examples

Below we provide a few examples of custom styles that you can use. Use them as a template for your own style customizations.

Example 1: Label background image

Style example 1: Label with background image

Let's ass some background image pattern for our label. To do this, please use following css:

.awl-label-text {
    background: url("{IMAGE_URL}") #a0d2ff !important;
}

Replace {IMAGE_URL} with the URL of your image pattern and also set needed background color (if your image is transparent).

Example 2: Label background gradient

Style example 2: Label with background gradient color

In this example, we will add gradient colors for label background. In order to achieve this, please use the following styles:

.awl-label-text {
    background: rgb(215,236,255) !important;
    background: linear-gradient(90deg, rgba(215,236,255,1) 0%, rgba(34,148,250,1) 100%) !important;
}

You can change color value here for any that you want.

Example 3: Rotate label

Style example 3: Rotated label

Now let's rotate our label at 90 degrees.

.awl-product-label {
    transform: rotate(-90deg);
    position: relative !important;
    top: 38px;
    left: -38px;
}

Use any degrees values that you want. The main thing here is to set correct values for top and left styles that depend on your label size.

Example 4: Label text animation

Style example 4: Text animation

Let's make more complex customization and add some animation for our label text.

.awl-inner-text {
   animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

In this example animation is set my special animation css property. We also specify blinker animation that just change its opacity from 1 to 0 every second. Remember that you can set here a way more complex animation rules.

Example 5: Bigger font size on mobile devices

Style example 5: Mobile font size

In some cases we need different styles on desktop and mobile devices. For example, we want to make a bigger label text font size when displayed on mobile devices. We can archive this by using @media css rule.

@media all and (max-width: 700px) {
  .awl-product-label {
      font-size: 18px !important;
  }
}