twitter bootstrap - CSS not working in JSF 2.0 project -
my jsf 2.0 web project isn't rendering graphics css. loads images cannot load background color or @ all. doing wrong here? css file contains code coloring , other things. using bootstrap. output page plain black , white. not see 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 bootstrap's javascript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- include compiled plugins (below), or include individual files 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"> website experiment bootstrap framework. try put college projects , personal projects live here. add interesting stuff including blog posts. feel free "stalk" me on twitter, check out code on github, or shoot me email if find interesting. </p> </div> </div> </div> </h:body> </html>
this directory structure project:
ok, transferred folders - images, js, fonts, , css resources directory , moved directory under web-inf folder. after that, added following code web.xml file:
<context-param> <param-name> javax.faces.webapp_resources_directory </param-name> <param-value>/web-inf/resources</param-value>
and made things work. following official pattern of using resources folder here, had rid of relative paths , use file names. names of folders files in go library attribute. example:
<h:outputstylesheet name="css/bootstrap.css"></h:outputstylesheet>
becomes
<h:outputstylesheet library="css" name="bootstrap.css"></h:outputstylesheet>
also, resources folder can put in webcontent directory long put information in web.xml. writing these instructions in case gets stuck on same thing!
Comments
Post a Comment