Hello,

In an HTML dialog, if I use either of the following instructions for importing a style:

<h:outputStylesheet name="portlet/css/presential.css"/>

or

<link rel="stylesheet" href="#{resource['portlet/css/presential.css']}" type="text/css"/>

the CSS file is loaded (see line #1 below) with the request attribute "?ln=xpertivy-14-WebContent".

Unfortunately, it cannot find the images defined in the CSS (see 2 last lines). Notice that the request attribute above is not appended to the image request. alt text

This could be important because if I manually request the following URL: http://localhost:8082/ivy/faces/javax.faces.resource/portlet/images/clock24.png?ln=xpertivy-14-webContent

I can successfully get the clock24.png image.

Is it actually a bug, or is there a particular way to do it?

Thanks.

asked 18.11.2013 at 17:18

Adriano%20Labate's gravatar image

Adriano Labate
12181118
accept rate: 33%

edited 18.11.2013 at 19:38

Flavio%20Sadeghi's gravatar image

Flavio Sadeghi ♦♦
1.8k5723

Hey, where's my question content ?? it is there if I edit, but not shown when published :-(

(18.11.2013 at 17:22) Adriano Labate Adriano%20Labate's gravatar image
1

hi @adriano-labate, it was the http-link. It's a known issue. Just putting two ` round the link and it works...

(18.11.2013 at 19:43) Flavio Sadeghi ♦♦ Flavio%20Sadeghi's gravatar image

It should be possible to access images in the webContent folder if you reference the image similar to this in the .css file:

.my-icon
{
   background-image:url(#{resource['portlet/images/clock24.png']}) !important;
}
link

answered 19.11.2013 at 10:01

Peter%20St%C3%B6ckli's gravatar image

Peter Stöckli ♦
3712410
accept rate: 69%

Had to add url("#{resource['portlet/images/clock24.png']}") - but works like a charm. Thanks. :)

(19.11.2013 at 10:12) Nikel Weis Nikel%20Weis's gravatar image

This solution is valid if we use an external CSS file whose content is under control.

However, if an external 3rd-party JavaScript library or framework is used, it often comes with CSS style sheets and referenced images.

If the developer puts these resources in the WebContent folder, I suppose everything will work fine, except for the images referenced by the CSS style sheets. Unless you edit them by hand to fix all image paths located in the 3rd-party style sheets, which is laborious and error-prone.

(19.11.2013 at 13:21) Adriano Labate Adriano%20Labate's gravatar image
1

You can use a regular expression to make this less error prone - something like url((.+)) [search string] and url("#{resource['img:\1']}") [replace string]. Whereas 'img' would be the target folder like Heinrich Spreiter suggested in his tutorial about using ThemeRoller for Xpert.ivy: http://blog.xpertivyhacker.ch/search/label/ThemeRoller

(19.11.2013 at 13:51) Nikel Weis Nikel%20Weis's gravatar image

hi @Peter Stöckli ♦ Can i apply same for js file? it's seem not work.

(07.11 at 03:50) trungdv trungdv's gravatar image

It does not seem to be possible to access images within the webContent-folder from an externally loaded style-sheet. Maybe as a workaround: If you are using a PageTemplate, just put your style-definitions using images there. The code would be:

 url("#{ivy.html.wr('task_abort.png')}")

...whereas the prefered way is to put in the CMS.

 url("#{resource['ivy-cms:Images/image']}")
link

answered 19.11.2013 at 09:09

Nikel%20Weis's gravatar image

Nikel Weis
321262933
accept rate: 57%

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "Title")
  • image?![alt text](/path/img.jpg "Title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Tags:

×53
×3

Asked: 18.11.2013 at 17:18

Seen: 3,217 times

Last updated: 07.11 at 03:50