Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
Hi!
I'm using Qlik Sense Desktop June 2020 and I'm trying to customize the Qlik Sense navigation button included in Dashboard bundle using css , but i cannot find the name of the component in order to modify it. I have tried this ,but it doesn't work:
.qv-object-button {
background-color: #E9E3E0 !important;
border:none !important;
}
What i want to get is the following :
Ps: Even when i tried changing the apperence of the button manually, i set the same background color and removed the border, i still get the white border as u see in the image attached.
If there is another option to do the navigation between sheets with a background image , kindly let me know about it.
Thank you @NitinK7 for your help, I actually found a solution for my issue , I added these lines in my css file in order to modify the border radius and get the shape I wanted :
.qv-object .qv-inner-object {
padding: 10px;
border-bottom-right-radius: 30px
}
And then I changed the background color in the appearance section to match the image .
This is the final result :
Try using below,
.qv-object-qlik-button-for-navigation .container.centered {
background: #d7e9ff;
}
.qv-object-qlik-button-for-navigation .lui-button {
font-family: Proxima Nova, sans-serif;
font-size: 16px;
font-weight:normal;
color: #ffffff;
border: 1px solid #ffffff ;/*004eae;*/
}
article.qv-object.qvt-visualization.qv-layout-spark.qv-object-qlik-button-for-navigation {
border-top-color: #fff;
box-shadow:none;
}
.lui-button--gradient, .lui-button--toolbar {
background-color: #0C639B;
background-image: none;
}
.qv-client.qv-card #qv-stage-container #grid .qv-object-wrapper .qv-object-qlik-button-for-navigation {
border:none;
border-radius: 4px;
box-sizing: border-box;
}
.qv-object-qlik-button-for-navigation .lui-button.full-width {
background: #004eae;
padding: 0px 16px;
}
Hi @NitinK7 , I appreciate your response, but i'm not using the lui-button, i'm actually using the one newly added the Dashbord bundle :
May be you can try like
element.style {
background-color: #0C639B;
}
Or you can use
When i add this line, all the backgrounds of all buttons change , still need to specify that i need to customize only the navigation buttons. Also, still can't get rid of that white border :
you can change background color using button properties
Thank you @NitinK7 for your help, I actually found a solution for my issue , I added these lines in my css file in order to modify the border radius and get the shape I wanted :
.qv-object .qv-inner-object {
padding: 10px;
border-bottom-right-radius: 30px
}
And then I changed the background color in the appearance section to match the image .
This is the final result :
Hi,
I was facing similar issue - changing button color with CSS and I've found solution. This is how I accessed button properties:
.qv-object-action-button .qv-object-content button{
background: #ffffff!important;
color: #48b2c8 !important; }
Hope it works for all 🙂
Karolina