You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Bruce Petro <bp...@artromick.com> on 2007/06/20 22:40:10 UTC

T5 - syntax for css background images?

Question:  I've learned so far, to display an image ... you do something
like this:

SomePage.java

    @Inject

    @Path("./art_logo.png")

      private Asset _someIcon;

and then SomePage.html you do

<img src="${someIcon}"/>

 

BUT --- what's the syntax to use these in css EG: background images?

 

    <style type="text/css">

      <!--

      body {

        background-color: #2D374A;

        background-image: url(someBackground);

      }

      .MainTable {

        background-color: #B5BFD2;

        background-image: url(someBackground);

      }

      -->

    </style>

 


Re: T5 - syntax for css background images?

Posted by Daniel Jue <te...@gmail.com>.
Hi, I do not understand your question, can you rephrase it?  You can
embed your style inline in the HTML header, or you can have your html
page reference a .css file containing your styles.

The original question was about using variables inside the inline
style blocks of an html page.  Howard said you have to remove the <!--
    -->  comments to make it work.



On 6/22/07, Jiri Mares <Ji...@svt.cz> wrote:
>
> Hi ...
>
> or can I create page that is going to serve CSS instead of HTML??
>
> Jirka
>
> Howard Lewis Ship napsal(a):
> >
> > You can use expansions inside a <style> block, just as you can
> > elsewhere in an HTML template.  However, you have to eliminate the
> > HTML comments when you do so, or the expansions will not be processed:
> >
> > <style type="text/css">
> >
> >     body {
> >
> >       background-color: #2D374A;
> >
> >       background-image: url(${someBackground});
> >
> >     }
> >
> >     .MainTable {
> >
> >       background-color: #B5BFD2;
> >
> >       background-image: url(${someBackground});
> >
> >     }
> >
> >   </style>
> >
> > On 6/20/07, Bruce Petro <bp...@artromick.com> wrote:
> >> Question:  I've learned so far, to display an image ... you do something
> >> like this:
> >>
> >> SomePage.java
> >>
> >>     @Inject
> >>
> >>     @Path("./art_logo.png")
> >>
> >>       private Asset _someIcon;
> >>
> >> and then SomePage.html you do
> >>
> >> <img src="${someIcon}"/>
> >>
> >>
> >>
> >> BUT --- what's the syntax to use these in css EG: background images?
> >>
> >>
> >>
> >>     <style type="text/css">
> >>
> >>       <!--
> >>
> >>       body {
> >>
> >>         background-color: #2D374A;
> >>
> >>         background-image: url(someBackground);
> >>
> >>       }
> >>
> >>       .MainTable {
> >>
> >>         background-color: #B5BFD2;
> >>
> >>         background-image: url(someBackground);
> >>
> >>       }
> >>
> >>       -->
> >>
> >>     </style>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: T5 - syntax for css background images?

Posted by Daniel Jue <te...@gmail.com>.
I've heard of PHP code whose purpose was to dynamically create CSS
files that were output into the final html (in the header, not as a
link to a file).  If you wanted to repeat that kind of functionality,
it seems like it would be easy to do.  The one problem I see is that
if you use a CSS file as a template, it may require a different DTD.
CSS alone is not "well formed XML" and I think Tapestry is expecting
the templates to be well formed.  Alternatively, having your CSS
inside an html template may be a problem if Tapestry does not remove
the <html> and <body> tags, since your content pages will have their
own <html> and <body> tags.

I haven't had a use for this yet, but I will post my results if I get to it.

Daniel

