Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Want to set Opacity Programatically

Avatar

Avatar
Validate 1
Level 1
sunitac93243435
Level 1

Likes

2 likes

Total Posts

20 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Boost 1
Affirm 1
View profile

Avatar
Validate 1
Level 1
sunitac93243435
Level 1

Likes

2 likes

Total Posts

20 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Boost 1
Affirm 1
View profile
sunitac93243435
Level 1

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.css

.sunitaNavigation {

background-color: #ff0000;
opacity:1;
min-width: 380px;
}

 

In my navigation component cq:dialog ,

 

I have mentioned the below opacity dropdown.

 

<opacity
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/numberfield"
fieldDescription="0.1 is nearly transparent; 1 is solid"
fieldLabel="Background Opacity"
increment="0.1"
max="{Long}1"
min="{Double}0.1"
name="./bgOpacity"
step="{Double}0.1"/>

 

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 ???

 

 

View Entire Topic

Avatar

Avatar
Give Back 5
MVP
Umesh_Sondhi
MVP

Likes

55 likes

Total Posts

64 posts

Correct Reply

28 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Boost 50
Boost 5
View profile

Avatar
Give Back 5
MVP
Umesh_Sondhi
MVP

Likes

55 likes

Total Posts

64 posts

Correct Reply

28 solutions
Top badges earned
Give Back 5
Give Back 3
Give Back
Boost 50
Boost 5
View profile
Umesh_Sondhi
MVP

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'}">
..
..
..
</div>

Hope it helps 🙂