I'm trying to add styles in JSF using css, but I try to open the xhtml, it won't recognize the style.
I've been searching how to do it and I found this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Hello</title>
<h:outputStylesheet library="css" name="style.css" />
</h:head>
<h:body>
<div>
<h1>Hello</h1>
</div>
<div>
</div>
</h:body>
</html>
And as I understood I have to create my css file in the next folder:
WebPage
|_WEB-INF
|_resources
|_css
|_style.css
I'm using Netbeans 8.0.2 and JSF 2.2
With the last changes I got this:
<h:head>
<h:outputStylesheet name="./css/style.css"/>
</h:head> <h:body>
</h:body>
<style type="text/css"></style></html>
Open developer tools in your browser and load the page, if you get a 404 for style.css then take a look at the answer provided by Sebastián Ulloa
Can you try moving this line
<h:outputStylesheet library="css" name="style.css" />
Just after body tag like this:
<h:body>
<h:outputStylesheet library="css" name="style.css" />
...
</h:body>
Related
I've been fighting a problem where my primefaces app could not locate my stylesheet using the tag
I finally "solved" it by using:
<link rel="stylesheet" type="text/css" href="css/my.css"/>
I'm still wondering why the tag didn't work, especially since I spent a while on it thinking maybe the file was in a bad location.
In the code below, when I inspect the source I don't see the link tag nor does it load the CSS file. I've left in the combinations I tried as well as the link tag which does work.
<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">
<h:head>
</h:head>
<h:body>
<h:outputStylesheet library="css" value="my.css"/>
<h:outputStylesheet value="css/my.css"/>
<link rel="stylesheet" type="text/css" href="css/my.css" />
<h1>Hello World PrimeFaces</h1>
<h:button value="xys" />
<p:editor value="uuu" />
<p:spinner />
</h:body>
</html>
This question is just the same as: Primefaces override doesn't work after non ajax refresh who wasn't corrected answered.
This is happening:
I have this page: which have the desired look
And then when I add a document which does a non-ajax request it looks like this:
I'm adding the css libraries like this in the head:
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="general.css"/>
<h:outputStylesheet library="css" name="mEstilo.css"/>
<ui:insert name="recursos"></ui:insert>
<title><ui:insert name="titulo">mGestion</ui:insert> - mGestion</title>
</h:head>
The only situation where the css stop working is there, after a non-ajax request, when I press this button:
<p:commandButton id="b_crearDocumento" value="Aceptar" actionListener="#{iniciarProcesoController.crearDocumento()}"
disabled="#{!iniciarProcesoController.esDocumentoValido}" oncomplete="w_verImportarD.hide()" ajax="false">
</p:commandButton>
That is an accept button for upload a document, with this fileUpload:
<p:column>
<p:fileUpload fileUploadListener="#{iniciarProcesoController.imagenListener}"
mode="advanced" auto="true" update="p_botones"
sizeLimit="20971520"/>
</p:column>
The document is uploaded fine, that's the only problem with this process, the css got messed up.
My JSF 2.0 web project isn't rendering graphics from CSS. It loads images but it cannot load any background color or anything at all. Am I doing anything wrong here? My CSS file contains code for coloring and other things. I am using Bootstrap. My output page is plain black and white. I do not see any error messages in Eclipse.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
<h:head>
<f:facet name="meta-tags">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Aayush Mittal</title>
</f:facet>
<!-- Bootstrap -->
<f:facet name="css-files">
<h:outputStylesheet name="css/bootstrap.css"></h:outputStylesheet>
<h:outputStylesheet name="css/additional.css"></h:outputStylesheet>
<h:outputStylesheet name="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800"></h:outputStylesheet>
<h:outputStylesheet name="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"></h:outputStylesheet>
</f:facet>
<f:facet name="js-files">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<h:outputScript name="js/bootstrap.min.js"></h:outputScript>
<h:outputScript name="js/custom.js"></h:outputScript>
</f:facet>
</h:head>
<h:body class="main-body" data-spy="scroll" data-target="#navbar-collapse1" data-offset="50">
<div class="container-fluid body-prop1" id="home">
<div class="container-fluid section-contents">
<h1 class="welcome-text">Hola, Amigo!</h1>
<div class="container-fluid personal-info">
<p class="personal-info-text">
This website is my experiment with Bootstrap framework. I will try to put up my college projects and personal projects live here. I would also add some interesting stuff
including some blog posts. Feel free to "Stalk" me on Twitter, check out my code on GitHub, or just shoot me an Email if you find anything interesting.
</p>
</div>
</div>
</div>
</h:body>
</html>
This is my directory structure for the project:
OK, so I transferred all the folders - images, js, fonts, and css to a resources directory and moved that directory under WEB-INF folder. After that, I added following code to my web.xml file:
<context-param>
<param-name>
javax.faces.WEBAPP_RESOURCES_DIRECTORY
</param-name>
<param-value>/WEB-INF/resources</param-value>
And that made things to work. Now that I am following the official pattern of using the resources folder here, I had to get rid of relative paths and use only file names. Names of the folders that the files are in go to the library attribute. For example:
<h:outputStylesheet name="css/bootstrap.css"></h:outputStylesheet>
becomes
<h:outputStylesheet library="css" name="bootstrap.css"></h:outputStylesheet>
Also, the resources folder can be put in the WebContent directory as well as long as you put all that information in web.xml. I am writing these instructions just in case someone gets stuck on the same thing!
Is there a way to do that? I mean, I want to declare some css classes (either by using style tag or importing a .css resource) and be able to see those imported classes when using autocomplete in a templated view. i.e:
/resources/css/style.css:
.class1{ display: none; }
/views/template.xhtml:
(...)
<head>
<h:outputStylesheet library="css" name="style.css" />
</head>
(...)
view.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
template="/views/template.xhtml">
(...)
<h:outputText value="HiddenValue" styleClass="<CTRL+SPACE should show class1>"/>
(...)
</ui:composition>
JBoss Tools is capable of this (and many more).
How to install it is detailed in this answer.
I am new to JSF. I am trying to put my inline styles to a CSS file but it is not working. Please find the code below.
My XHTML file is in following location:
\WebContent\template\
CSS is in following location:
\WebContent\resources\css\
XHTML code:
<ui:composition template="/template/BasicTemplate.xhtml">
<h:outputStylesheet library="css" name="style.css" />
<ui:define name="content">
<h:form>
dfdskdksdk <h:outputText value="#{msg['message.test1']}" />
<table width="80%">
<tr>
<h:outputStylesheet library="css" name="css/style.css" />
<td width="15%" background="red" >
<b>Location Coverage*</b>
</td>
I have tried using the following combinations
<h:outputStylesheet library="css" name="css/style.css" />
<h:outputStylesheet library="css" name="style.css" />
<h:outputStylesheet library="css" name="/resources/css/style.css" />
<h:outputStylesheet library="css" name="resources/css/style.css" />
Tried using this line inside and outside <ui:composition> tag.
Thanks
Your mistake is the placement of the <h:outputStylesheet>:
<ui:composition template="/template/BasicTemplate.xhtml">
<h:outputStylesheet library="css" name="style.css" />
<ui:define name="content">
...
</ui:define>
</ui:composition>
When creating a template client, it's important to understand that anything outside <ui:define> is ignored (like as anything outside <ui:composition>).
Move the <h:outputStylesheet> declaration to inside <ui:define>:
<ui:composition template="/template/BasicTemplate.xhtml">
<ui:define name="content">
<h:outputStylesheet library="css" name="style.css" />
...
</ui:define>
</ui:composition>
By the way, the way how you used the generic content type "css" as library name is awkward. As you don't seem to have a real library, just omit it altogether:
<h:outputStylesheet name="css/style.css" />
See also:
What is the JSF resource library for and how should it be used?
How to reference CSS / JS / image resource in Facelets template?