Want to set Opacity Programatically

sunitac93243435 19-01-2020

Dear All,


I have a page and my navigation background color is blue and it is coming from css , as below.



.sunitaNavigation {

background-color: #ff0000;
min-width: 380px;


In my navigation component cq:dialog ,


I have mentioned the below opacity dropdown.


fieldDescription="0.1 is nearly transparent; 1 is solid"
fieldLabel="Background Opacity"


Now If I will select opacity 0.5 , then my background color will come as 0.5


Currently my opacity is hard coded in CSS , as shown in above. How can I set this selected opacity value in CSS "or" in any other way ???



Accepted Solutions (1)

Accepted Solutions (1)

Umeshsondhi 20-01-2020

Hi @sunitac93243435 

You can add following css property in your html i.e.
<div class="sunitaNavigation" style="opacity:${properties.bgOpacity @context='unsafe'}">

Hope it helps 🙂

Answers (2)

Answers (2)



I would recommend to use drop down instead of number field. define the classes with opacity e.g. opacity-1-0, opacity-0-5 till opactiy-0-0 and so on, the dropdown text and value you can decide, it is jut and example.


Read this value in HTL of navigation component and append a class e.g.

<nav class="other classes ${properties.bgOpacity?properties.bgOpacity:''}">




This will restrict the content author to choose opacity from predefined values in order to maintain/respect design guidelines.

arpitv27529355 19-01-2020

Hi @sunitac93243435 ,


You can achieve your requirement by setting the css property using Javascript.

What exactly you needs to do is:

  1. Retrieve the value selected in dialog dropdown in your htl/JSP like below:<input type="hidden" id="opacity" name="opacity" value="${properties.bgOpacity}">
  2. on page load ready function please use below JS(in respective clientlib) to set the opacity authored in dialog which is fetched from DOM.
    $( document ).ready(function() {
    var opacity = $('#opacity').value;
    (".sunitaNavigation").css( "opacity", opacity);