CSS dynamic ? Less Creator?
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?
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?
PF 8.0
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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;
test.xhtml
I changed the value of @topbar-bgcolor.
If username is "Rio", @topbar-bgcolor-> black
otherwise @topbar-bgcolor-> white.
(Default is #03a9f4)
Screenshot;
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);
}
}
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>
If username is "Rio", @topbar-bgcolor-> black
otherwise @topbar-bgcolor-> white.
(Default is #03a9f4)
Screenshot;
Github Profile: https://github.com/mertsincan
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:
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
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" />
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
PF 8.0
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.
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.
PF 8.0
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I found a new solution. You can add default.css and custom.css into webapp/resources/rio-layout/css/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?
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>
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>
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;
}
}
My default.css and custom.css;
default.css
Code: Select all
#layout-topbar {
background-color: white !important;
}
Code: Select all
#layout-topbar {
background-color: black !important;
}
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
For this question, I think you can add a list into your database. Exp;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.
Code: Select all
Username | Layout color (type of String)
-------------------------------------------------
aragorn | layout color informations (for aragorn) (exp; topbar-bgcolor-> black, topbar-* -> red etc. )
other user | .....
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);
}
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>
...
Github Profile: https://github.com/mertsincan
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();
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]
PF 8.0
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Yes.Do you mean here?
less.modifyVars({
'@topbar-bgcolor': color
});
I agree with you. I wanted to say something like you told. Exp;function changeColor(color) {
less.modifyVars({
color
});
less.refreshStyles();
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();
}
Github Profile: https://github.com/mertsincan
So I had time to test it but it´s not working for me. Here my code:
Here the method:
Could you help me, please.
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);
}
PF 8.0
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Hi Vished,
Sorry for my late reply. I changed my above codes. Please try the following example;
TestView.java
template.xhtml
empty-page.xhtml
Screenshot;
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;
}
}
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>
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>
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 12 guests