Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I want to be able to dynamically change the font or font size for my entire application, I can pre-define the following in a css file and it will work, but I want to let a user, via a drop down, adjust the font and size.
This css works when statically defined in a css file :
body *:not([class*="z-icon-"]) {
font-family: josefin_sanssemibold;
font-size: 12px;
}
Before zk 7, I could set the library property for fontSize and it would change. That is gone in the current versions of ZK, is there another way to do the same thing?
I have referred to this page to get where I am at : ZK Change Font and Family
Response From ZK :
there are many ways to change the fontSize using CSS.
e.g. you can output a CSS using sessionVariables: <style id="customStyle"> body :not([class="z-icon-"]) { font-family: josefin_sanssemibold; font-size: ${sessionScope.fontSize}; } </style>
And set the session attribute whenever you change the fontSize. Sessions.getCurrent().setAttribute("fontSize", "25px")
However this still requires reloading the page. To get immediate changes you can replace the content of the style element dynamically but calling:
String newSize = "25px"; customStyle.setContent("body :not([class=\"z-icon-\"]) {font-family: josefin_sanssemibold;font-size: " + newSize + ";}")
There are also JS only ways to do the same, in case you need to prevent the additional AJAX request, let me know if you need help on that.
Asked: 2015-10-23 17:13:37 +0800
Seen: 38 times
Last updated: Oct 26 '15