You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@forrest.apache.org by "Scherler, Thorsten" <th...@apache.org> on 2004/07/04 04:41:18 UTC

[SKIN] css-style

Hello devs,

I made a *DEV-SNAPSHOT* of the css-style skin
This can be the all new ;-) css based skin.
There are still heaps issues open for the skin.
e.g.
- If the lenya-logo is right it is not displayed correct. Any ideas why?
- no colour conf possible
- pdf-link so far the only working alternativ (no print,...) and should 
be right and same height as H1.
- ...

Help welcome ;-)

...based of Sten Aksel Heien skins
whs.0.5.zip + updates + bugfixes
= xhtml-css-0.5.zip + 0.6-dev issues + changes
=css-style-dev

Try it by declare in your local /forrest.properties/ (works against 
SVN-Head):
project.skin=css-style-dev
forrest.skins.descriptors=http://www.apache.org/~thorsten/whiteboard/forrestskins/skins.xml

...and /forrest/ your project.

Note:
/This version is the initial version of the skin. *Everything* can be 
changed without notice. Use it as preview not for production!!!/

King regards
thorsten
-- 
<thorsten>
  <name>Thorsten Scherler</name>
  <country>Spain</country>
  <@m...@mail>
  <@cocoon-WIKI>
http://wiki.cocoondev.org/Wiki.jsp?page=Scherler
</...@cocoon-WIKI>
  <acronymfinder>
http://www.acronymfinder.com/af-query.asp?String=exact&Find=Find&Acronym=
  </acronymfinder>
  <motto>
    "My task which I am trying to achieve is,
     by the power of the written word,
     [...] to make you see."
     *Joseph Conrad (1857-1924)*
  </motto>
</thorsten>



Re: [SKIN] css-style

Posted by Nicola Ken Barozzi <ni...@apache.org>.
Scherler, Thorsten wrote:
> Nicola Ken Barozzi wrote:
...
> ??? Yeah now it is working (and I did it like you stated to find out) 
> but only if the dynamc css is called *last*. Which kind of makes sense 
> because it is the stylesheet which get last read. Saying this the 
> browser will take up the last e.g. #top that get parsed.
> 
>> If that is correct, then it's a browser issue.
>>
> You mean that it should work the other way around as well? But how does 
> the browser know which is the overriding css?

The styles should cascade. I've seen though that IE and Mozilla do it 
indifferent ways, which sucks.

-- 
Nicola Ken Barozzi                   nicolaken@apache.org
             - verba volant, scripta manent -
    (discussions get forgotten, just code remains)
---------------------------------------------------------------------


Re: [SKIN] css-style

Posted by "Scherler, Thorsten" <th...@apache.org>.
Nicola Ken Barozzi wrote:
>> Thorsten Scherler wrote:
> 
> ...
> 
>> as last stylesheet! Like:
>> <link rel="stylesheet" href="{$root}skin/print.css" type="text/css"
>>                 media="print" />
>> <link rel="stylesheet" href="{$root}skin/profile.css" type="text/css" />
>>
>> and the profile is working.
> 
> 
> To see if the css is working, just type in the url in the browser and 
> see what it gives you. 

??? Yeah now it is working (and I did it like you stated to find out) 
but only if the dynamc css is called *last*. Which kind of makes sense 
because it is the stylesheet which get last read. Saying this the 
browser will take up the last e.g. #top that get parsed.

If that is correct, then it's a browser issue.
> 
You mean that it should work the other way around as well? But how does 
the browser know which is the overriding css?

thorsten

-- 
<thorsten>
  <name>Thorsten Scherler</name>
  <country>Spain</country>
  <@m...@mail>
  <@cocoon-WIKI>
http://wiki.cocoondev.org/Wiki.jsp?page=Scherler
</...@cocoon-WIKI>
  <acronymfinder>
http://www.acronymfinder.com/af-query.asp?String=exact&Find=Find&Acronym=
  </acronymfinder>
  <motto>
    "My task which I am trying to achieve is,
     by the power of the written word,
     [...] to make you see."
     *Joseph Conrad (1857-1924)*
  </motto>
