Unable to load CSS file with JSF and Maven

Question

I am trying to get my project structure down to start working on a web app and I have run into an issue where I can't get my css to display on my JSF page. I have followed quite a few threads on here and have made sure to include my css in the resources folder of the src/main/webapp folder, but I still can't seem to get the css to display, but I am not getting a file not found error.

File Structure (irrelevant files are left out)

Src
-----main
-------------resources
-------------webapp
------------------------css
-----------------------------test.css
------------------------images
-----------------------------Test-banner.jpg
-------------WEB-INF
-------------welcome.xhtml

Xhtml JSF File:

<h:head>
    <title>Project Name</title>
    <meta name="author" content="Blah"></meta>

    <h:outputStylesheet library="css" name="/test.css"/>
</h:head>

<h:body style="padding-top: 50px; padding-bottom: 20px;">
    <b:navBar brand="Brand" brandHref="#" inverse="true" fixed="top">
    <b:navbarLinks>
        <b:navLink value="Link" href="#"></b:navLink>
        <b:navLink value="Link" href="#"></b:navLink>
        <b:dropMenu value="Menu">
            <b:navLink value="Action" href="#"></b:navLink>
            <b:navLink value="Another action" href="#"></b:navLink>
            <b:navLink value="Something else here" href="#"></b:navLink>
            <b:navLink></b:navLink>
            <b:navLink header="Nav header"></b:navLink>
            <b:navLink value="Separated link" href="#"></b:navLink>
            <b:navLink value="One more separated link" href="#"></b:navLink>
        </b:dropMenu>
    </b:navbarLinks>
    <h:form styleClass="navbar-form navbar-right">
        <div class="form-group">
            <b:inputText placeholder="Email" fieldSize="sm" />
            <!--input type="text" class="form-control" placeholder="Search"/-->
        </div>
        <div class="form-group">
            <b:inputText placeholder="Password" fieldSize="sm" />
        </div> 
            #{' '}
            <b:commandButton action="a" value="Sign in" look="success" icon="chevron-right" iconAlign="right" />

            #{' '}
            <b:commandButton action="a" value="Join Now" look="success" icon="chevron-right" iconAlign="right" />
    </h:form>
    </b:navBar>

    <div class="defaultPageJumbotron">
    <b:jumbotron>
        <b:container>
            <h1>Welcome to Site!</h1>
            <p>This is a template for a simple marketing or informational
                website. It includes a large callout called a jumbotron and three
                supporting pieces of content. Use it as a starting point to create
                something more unique.</p>
            <p>
                <a
                    href=""
                    class="btn btn-lg btn-info">View Page Source »</a>
            </p>
        </b:container>
    </b:jumbotron>
    </div>
</h:body>

CSS File

.defaultPageJumbotron{
    margin-bottom: 0px;
    background-image: url (/images/Test-Banner.jpg);
    background-position: 0% 25%;
    background-size: cover;
    background-repeat: no-repeat;
}

score -2 · Answer 1 · answered Jan 30 '18 at 08:34

-2

Could this be the problem?

<h:outputStylesheet library="css" name="/test.css"/>

change pls

<h:outputStylesheet library="css" name="/webapp/css/test.css"/>

answered Jan 30 '18 at 08:34

Ramazan ŞAHİN

37
7

If you think something is a problem and needs changing, adding an explanation to why you think the change is needed is always a good thing to do. – Kukeltje Jan 30 '18 at 12:31

Unable to load CSS file with JSF and Maven

1 Answers1