background-image: url("") in CSS h:outputStylesheet is not loading [duplicate] - jsf-2

This question already has answers here:
How to reference JSF image resource as CSS background image url
(2 answers)
Closed 7 years ago.
Sorry if question is not properly asked. Image is showing fine in struts project but not in JSF2 project. All the css and buttons are rendering fine except image that has url in css.
Folder structure
resources -> css -> bootstrap.min.css
resources -> img -> glyphicons-halflings.png
bootstrap.min.css
background-image: url("../img/glyphicons-halflings.png");
1 -
if I use <h:outputStylesheet library="css" name="bootstrap.min.css"/> than background-image url generated is http://localhost:8000/img/glyphicons-halflings.png thus image not loading. It should be http://localhost:8000/resources/img/glyphicons-halflings.png
2 - If I use <link href="#{request.contextPath}/resources/css/bootstrap.min.css" rel="styleSheet" type="text/css"/> than
Firefox -> Firebug -> Net tab {resources added multiple times}
http://localhost:8000/resources/resources/img/glyphicons-halflings.png
not sure how to load image which is in css and applied on class.
show EDIT icon as link to click to next page.
<h:outputLink value="edit.xhtml" >
<i class="icon-edit" ></i>
<f:param name="id" value="#{person.id}"/>
</h:outputLink>

You should be using the EL variable #{resource} in CSS to specify image resources.
background-image: url("#{resource['img/glyphicons-halflings.png']}");
See also:
How to reference JSF image resource as CSS background image url

Related

Bundling Styles doesn't work, but straight Link tag works

