When loading two CSS files via an include I am only seeing one of them being used. The other isn't being included and I don't know why.
I have a standard header file which is included on all of the site's pages.
Example below:
<html>
<head>
<link href="css/jquery-ui.css" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
This is of course a cut down version of the header for simplification. As you can see both CSS files are within the css directory. but only the main CSS file is being recognised.
Either one of the CSS files cannot be loaded (probably because of a typo or a server misconfiguration). You can detect that by checking that all resources are properly loaded in the developer tools of your browser.
The other cause may be that you're implicitly expecting your own stylesheets to take precedence over the default jQuery UI ones. If that's the case, move your own stylesheets under the jQuery UI one, or make your rules more specific than the default ones.
This is a simple demo that shows that your example works.
Solution:
In your live example, you're missing rel=stylesheet for the jQuery UI stylesheet:
<link href="css/jquery-ui-1.8.13.custom.css" type="text/css"/>
should be
<link href="css/jquery-ui-1.8.13.custom.css" type="text/css" rel="stylesheet" />
You are missing the rel attribute in the first link tag, and most likely this is the reason it's not being parsed as CSS.
Looks like you forgot to close you link tags, just add a forward slash '/' before the closing of both tags.
You're certain the second file is linked correctly? Check Firebug's NET panel, for instance, to double-check that it's loading and not returning a 404 error or somesuch.
You wouldn't be the first developer to be brought down by an unintentional typo!
Related
Is there any standard place and way to define a css file and reference it in some of the pages of a subsite?
The following code works, but having an absolute path and an arbitrary location doesn't seems to be a good solution (specially when we are dealing with hundreds of topics.
<link rel="stylesheet" type="text/css" href="PATH_TO_FILE/mystyle.css">
Attaching your CSS file at any page and referencing it by appending /pub/%WEB%/Webhome/ to the path works. Maybe not a standard solution, but still works.
<link rel="stylesheet" type="text/css" href="/pub/%WEB%/Webhome/mystyle.css">
I've tried this exact code on my other computer and once run it is shown differently. Could you correctly show me how I should insert the references? Also how could I override the style of the default bootstrap?
I think that's all the info you need, but if you need anything else just ask.
I assume that you html file is inside wwwroot folder, so:
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<style>
...
</style>
</head>
Where you have:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Remove the ~.
I believe that the ~ is a Windows only thing used for finding the path. If it's your mac where Bootstrap is not working, then I'm 98% sure that was the issue. ~ isn't used in the mac environment for paths like it is on Windows.
You will also need to do that for your other paths being found this way.
Going in and changing the bootstrap CSS can get a little complicated so I usually create a new CSS file with my edits. Since CSS is cascading stylesheets, I make sure that my CSS file is the last stylesheet in the head section so it overrides the stylesheets above it.
The location of your CSS file in reference to your HTML file will determine what the file path looks like in your reference. If your HTML file is in the root directory, the reference/paths mentioned in the other answers should work.
As stated above:
<link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
Remove ~.
If you want to overwrite CSS place the default.css or your own css after the one you want to overwrite for example:
<!-- Bootstrap and Custom CSS Style Sheets -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/default.css">
I'm rather new to this so its mostly (copy and paste) with a little YouTube and reading materials here and there.
Why have both? Please simplify you answer, don't go so technical.
<style type="text/css"> is when you want to have style rules embedded within the page.
<link rel="stylesheet" href="path/to/style.css" /> is when you have a separate stylesheet file that you want to reference in the current page - doing this means that clients don't have to download the CSS every time, which makes page-loads faster.
CSS has the #import directive, if you use <style>#import style.css;</style> then it's roughly equivalent to <link rel="stylesheet" href="style.css" /> (but with some minor differences: see Difference between #import and link in CSS ).
Method 1 (using <style type="text/css">)
Is simple way to declare CSS. But it should be used for small codes. When you want to overwrite an attribute of the main stylesheet.
Method 2 (using <link rel="stylesheet" href="path/to/style.css" />)
The first advantage of this method is that, we have a style in an external file. And that means that we can use it repeatedly. But this is not the end of the advantages. You can tell your browser to save the file in the cache. Which reduces page load time.
What is better?
In my opinion Method 2.
Using <style type="text/css"> is for CSS code in your HTML file and <link...> is for including an external CSS file.
The first case <style type="text/css"> is for including css definitions in your html file. The 2nd case puts the css definintions in style.css (or whatever file is the href). The 2nd case makes it easy to use the same css across multiple html files.
The first is used to insert css code directly in your html files, while the second is calling an external css file.
the problem is that I have a css file that is pointed from my baselayout.jsp file as following, when I am in index.php it applies the css but when I move to Profile/view.jsp it does not.
when I look at the source I noticed it is looking the css file in Profile/stylesheets/Base.css rather than myproject/stylesheets/Base.css, how to point to it in a way that works on all pages.
<link href="<s:url value="/stylesheets/mycss.css"/>" rel="stylesheet"
type="text/css" />
Its a breeze, just change the address to solid address, as following
http://www.example.com/myPreoject/stylesheets/Base.css
What is syntax to add external CSS file to jsf?
Tried both ways.Didn't help.
1.
<head>
<style type="text/css">
#import url("/styles/decoration.css");
</style>
</head>
2.
<head>
<link rel="stylesheet" type="text/css" href="/styles/decoration.css" />
</head>
I guess that BalusC may have your answer.
However, I would like to add some additional points:
Suppose that you are running the in the sub directories of the web application.
As my experience, you may want to try this:
<link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>
The '${facesContext.externalContext.requestContextPath}/' link will help you to return immediately to the root of the context.
EDIT: Removed starting / from 'href="/${facesContext.ex...'. If the application is running in the root context, the CSS url starts with // and the browsers could not find the CSS since it is interpreted as http://css/style.css.
I have never used the first, but the second is syntactically valid and should technically work. If it doesn't work, then the relative URL in the href attribute is simply wrong.
In relative URL's, the leading slash / points to the domain root. So if the JSF page is for example requested by http://example.com/context/page.jsf, the CSS URL will absolutely point to http://example.com/styles/decoration.css. To know the valid relative URL, you need to know the absolute URL of both the JSF page and the CSS file and extract the one from the other.
Let guess that your CSS file is actually located at http://example.com/context/styles/decoration.css, then you need to remove the leading slash so that it is relative to the current context (the one of the page.jsp):
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
The updated JSF 2.0 method is a bit tidier. Instead of:
<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/compass.css"/>
you now do this:
<h:outputStylesheet library="css" name="compass.css"/>
and the stylesheet resource should be placed in resources\css. Where resources is at the same level as the WEB-INF.
I think the Sergionni problem is two-fold.
First, it is true that the so-called root relative is, like BalusC said, in fact domain relative, so, in the example is relative to http://example.com/ and not to http://example.com/context/.
So you must specify
<link rel="stylesheet" type="text/css" href="${request.contextPath}/styles/decoration.css" />
BTW BalusC, congratulations, this is the first time I see this correctly explained! I struggled quite a lot to discover this.
But, if you want to simplify and suggest:
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
assuming that the style dir is a sibbling of your current page, then you can have the second problem:
You are then into the relative URL method and, I you came at this page by a forward and not a redirect, your browser may be fooled and not able to follow the relative path.
To solve this second issue, you must add this:
<head>
<base href="http://${request.serverName}:${request.serverPort}${request.contextPath}${request.servletPath}" />
The base element must precede any link.
By the base command, you tell your browser where you are really.
Hope it helps.
And BTW another bizarre thing in this wondeful jsf world:
to link from a page to its facelet template, the root relative link IS, this time, including the context so:
<ui:composition template="/layouts/layout.xhtml">
this links really to http://example.com/context/layouts/layout.xhtml
and not to http://example.com/layouts/layout.xhtml like for <a> or <link>.
Jean-Marie Galliot
Try the code below to import the css in your jsf page.It will work for sure.
<style media="screen" type="text/css">
#import "#{facesContext.externalContext.request.contextPath}/css/Ebreez.css"
</style>