You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@forrest.apache.org by Mike Jackson <mj...@cdi-hq.com> on 2005/06/24 02:11:08 UTC
Css question
I built the sample site using forrest and everything is ok. My question is
about the tab menu at the top of the page. I can't seem to find the css for
"base-selected" or "base-not-selected" anywhere and would like to know where
it's coming from. I'd really like to lift this into a tiles project I'm
working on.
Thanks.
--mikej
-=-----
mike jackson
mjackson@cdi-hq.com
RE: Css question
Posted by Mike Jackson <mj...@cdi-hq.com>.
Hmm, ok, except I couldn't find some of the css (base-selected and
base-not-selected). That's still a mystery to me. I've built a tab menu
widget for tiles, I'll see about generating the svg/png's on the fly for it.
Thanks for the information.
--mikej
-=-----
mike jackson
mjackson@cdi-hq.com
> -----Original Message-----
> From: Addi [mailto:addi@rocktreesky.com]
> Sent: Friday, June 24, 2005 1:27 PM
> To: user@forrest.apache.org
> Subject: Re: Css question
>
>
> When an image is set as background-image in the css, you
> won't be able
> to get the image from clicking on it because there is no direct
> reference to its location on the server as there is when the
> image is in
> the html itself. Your browser can not see where the image is
> to "save
> as". You can get the image in your browser (and save it) by
> looking up
> the full name in the css and then direct your browser to
> forrest_site_url/skin/images/name_of_the_image. (e.g.
> http://156.132.92.4/skin/images/rc-b-r-5-1header-2tab-selected
> -3tab-selected.png).
>
> - Addi
>
>
> Mike Jackson wrote:
>
> >Hmm, that all makes sense but then (when in IE) why don't get I the
> >"save as" highlighted for the image? Perhaps png or svg aren't
> >"supported" for that. I've done the rounded images before but I was
> >hoping that they had a better way so I won't have to
> generate the image files.
> >
> >--mikej
> >-=-----
> >mike jackson
> >mjackson@cdi-hq.com
> >
> >
> >
> >
> >>-----Original Message-----
> >>From: Addi [mailto:addi@rocktreesky.com]
> >>Sent: Friday, June 24, 2005 11:03 AM
> >>To: user@forrest.apache.org
> >>Subject: Re: Css question
> >>
> >>
> >>Ah. Well I can't find the css either but I could find the
> >>transformation where base-selected and base-not-selected are
> >>brought in,
> >>which looks like it is part of the process for determining
> which tab
> >>gets which colors. As for the tab look though, actually the
> >>tabs *do*
> >>use images. The basic tab is just css color, but the
> rounded corners
> >>are small images that Forrest makes for you by using base svg
> >>"rounded
> >>corner" images, applying the correct colors and then
> >>converting into png
> >>images on the fly during the build. If you look in
> >>build\site\skin\images you will see the png corner images
> >>(all starting
> >>with rc-).
> >>
> >>You should probably read the HowTo on Tab Corners if you
> >>haven't already.
> >>http://forrest.apache.org/docs_0_70/howto/howto-corner-images.html
> >>
> >>There are also a number of css tutorials on the net if you
> >>look for css
> >>rounded corners. There are a few methods that folks employ,
> >>depending
> >>on situation and all of the ones that I have encountered have
> >>required
> >>at least a small image.
> >>
> >>HTH
> >>Addi
> >>
> >>Mike Jackson wrote:
> >>
> >>
> >>
> >>>Hmm, I don't get it, but then I don't do anything really complex in
> >>>css. Anyhow, I see a reference to a style of "base-selected"
> >>>
> >>>
> >>within the
> >>
> >>
> >>>href and a "current" in tne <li> for them tab menu. I can't find
> >>>"base-selected" anywhere in the static site except in html
> >>>
> >>>
> >>files here
> >>
> >>
> >>>it's in use. What I'm really interested in is seeing how
> >>>
> >>>
> >>the rounded
> >>
> >>
> >>>corners are managed without using images. I figure it has
> >>>
> >>>
> >>something to
> >>
> >>
> >>>do with the css on the <li>. Here's the section of the
> >>>
> >>>
> >>generated html
> >>
> >>
> >>>I'm looking at:
> >>>
> >>><ul id="tabs">
> >>><li class="current">
> >>><a class="base-selected" href="index.html">Home</a>
> >>></li>
> >>><li>
> >>><a class="base-not-selected" href="samples/sample.html">Samples</a>
> >>></li>
> >>><li>
> >>><a class="base-not-selected"
> href="http://xml.apache.org">Apache XML
> >>>Projects</a> </li>
> >>><li>
> >>><a class="base-not-selected"
> >>>href="pluginDocs/plugins_0_70/index.html">Plugins</a>
> >>></li>
> >>></ul>
> >>>
> >>>--mikej
> >>>-=-----
> >>>mike jackson
> >>>mjackson@cdi-hq.com
> >>>
> >>>
> >>>
> >>>
> >>>
> >>>
> >>>
> >>>
> >>>
> >>>
> >>
> >>
> >>
> >
> >
> >
> >
> >
> >
> >
>
>
>
Re: Css question
Posted by Addi <ad...@rocktreesky.com>.
When an image is set as background-image in the css, you won't be able
to get the image from clicking on it because there is no direct
reference to its location on the server as there is when the image is in
the html itself. Your browser can not see where the image is to "save
as". You can get the image in your browser (and save it) by looking up
the full name in the css and then direct your browser to
forrest_site_url/skin/images/name_of_the_image. (e.g.
http://156.132.92.4/skin/images/rc-b-r-5-1header-2tab-selected-3tab-selected.png).
- Addi
Mike Jackson wrote:
>Hmm, that all makes sense but then (when in IE) why don't get I the "save
>as" highlighted for the image? Perhaps png or svg aren't "supported" for
>that. I've done the rounded images before but I was hoping that they had a
>better way so I won't have to generate the image files.
>
>--mikej
>-=-----
>mike jackson
>mjackson@cdi-hq.com
>
>
>
>
>>-----Original Message-----
>>From: Addi [mailto:addi@rocktreesky.com]
>>Sent: Friday, June 24, 2005 11:03 AM
>>To: user@forrest.apache.org
>>Subject: Re: Css question
>>
>>
>>Ah. Well I can't find the css either but I could find the
>>transformation where base-selected and base-not-selected are
>>brought in,
>>which looks like it is part of the process for determining which tab
>>gets which colors. As for the tab look though, actually the
>>tabs *do*
>>use images. The basic tab is just css color, but the rounded corners
>>are small images that Forrest makes for you by using base svg
>>"rounded
>>corner" images, applying the correct colors and then
>>converting into png
>>images on the fly during the build. If you look in
>>build\site\skin\images you will see the png corner images
>>(all starting
>>with rc-).
>>
>>You should probably read the HowTo on Tab Corners if you
>>haven't already.
>>http://forrest.apache.org/docs_0_70/howto/howto-corner-images.html
>>
>>There are also a number of css tutorials on the net if you
>>look for css
>>rounded corners. There are a few methods that folks employ,
>>depending
>>on situation and all of the ones that I have encountered have
>>required
>>at least a small image.
>>
>>HTH
>>Addi
>>
>>Mike Jackson wrote:
>>
>>
>>
>>>Hmm, I don't get it, but then I don't do anything really complex in
>>>css. Anyhow, I see a reference to a style of "base-selected"
>>>
>>>
>>within the
>>
>>
>>>href and a "current" in tne <li> for them tab menu. I can't find
>>>"base-selected" anywhere in the static site except in html
>>>
>>>
>>files here
>>
>>
>>>it's in use. What I'm really interested in is seeing how
>>>
>>>
>>the rounded
>>
>>
>>>corners are managed without using images. I figure it has
>>>
>>>
>>something to
>>
>>
>>>do with the css on the <li>. Here's the section of the
>>>
>>>
>>generated html
>>
>>
>>>I'm looking at:
>>>
>>><ul id="tabs">
>>><li class="current">
>>><a class="base-selected" href="index.html">Home</a>
>>></li>
>>><li>
>>><a class="base-not-selected" href="samples/sample.html">Samples</a>
>>></li>
>>><li>
>>><a class="base-not-selected" href="http://xml.apache.org">Apache XML
>>>Projects</a> </li>
>>><li>
>>><a class="base-not-selected"
>>>href="pluginDocs/plugins_0_70/index.html">Plugins</a>
>>></li>
>>></ul>
>>>
>>>--mikej
>>>-=-----
>>>mike jackson
>>>mjackson@cdi-hq.com
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>>
>>
>>
>>
>
>
>
>
>
>
>
RE: Css question
Posted by Mike Jackson <mj...@cdi-hq.com>.
Hmm, that all makes sense but then (when in IE) why don't get I the "save
as" highlighted for the image? Perhaps png or svg aren't "supported" for
that. I've done the rounded images before but I was hoping that they had a
better way so I won't have to generate the image files.
--mikej
-=-----
mike jackson
mjackson@cdi-hq.com
> -----Original Message-----
> From: Addi [mailto:addi@rocktreesky.com]
> Sent: Friday, June 24, 2005 11:03 AM
> To: user@forrest.apache.org
> Subject: Re: Css question
>
>
> Ah. Well I can't find the css either but I could find the
> transformation where base-selected and base-not-selected are
> brought in,
> which looks like it is part of the process for determining which tab
> gets which colors. As for the tab look though, actually the
> tabs *do*
> use images. The basic tab is just css color, but the rounded corners
> are small images that Forrest makes for you by using base svg
> "rounded
> corner" images, applying the correct colors and then
> converting into png
> images on the fly during the build. If you look in
> build\site\skin\images you will see the png corner images
> (all starting
> with rc-).
>
> You should probably read the HowTo on Tab Corners if you
> haven't already.
> http://forrest.apache.org/docs_0_70/howto/howto-corner-images.html
>
> There are also a number of css tutorials on the net if you
> look for css
> rounded corners. There are a few methods that folks employ,
> depending
> on situation and all of the ones that I have encountered have
> required
> at least a small image.
>
> HTH
> Addi
>
> Mike Jackson wrote:
>
> >Hmm, I don't get it, but then I don't do anything really complex in
> >css. Anyhow, I see a reference to a style of "base-selected"
> within the
> >href and a "current" in tne <li> for them tab menu. I can't find
> >"base-selected" anywhere in the static site except in html
> files here
> >it's in use. What I'm really interested in is seeing how
> the rounded
> >corners are managed without using images. I figure it has
> something to
> >do with the css on the <li>. Here's the section of the
> generated html
> >I'm looking at:
> >
> ><ul id="tabs">
> ><li class="current">
> ><a class="base-selected" href="index.html">Home</a>
> ></li>
> ><li>
> ><a class="base-not-selected" href="samples/sample.html">Samples</a>
> ></li>
> ><li>
> ><a class="base-not-selected" href="http://xml.apache.org">Apache XML
> >Projects</a> </li>
> ><li>
> ><a class="base-not-selected"
> >href="pluginDocs/plugins_0_70/index.html">Plugins</a>
> ></li>
> ></ul>
> >
> >--mikej
> >-=-----
> >mike jackson
> >mjackson@cdi-hq.com
> >
> >
> >
> >
> >
> >
> >
> >
>
>
>
Re: Css question
Posted by Addi <ad...@rocktreesky.com>.
Ah. Well I can't find the css either but I could find the
transformation where base-selected and base-not-selected are brought in,
which looks like it is part of the process for determining which tab
gets which colors. As for the tab look though, actually the tabs *do*
use images. The basic tab is just css color, but the rounded corners
are small images that Forrest makes for you by using base svg "rounded
corner" images, applying the correct colors and then converting into png
images on the fly during the build. If you look in
build\site\skin\images you will see the png corner images (all starting
with rc-).
You should probably read the HowTo on Tab Corners if you haven't already.
http://forrest.apache.org/docs_0_70/howto/howto-corner-images.html
There are also a number of css tutorials on the net if you look for css
rounded corners. There are a few methods that folks employ, depending
on situation and all of the ones that I have encountered have required
at least a small image.
HTH
Addi
Mike Jackson wrote:
>Hmm, I don't get it, but then I don't do anything really complex in css.
>Anyhow, I see a reference to a style of "base-selected" within the href and
>a "current" in tne <li> for them tab menu. I can't find "base-selected"
>anywhere in the static site except in html files here it's in use. What I'm
>really interested in is seeing how the rounded corners are managed without
>using images. I figure it has something to do with the css on the <li>.
>Here's the section of the generated html I'm looking at:
>
><ul id="tabs">
><li class="current">
><a class="base-selected" href="index.html">Home</a>
></li>
><li>
><a class="base-not-selected" href="samples/sample.html">Samples</a>
></li>
><li>
><a class="base-not-selected" href="http://xml.apache.org">Apache XML
>Projects</a>
></li>
><li>
><a class="base-not-selected"
>href="pluginDocs/plugins_0_70/index.html">Plugins</a>
></li>
></ul>
>
>--mikej
>-=-----
>mike jackson
>mjackson@cdi-hq.com
>
>
>
>
>
>
>
>
RE: Css question
Posted by Mike Jackson <mj...@cdi-hq.com>.
Hmm, I don't get it, but then I don't do anything really complex in css.
Anyhow, I see a reference to a style of "base-selected" within the href and
a "current" in tne <li> for them tab menu. I can't find "base-selected"
anywhere in the static site except in html files here it's in use. What I'm
really interested in is seeing how the rounded corners are managed without
using images. I figure it has something to do with the css on the <li>.
Here's the section of the generated html I'm looking at:
<ul id="tabs">
<li class="current">
<a class="base-selected" href="index.html">Home</a>
</li>
<li>
<a class="base-not-selected" href="samples/sample.html">Samples</a>
</li>
<li>
<a class="base-not-selected" href="http://xml.apache.org">Apache XML
Projects</a>
</li>
<li>
<a class="base-not-selected"
href="pluginDocs/plugins_0_70/index.html">Plugins</a>
</li>
</ul>
--mikej
-=-----
mike jackson
mjackson@cdi-hq.com
Re: Css question
Posted by Addi <ad...@rocktreesky.com>.
Mike Jackson wrote:
>I built the sample site using forrest and everything is ok. My question is
>about the tab menu at the top of the page. I can't seem to find the css for
>"base-selected" or "base-not-selected" anywhere and would like to know where
>it's coming from. I'd really like to lift this into a tiles project I'm
>working on.
>
>
>
It is located in {projectdir}/build/site/skin/profile.css. Tab selected
is #top .header .current and unselected is #tabs. It's not terribly
clear when looking at that file but if you go look at profile.css.xslt
you can see that's how it is mapped:
<xsl:template match="color[@name='tab-selected']">
#top .header .current { background-color: <xsl:value-of select="@value"/>;}
#top .header .current a:link { color: <xsl:value-of select="@link"/>; }
#top .header .current a:visited { color: <xsl:value-of select="@vlink"/>; }
#top .header .current a:hover { color: <xsl:value-of select="@hlink"/>; }
</xsl:template>
<xsl:template match="color[@name='tab-unselected']">
#tabs li { background-color: <xsl:value-of select="@value"/> ;}
#tabs li a:link { color: <xsl:value-of select="@link"/>; }
#tabs li a:visited { color: <xsl:value-of select="@vlink"/>; }
#tabs li a:hover { color: <xsl:value-of select="@hlink"/>; }
</xsl:template>
<xsl:template match="color[@name='subtab-selected']">
#level2tabs { background-color: <xsl:value-of select="@value"/> ;}
#level2tabs a:link { color: <xsl:value-of select="@link"/>; }
#level2tabs a:visited { color: <xsl:value-of select="@vlink"/>; }
#level2tabs a:hover { color: <xsl:value-of select="@hlink"/>; }
</xsl:template>
HTH
Addi