</thorsten>



Re: [SKIN] css-style

Posted by Nicola Ken Barozzi <ni...@apache.org>.
> Thorsten Scherler wrote:
...
> as last stylesheet! Like:
> <link rel="stylesheet" href="{$root}skin/print.css" type="text/css"
>                 media="print" />
> <link rel="stylesheet" href="{$root}skin/profile.css" type="text/css" />
> 
> and the profile is working.

To see if the css is working, just type in the url in the browser and 
see what it gives you. If that is correct, then it's a browser issue.

-- 
Nicola Ken Barozzi                   nicolaken@apache.org
             - verba volant, scripta manent -
    (discussions get forgotten, just code remains)
---------------------------------------------------------------------


Re: [SKIN] css-style

Posted by "Scherler, Thorsten" <th...@apache.org>.
Thorsten Scherler wrote:

> [...]
> So I renamed the screen.css.xslt to test.css.xslt (and did *not* provide 
> a test.css) and called it before the screen.css like
>        <link rel="stylesheet" href="{$root}skin/test.css" 
> type="text/css" />
>        <link rel="stylesheet" href="{$root}skin/screen.css" 
> type="text/css" media="screen" />
> 
> ...and the header was black :).

I don't know why exactly that worked at my job but I think that should 
not work always! I just repeated that and it was not working!

> 
> To make sure that is had nothing to do with the order I just switched:
>        <link rel="stylesheet" href="{$root}skin/screen.css" 
> type="text/css" media="screen" />
>        <link rel="stylesheet" href="{$root}skin/test.css" 
> type="text/css" />
> 

This is working!

> ...
> Summary:
> The color-profiles work only if you use a profile.css.xslt *without* a 
> profile.css within .../skins/css-style-dev/css.
> e.g. if you have
> - profile.css.xslt and
> - profile.css
> 
> The profile.css will be parsed without transforming the 
> profile.css.xslt. This way the color-profiles are *not* working for the 
> static site.
> 
> If you use *only* the profile.css.xslt within 
> .../skins/css-style-dev/css and add
> <link rel="stylesheet" href="{$root}skin/profile.css" type="text/css" /> 
> to the site2xhtml.xslt 

as last stylesheet! Like:
<link rel="stylesheet" href="{$root}skin/print.css" type="text/css"
                 media="print" />
<link rel="stylesheet" href="{$root}skin/profile.css" type="text/css" />

and the profile is working.
> 
> HTH someone that is trying to enable in his/her skin the color-profile ;-).
> 
> King regards
> thorsten
> 

thorsten
-- 
<thorsten>
  <name>Thorsten Scherler</name>
  <country>Spain</country>
  <@m...@mail>
  <@cocoon-WIKI>
http://wiki.cocoondev.org/Wiki.jsp?page=Scherler
</...@cocoon-WIKI>
  <acronymfinder>
http://www.acronymfinder.com/af-query.asp?String=exact&Find=Find&Acronym=
  </acronymfinder>
  <motto>
    "My task which I am trying to achieve is,
     by the power of the written word,
     [...] to make you see."
     *Joseph Conrad (1857-1924)*
  </motto>
</thorsten>



Re: [SKIN] css-style

Posted by Thorsten Scherler <th...@juntadeandalucia.es>.
Nicola Ken Barozzi wrote:
[...]

> Very well done! :-)
>

Cheers :).

> ...
>
>> Next todos:
>> - introduce the color profiles feature
>> This can be tricky, because right now the screen css infos are stored 
>> in  screen.css. I just know how to make the profile working 
>> (forrest.css.xslt) for the page.css. Saying this I would just copy 
>> the screen.css to page.css and add the feature. Maybe somebody can 
>> tell me how to edit the screen.css directly with the forrest.css.xslt 
>> instead.
>
>
> Sorry, I'm in difficulty to help you, I'm not sure I understand.
>
> In any case, you can write _any_ css file in two ways:
>
>  - mycss.css
>  - mycss.css.xslt
>

That is exactly what I was planing to do!

Cheers.

...but I am not sure why it is not working the following way:

First I copied the skinconf.xsl from the krysalis-site skin to the 
css-style-dev skin. Then I created a screen.css.xslt:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:import href="../../common/css/forrest.css.xslt"/>
  <!-- This is not used by Forrest but makes it possible to debug the
       stylesheet in standalone editors -->
  <xsl:output method = "text"  omit-xml-declaration="yes"  />
<!-- ==================== main block colors ============================ -->

<xsl:template match="color[@name='header']">
    #top {    background: <xsl:value-of select="@value"/>;}
</xsl:template>
</xsl:stylesheet>

Then I used in skinconf.xml:
 <color name="header"    value="#000000"/>

...but unlike the forrest.css.xslt (in the krysalis-site skin) which 
will set the header in {build}/site/skin/forrest.css to black. The 
screen.css.xslt are not setting any value in {build}/site/skin/screen.css!

Then I noticed that there where no forrest.css in the krysalis-site skin.

So I renamed the screen.css.xslt to test.css.xslt (and did *not* provide 
a test.css) and called it before the screen.css like
        <link rel="stylesheet" href="{$root}skin/test.css" 
type="text/css" />
        <link rel="stylesheet" href="{$root}skin/screen.css" 
type="text/css" media="screen" />

...and the header was black :).

To make sure that is had nothing to do with the order I just switched:
        <link rel="stylesheet" href="{$root}skin/screen.css" 
type="text/css" media="screen" />
        <link rel="stylesheet" href="{$root}skin/test.css" 
type="text/css" />

...and the header still was black :).

Then I did the ultimate test and added a test.css to 
.../skins/css-style-dev/css.
...and /suprise/ the header was *NOT* black.

Then I removed the test.css and the header was black again.

Summary:
The color-profiles work only if you use a profile.css.xslt *without* a 
profile.css within .../skins/css-style-dev/css.
e.g. if you have
- profile.css.xslt and
- profile.css

The profile.css will be parsed without transforming the 
profile.css.xslt. This way the color-profiles are *not* working for the 
static site.

If you use *only* the profile.css.xslt within 
.../skins/css-style-dev/css and add
<link rel="stylesheet" href="{$root}skin/profile.css" type="text/css" /> 
to the site2xhtml.xslt the profile is working.

HTH someone that is trying to enable in his/her skin the color-profile ;-).

King regards
thorsten

-- 
Thorsten Scherler

Departamento de Desarrollo de Proyectos
Sociedad Andaluza para el Desarrollo de la Sociedad de la Información S.A.U.


Re: [SKIN] css-style

Posted by Nicola Ken Barozzi <ni...@apache.org>.
Scherler, Thorsten wrote:
...
> I checked it in to SVN Head as css-style-dev. I choosed "-dev" to 
> identify that is work in progress. Just make an update to see the latest 
> version for *testing* *only*. ...and feel free to enhance it :).
> 
> See the actual snapshot online http://www.apache.org/~thorsten/prueba/.
> Have a look at the source code, I used some comments to identify the 
> divs. Hope that makes it easy for everyone to understand the skin ;-). 
> Thanks to the divs it is very straight forward.
> 
> I hope that it is ok that I used the xhtml-css skin as base skin!

Very well done! :-)

...
> Next todos:
> - introduce the color profiles feature
> This can be tricky, because right now the screen css infos are stored in 
>  screen.css. I just know how to make the profile working 
> (forrest.css.xslt) for the page.css. Saying this I would just copy the 
> screen.css to page.css and add the feature. Maybe somebody can tell me 
> how to edit the screen.css directly with the forrest.css.xslt instead.

Sorry, I'm in difficulty to help you, I'm not sure I understand.

In any case, you can write _any_ css file in two ways:

  - mycss.css
  - mycss.css.xslt

> - introduce an enhanced color profiles feature for the new site with 
> that the style can be even more customized. Font-size, float....
> - introduce other features from krysalis.
> - ...

-- 
Nicola Ken Barozzi                   nicolaken@apache.org
             - verba volant, scripta manent -
    (discussions get forgotten, just code remains)
---------------------------------------------------------------------