In my _Layout page, following works:
<link rel="stylesheet" href="#Url.Content("~/Kendo/Content/kendo/2013.2.918/kendo.common.min.css")" />
<link rel="stylesheet" href="#Url.Content("~/Kendo/Content/kendo/2013.2.918/kendo.blueopal.min.css")" />
<link rel="stylesheet" href="#Url.Content("~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.min.css")" />
<link rel="stylesheet" href="#Url.Content("~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.blueopal.min.css")" />
This doesn't work (the styles do get applied, however images referenced in the css don't render):
#Styles.Render("~/bundles/kendoStyle")
here's the Bundle def in App_start -> BundleConfig.cs:
//Kendo Styles:
bundles.Add(new StyleBundle("~/bundles/kendoStyle").Include(
"~/Kendo/Content/kendo/2013.2.918/kendo.common.min.css"
, "~/Kendo/Content/kendo/2013.2.918/kendo.blueopal.min.css"
, "~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.min.css"
, "~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.blueopal.min.css"
//, "~/Kendo/Content/contextMenu.css"
));
What am I doing wrong here? (please note, "Kendo" is setup as an mvc4.5 web app under my main website
Image paths are relative to the folder in which styesheets are located. For example, an image might be referenced like this:
.k-icon {
background-image: url('BlueOpal/sprite.png');
}
Because your bundle redefines the path to your stylesheets, the browser attempts to download the image from ~/bundles/BlueOpal/sprite.png, which doesn't exist. The actual path to the image is ~/Kendo/Content/kendo/2013.2.918/BlueOpal/sprite.png.
Everything works fine when you link to your stylesheets directly (without the bundle) because relative paths correctly point to images on your server. However, because your bundle redefines the virtual path in which the stylsheets are located the relative paths to images no longer work.
If you want to use a bundle you must define it with a path that will not break relative image paths in the stylesheets. In your case, since the KendoUI stylesheets are located at ~/Kendo/Content/kendo/2013.2.918, you should define the bundle with that same path:
bundles.Add(new StyleBundle("~/Kendo/Content/kendo/2013.2.918/bundle").Include(
"~/Kendo/Content/kendo/2013.2.918/kendo.common.min.css",
"~/Kendo/Content/kendo/2013.2.918/kendo.blueopal.min.css",
"~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.min.css",
"~/Kendo/Content/kendo/2013.2.918/kendo.dataviz.blueopal.min.css"
));
I hope that helps.
Hi I hat the same problem. but I saw that the page was able to get the sprite file, but does not show some symbols. The temporally solution was set the bundle EnableOptimizations property to false.
BundleTable.EnableOptimizations = False

Is it possible in Rails/Asset pipeline compress several SVGs to one file?

As you know you can compress several CSS files to one (or JS files). I was wondering if it's possible to compress several SVG to one external file, so the server makes just one request
Basically SVG files are just XML text so it's theoretically possible, however there is a catch how to render several of those images on different places
I'm just wondering
Check the answer to this question, which describes how to configure the filetypes the Asset Pipeline will manage: Using fonts with Rails asset pipeline (despite the title, it applies to more than fonts).
Thx for answer but in the end I ended up doing it like this:
In my case I wanted to use my SVG as a background image of div tag so I don't needed to precompile SVGs, I just put the compress format directly to background-image: url('here')
so for multiple SVG background:
width: 600px:
height: 400px:
background-image: url('data:image/svg+xml ...first svg '), url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjY0MCIgaGVpZ2h0PSI0ODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBTVkctZWRpdCAtIGh0dHA6Ly9zdmctZWRpdC5nb29nbGVjb2RlLmNvbS8gLS0+CgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwb2x5bGluZSBpZD0ic3ZnXzMiIHBvaW50cz0iNTM4LjUsMzMzLjU2OTU2NDgxOTMzNTk0IDMyMi4yNSwyNzguMjg0NzgyNDA5NjY3OTcgMTA2LDIyMyAiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSI1IiBmaWxsPSJub25lIi8+CiAgPGVsbGlwc2UgZmlsbD0iI0ZGMDAwMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjUiIGN4PSIzNDMiIGN5PSIxNzAiIGlkPSJzdmdfMSIgcng9IjE0MCIgcnk9IjEwNSIvPgogPC9nPgo8L3N2Zz4=')
check it here: http://codepen.io/equivalent/full/ymefJ
raw svg format:
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<polyline fill="none" stroke-width="5" stroke="#000000" points="538.5,333.56956481933594 322.25,278.28478240966797 106,223 " id="svg_3"/>
<ellipse transform="translate(-402 -120)" ry="105" rx="140" id="svg_1" cy="290" cx="745" stroke-width="5" stroke="#000000" fill="#FF0000"/>
</g>
</svg>
editor: http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html
I believe that the link in Tom Harrison answer is on to something and from what I saw it might work, but I didn't try it myself. So if you want to truly precompile SVG with assets pipeline I encourage you to use that tactic.

ui:composition template="<template from jar>"

I would like to place the Facelets template file for JSF in a JAR file.
I tried to reference it by EL as
<ui:composition template="#{resource['templates:template_pe_layout.xhtml']}">
which works perfect for CSS or images, but not for the composition template.
How could I achieve the goal?
The #{resource} expression is initially designed for use inside CSS files only like so
.someclass {
background-image: url(#{resource['somelibrary:img/some.png']});
}
It's not intented for usage in <h:outputStylesheet>, <h:outputScript> or <h:graphicImage> which should rather be used as follows:
<h:outputStylesheet library="somelibrary" name="css/some.css" />
<h:outputScript library="somelibrary" name="js/some.js" />
<h:graphicImage library="somelibrary" name="img/some.png" />
As to the templates, just specify the full /META-INF/resources relative path in there.
<ui:composition template="/templates/template_pe_layout.xhtml">
See also:
Packaging Facelets files (templates, includes, composites) in a JAR
Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images

Jquery UI DatePicker CSS Files

I started integrating jquery ui datepicker in my page.
I included the js files:
jquery-1.5.1.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.datepicker.js
and CSS Files:
jquery.ui.datepicker.css
But it resulted out datepicker without the background...
what am i missing on it?
After i manually add :
.ui-datepicker{background-color: silver;}
it shows like:
http://outsourcingnepal.com/general-images/shot1.jpg
Check the datepicker.css if there is style definition for the element with missing background. If not..just check the element in firebug (or similar tool) and add your own style. There probably will be already a class, so just add your style in your stylesheet, or add it into detepicker.css.
Got it solved unpackaing all the files once more... i hope some files were missing
For styling only the DatePicker, these are the necessary stylesheet files:
~/Content/themes/base/jquery.ui.core.css
~/Content/themes/base/jquery.ui.datepicker.css
~/Content/themes/base/jquery.ui.theme.css
or the minified ones:
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.core.min.css" />
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.theme.min.css" />
<link rel="stylesheet" href="../Content/themes/base/minified/jquery.ui.datepicker.min.css" />

prev/next icons not showing in customized jquery datepicker theme

I implemented jQuery DatePicker in my VS2010 project and it works fine with one small issue. When I implemented a custom theme, I lost my prev and next icons (for moving through the months).
Here's the image:
Here are the jquery library references:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript" src="~/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="~/lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="~/lightbox/js/lightbox.js"></script>
<link type="text/css" rel="stylesheet" href="~/lightbox/css/lightbox.css" media="screen" />
<link type="text/css" rel="Stylesheet" href="~/Scripts/jquery-ui-1.8.9.custom.css" />
Here are my image references in jquery-ui-1.8.9-custom.css
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(~/images/jquery/ui-icons_469bdd_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(~/images/jquery/ui-icons_469bdd_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(~/images/jquery/ui-icons_d8e7f3_256x240.png); }
.ui-state-default .ui-icon { background-image: url(~/images/jquery/ui-icons_6da8d5_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(~/images/jquery/ui-icons_217bc0_256x240.png); }
.ui-state-active .ui-icon {background-image: url(~/images/jquery/ui-icons_f9bd01_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(~/images/jquery/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(~/images/jquery/ui-icons_cd0a0a_256x240.png); }
I modified the path to be sure it pointed to the files. Not sure what I'm missing.
Any help would be greatly appreciated.
Thanks.
Are you sure your paths are pointing correctly (AKA, are you seeing the jQuery UI icons elsewhere in your site)? That is the first thing I would check...particularly because you modified the path. You may have inadvertently screwed something up.
Update
I think you need to fix your paths - I don't think they are pointing correctly. From what I see, they have to be relative to your .custom.css file. So, for example, my jquery-ui-1.8.9.custom.css file exists in my Content folder. My states and images are referenced like this:
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_cccccc_256x240.png); }
Therefore, I have to place an images folder at the same level as the jquery-ui-1.8.9.custom.css and place all the images inside that folder. Try that and see if it fixes the problem for you.
For me, the issue was that the Themeroller was adding double quotes around the image paths. I just removed those from my custom CSS file, and everything worked.
i.e. I changed:
url("images/ui-bg_highlight-hard_100_fafaf4_1x100.png")
to:
url(images/ui-bg_highlight-hard_100_fafaf4_1x100.png)
throughout the whole CSS file.
I also was having this problem. I was pulling my hair out. But yes, JasCav is correct, you must put an "images" folder at the same level as your query-ui-1.8.9.custom.css (or in my case jquery-ui-1.8.16.custom.css) file. And inside this folder copy your *.png files from your jquery ui download.
I had the exact same problem and finally solved it.
The problem was coming from the rights on the 'images' directory. I had to make the directory browsable for 'others' by using chmod:
chmod o+rx images
I hope this helps
I had the same problem. Created an images directory under my theme name, and dragged all the gif files and png files from the theme into the new images directory. worked like a charm, no messing with the paths.
I think the themeroller app at JQuery_ui doesn't package the images into an image directory, and it should.
Anyway, revert your pathing back to the way it was, and give it a try. Good luck.
By the way, it appears you put your custom.css into your scripts folder, that gets messy, I just pointed mine to the themes folder copy. i.e.
link href="../../Content/themes/humanity/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css"
I also fell foul of this. I have read the answers given above and they do not tally 100% with my experience as of July 2012. I do not know if the UI custom ThemeRoller has been changed at all since this question was first raised which may explain the previous comments/answers. However for me these answers over complicate what needs to be done and were therefore a confusion to me.
What worked for me :-
Use ThemeRoller to create you customised theme.
Download the theme - for example to directory my_Work_Area outside of your project.
Unzip the download to my_Work_Area
Review the index.html after unzipping - check that the datepicker style reflects the style tested in the ThemeRoller. If not go back to the ThemeRoller and repeat 1-3.
copy my_Work_Area/js/jquery-ui-1.8.21.custom.min.js to your jquery folder within your project for example _public/_jquery/jquery-ui-1.8.21.custom.min.js
if required similarly copy jquery-1.7.2.min.js
copy my_Work_Area/css/custom-theme/jquery-ui-1.8.21.custom.css to your css folder within your project for example _public/_css/jquery-ui-1.8.21.custom.css
copy the folder my_Work_Area/css/custom-theme/images to your css folder within your project for example _public/_css/images
as per the documentation ensure that the following is included in your html
<link rel="stylesheet" type="text/css" href="../_public/_css/jquery-ui-1.8.21.custom.css" />
<script type="text/javascript" src="../_public/_jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="../_public/_jquery/jquery-ui-1.8.21.custom.min.js"></script>
That is all you need to do.
Whether it is appropriate to have a folder called images inside your css folder might need to be considered. Changing the location of this folder would involve considering of the paths employed.
But if you just want the ui to work 'out of the box' the above works with no need to make anything complicated.
I hope that this helps.
Place image folder with icons files, in that location, where the .css file exists.
who reading this question,
If you use this dateime picker
http://www.malot.fr/bootstrap-datetimepicker/
You add this option: bootcssVer : 3
$( ".date" ).datepicker( "option", "changeMonth", true, **"bootcssVer" : 3** );
The icon will show!!!
Let me share the solution for my case. My ASP.NET MVC project has the following directory structure:
Content
themes
base
images
icon1.png
icon2.png
jquery-ui.css
Other directories
When I run application locally via Visual Studio, in the jquery-ui.css I can refer to the icons using the following url: url("images/icon1.png"). But when I run application on the Azure server, I must refer to this icon with: url("themes/base/images/icon1.png"). It turned out, that the real "working"/"current" directory for jquery-ui.css is Content directory. That is because in cshtml I load jquery-ui.css using the bundle, which I create in the following way:
bundles.Add(new StyleBundle("~/Content/cssjqryUi").Include("~/Content/themes/base/jquery-ui.css"));
It seems like VS is "super intelligent" and looks for referred images also inside subdirectories.
The solution can be to use inside jquery-ui.css file the absolute url to the images: url("/Content/themes/base/images/icon1.png") (or proper path relative to the Content directory in my case, i.e. url("themes/base/images/icon1.png"), as I mentioned above) or to create bundle with more nested path:
bundles.Add(new StyleBundle("~/Content/themes/base/cssjqryUi").Include("~/Content/themes/base/jquery-ui.css"));
Another (worse in my opinoin) solution is to load css file into cshtml using <link> element:
<link rel="stylesheet" href="~/Content/themes/base/jquery-ui.css" />

Resources