Qlik Community

Ask a Question

New to Qlik Sense

If you’re new to Qlik Sense, start with this Discussion Board and get up-to-speed quickly.

Announcements
March 11, 2PM EST: Do More with Qlik - Getting Started wtih Qlik Sense SaaS - Redux. REGISTER NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
AhlemJerbi
Partner
Partner

How To Customize Navigation Button using CSS

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 :

AhlemJerbi_0-1614071933853.png

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.

1 Solution

Accepted Solutions
AhlemJerbi
Partner
Partner

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 : 

5.PNG

View solution in original post

7 Replies
NitinK7
Creator III
Creator III

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;
}

AhlemJerbi
Partner
Partner

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 : 

AhlemJerbi_0-1614081240189.png

 

NitinK7
Creator III
Creator III

May be you can try like

element.style {

background-color: #0C639B;

}

NitinK7
Creator III
Creator III

Or you can use

NitinK7_0-1614082675762.png

 

AhlemJerbi
Partner
Partner

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 :

4.PNG

NitinK7
Creator III
Creator III

you can change background color using button properties

NitinK7_0-1614093965911.png

 

AhlemJerbi
Partner
Partner

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 : 

5.PNG

View solution in original post