Orbeon Forms community mailing list

CSS styling

Classic

List

Threaded

10 messages Options

Taras Bahnyuk

CSS styling

Hello,

How do I actually apply styling in Orbeon?
At the moment of writing I'm doing bad and ugly
inline styling in the view.xsl for each page...
Something like:
<td align="center" bgcolor="#FFD080" width="160">

But of course, I'd rather had myApp.css file and linked to it,
The question is how?

Thanks,
-Taras

--
The information contained in this communication and any attachments is confidential and may be privileged, and is for the sole use of the intended recipient(s). Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please notify the sender immediately by replying to this message and destroy all copies of this message and any attachments. ASML is neither liable for the proper and complete transmission of the information contained in this communication, nor for any delay in its receipt.

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Ryan Puddephatt

RE: CSS styling

Taras,
You can either link to a stylesheet in each view.xsl or add a link
in the /config/theme.xsl, but either way it is the same as adding a
stylesheet in HTML

<link rel="stylesheet" type="text/css" href="myApp.css">

Ryan

Ryan Puddephatt
Web Developer
TFX Group
1 Michaelson Square
Livingston
West Lothian
Scotand
EH54 7DP

* [hidden email]
( 01506 407 110
7 01506 407 108

>-----Original Message-----
>From: Taras Bahnyuk [mailto:[hidden email]]
>Sent: 25 January 2006 15:37
>To: [hidden email]
>Subject: [ops-users] CSS styling
>
>Hello,
>
>How do I actually apply styling in Orbeon?
>At the moment of writing I'm doing bad and ugly
>inline styling in the view.xsl for each page...
>Something like:
><td align="center" bgcolor="#FFD080" width="160">
>
>But of course, I'd rather had myApp.css file and linked to it,
>The question is how?
>
>Thanks,
>-Taras
>
>
>--
>
>The information contained in this communication and any attachments is
>confidential and may be privileged, and is for the sole use of the intended
>recipient(s). Any unauthorized review, use, disclosure or distribution is
>prohibited. If you are not the intended recipient, please notify the sender
>immediately by replying to this message and destroy all copies of this
>message and any attachments. ASML is neither liable for the proper and
>complete transmission of the information contained in this communication,
>nor for any delay in its receipt.

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Erik Bruchez

Re: CSS styling

Administrator

That's correct.

We are also working on a new XForms example which, among other things,
will show exactly how to do this.

-Erik

Ryan Puddephatt wrote:

> Taras,
> You can either link to a stylesheet in each view.xsl or add a link
> in the /config/theme.xsl, but either way it is the same as adding a
> stylesheet in HTML
>
> <link rel="stylesheet" type="text/css" href="myApp.css">
>
> Ryan
>
> Ryan Puddephatt
> Web Developer
> TFX Group
> 1 Michaelson Square
> Livingston
> West Lothian
> Scotand
> EH54 7DP
>
> * [hidden email]
> ( 01506 407 110
> 7 01506 407 108
>
>> -----Original Message-----
>> From: Taras Bahnyuk [mailto:[hidden email]]
>> Sent: 25 January 2006 15:37
>> To: [hidden email]
>> Subject: [ops-users] CSS styling
>>
>> Hello,
>>
>> How do I actually apply styling in Orbeon?
>> At the moment of writing I'm doing bad and ugly
>> inline styling in the view.xsl for each page...
>> Something like:
>> <td align="center" bgcolor="#FFD080" width="160">
>>
>> But of course, I'd rather had myApp.css file and linked to it,
>> The question is how?
>>
>> Thanks,
>> -Taras
>>
>>
>> --
>>
>> The information contained in this communication and any attachments is
>> confidential and may be privileged, and is for the sole use of the intended
>> recipient(s). Any unauthorized review, use, disclosure or distribution is
>> prohibited. If you are not the intended recipient, please notify the sender
>> immediately by replying to this message and destroy all copies of this
>> message and any attachments. ASML is neither liable for the proper and
>> complete transmission of the information contained in this communication,
>> nor for any delay in its receipt.
>
>
>
>
> ------------------------------------------------------------------------
>
>
> --
> You receive this message as a subscriber of the [hidden email] mailing list.
> To unsubscribe: mailto:[hidden email]
> For general help: mailto:[hidden email]?subject=help
> ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Taras Bahnyuk

RE: CSS styling

In reply to this post by Taras Bahnyuk

Ok,
I may be dumb but I ain't stupid :-)

This is content of my proc.css file:
body {background-color: yellow}

This is section of my summary-view.xsl:

<html xsl:version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xxforms="http://orbeon.org/oxf/xml/xforms" xmlns:xi="http://www.w3.org/2003/XInclude" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Summary</title>
<link rel="stylesheet" type="text/css" href="proc.css" />
</head>

........

And theese are two screenshots displaying the same page in firefox.

The first shows xsl page open direct in the browser:

This one shows the same page played via Orbeon:

That's why I still have this question.

Obviously, I must have overlooked something in my Orbeon settings.

It simply ignores css file as if it never existed.

Any Idea so far?

Thanks

Taras

--
The information contained in this communication and any attachments is confidential and may be privileged, and is for the sole use of the intended recipient(s). Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please notify the sender immediately by replying to this message and destroy all copies of this message and any attachments. ASML is neither liable for the proper and complete transmission of the information contained in this communication, nor for any delay in its receipt.

Ryan Puddephatt

RE: CSS styling

Taras,

What does the source of the page show in the orbeon version if you look at it?

I take it your CSS file is in the same directory as the page?

Ryan

Ryan Puddephatt

Web Developer

TFX Group

1 Michaelson Square

Livingston

West Lothian

Scotand

EH54 7DP

* [hidden email]

( 01506 407 110

7 01506 407 108

From: Taras Bahnyuk [mailto:[hidden email]]
Sent: 26 January 2006 13:24
To: [hidden email]
Subject: RE: [ops-users] CSS styling

Ok,
I may be dumb but I ain't stupid :-)

This is content of my proc.css file:
body {background-color: yellow}

<head>
<title>Summary</title>
<link rel="stylesheet" type="text/css" href="proc.css" />
</head>

........

And theese are two screenshots displaying the same page in firefox.

The first shows xsl page open direct in the browser:

This one shows the same page played via Orbeon:

That's why I still have this question.

Obviously, I must have overlooked something in my Orbeon settings.

It simply ignores css file as if it never existed.

Any Idea so far?

Thanks

Taras

Taras Bahnyuk

RE: CSS styling

In reply to this post by Taras Bahnyuk

Ryan,

You are correct, css sits next to the xsl, in the same directory.

The source of the orbeon page is here:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:f="http://orbeon.org/oxf/xml/formatting" xmlns:portlet="http://orbeon.org/oxf/xml/portlet" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xxforms="http://orbeon.org/oxf/xml/xforms" xmlns="http://www.w3.org/1999/xhtml">
 <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   
  <link rel="stylesheet" href="/config/theme/jscalendar/calendar-blue.css" type="text/css" /><script type="text/javascript" src="/config/theme/jscalendar/calendar.js"></script><script type="text/javascript" src="/config/theme/jscalendar/lang/calendar-en.js"></script><script type="text/javascript" src="/config/theme/jscalendar/calendar-setup.js"></script><link rel="stylesheet" href="/config/theme/xforms.css" type="text/css" />
  <link rel="stylesheet" href="/config/theme/orbeon.css" type="text/css" /><script type="text/javascript" src="/config/theme/javascript/xforms-style.js"></script><script type="text/javascript" src="/ops/javascript/wz_tooltip.js"></script><script type="text/javascript" src="/ops/javascript/overlib_mini.js"></script><script type="text/javascript" src="/ops/javascript/time-utils.js"></script><script type="text/javascript" src="/ops/javascript/sarissa.js"></script><script type="text/javascript" src="/ops/javascript/xforms.js"></script><link xmlns:xi="http://www.w3.org/2003/XInclude" xmlns:pcs="http://www.asml.com/XMLSchema/Generic/Generic/ADELpcs/v1.0" xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" type="text/css" href="proc.css" />
  <title>Summary</title>
 </head>
 <body>

  <div xmlns:xi="http://www.w3.org/2003/XInclude" xmlns:pcs="http://www.asml.com/XMLSchema/Generic/Generic/ADELpcs/v1.0" xmlns="http://www.w3.org/1999/xhtml" id="maincontent">
   <p xmlns="" style="font-face: verdana; font-size: 24pt; font-weight: bold; font-style: italic" xml:base="oxf:/PCSentry_DEV/summary/view-logo.xml">PCS entry form (DEV)</p>
   <form xmlns:saxon="http://saxon.sf.net/" xmlns:xforms-utils="java:org.orbeon.oxf.processor.xforms.XFormsUtils" xmlns:context="java:org.orbeon.oxf.pipeline.StaticExternalContext" id="wsrp_rewrite_form_1" method="post" action="/PCSentry_DEV"><input type="hidden" id="wsrp_rewrite_action_1" name="" value="" /><div><br /></div>
    <hr />
    <table>
     <tr>
      <td align="left" valign="bottom"><input type="submit" name="$action^setvalue%26node-ids%26A21R1qCnPIg%3D%26content%26new-document&amp;setvalue%26node-ids%26kgJmi%2F61UQE%3D%26content%26%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Other%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20" value="New Document" /></td>
     </tr>

    </table>
    <h2 style="margin-top: 0">Available Documents</h2>
    <table cellspacing="3" cellpadding="3">
     <tr align="center">
      <th>Title</th>
      <th>Author</th>
      <th>Last modified</th>

      <th>Preview</th>
      <th>Delete</th>

And as you can see, no trace of proc.css in it.

Taras.

From: Ryan Puddephatt [mailto:[hidden email]]
Sent: donderdag 26 januari 2006 14:30
To: [hidden email]
Subject: RE: [ops-users] CSS styling

Taras,

What does the source of the page show in the orbeon version if you look at it?

I take it your CSS file is in the same directory as the page?

Ryan

Ryan Puddephatt

Web Developer

TFX Group

1 Michaelson Square

Livingston

West Lothian

Scotand

EH54 7DP

* [hidden email]

( 01506 407 110

7 01506 407 108

From: Taras Bahnyuk [mailto:[hidden email]]
Sent: 26 January 2006 13:24
To: [hidden email]
Subject: RE: [ops-users] CSS styling

Ok,
I may be dumb but I ain't stupid :-)

This is content of my proc.css file:
body {background-color: yellow}

<head>
<title>Summary</title>
<link rel="stylesheet" type="text/css" href="proc.css" />
</head>

........

And theese are two screenshots displaying the same page in firefox.

The first shows xsl page open direct in the browser:

This one shows the same page played via Orbeon:

That's why I still have this question.

Obviously, I must have overlooked something in my Orbeon settings.

It simply ignores css file as if it never existed.

Any Idea so far?

Thanks

Taras

Taras Bahnyuk

RE: CSS styling

In reply to this post by Taras Bahnyuk

Oops,

I was wrong, there is line

rel="stylesheet" type="text/css" href="proc.css" />

if it still matters :-)

From: Ryan Puddephatt [mailto:[hidden email]]
Sent: donderdag 26 januari 2006 14:30
To: [hidden email]
Subject: RE: [ops-users] CSS styling

Taras,

What does the source of the page show in the orbeon version if you look at it?

I take it your CSS file is in the same directory as the page?

Ryan

Ryan Puddephatt

Web Developer

TFX Group

1 Michaelson Square

Livingston

West Lothian

Scotand

EH54 7DP

* [hidden email]

( 01506 407 110

7 01506 407 108

From: Taras Bahnyuk [mailto:[hidden email]]
Sent: 26 January 2006 13:24
To: [hidden email]
Subject: RE: [ops-users] CSS styling

Ok,
I may be dumb but I ain't stupid :-)

This is content of my proc.css file:
body {background-color: yellow}

<head>
<title>Summary</title>
<link rel="stylesheet" type="text/css" href="proc.css" />
</head>

........

And theese are two screenshots displaying the same page in firefox.

The first shows xsl page open direct in the browser:

This one shows the same page played via Orbeon:

That's why I still have this question.

Obviously, I must have overlooked something in my Orbeon settings.

It simply ignores css file as if it never existed.

Any Idea so far?

Thanks

Taras

Erik Bruchez

Re: CSS styling

Administrator

In reply to this post by Taras Bahnyuk

Taras Bahnyuk wrote:

> Ryan,
> You are correct, css sits next to the xsl, in the same directory.
>
> The source of the orbeon page is here:
>
> <?xml version="1.0" encoding="utf-8"?>
> <!DOCTYPE html
> PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:f="http://orbeon.org/oxf/xml/formatting" xmlns:portlet="http://orbeon.org/oxf/xml/portlet" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xxforms="http://orbeon.org/oxf/xml/xforms" xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
>
> <link rel="stylesheet" href="/config/theme/jscalendar/calendar-blue.css" type="text/css" /><script type="text/javascript" src="/config/theme/jscalendar/calendar.js"></script><script type="text/javascript" src="/config/theme/jscalendar/lang/calendar-en.js"></script><script type="text/javascript" src="/config/theme/jscalendar/calendar-setup.js"></script><link rel="stylesheet" href="/config/theme/xforms.css" type="text/css" />
> <link rel="stylesheet" href="/config/theme/orbeon.css" type="text/css" /><script type="text/javascript" src="/config/theme/javascript/xforms-style.js"></script><script type="text/javascript" src="/ops/javascript/wz_tooltip.js"></script><script type="text/javascript" src="/ops/javascript/overlib_mini.js"></script><script type="text/javascript" src="/ops/javascript/time-utils.js"></script><script type="text/javascript" src="/ops/javascript/sarissa.js"></script><script type="text/javascript" src="/ops/javascript/xforms.js"></script><link xmlns:xi="http://www.w3.org/2003/XInclude" xmlns:pcs="http://www.asml.com/XMLSchema/Generic/Generic/ADELpcs/v1.0" xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" type="text/css" href="proc.css" />
> <title>Summary</title>
> </head>
> <body>
>
> <div xmlns:xi="http://www.w3.org/2003/XInclude" xmlns:pcs="http://www.asml.com/XMLSchema/Generic/Generic/ADELpcs/v1.0" xmlns="http://www.w3.org/1999/xhtml" id="maincontent">
> <p xmlns="" style="font-face: verdana; font-size: 24pt; font-weight: bold; font-style: italic" xml:base="oxf:/PCSentry_DEV/summary/view-logo.xml">PCS entry form (DEV)</p>
> <form xmlns:saxon="http://saxon.sf.net/" xmlns:xforms-utils="java:org.orbeon.oxf.processor.xforms.XFormsUtils" xmlns:context="java:org.orbeon.oxf.pipeline.StaticExternalContext" id="wsrp_rewrite_form_1" method="post" action="/PCSentry_DEV"><input type="hidden" id="wsrp_rewrite_action_1" name="" value="" /><div><br /></div>
> <hr />
> <table>
> <tr>
> <td align="left" valign="bottom"><input type="submit" name="$action^setvalue%26node-ids%26A21R1qCnPIg%3D%26content%26new-document&setvalue%26node-ids%26kgJmi%2F61UQE%3D%26content%26%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20Other%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20" value="New Document" /></td>
> </tr>
>
> </table>
> <h2 style="margin-top: 0">Available Documents</h2>
> <table cellspacing="3" cellpadding="3">
> <tr align="center">
> <th>Title</th>
> <th>Author</th>
> <th>Last modified</th>
>
> <th>Preview</th>
> <th>Delete</th>
>
>
>
> And as you can see, no trace of proc.css in it.

Well, I am confused because I DO see proc.css in your HTML above!

Now that relative URL is going to be relative to the URL of your (X)HTML
page, which is http://localhost:8888/PCSentry_DEV. So the resolved URL
will be http://localhost:8888/proc.css. If you have the default <files/>
entry in your page flow, this means that the page flow will receive
/proc.css, and look for it under oxf:/proc.css, that is at the root of
your resources. Is it located there?

-Erik

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Ryan Puddephatt

RE: CSS styling

In reply to this post by Taras Bahnyuk

Taras

I found it as well, so I don’t understand why its not working. I’m pretty sure relative paths work, try putting a path from the root of the application, if your css was in my-app/WEB-INF/resources/pages/proc.css then the path would be /pages/proc.css

Failing that we have all our CSS files in the config/theme.xsl file, you could try putting it in there

Ryan

Ryan Puddephatt

Web Developer

TFX Group

1 Michaelson Square

Livingston

West Lothian

Scotand

EH54 7DP

* [hidden email]

( 01506 407 110

7 01506 407 108

From: Taras Bahnyuk [mailto:[hidden email]]
Sent: 26 January 2006 13:58
To: [hidden email]
Subject: RE: [ops-users] CSS styling

Oops,

I was wrong, there is line

rel="stylesheet" type="text/css" href="proc.css" />

if it still matters :-)

From: Ryan Puddephatt [mailto:[hidden email]]
Sent: donderdag 26 januari 2006 14:30
To: [hidden email]
Subject: RE: [ops-users] CSS styling

Taras,

What does the source of the page show in the orbeon version if you look at it?

I take it your CSS file is in the same directory as the page?

Ryan

Ryan Puddephatt

Web Developer

TFX Group

1 Michaelson Square

Livingston

West Lothian

Scotand

EH54 7DP

* [hidden email]

( 01506 407 110

7 01506 407 108

From: Taras Bahnyuk [mailto:[hidden email]]
Sent: 26 January 2006 13:24
To: [hidden email]
Subject: RE: [ops-users] CSS styling

Ok,
I may be dumb but I ain't stupid :-)

This is content of my proc.css file:
body {background-color: yellow}

<head>
<title>Summary</title>
<link rel="stylesheet" type="text/css" href="proc.css" />
</head>

........

And theese are two screenshots displaying the same page in firefox.

The first shows xsl page open direct in the browser:

This one shows the same page played via Orbeon:

That's why I still have this question.

Obviously, I must have overlooked something in my Orbeon settings.

It simply ignores css file as if it never existed.

Any Idea so far?

Thanks

Taras

Taras Bahnyuk

RE: CSS styling

In reply to this post by Taras Bahnyuk

Erik,
Your'e the hero,
Of course it was not there. It was at the same level as summary-view.xsl
In the /PCSentry_DEV/summary/

Now everything is working just fine, thanks again :-)

Taras

--
The information contained in this communication and any attachments is confidential and may be privileged, and is for the sole use of the intended recipient(s). Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please notify the sender immediately by replying to this message and destroy all copies of this message and any attachments. ASML is neither liable for the proper and complete transmission of the information contained in this communication, nor for any delay in its receipt.

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws