I'm trying to link css file to xhtml page in several ways but nothing what I did want to work.
Here is folders structure of project:
Project
Java serources
WebContent
**index.xhtml**
META-INF
WEB-INF
style
**style.css**
Now in index.xhtml file I have:
<link rel="stylesheet" href="style/style.css" />
Can someone tell me what I do wrong?
Add resources folder under the WebContent
and inside resources create css folder
then access the files like this
<h:outputStylesheet library="css" name="myNewStylesFile.css" target="head" />
Here's a tutorial Resources (library) in JSF 2.0
Put your link tag as I mention below:
<link href="style/style.css" rel="stylesheet" type="text/css"/>
Related
I create nuget about my component(.razor,.razor.cs) and some staticwebassets(.css,.js).
Once packed I'm sure nuget .nupkg > staticwebassets folder contains my css and js
but when project use nuget just can reference the razor,static file doesn't work
I tried to link my.css in index.html
but not sure is the wrong URL or other mistakes
my_nuget_component
<link href="_content/my_nuget_component/staticwebassets/my.css" rel="stylesheet" />
antdesign
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
how can I link static file like antdesign?
I'm new to Sinatra and am trying to reference a stylesheet from an ERB file. I have tried the methods used in "Loading Stylesheets in Sinatra" but the stylesheet is still not loading.
My HTML is in views/index.rb and the stylesheet is views/styles/main.css. The controller logic is in app.rb.
The HTML itself is displaying when I load it on a local server.
The folder structure is:
|-- app.rb
|-- config.ru
|-- Gemfile
|-- Gemfile.lock
|-- lib
|-- spec
| |-- spec_helper.rb
|-- views
| |-- index.erb
| |-- styles
| | |-- main.css
app.rb is:
get '/' do
erb :index
end
index.erb did not work:
<link href="<%= url('views/styles/main.css') %>" rel="stylesheet" type="text/css" />
<link href="<%= url('/main.css') %>" rel="stylesheet" type="text/css" />
My repo is: https://github.com/natstar93/Thermostat-day3
Can someone help me work out how to reference the stylesheet?
Static assets like stylesheets should go in a public directory, not views which is for templates that produce different output for each request.
You should create a directory named public alongside views and copy the styles directory to it. Then the url to the stylesheet will be /styles/main.css:
<link href="<%= url('/styles/main.css') %>" rel="stylesheet" type="text/css" />
You might also need to enable static asset serving (the docs suggest that it is disabled by default in modular apps, but actually it appears to depend on whether the public dir exists – it can’t hurt to be explicit). Add this to your app class to turn this on:
enable :static
I'm dipping my toes into ASP.NET 5 (vNext). To do that, I downloaded Visual Studio 2015 RC. I created a new ASP.NET Web Application. Then, in the next dialog I chose "Empty". From there I added a basic controller and a basic view.
I want to add bower and reference Zurb Foundation. However, I'm not sure how to do that. I've added a bower.json and .bowerrc file. Traditionally, I would install my bower packages in a directory called "libraries". I configured it like so:
.bowerrc
{
"directory" : "/public/libraries"
}
Then, in my views, I'd have code that looked like this:
<link rel="stylesheet" src="~/public/libraries/foundation/foundation.min.css" />
I can see that when I run bower, I am in fact downloading the libraries and they are being placed in /public/libraries. However, when I deploy it, there seems to be an issue. It looks like the deployment is getting ran from wwwroot. However, I'm not sure what to do about
Client-side packages loaded via bower
My resources (i.e. images, css, javascript, fonts, etc.) that I need my app to use.
What do I need to do to access static files a) during development which seems to use the typical file structure and b) during deployment where the stuff seems to run from wwwroot?
During development and production, you need to put stuff under the webroot if you have it defined. You can do this by gulp or grunt task. See here for an example.
Assuming you have the following structure:
└───wwwroot
├───js
│ └───foo.js
│ └───bar.js
You will be able to reach out to them by:
<link rel="stylesheet" src="~/js/bar.js" />
<link rel="stylesheet" src="~/js/foo.js" />
You should not be making reference in your views to the location of the bower dependencies, instead you should be referencing the relative path within wwwroot.
To see how it all fits I recommend creating a new project using the ASP.NET 5 Web Page template in VS 2015 RC.
In package.json your tool dependencies (resolved by npm) are listed. Notice for the default project gulp is included here. Gulp is the default task runner but you can use any task runner you like. The bower dependencies by convention are defined in bower.config.
By convention the location for bower dependencies is bower_components off the
project root.
If you look in gulpfile.js you will see that it copies the dependencies from bower_compontents to /lib off the project webroot (/wwwroot by default).
In the view _Layout.cshtml you will see the references to the libraries is ~/lib not /bower_components.
#inject IOptions<AppSettings> AppSettings
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title - #AppSettings.Options.SiteTitle</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
asp-fallback-test-class="hidden" asp-fallback-test-property="visibility" asp-fallback-test-value="hidden" />
<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap-touch-carousel/0.8.0/css/bootstrap-touch-carousel.css"
asp-fallback-href="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css"
asp-fallback-test-class="carousel-caption" asp-fallback-test-property="display" asp-fallback-test-value="none" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
</head>
So in summary:
Define client side dependencies in bower.config (or using some
other package mananger)
Use gulp scripts to manage tasks (copying, minifying, etc).
Only make references in views to locations within webroot (using ~ relative paths).
When you build/publish all dependencies should be resolved prior to deploying
to server.
Am currently working on a spring mvc project on Eclipse. Am unable to get an external css working in a .jsp . My folder structure is as follows
Myproj, WebContent,
WEB-INF,
css,
.css files
I use the following piece of code to reference the css file.
<link href="<c:url value="/css/filename.css" />" rel="stylesheet" type="text/css" />
I use spring jars version 3.1.0. I have also added the following lines of code within myproj-servlet.xml
<mvc:annotation-driven />
<mvc:resources location="../css/" mapping="/css/**"/>
Still am unable to access my css file or get it apply to my jsp file. While using firebug i see that the css link gets a 404 not found only. Where could be the issue/ how can i resolve?
Change your resource location to
<mvc:resources location="/WEB-INF/css/" mapping="/css/**"/>
and while accessing on jsp you could very well write
<c:set var="context" value="${pageContext.request.contextPath}" />
<link rel="stylesheet" type="text/css" href="${context}/css/style.css" />
Cheers.
In Netbeans I have a sub folder called css and a file in it called testcss.css.
How do I get Facelets file from root to access the testcss.css file?
<meta http-equiv="content-type" content="text/html; charset=windows-1252" />
<link rel="stylesheet" type="text/css" href="/testcss.css" title="style" />
My directory structure is:
Root (not a folder)
css (folder)
testcss.css
A screenshot of the structure is available here.
You should put CSS (and JS and image) resources in /resources folder (create one if it doesn't exist).
Web Pages
|-- META-INF
|-- WEB-INF
|-- resources
| |-- css
| | `-- style.css
| |-- js
| | `-- script.js
| `-- img
| `-- logo.png
|-- index.xhtml
:
Once accomplished that, you should be able to reference the CSS (and JS and image) resources using the appropriate JSF components <h:outputStylesheet> (and <h:outputScript> and <h:graphicImage>) as follows:
<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" />
<h:graphicImage name="img/logo.png" />
No need to fiddle with relative paths. JSF will automagically generate the proper URL.
See also:
How to reference CSS / JS / image resource in Facelets template?
What is the JSF resource library for and how should it be used?
Structure for multiple JSF projects with shared code
You need to call the correct path.
for example if your files are organized:
ROOT
CSS(FOLDER)
styles.css
UPLOADED(FOLDER)
index.html
if you are trying to access the styles file from index.html you need to:
href="../css/styles.css"