I am creating multi-language web based application using JSF 2.0.
For css earlier I was using
<h:outputStylesheet library="css" name="setFontForAll.css"/>
and inside CSS file I had
font-size: #{msg['myDir'].contains('LTR')?'10pt':'14pt'};
^^^ ^^^
English Arabic
However due to CSS caching, same CSS file is there and I am getting font as 10pt continously even if I choose Arabic.
Hence I added time after CSS.
<h:outputStylesheet library="css" name="setFontForAll.css?#{language.myTimeinMill}"/>
However when I use this, all my CSS goes for toss... I see default page setup (no css is getting invoked)
When I see view source, I get <link type="text/css" rel="stylesheet" href="RES_NOT_FOUND" />
Any idea what I am doing wrong?
Note : I am using JSF 2.0
I am also printing #{language.myTimeinMill} inside body and everytime I see different time.
The only way I see is using the plain <link> tag.
There is no possibility by using <h:outputStylesheet /> to add a parameter in the URL. One answer on this subject doesn't work anymore on JSF 2.0 :
<h:outputStylesheet target="head" name="blank.css">
#import url('css/setFontForAll.css?version=#{language.myTimeinMill}')
</h:outputStylesheet>
It returns a message :
com.sun.faces.renderkit.html_basic.ScriptStyleBaseRenderer
encodeChildren INFO: outputScript with "name" attribute and nested
content. Ignoring nested content.
That said, I suggest this solution :
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/setFontForAll.css?ln=css&version=#{language.myTimeinMill}" />
<ui:fragment rendered="#{msg['myDir'].contains('LTR')}">
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/css/setFontOverride.css?ln=css&version=#{language.myTimeinMill}" />
</ui:fragment>
Actually, all you need to do is create a folder under webapp/resources/css/mystyle.css where mystyle.css is your css file.
Then in your jsf file, just put
<h:outputStylesheet name="css/mystyle.css" />
JSF will knows and load your css file correctly without the RES_NOT_FOUND error.
PS. this has been tested with primefaces jsf 2.2
Related
As follows in my code i have referenced my css from html
<link rel="stylesheet" href="../static/css/eja.css" type="text/css" media="all" />
and i have this structure
Application class doesnt have anything extra, just standard generated application class.
Seems i need to write /css/eja.css even if it is not existing in this folder.
Cause css resources loaded to /css/** and not to other path.
I've been trying to connect html with the CSS.
I've checked that:
The stylesheet path of the css is correct, and it is: css2/css2.css
The <link rel="stylesheet" type="text/css" href="css2/css2.css" /> code is well written and I think it is.
I also tried to try several code editors in case it was a preview problem, I've already tried Atom and brackets and the two do not show that the CSS gets connected.
HTML code :
The html close tag is written too at the bottom.
CSS
here is where the html and CSS file is placed
As you have mentioned in your statement that css files is css/css2.css
so it means you should link css file by this code.
<link rel="stylesheet" type="text/css" href="css/css2.css" />
You added css2 instead of css as folder name
This code will 100% work, Just make sure your HTML file and CSS2 folder need to be on same level (in same folder).
otherwise this CSS file not link to your HTML.
I have the following code on my xhtml page to override default PrimeFaces styling:
<h:body>
<f:facet name="last">
<h:outputStylesheet library="css" name="main.css" />
</f:facet>
...
</h:body>
This works fine when I am using a stylesheet, that is stored locally on my server.
The Problem is, that I want to include a external (dynamic) stylesheet. So when I am changing the <h:facet> to something like the following, it doesn't work anymore.
<f:facet name="last">
<link type="text/css" rel="stylesheet" href="http://host.de/main.css" />
</f:facet>
If I include the <link> element directly into the <h:head> section of my xhtml page the stylesheet is loaded but the rules get overridden by PrimeFaces.
In the next step I would like to set the href attribute dynamic from my ManagedBean to something like this:
<link type="text/css" rel="stylesheet" href="#{bean.cssUrl}" />
Is this even possible? Or is there another way to achieve what I am describing? Any help is appreciated. Thanks in advance.
EDIT:
I tried in Internet Explorer, Firefox and Chrome (each latest version) and none is working. If I use <h:outputStylesheet name="http://host.de/test.css"> instead of <link> I get RES_NOT_FOUND and status code 404.
<facet name="last"/> for stylesheets should only be used in <h:head/> that is where your stylesheets should end up anyway. If you load them last in your body, you can get weird manifestations in the look and feel of your ui. While loading and building the page and having some slower connections or a busy server, the PF stylesheet is used and when finished loading, your custom css kicks in. This might cause reflows, color changes abd what more
I got it working. The solution was to remove the surrounding <f:facet> element and directly put the <link> under <h:body>:
<h:body>
<link type="text/css" rel="stylesheet" href="#{bean.cssUri}"></link>
...
</h:body>
With this solution I am also able to set the URL of the external stylesheet dynamically in the #PostConstruct method of my ManagedBean (scope is #ViewScoped).
EDIT:
It may be working but #Kukeltje's answer is cleaner and more accurate. I was using <f:facet name="last"> wrong.
Updated code snippet:
<h:head>
<f:facet name="last">
<link type="text/css" rel="stylesheet" href="#{bean.cssUri}"></link>
</f:facet>
</h:head>
I've downloaded a template from w3layouts.com to make a website, and when I unzip the layout and try to open any of the HTML files, none of the CSS styling the page (it just looks as if there's no CSS).
When I inspect the HTML files, the CSS appears to be included in the header. For example, this is included in smartphone/blog.html's header:
<link href="smartphone/css/style.css" rel="stylesheet" type="text/css" media="all" />
You have to simply update this link tag
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
Because in this template href="smartphone/css/style.css". but actually css dictonary present in same level where other html file are. So you just update html file link tag to new href="css/style.css".
Is this template is for website, phone so you must set this template using index.php file to set dynamic path. but above solution is static not a dynamic. if you have to set dynamic path you must configure template step.
I am having trouble getting emacs org-mode to export using my CSS file. I've been searching all day but can't seem to get it to work. The .org file and .css file are in the same directory and I have the following in my .org file:
#+STYLE: <link rel="stylesheet" type="text/css" href="stylesheet.css" />
* First Headline...
* Second Headline...
However, when I export to HTML and view it in my browser, no changes are made. Looking at the source also shows that the default org-mode HTML header was used. Any suggestions?
I see no reference to the STYLE option that you're using. The closest thing I find in the org manual refers to HTML_HEAD and HTML_HEAD_EXTRA:
Each exported file contains a compact default style that defines
these classes in a basic way(2). You may overwrite these settings, or
add to them by using the variables org-html-head' and
org-html-head-extra'. You can override the global values of these
variables for each file by using these keywords:
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="style1.css" />
#+HTML_HEAD_EXTRA: <link rel="alternate stylesheet" type="text/css" href="style2.css" />
My org version is 8.0.2.
Try
#+STYLE:
instead of
#+HTML_HEAD:. It worked for me.