Re: [SKIN] css-style

Posted by "Scherler, Thorsten" <th...@apache.org>.
Nicola Ken Barozzi wrote:
> Scherler, Thorsten wrote:
> 
>> Hello devs,
>>
>> I made a *DEV-SNAPSHOT* of the css-style skin
>> This can be the all new ;-) css based skin.
> 
> 
> I am very happy to hear this :-)
> 
> You are already a committer for Forrest, right? Then go ahead, check 
> your stuff into the repository so we can all see the evolution, maybe 
> help, and easily test it. B-)
> 

I checked it in to SVN Head as css-style-dev. I choosed "-dev" to 
identify that is work in progress. Just make an update to see the latest 
version for *testing* *only*. ...and feel free to enhance it :).

See the actual snapshot online http://www.apache.org/~thorsten/prueba/.
Have a look at the source code, I used some comments to identify the 
divs. Hope that makes it easy for everyone to understand the skin ;-). 
Thanks to the divs it is very straight forward.

I hope that it is ok that I used the xhtml-css skin as base skin!

King regards
thorsten

Next todos:
- introduce the color profiles feature
This can be tricky, because right now the screen css infos are stored in 
  screen.css. I just know how to make the profile working 
(forrest.css.xslt) for the page.css. Saying this I would just copy the 
screen.css to page.css and add the feature. Maybe somebody can tell me 
how to edit the screen.css directly with the forrest.css.xslt instead.
- introduce an enhanced color profiles feature for the new site with 
that the style can be even more customized. Font-size, float....
- introduce other features from krysalis.
- ...
-- 
<thorsten>
  <name>Thorsten Scherler</name>
  <country>Spain</country>
  <@m...@mail>
  <@cocoon-WIKI>
http://wiki.cocoondev.org/Wiki.jsp?page=Scherler
</...@cocoon-WIKI>
  <acronymfinder>
http://www.acronymfinder.com/af-query.asp?String=exact&Find=Find&Acronym=
  </acronymfinder>
  <motto>
    "My task which I am trying to achieve is,
     by the power of the written word,
     [...] to make you see."
     *Joseph Conrad (1857-1924)*
  </motto>
</thorsten>



Re: [SKIN] css-style

Posted by Nicola Ken Barozzi <ni...@apache.org>.
Scherler, Thorsten wrote:
> Hello devs,
> 
> I made a *DEV-SNAPSHOT* of the css-style skin
> This can be the all new ;-) css based skin.

I am very happy to hear this :-)

You are already a committer for Forrest, right? Then go ahead, check 
your stuff into the repository so we can all see the evolution, maybe 
help, and easily test it. B-)

-- 
Nicola Ken Barozzi                   nicolaken@apache.org
             - verba volant, scripta manent -
    (discussions get forgotten, just code remains)
---------------------------------------------------------------------


Re: [SKIN] css-style

Posted by "Scherler, Thorsten" <th...@apache.org>.
Scherler, Thorsten wrote:

> Hello devs,
> 
> I made a *DEV-SNAPSHOT* of the css-style skin
> This can be the all new ;-) css based skin.
> There are still heaps issues open for the skin.
> e.g.
> - If the lenya-logo is right it is not displayed correct. Any ideas why?

I did not used float: right;
is working now. Not on the sample page. I haven't update the snapshot 
after fixing that either.

> - no colour conf possible
> - pdf-link so far the only working alternativ (no print,...) 
> and should 
> be right and same height as H1.
float: right;

King regards
thorsten
-- 
<thorsten>
  <name>Thorsten Scherler</name>
  <country>Spain</country>
  <@m...@mail>
  <@cocoon-WIKI>
http://wiki.cocoondev.org/Wiki.jsp?page=Scherler
</...@cocoon-WIKI>
  <acronymfinder>
http://www.acronymfinder.com/af-query.asp?String=exact&Find=Find&Acronym=
  </acronymfinder>
  <motto>
    "My task which I am trying to achieve is,
     by the power of the written word,
     [...] to make you see."
     *Joseph Conrad (1857-1924)*
  </motto>
</thorsten>