In my JSF webApp I have put all of my resources (js, css, img) into a versioned library as pointed out by BalusC in this answer.
Now my favicon also resided here:
resources --> default --> 1_1 --> img --> favicon.ico
According to this answer the way to add the favicon would be:
<link rel="shortcut icon"
type="image/x-icon" href="#{request.contextPath}/resources/default/1_1/img/favicon.ico"/>
But this way the resource handling that automatically picks files from the highest version folder (e.g. 1_1) is ignored and I would have to change this manually every time.
So is there another way to include the favicon or should the favicon be placed elsewhere (out of the versioned library)?
Use implicit EL #{resource} handler to let JSF convert a resource identifier to proper URL.
<link ... href="#{resource['default:img/favicon.ico']}" />
Note that this is also the way you're supposed to use to reference background images in CSS files.
Related
I use <link type="text/css" href="${resource(dir: 'css', file: 'calender.css')}" />
i don't know why this tag not working.
I have to go back to my recent projects because this is something you set up once and never need to change again. I usually use this line at the top of my gsp files:
<link rel="stylesheet" type="text/css" href="<g:createLinkTo dir='css' file='style.css'/>" />
But for this to work just double check that you have the CSS directory inside web-app:
<YourProject>
|--> web-app
|--> css
|--> images
|--> js
|--> META-INF
|--> WEB-INF
That is normally the directory structure that Grails expects when you tell it to build your WAR file.
This is not how you're supposed to include CSS files in a page when using the resources plugin. You're supposed to define resource bundles/modules in a file grails-app/conf/AppResources.groovy. Then you use the r:require tag to include whole modules in your page. See the resource plugin docs for more details.
Please use this it will solve your problem:-
<g:resource dir="css" file="calender.css" />
For further information go to grails documentation: click here
Is it possible to tell the <h:outputStylesheet to load a file from servlet url ?
like http://my.company.com/MyServletName/jahdkhasdhasjkdha8d98yuifysduifsdh cause if I try something like
<h:outputStylesheet library="css"
name="http://my.company.com/MyServletName/jahdkhasdhasjkdha8d98yuifysduifsdh" target="head" />
where the
http://my.company.com/MyServletName/jahdkhasdhasjkdha8d98yuifysduifsdh
is a servlet that direct it to the right css file , it does not work... the <link tag is not being created
I need this cause when I'm trying to use
<link type="text/css" rel="stylesheet" href="http://my.company.com/MyServletName/jahdkhasdhasjkdha8d98yuifysduifsdh" />
the #{facesContext.externalContext.requestContextPath}'/ expression inside the css file are not getting translated into WebApp Name...
Thanks in advance!
No, you can't. Even when it has worked, it's the servlet who's responsible for EL resolving, not the <h:outputStylesheet> component.
You need to solve the problem differently. I'd start by just putting all CSS dependencies, such as CSS images, in the very same folder as the CSS file itself and then reference them relatively. This way you don't need to fiddle with the context path.
By the way, the #{request.contextPath} is shorter.
I'm using the Resources plugin in Grails 2.0.1. The issue I'm having is getting a JavaScript resource specified using r:external to be placed after all of the other script previously declared using either r:require or r:external, all in the deferred disposition. Currently the resource specified using r:external it is being output in the location where the r:external tag is placed.
I have a layout file that contains an r:require tag to fetch some core resources:
<html>
<head>
...
<r:require module="core" />
</head>
....
</html>
Then a GSP that includes another r:require tag followed by an r:external tag:
<head>
...
<r:require module="forms" />
<r:external dir="js" file="page-specific-resource.js" /> %{-- specifying disposition="defer" has no effect --}%
....
</head>
...
My expectation is each of the JavaScript resources I'm trying to include would be output in the deferred disposition with the core resources first, the forms resources next, and the page-specific resource last. The actual results are that the core and forms resources are output as expected in the deferred disposition, but the page-specific resource is output in head, where the r:external tag is placed (Specifying disposition="defer" seems to have no effect).
Is my expectation incorrect or is this a legitimate issue? Is there another way to specify page-specific resources (I'm trying avoid declaring these types of resources in the resource DSL) and have the positioned after all previously declared resources?
As answered by Marc Palmer on the Grails User mailing list (http://grails.1312388.n4.nabble.com/Placement-Of-JS-Resource-Via-lt-r-external-gt-td4506074.html#none):
I'm afraid your expectation is incorrect.
r:external is just for rendering links where you invoke it.
You need to declare your dependencies, or put your r:external at the
end of the page.
Declaring modules for "functional areas" of your app is profitable. It
means you can also bundle them together if need be, or have fine
grained control and the page no longer needs to be aware of that.
I have a folder for all my css in my main folder called "main." In "main" I have another folder called "math." I would like to use my css in the "math" folder, but when I type:
<link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" />
on the index.html of the "math" folder it doenst work. I think it's because it's looking for the css folder inside of the math folder. How can i link to the css folder, which is not in the math folder?
If I am understanding, your directory structure is as follows:
siteroot
main
math
css
You are looking to link to a style sheet in /main/css from /main/math/index.html.
There are two solutions, the easiest is to use an absolute path:
<link rel="stylesheet" href="/main/css/basic.css" type="text/css" media="screen" />
Absolute paths are a better solution and will cause less headache down the road. I do not know of any drawbacks, either.
Alternatively, you could use '..' to traverse up a directory
<link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />
For example your directory is like this:
Desktop >
ProjectFolder >
index.html
css >
style.css
images >
img.png
You are at your style.css and you want to use img.png as a background-image, use this:
url("../images/img.png")
Works for me!
Use absolute path:
href="/main/css/..."
You must go up to the same directory as css and math using ../
So it would look like ../css/basic.css
If you Want To locate a file inside of that folder use this
<link rel="stylesheet" href="./css/basic.css" type="text/css" media="screen" />
and if you want to locate a file outside of that folder you could use this snippet
<link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />
The answer also has some dependency on whether or not the site is being developed and tested locally or if your publishing your content to a web server and testing links on the Live Site.
If your href attribute's URL is using a Relative URL and has a domain name being mapped to your Document Root on a Live Site, the above answers are correct.
However, if your testing your links where all the files are on a local PC's file system where no web server is being used locally, then you might find the following information helpful too.
If you are testing locally, there is usually no domain associated with your Document Root and the pathing changes in a number of ways.
If you link to a file in any child directories, you will NOT have an initial slash ("/") in your href or in this case a src attribute because there is no domain and the Relative URL is relative to the current page. (The same rules apply to your href URLs as well)
Local testing URLS:
<img src="images/image-1.jpg" alt="my-Image-1">
..as opposed to a Relative URL on a page in a Live Site that has a domain name where you WOULD use an initial forward slash because it will be relative to the domain.
Remote Live Testing:
<img src="/images/image-1.jpg" alt="my-Image-1">
I am aware this is not the situation you ask about but it should help with the following two examples where the folders are adjacent and parent directories on a local file system. Your situation is that your Relative URL is to a file located in an adjacent directory. See below if your developing and testing locally.
For Relative URLs linking to your css stylesheet files in an adjacent directory or even links to files a parent directory above your current page on a local filesystem (usually without a domain), your href attribute URL pathing should use a double-dot-slash (../). So your situation (if testing locally without a domain) is:
<link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />
...as indicated by #Cory Dolphin above.
I experienced this and found that my issue was that I kept finding different results depending on where I was testing and it was driving me mad.
I originally thought the pathing difference had to do with my local files being on my local Windows system and the reason it was slightly different was becuase of the file system of my remote Linux Apache VPS.
I found that it has more to do with whether it has a domain mapping to your site files or not. This is addressed somewhat in W3Schools.com's Page in the section that's titled The src Attribute and Relative URLs.
how many methods for adding style sheets in a page using Asp.net MVC
Wherever you're specifying the CSS for your details page instead of a relative path e.g.
<link href="../../Content/CSS/details.css" rel="stylesheet" type="text/css" />
try using the content helper and specifying a virtual path instead
<link href="<%= Url.Content("~/Content/CSS/details.css") %>" rel="stylesheet" type="text/css" />
It seems that the site is having trouble loading getting to the CSS file based on a relative link.
Use absolute links to css instead of relative (eg /Content/site.css" instead of "../Content/site.css"). Also you may use Html.Stylesheet("~/Content/site.css") extension (in MvcContrib library) to specify a stylesheet.
Is the problem not getting the right CSS? If so, then I would check your Details.aspx file and make sure the link to the CSS is the right path. Most likely, your Details.aspx file got moved into a new subdirectory or into another directory, thus making the relative paths between the aspx file and the CSS file different.
I would check the page source from the browser and look to see what the path to the CSS file is. The way I would solve the problem would be to modify the aspx file to use a fully-qualified path to the css file. Make sure that works. Then try changing the full path to use relative path.
I had the same issue when working through an example in an MVC book, it mentioned something about the '~' character only working because the <head> tag has the runat="server" attribute on it. So, I tried adding the runat attribute to the link tag itself, as seen below, and it worked:
<link runat="server" href="~/Content/styles.css" rel="stylesheet" type="text/css" />