Qlik Community

New to Qlik Sense

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

Announcements
Customer & Partners, DEC. 9, 11 AM ET: Qlik Product & Strategy Roadmap Session: Data Analytics REGISTER NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
jenriquez
Contributor III
Contributor III

Customize Navigation Button using CSS

Hi, I'm trying to remove borders on Navigation Button.

button.PNG

The button have a borders because I've inserted a css code like this

button code.PNG

I've inserted that code because I  have a requirements regarding how the chart should look. But I also have a requirements that the buttons should not adapt the border and border color of a chart.

I have searched and have not find one of any documentation or examples of configuring the css style of a navigation button.

I hope it is configurable!

Thanks.

Labels (2)
12 Replies
Gui_Approbato
Creator III
Creator III

Hello,

Check out here how to change the css with a trick:

http://approbato.com/blog/customize-your-qlik-page-css-without-themes-trick/

or straight to the video https://youtu.be/OeeEUTCFGIk 

Regards

ArnadoSandoval
Specialist II
Specialist II

Hi @jenriquez 

We can style QlikSense's buttons, there is not need to use a Theme or CSS, take a look at the screen shot below; the styling properties are located in the Appearance section, styling defined there goes directly into the html's button style property.

Button-Style-01.png

Hope this helps,

Arnaldo Sandoval
A journey of a thousand miles begins with a single step.
jenriquez
Contributor III
Contributor III
Author

hello @ArnadoSandoval 

I have a requirements to find a way using custom theme extension to not adapt the border and border color

ArnadoSandoval
Specialist II
Specialist II

Hi @jenriquez 

A big challenge then, because the Theme's styles are overwritten by the button's style attributes, and I did not find a way to disable the button's style attribute, unless you develop a button extension.

hth

Arnaldo Sandoval
A journey of a thousand miles begins with a single step.
jenriquez
Contributor III
Contributor III
Author

hi @ArnadoSandoval 

Is there no way to add a css or json code on my theme extension? to make the button no-border?

jenriquez
Contributor III
Contributor III
Author

jenriquez_1-1603786079105.png

I have a two buttons here and I already remove the border button of Share Button under Qlik Dashboard Bundle using the above css code but I'm stuck removing the border button of charts > button

Can someone help me? 

jenriquez_0-1603785907840.png

thanks.

 

ArnadoSandoval
Specialist II
Specialist II

@jenriquez 

Congratulations, you did it, I tried this morning with no luck, when I found that my knowledge of CSS was limited; thank you for sharing the solution, I will try tomorrow!

Arnaldo Sandoval
A journey of a thousand miles begins with a single step.
jenriquez
Contributor III
Contributor III
Author

@ArnadoSandoval 

for the other button I already remove the border by using this code

jenriquez_0-1603807409768.png

Thanks.

ArnadoSandoval
Specialist II
Specialist II

@jenriquez 

Are you planning to share your theme here at the community? If you are not, Would you be able to email me its final version? I would like to explore your implementation as you had gone beyond the existing documentation-help

Thanks,

Arnaldo Sandoval
A journey of a thousand miles begins with a single step.