On 6/25/07, Jiri Mares <Ji...@svt.cz> wrote:
>
> And do you consider it as interesting to implement it?
>
> Jirka
>
> Howard Lewis Ship napsal(a):
> >
> > It should be possible, there are meta-data settings on pages that
> > control the response content type. However, there's a couple of road
> > blocks in the current code base, such as the fact that there's no
> > outer-wrapper element for HTML (an template root element that does not
> > render an element into the output stream), and no way to remap the
> > file extension.
> >
> > On 6/22/07, Jiri Mares <Ji...@svt.cz> wrote:
> >>
> >> Hi ...
> >>
> >> or can I create page that is going to serve CSS instead of HTML??
> >>
> >> Jirka
> >>
> >> Howard Lewis Ship napsal(a):
> >> >
> >> > You can use expansions inside a <style> block, just as you can
> >> > elsewhere in an HTML template.  However, you have to eliminate the
> >> > HTML comments when you do so, or the expansions will not be processed:
> >> >
> >> > <style type="text/css">
> >> >
> >> >     body {
> >> >
> >> >       background-color: #2D374A;
> >> >
> >> >       background-image: url(${someBackground});
> >> >
> >> >     }
> >> >
> >> >     .MainTable {
> >> >
> >> >       background-color: #B5BFD2;
> >> >
> >> >       background-image: url(${someBackground});
> >> >
> >> >     }
> >> >
> >> >   </style>
> >> >
> >> > On 6/20/07, Bruce Petro <bp...@artromick.com> wrote:
> >> >> Question:  I've learned so far, to display an image ... you do
> >> something
> >> >> like this:
> >> >>
> >> >> SomePage.java
> >> >>
> >> >>     @Inject
> >> >>
> >> >>     @Path("./art_logo.png")
> >> >>
> >> >>       private Asset _someIcon;
> >> >>
> >> >> and then SomePage.html you do
> >> >>
> >> >> <img src="${someIcon}"/>
> >> >>
> >> >>
> >> >>
> >> >> BUT --- what's the syntax to use these in css EG: background images?
> >> >>
> >> >>
> >> >>
> >> >>     <style type="text/css">
> >> >>
> >> >>       <!--
> >> >>
> >> >>       body {
> >> >>
> >> >>         background-color: #2D374A;
> >> >>
> >> >>         background-image: url(someBackground);
> >> >>
> >> >>       }
> >> >>
> >> >>       .MainTable {
> >> >>
> >> >>         background-color: #B5BFD2;
> >> >>
> >> >>         background-image: url(someBackground);
> >> >>
> >> >>       }
> >> >>
> >> >>       -->
> >> >>
> >> >>     </style>
> >>
> >>
> >> ---------------------------------------------------------------------
> >> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> >> For additional commands, e-mail: users-help@tapestry.apache.org
> >>
> >>
> >
> >
>
> --
> Jiří Mareš (mailto:Jiri.Mares@svt.cz)
> ČSAD SVT Praha, s.r.o. (http://www.svt.cz)
> Czech Republic
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>

Re: T5 - syntax for css background images?

Posted by Jiri Mares <Ji...@svt.cz>.
And do you consider it as interesting to implement it?

Jirka

Howard Lewis Ship napsal(a):
> 
> It should be possible, there are meta-data settings on pages that
> control the response content type. However, there's a couple of road
> blocks in the current code base, such as the fact that there's no
> outer-wrapper element for HTML (an template root element that does not
> render an element into the output stream), and no way to remap the
> file extension.
> 
> On 6/22/07, Jiri Mares <Ji...@svt.cz> wrote:
>>
>> Hi ...
>>
>> or can I create page that is going to serve CSS instead of HTML??
>>
>> Jirka
>>
>> Howard Lewis Ship napsal(a):
>> >
>> > You can use expansions inside a <style> block, just as you can
>> > elsewhere in an HTML template.  However, you have to eliminate the
>> > HTML comments when you do so, or the expansions will not be processed:
>> >
>> > <style type="text/css">
>> >
>> >     body {
>> >
>> >       background-color: #2D374A;
>> >
>> >       background-image: url(${someBackground});
>> >
>> >     }
>> >
>> >     .MainTable {
>> >
>> >       background-color: #B5BFD2;
>> >
>> >       background-image: url(${someBackground});
>> >
>> >     }
>> >
>> >   </style>
>> >
>> > On 6/20/07, Bruce Petro <bp...@artromick.com> wrote:
>> >> Question:  I've learned so far, to display an image ... you do
>> something
>> >> like this:
>> >>
>> >> SomePage.java
>> >>
>> >>     @Inject
>> >>
>> >>     @Path("./art_logo.png")
>> >>
>> >>       private Asset _someIcon;
>> >>
>> >> and then SomePage.html you do
>> >>
>> >> <img src="${someIcon}"/>
>> >>
>> >>
>> >>
>> >> BUT --- what's the syntax to use these in css EG: background images?
>> >>
>> >>
>> >>
>> >>     <style type="text/css">
>> >>
>> >>       <!--
>> >>
>> >>       body {
>> >>
>> >>         background-color: #2D374A;
>> >>
>> >>         background-image: url(someBackground);
>> >>
>> >>       }
>> >>
>> >>       .MainTable {
>> >>
>> >>         background-color: #B5BFD2;
>> >>
>> >>         background-image: url(someBackground);
>> >>
>> >>       }
>> >>
>> >>       -->
>> >>
>> >>     </style>
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>> For additional commands, e-mail: users-help@tapestry.apache.org
>>
>>
> 
> 

-- 
Jiří Mareš (mailto:Jiri.Mares@svt.cz)
ČSAD SVT Praha, s.r.o. (http://www.svt.cz)
Czech Republic

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: T5 - syntax for css background images?

Posted by Jiri Mares <Ji...@svt.cz>.
Yes ... maybe component, maybe page to generate whole css file referenced in HTML pages ...

Jirka

Daniel Jue napsal(a):
> 
> I think I see where this is going...  I guess you could have a
> component that plugs in raw text (the text being inline CSS code, or a
> link to a calculated css) into the html, but that seems like a hack.
> (Although you could do some pretty cool things like vary the color of
> things over the day, like the PS3 menu)
> 
> On 6/22/07, Howard Lewis Ship <hl...@gmail.com> wrote:
>> It should be possible, there are meta-data settings on pages that
>> control the response content type. However, there's a couple of road
>> blocks in the current code base, such as the fact that there's no
>> outer-wrapper element for HTML (an template root element that does not
>> render an element into the output stream), and no way to remap the
>> file extension.
>>
>> On 6/22/07, Jiri Mares <Ji...@svt.cz> wrote:
>> >
>> > Hi ...
>> >
>> > or can I create page that is going to serve CSS instead of HTML??
>> >
>> > Jirka
>> >
>> > Howard Lewis Ship napsal(a):
>> > >
>> > > You can use expansions inside a <style> block, just as you can
>> > > elsewhere in an HTML template.  However, you have to eliminate the
>> > > HTML comments when you do so, or the expansions will not be
>> processed:
>> > >
>> > > <style type="text/css">
>> > >
>> > >     body {
>> > >
>> > >       background-color: #2D374A;
>> > >
>> > >       background-image: url(${someBackground});
>> > >
>> > >     }
>> > >
>> > >     .MainTable {
>> > >
>> > >       background-color: #B5BFD2;
>> > >
>> > >       background-image: url(${someBackground});
>> > >
>> > >     }
>> > >
>> > >   </style>
>> > >
>> > > On 6/20/07, Bruce Petro <bp...@artromick.com> wrote:
>> > >> Question:  I've learned so far, to display an image ... you do
>> something
>> > >> like this:
>> > >>
>> > >> SomePage.java
>> > >>
>> > >>     @Inject
>> > >>
>> > >>     @Path("./art_logo.png")
>> > >>
>> > >>       private Asset _someIcon;
>> > >>
>> > >> and then SomePage.html you do
>> > >>
>> > >> <img src="${someIcon}"/>
>> > >>
>> > >>
>> > >>
>> > >> BUT --- what's the syntax to use these in css EG: background images?
>> > >>
>> > >>
>> > >>
>> > >>     <style type="text/css">
>> > >>
>> > >>       <!--
>> > >>
>> > >>       body {
>> > >>
>> > >>         background-color: #2D374A;
>> > >>
>> > >>         background-image: url(someBackground);
>> > >>
>> > >>       }
>> > >>
>> > >>       .MainTable {
>> > >>
>> > >>         background-color: #B5BFD2;
>> > >>
>> > >>         background-image: url(someBackground);
>> > >>
>> > >>       }
>> > >>
>> > >>       -->
>> > >>
>> > >>     </style>
>> >
>> >
>> > ---------------------------------------------------------------------
>> > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>> > For additional commands, e-mail: users-help@tapestry.apache.org
>> >
>> >
>>
>>
>> -- 
>> Howard M. Lewis Ship
>> TWD Consulting, Inc.
>> Independent J2EE / Open-Source Java Consultant
>> Creator and PMC Chair, Apache Tapestry
>> Creator, Apache HiveMind
>>
>> Professional Tapestry training, mentoring, support
>> and project work.  http://howardlewisship.com
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>> For additional commands, e-mail: users-help@tapestry.apache.org
>>
>>
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org

-- 
Jiří Mareš (mailto:Jiri.Mares@svt.cz)
ČSAD SVT Praha, s.r.o. (http://www.svt.cz)
Czech Republic

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: T5 - syntax for css background images?

Posted by Daniel Jue <te...@gmail.com>.
I think I see where this is going...  I guess you could have a
component that plugs in raw text (the text being inline CSS code, or a
link to a calculated css) into the html, but that seems like a hack.
(Although you could do some pretty cool things like vary the color of
things over the day, like the PS3 menu)

On 6/22/07, Howard Lewis Ship <hl...@gmail.com> wrote:
> It should be possible, there are meta-data settings on pages that
> control the response content type. However, there's a couple of road
> blocks in the current code base, such as the fact that there's no
> outer-wrapper element for HTML (an template root element that does not
> render an element into the output stream), and no way to remap the
> file extension.
>
> On 6/22/07, Jiri Mares <Ji...@svt.cz> wrote:
> >
> > Hi ...
> >
> > or can I create page that is going to serve CSS instead of HTML??
> >
> > Jirka
> >
> > Howard Lewis Ship napsal(a):
> > >
> > > You can use expansions inside a <style> block, just as you can
> > > elsewhere in an HTML template.  However, you have to eliminate the
> > > HTML comments when you do so, or the expansions will not be processed:
> > >
> > > <style type="text/css">
> > >
> > >     body {
> > >
> > >       background-color: #2D374A;
> > >
> > >       background-image: url(${someBackground});
> > >
> > >     }
> > >
> > >     .MainTable {
> > >
> > >       background-color: #B5BFD2;
> > >
> > >       background-image: url(${someBackground});
> > >
> > >     }
> > >
> > >   </style>
> > >
> > > On 6/20/07, Bruce Petro <bp...@artromick.com> wrote:
> > >> Question:  I've learned so far, to display an image ... you do something
> > >> like this:
> > >>
> > >> SomePage.java
> > >>
> > >>     @Inject
> > >>
> > >>     @Path("./art_logo.png")
> > >>
> > >>       private Asset _someIcon;
> > >>
> > >> and then SomePage.html you do
> > >>
> > >> <img src="${someIcon}"/>
> > >>
> > >>
> > >>
> > >> BUT --- what's the syntax to use these in css EG: background images?
> > >>
> > >>
> > >>
> > >>     <style type="text/css">
> > >>
> > >>       <!--
> > >>
> > >>       body {
> > >>
> > >>         background-color: #2D374A;
> > >>
> > >>         background-image: url(someBackground);
> > >>
> > >>       }
> > >>
> > >>       .MainTable {
> > >>
> > >>         background-color: #B5BFD2;
> > >>
> > >>         background-image: url(someBackground);
> > >>
> > >>       }
> > >>
> > >>       -->
> > >>
> > >>     </style>
> >
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> > For additional commands, e-mail: users-help@tapestry.apache.org
> >
> >
>
>
> --
> Howard M. Lewis Ship
> TWD Consulting, Inc.
> Independent J2EE / Open-Source Java Consultant
> Creator and PMC Chair, Apache Tapestry
> Creator, Apache HiveMind
>
> Professional Tapestry training, mentoring, support
> and project work.  http://howardlewisship.com
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: T5 - syntax for css background images?

Posted by Howard Lewis Ship <hl...@gmail.com>.
It should be possible, there are meta-data settings on pages that
control the response content type. However, there's a couple of road
blocks in the current code base, such as the fact that there's no
outer-wrapper element for HTML (an template root element that does not
render an element into the output stream), and no way to remap the
file extension.

On 6/22/07, Jiri Mares <Ji...@svt.cz> wrote:
>
> Hi ...
>
> or can I create page that is going to serve CSS instead of HTML??
>
> Jirka
>
> Howard Lewis Ship napsal(a):
> >
> > You can use expansions inside a <style> block, just as you can
> > elsewhere in an HTML template.  However, you have to eliminate the
> > HTML comments when you do so, or the expansions will not be processed:
> >
> > <style type="text/css">
> >
> >     body {
> >
> >       background-color: #2D374A;
> >
> >       background-image: url(${someBackground});
> >
> >     }
> >
> >     .MainTable {
> >
> >       background-color: #B5BFD2;
> >
> >       background-image: url(${someBackground});
> >
> >     }
> >
> >   </style>
> >
> > On 6/20/07, Bruce Petro <bp...@artromick.com> wrote:
> >> Question:  I've learned so far, to display an image ... you do something
> >> like this:
> >>
> >> SomePage.java
> >>
> >>     @Inject
> >>
> >>     @Path("./art_logo.png")
> >>
> >>       private Asset _someIcon;
> >>
> >> and then SomePage.html you do
> >>
> >> <img src="${someIcon}"/>
> >>
> >>
> >>
> >> BUT --- what's the syntax to use these in css EG: background images?
> >>
> >>
> >>
> >>     <style type="text/css">
> >>
> >>       <!--
> >>
> >>       body {
> >>
> >>         background-color: #2D374A;
> >>
> >>         background-image: url(someBackground);
> >>
> >>       }
> >>
> >>       .MainTable {
> >>
> >>         background-color: #B5BFD2;
> >>
> >>         background-image: url(someBackground);
> >>
> >>       }
> >>
> >>       -->
> >>
> >>     </style>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>


-- 
Howard M. Lewis Ship
TWD Consulting, Inc.
Independent J2EE / Open-Source Java Consultant
Creator and PMC Chair, Apache Tapestry
Creator, Apache HiveMind

Professional Tapestry training, mentoring, support
and project work.  http://howardlewisship.com

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: T5 - syntax for css background images?

Posted by Jiri Mares <Ji...@svt.cz>.
Hi ...

or can I create page that is going to serve CSS instead of HTML??

Jirka

Howard Lewis Ship napsal(a):
> 
> You can use expansions inside a <style> block, just as you can
> elsewhere in an HTML template.  However, you have to eliminate the
> HTML comments when you do so, or the expansions will not be processed:
> 
> <style type="text/css">
> 
>     body {
> 
>       background-color: #2D374A;
> 
>       background-image: url(${someBackground});
> 
>     }
> 
>     .MainTable {
> 
>       background-color: #B5BFD2;
> 
>       background-image: url(${someBackground});
> 
>     }
> 
>   </style>
> 
> On 6/20/07, Bruce Petro <bp...@artromick.com> wrote:
>> Question:  I've learned so far, to display an image ... you do something
>> like this:
>>
>> SomePage.java
>>
>>     @Inject
>>
>>     @Path("./art_logo.png")
>>
>>       private Asset _someIcon;
>>
>> and then SomePage.html you do
>>
>> <img src="${someIcon}"/>
>>
>>
>>
>> BUT --- what's the syntax to use these in css EG: background images?
>>
>>
>>
>>     <style type="text/css">
>>
>>       <!--
>>
>>       body {
>>
>>         background-color: #2D374A;
>>
>>         background-image: url(someBackground);
>>
>>       }
>>
>>       .MainTable {
>>
>>         background-color: #B5BFD2;
>>
>>         background-image: url(someBackground);
>>
>>       }
>>
>>       -->
>>
>>     </style>


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: T5 - syntax for css background images?

Posted by Howard Lewis Ship <hl...@gmail.com>.
You can use expansions inside a <style> block, just as you can
elsewhere in an HTML template.  However, you have to eliminate the
HTML comments when you do so, or the expansions will not be processed:

<style type="text/css">

     body {

       background-color: #2D374A;

       background-image: url(${someBackground});

     }

     .MainTable {

       background-color: #B5BFD2;

       background-image: url(${someBackground});

     }

   </style>

On 6/20/07, Bruce Petro <bp...@artromick.com> wrote:
> Question:  I've learned so far, to display an image ... you do something
> like this:
>
> SomePage.java
>
>     @Inject
>
>     @Path("./art_logo.png")
>
>       private Asset _someIcon;
>
> and then SomePage.html you do
>
> <img src="${someIcon}"/>
>
>
>
> BUT --- what's the syntax to use these in css EG: background images?
>
>
>
>     <style type="text/css">
>
>       <!--
>
>       body {
>
>         background-color: #2D374A;
>
>         background-image: url(someBackground);
>
>       }
>
>       .MainTable {
>
>         background-color: #B5BFD2;
>
>         background-image: url(someBackground);
>
>       }
>
>       -->
>
>     </style>
>
>
>
>


-- 
Howard M. Lewis Ship
TWD Consulting, Inc.
Independent J2EE / Open-Source Java Consultant
Creator and PMC Chair, Apache Tapestry
Creator, Apache HiveMind

Professional Tapestry training, mentoring, support
and project work.  http://howardlewisship.com

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org