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>
Related
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>
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!
I used JQM's Themeroller to develop a theme for my application. Right now, I'm just trying to get it to work in Chrome.
I have the head of my HTML file set up like so:
<head>
<title>SafeRides</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
and my file director is as follows:
Application/
index.html
themes/
SafeRidesTheme.css
SafeRidesTheme.min.css
images/
Am I just missing something obvious in the layout of my files? If someone could help me realize what's going on here I'd greatly appreciate it.
When using custom theme made by Theme Roller, libraries should be loaded this way.
You should remove jQM defualt style sheet and load jQM structure style sheet before your custom one.
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<link rel="stylesheet" href="themes/SafeRidesTheme.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
I don't know why I get this error when I validate my site, but clearly I am doing something wrong because I get the following error too:
"An body element start tag seen but an element of the same type was already open"
<!DOCTYPE html>
<html lang="en-uk">
<head>
<title> Erasmus+</title>
<meta name="author" content="" />
<meta name="dcterms.rights" content="" />
<meta name="" />
<meta name="keywords" content="" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="" type="text/css" />
<link href="" type="text/css" />
<link rel="stylesheet" type="text/css" href="" />
<link rel="shortcut icon" type="image/x-icon" href="" />
<?php wp_head();?>
<!--[if !IE]><!-->
<style>
</style>
<!--<![endif]-->
<script>
</script>
</head>
<body class="home blog">
It is a wordpress website: www.erasmus-plus.ro
I can't find what I am doing wrong.
Thanks!
Edit: I see that if I remove
<?php wp_head();?>
the error is gone, but isn't it needed for wordpress files?
That's not the complete HTML code. Looking at the source, apparently you have:
<input type='hidden' value='http://erasmus-plus.ro/wp-content/plugins/form-maker' id='form_plugins_url' />
In line 41. That's "displayable" code, so I think it's making that the head part closes and opening the <body> implicitly, and hence complaining when it gets to your explicit tag.
I guess that some stray plugin is misbehaving using wp_head to insert that into your . Try disabling your plugins one by one and you'll probably find the culprit. Probably something related to forms?
I'm trying to use an IE conditional comment to declare a CSS resource:
<h:outputStylesheet name="common.css" library="css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="#{resource['css:ie.css']}" />
<![endif]-->
However, that doesn't seem to work. I'm seeing this in my generated HTML output:
<link type="text/css" rel="stylesheet" href="/context/faces/javax.faces.resource/common.css?ln=css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/context/faces/javax.faces.resource/ie.css?ln=css"/>
<![endif]-->
It works fine without the conditional comment. I'm not using the context parameter javax.faces.FACELETS_SKIP_COMMENTS. How is this caused and how can I solve it?
This indeed won't work as Facelets implicitly HTML-escapes the comment's contents. Your best bet is to put it in a <h:outputText escape="false"> as follows:
<h:outputText value="<!--[if IE]><link rel="stylesheet" type="text/css" href="/#{resource['css:ie.css']}" /><![endif]-->" escape="false" />
This is however a line of ugliness. The OmniFaces JSF utility library has a <o:conditionalComment> for exactly this purpose:
<o:conditionalComment if="IE">
<link rel="stylesheet" type="text/css" href="#{resource['css:ie.css']}" />
</o:conditionalComment>
Unrelated to the concrete problem, you are not really using the library attribute the right way. It should identify a common "theme", not the subfolder where the files are placed in, just put that subfolder in the name attribute instead. See also What is the JSF resource library for and how should it be used?
<h:outputStylesheet name="css/common.css" />
<o:conditionalComment if="IE">
<link rel="stylesheet" type="text/css" href="#{resource['css/ie.css']}" />
</o:conditionalComment>
I suggest
<h:outputText value="<!--[if IE]> " escape="false"/>
<link rel="stylesheet" type="text/css" href="#{request.contextPath}/faces/javax.faces.resource/ie.css?ln=css" />
<h:outputText value=" <![endif]-->" escape="false"/>
So you escape only small piece of code and #{request.contextPath} works as expected