Is it possible to make a custom css for "each" theme?

UI Components for JSF
Post Reply
sarah
Posts: 12
Joined: 26 Nov 2014, 10:43

26 Nov 2014, 12:16

My application has a primefaces theme switcher and in total are five themes (e.g. aristo or home) available to select.

Now I need to change the appearance of a text in a menu with css. This appearance should look in every theme different (e.g. in aristo the hoover of a link should be white, but in the theme aristo it should be black).

Currently I load all primefaces with the pom.xml and I like to keep it that way.

Code: Select all

			<!-- Primefaces -->
			<dependency>
				<groupId>org.primefaces</groupId>
				<artifactId>primefaces</artifactId>
				<version>5.1</version>
			</dependency>

			<!-- Primefaces Themes -->
			<dependency>
				<groupId>org.primefaces.themes</groupId>
				<artifactId>all-themes</artifactId>
				<version>1.0.10</version>
			</dependency>
The theme will be read in the web.xml:

Code: Select all

	<!-- PrimeFaces Theme Definition -->
    <context-param>
      <param-name>primefaces.THEME</param-name>
      <param-value>#{clubCustomizedController.theme}</param-value>
    </context-param>
I dont need a custom theme, because I need to make different css fittings for each theme.
How can I make a customized css 'for EACH theme?
Primefaces: 5.1
JBoss: 7.1
JSF: javax.faces-2.0

tandraschko
PrimeFaces Core Developer
Posts: 3979
Joined: 03 Dec 2010, 14:11
Location: Bavaria, DE
Contact:

26 Nov 2014, 16:12

Sure, something like this ;)

Code: Select all

<h:outputStylesheet library="themeaddons" name="#{clubCustomizedController.theme}.css"  /> 
Thomas Andraschko

PrimeFaces | PrimeFaces Extensions

Apache Member | OpenWebBeans, DeltaSpike, MyFaces, BVal, TomEE

Sponsor me: https://github.com/sponsors/tandraschko
Blog: http://tandraschko.blogspot.de/
Twitter: https://twitter.com/TAndraschko

sarah
Posts: 12
Joined: 26 Nov 2014, 10:43

27 Nov 2014, 09:41

Thank you for the hint.
I tried it out like you mentioned. But I couldn't see anything from it in the sourcecode.

Code: Select all

   <h:outputStylesheet library="themeaddons" name="#{facesContext.externalContext.requestContextPath}/resources/css/#{clubCustomizedController.theme}.css"  />
I tried out the following. This was working and I think I'll stay with this.

Code: Select all

   <link rel="stylesheet" type="text/css"
      href="#{facesContext.externalContext.requestContextPath}/resources/css/#{clubCustomizedController.theme}.css" />
Or is it better to use the h:outputStylesheet instead of the link tag?

I'm having a template with the layout as below, the whole code is like:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!-- Compatibility layer for IExplorer browsers family  -->
	<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
	<!-- Disable caching of requests on all possible browsers  -->
	<meta http-equiv="Cache-Control"
		content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />

	<title><ui:insert name="window_title">eMember</ui:insert></title>

	<link rel="stylesheet" type="text/css"
		href="#{facesContext.externalContext.requestContextPath}/resources/css/screen.css" />

	<link rel="stylesheet" type="text/css"
		href="#{facesContext.externalContext.requestContextPath}/resources/css/components.css" />

	<link rel="shortcut icon"
		href="#{facesContext.externalContext.requestContextPath}/resources/gfx/favicon.ico"
		type="image/x-icon" />

	<link rel="icon"
		href="#{facesContext.externalContext.requestContextPath}/resources/gfx/favicon.ico"
		type="image/x-icon" />
      
        <link rel="stylesheet" type="text/css"
                href="#{facesContext.externalContext.requestContextPath}/resources/css/#{clubCustomizedController.theme}.css" />

		
	<h:outputScript name="js/progress.js" target="head"/>  
 	<p:ajaxStatus onstart="on_start()" oncomplete="on_complete()"/>  			
	<f:view locale="#{languageController.locale}" />
</h:head>
<h:body>
	<p:layout fullPage="true">
		<p:layoutUnit position="north" size="90" resizable="false"
			closable="false" collapsible="false">
			<ui:include src="header.xhtml" />
		</p:layoutUnit>

		<!-- more layoutUnit's -->
	</p:layout>
</h:body>
</html>
Primefaces: 5.1
JBoss: 7.1
JSF: javax.faces-2.0

anmolrani777
Posts: 2
Joined: 09 Apr 2015, 20:48

09 Apr 2015, 20:56

I tried it out like you mentioned.
We are the pioneers in learnalanguage.com - learn latin dumps and tutorials with learnalanguage exam pass guarantee. Download our latest test king ccie Babbel questions to pass real exam of mcitp training in Learnamericanenglishonline

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 21 guests