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 ???
Solved! Go to Solution.
Views
Replies
Total Likes
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
Hi @sunitac93243435 ,
You can achieve your requirement by setting the css property using Javascript.
What exactly you needs to do is:
$( document ).ready(function() {
var opacity = $('#opacity').value;
$(".sunitaNavigation").css( "opacity", opacity);
});
Views
Replies
Total Likes
Hi,
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:''}">
</nav>
This will restrict the content author to choose opacity from predefined values in order to maintain/respect design guidelines.
Views
Replies
Total Likes
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
Views
Replies
Total Likes
Views
Likes
Replies