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:

image

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

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -