Page 1 of 2
CSS dynamic ? Less Creator?
Posted: 12 Nov 2015, 00:37
by vished
Dear all,
I would like to have my color dynamic.
For example user1 would like to have the top (and base color in) in blue
User2 would like to have the color in the top menu (and base color in) red
How can I do this?
User1 and User2 are not at the same time online. This means it is possible to use everytime only one of my css class.
1)
Is there a for example a creator like a GUI for chanhing easily the base color? I think this is not the case to create this with the elements from Primefaces.
2) Where should I store the generated css classes? I think I cannot save it in the webApp resources folder because it will be change? It should be store in a folder for example from the application server? Or I am wrong?
Any ideas?
Re: CSS dynamic ? Less Creator?
Posted: 20 Nov 2015, 16:02
by mert.sincan
I think you can use less.js.
Some links;
http://code.runnable.com/UnP3Yzjpzm8_AA ... or-less-js
http://stackoverflow.com/questions/7823 ... -variables
My example code;
TestView.java;
Code: Select all
package org.primefaces.rio.view;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.context.RequestContext;
@ManagedBean
@SessionScoped
public class TestView implements Serializable {
private String username;
private String color;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public void submit() {
RequestContext requestContext = RequestContext.getCurrentInstance();
if(username.equals("Rio"))
color = "#000000";
else
color = "#ffffff";
String callScript = "changeColor('" + color + "');";
requestContext.execute(callScript);
}
}
test.xhtml
Code: Select all
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/template.xhtml">
<ui:define name="head">
<link rel="stylesheet/less" type="text/css" href="resources/less/layout/rio-layout.less"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.js"></script>
<script type="text/javascript">
function changeColor(color) {
less.modifyVars({
'@topbar-bgcolor': color
});
less.refreshStyles();
}
</script>
<style type="text/css">
.jqplot-target, .jqplot-axis {
color: #778D9B;
}
</style>
</ui:define>
<ui:define name="content">
<div class="Container100">
<div class="ContainerIndent">
<div class="Card ShadowEffect HeiAutoOnMobile" style="height:392px;">
<h:form>
<p:inputText value="#{testView.username}" />
<p:commandButton value="Login" actionListener="#{testView.submit}" />
</h:form>
</div>
</div>
</div>
</ui:define>
</ui:composition>
I changed the value of @topbar-bgcolor.
If username is "Rio", @topbar-bgcolor-> black
otherwise @topbar-bgcolor-> white.
(Default is #03a9f4)
Screenshot;
Re: CSS dynamic ? Less Creator?
Posted: 24 Nov 2015, 01:19
by vished
hm I think this is not that what I want to do:
I have a customer which would like to have the header in green.
Tomorrow I have a customer which would like to have the header in red....
One CSS is in use only one time.
So please correct me if I´m wrong:
I have two css - files in my (e.g.) directory:
- C:/mywebProject/css/custom.css
- C:/mywebProject/css/default.css
custom.css is the css-File which will be customized from the customer
default.css is the default css-file (in case something goes wrong for adjust custom.css)
First question:
Is it possible to use the css - file in my project? How can I do this?
Currently I have:
Code: Select all
<h:outputStylesheet name="css/rio-layout.css" library="rio-layout" />
Second question:
I would like to have a small web interface in which the customer adjust the base color for example.
After he click a button "save" the custom.css will be created.
Is this also possible? How can I do this with less-file?
Thank you very much for any help
Re: CSS dynamic ? Less Creator?
Posted: 28 Mar 2016, 00:52
by vished
Ok, I tried your code. This works but I need:
a) The color - Codes are stored in the database for example: @topbar-bgcolor (I will add to this also some other)
I need to load the defined color - code on init from my application.
How can I do this?
So I need moreless to store some color for the header in my database and than: load this stored color on the page load.
Re: CSS dynamic ? Less Creator?
Posted: 01 Apr 2016, 10:14
by mert.sincan
I have two css - files in my (e.g.) directory:
- C:/mywebProject/css/custom.css
- C:/mywebProject/css/default.css
custom.css is the css-File which will be customized from the customer
default.css is the default css-file (in case something goes wrong for adjust custom.css)
First question:
Is it possible to use the css - file in my project? How can I do this?
Currently I have:
Code: Select all
<h:outputStylesheet name="css/rio-layout.css" library="rio-layout" />
Second question:
I would like to have a small web interface in which the customer adjust the base color for example.
After he click a button "save" the custom.css will be created.
Is this also possible? How can I do this with less-file?
I found a new solution. You can add default.css and custom.css into webapp/resources/rio-layout/css/
Then, please follow this steps;
- add this tags in template;
Code: Select all
....
<h:outputStylesheet name="css/default.css" library="rio-layout" rendered="#{testView.flag}" />
<h:outputStylesheet name="css/custom.css" library="rio-layout" rendered="#{not testView.flag}" />
</h:body>
- please try my test codes;
test.xhtml
Code: Select all
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/template.xhtml">
<ui:define name="content">
<div class="Container100">
<div class="ContainerIndent">
<div class="Card ShadowEffect HeiAutoOnMobile" style="height:392px;">
<h:form>
<p:inputText value="#{testView.username}" />
<p:commandButton value="Login" actionListener="#{testView.submit}" ajax="false" />
</h:form>
</div>
</div>
</div>
</ui:define>
</ui:composition>
TestView.java
Code: Select all
package org.primefaces.rio.view;
import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "testView")
@SessionScoped
public class TestView implements Serializable {
private String username;
private boolean flag = true;
@PostConstruct
public void init() {
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public void submit() {
if(username.equals("Rio"))
flag = true;
else
flag = false;
}
public boolean isFlag() {
return flag;
}
public void setFlag(boolean flag) {
this.flag = flag;
}
}
If username is "Rio", "default.css" loading. If not 'Rio', "custom.css" loading.
My default.css and custom.css;
default.css
Code: Select all
#layout-topbar {
background-color: white !important;
}
custom.css
Code: Select all
#layout-topbar {
background-color: black !important;
}
Re: CSS dynamic ? Less Creator?
Posted: 01 Apr 2016, 10:32
by mert.sincan
a) The color - Codes are stored in the database for example: @topbar-bgcolor (I will add to this also some other)
I need to load the defined color - code on init from my application.
How can I do this?
So I need moreless to store some color for the header in my database and than: load this stored color on the page load.
For this question, I think you can add a list into your database. Exp;
Code: Select all
Username | Layout color (type of String)
-------------------------------------------------
aragorn | layout color informations (for aragorn) (exp; topbar-bgcolor-> black, topbar-* -> red etc. )
other user | .....
Then, in bean.java
Code: Select all
@ManagedBean
@SessionScoped
public class TestView implements Serializable {
@PostConstruct
public void init() {
/*get database values */
RequestContext requestContext = RequestContext.getCurrentInstance();
String callScript = "changeColor('" + layout color informations for user + "');";
requestContext.execute(callScript);
}
Then,
Code: Select all
<ui:define name="head">
<link rel="stylesheet/less" type="text/css" href="resources/less/layout/rio-layout.less"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.js"></script>
<script type="text/javascript">
function changeColor(color_informations) {
less.modifyVars({
/* add color_informations */
});
less.refreshStyles();
}
</script>
</ui:define>
...
Re: CSS dynamic ? Less Creator?
Posted: 01 Apr 2016, 11:28
by vished
Thanks. I will try this.
One question before: what do you mean here exactly /* add color_informations */.
Can you give me an example for /* add color_informations */
Do you mean here?
less.modifyVars({
'@topbar-bgcolor': color
});
I would prefere to define this String directly in my ManagedBean and use something like:
function changeColor(color) {
less.modifyVars({
color
});
less.refreshStyles();
aragorn wrote:
function changeColor(color_informations) {
less.modifyVars({
/* add color_informations */
});
less.refreshStyles();
}
[/code]
Re: CSS dynamic ? Less Creator?
Posted: 04 Apr 2016, 09:27
by mert.sincan
Do you mean here?
less.modifyVars({
'@topbar-bgcolor': color
});
Yes.
function changeColor(color) {
less.modifyVars({
color
});
less.refreshStyles();
I agree with you. I wanted to say something like you told. Exp;
Code: Select all
// bean.java
@PostConstruct
public void init() {
/*get database values */
colorArray = ... // exp; colorArray[0] = "topbar-bgcolor: red", colorArray[1] = ... etc.
RequestContext requestContext = RequestContext.getCurrentInstance();
String callScript = "changeColor('" + colorArray + "');";
requestContext.execute(callScript);
}
//JS
function changeColor(colorArray) {
var variables = new Object;
$.each( colorArray, function( i, item ) {
var itemArr = item.split(":"),
key = itemArr[0], value = itemArr[1];
variables['@' + key] = value; /* variables['@topbar-bgcolor'] = 'red' */
});
less.modifyVars(variables);
less.refreshStyles();
}
Re: CSS dynamic ? Less Creator?
Posted: 01 May 2016, 20:45
by vished
So I had time to test it but it´s not working for me. Here my code:
Code: Select all
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions"
xmlns:shiro="http://shiro.apache.org/tags">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
</f:facet>
<h:outputScript name="js/ripple-effect.js" library="rio-layout" />
<h:outputScript name="js/perfect-scrollbar.js" library="rio-layout" />
<h:outputScript name="js/layout.js" library="rio-layout" />
<link href="/favIcon/favIcon.ico" />
<ui:define name="head">
<link rel="stylesheet/less" type="text/css"
href="resources/less/layout/rio-layout.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.js"></script>
<script type="text/javascript">
function changeColor(colorArray) {
var variables = new Object;
$.each( colorArray, function( i, item ) {
var itemArr = item.split(":"),
key = itemArr[0], value = itemArr[1];
variables['@' + key] = value; /* variables['@topbar-bgcolor'] = 'red' */
});
less.modifyVars(variables);
less.refreshStyles();
}
</script>
</ui:define>
</h:head>
Here the method:
Code: Select all
public void init() {
/* get database values */
List<String> colorArray = new ArrayList<String>();
String s1 = "topbar-bgcolor: red";
colorArray.add(s1);
RequestContext requestContext = RequestContext.getCurrentInstance();
String callScript = "changeColor('" + colorArray + "');";
requestContext.execute(callScript);
}
Could you help me, please.
Re: CSS dynamic ? Less Creator?
Posted: 05 May 2016, 14:17
by mert.sincan
Hi Vished,
Sorry for my late reply. I changed my above codes. Please try the following example;
TestView.java
Code: Select all
package org.primefaces.rio.view;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import org.primefaces.context.RequestContext;
@ManagedBean(name = "testView")
public class TestView {
private String placeholder;
@PostConstruct
public void init() {
/* dummy variable to call init method on page */
placeholder = "TESTTT";
/* --get database values -- */
List<String> colorArray = new ArrayList<String>();
String s1 = "topbar-bgcolor: red";
String s2 = "logo-bgcolor: yellow";
colorArray.add(s1);
colorArray.add(s2);
/* ------------------------ */
StringBuilder sb = new StringBuilder();
for(String item: colorArray) {
sb.append(item).append(";"); // topbar-bgcolor: red;logo-bgcolor: yellow;
}
RequestContext requestContext = RequestContext.getCurrentInstance();
String callScript = "changeColor('" + sb.toString() + "');";
requestContext.execute(callScript);
}
public String getPlaceholder() {
return placeholder;
}
public void setPlaceholder(String placeholder) {
this.placeholder = placeholder;
}
}
template.xhtml
Code: Select all
<h:body>
.....
<h:outputStylesheet name="css/font-awesome.css" library="rio-layout" />
<h:outputStylesheet name="css/rio-layout.css" library="rio-layout" /> <!-- you can remove this line -->
<link rel="stylesheet/less" type="text/css" href="resources/less/layout/rio-layout.less"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.js"></script>
<script type="text/javascript">
function changeColor(colorString) {
var colorArray = colorString.split(";"),
variables = [];
$.each(colorArray, function (i, item) {
var itemArr = item.split(":"),
key = itemArr[0], value = itemArr[1];
if(key.length) {
variables['@' + key] = value; /* variables['@topbar-bgcolor'] = 'red' */
}
});
less.modifyVars(variables);
less.refreshStyles();
}
</script>
</h:body>
</html>
empty-page.xhtml
Code: Select all
<ui:define name="content">
<div class="Container100">
<div class="ContainerIndent">
<div class="Card ShadowEffect TexAlCenter">
<p:inputText placeholder="#{testView.placeholder}" />
</div>
</div>
</div>
</ui:define>
Screenshot;