You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Sanket Sharma <sa...@gmail.com> on 2013/09/02 03:31:21 UTC
Overriding default CSS for validation errors
Hi,
Sorry for asking the same question again, but I can't seem to find a
definitive answer on this one. I've read through the documentation and even
mailing lists but can't seem to get it to work.
I'm relatively new to Tapestry and loving it so far. The only trouble I'm
having is when I try to override the default CSS, for client side
validation errors in particular.
I'm basically trying to change the client side validation bubbles that pop
up when validation fails.
The documentation says (http://tapestry.apache.org/css.html):
"Tapestry includes a built-in style sheet, default.css, in all HTML
documents (documents that have an outer <html> element and a nested <head>
element). The default.css style sheet is always ordered *first* ... any
additional style sheets will come after. This allows you to override
Tapestry's default styles with your own." So, I added the following CSS in
my site.css:
.t-error-popup span {
background:url('../images/error-bevel-left-blue.png') no-repeat;
}
And in my laout component, added the following import:
import org.apache.tapestry5.annotations.Import;
@Import(stylesheet="context:css/site.css")
public class MainPageLayout {
}
However, this did not affect the popup. When I inspected the element in
Safari, my custom URL was crossed out, suggesting it was overridden by the
default CSS. Not sure if I'm missing anything here?
Other documentation on the web seem to suggest either overriding or perhaps
even writing a custom ValidationDecorator. But that doesn't address the
client side CSS issue. The only solution that might work seems to be
writing/overriding the default java script (Tapestry.js) as hinted in this
solution:
http://jumpstart.doublenegative.com.au/jumpstart/examples/input/novalidationbubbles
I also tried using jQuery and seems like I might just be able to get it to
work, but I'd like to stick to out of the box functionality and only use
another library if I really have to.
I would like to know what is the "correct" way of doing it keeping
performance and more importantly, version 5.4 with completely re engineered
javascript support in mind.
Thank you in advance.
Best Regards,
Sanket
Re: Overriding default CSS for validation errors
Posted by Bob Harner <bo...@gmail.com>.
Glad it helped. The Tapestry CSS rule is probably much more specific than
it needs to be.
On Mon, Sep 2, 2013 at 4:20 PM, Sanket Sharma <sa...@gmail.com>wrote:
> Hey Bob,
>
> Thank you for the response. I tried what you suggested:
>
> body .t-error-popup span {
> background:url('../images/
> error-bevel-left-blue.png') no-repeat;
> }
>
> but unfortunately, that did not work either. However, I must thank you for
> pointing me in the right direction. I read up a little on "specificity" and
> that got me curious as to how the CSS is actually defined in Tapestry. I
> downloaded the source and had a look at default.css and it contains the
> following definition:
>
>
> HTML>BODY DIV.t-error-popup SPAN {
> background: transparent url('error-bevel-left.png') no-repeat;
> }
>
> which is very 'specific'. So, now I know why my css wasn't working. I
> changed my CSS to below:
>
> HTML>BODY DIV.t-error-popup SPAN {
> background:url('../images/error-bevel-left-blue.png') no-repeat;
>
> }
>
> As both have same 'specificity' and as my css gets loaded after the default
> (as rightly mentioned in the documentation), it overrides the default CSS.
> Its all working now.
>
> Thank you very much for all your help and assistance. Much appreciated.
>
> Best Regards,
> Sanket
>
>
>
>
>
>
>
> On Mon, Sep 2, 2013 at 6:37 PM, Bob Harner <bo...@gmail.com> wrote:
>
> > CSS problems like this are usually best solved by making the rule more
> > *specific*. In CSS, the more specific rule wins.
> >
> > In simplistic terms, this means using more selectors. For example, just
> add
> > "body", like this:
> >
> > body .t-error-popup span {
> > background:url('../images/error-bevel-left-blue.png') no-repeat;
> > }
> >
> > https://www.google.com/search?q=css+specificity
> >
> >
> > On Mon, Sep 2, 2013 at 11:39 AM, Thiago H de Paula Figueiredo <
> > thiagohp@gmail.com> wrote:
> >
> > > On Mon, 02 Sep 2013 12:21:49 -0300, Sanket Sharma <
> > sanketsharma@gmail.com>
> > > wrote:
> > >
> > > Is there an easy way to style the error messages in alpha 15?
> > >>
> > >
> > > It's still CSS, but without bubbles. Just override the default styles
> > > (from Twitter Bootstrap). As far as I can remember (Eclipse not opened
> > > right now), in 5.4 the only JavaScript used is to show and hide the
> HTML
> > > elements containing the errors and to change their messages according
> to
> > > the inputs, which is less than 5.3 and before.
> > >
> > >
> > > --
> > > Thiago H. de Paula Figueiredo
> > >
> > >
> ------------------------------**------------------------------**---------
> > > To unsubscribe, e-mail: users-unsubscribe@tapestry.**apache.org<
> > users-unsubscribe@tapestry.apache.org>
> > >
> > > For additional commands, e-mail: users-help@tapestry.apache.org
> > >
> > >
> >
>
Re: Overriding default CSS for validation errors
Posted by Sanket Sharma <sa...@gmail.com>.
Hey Bob,
Thank you for the response. I tried what you suggested:
body .t-error-popup span {
background:url('../images/
error-bevel-left-blue.png') no-repeat;
}
but unfortunately, that did not work either. However, I must thank you for
pointing me in the right direction. I read up a little on "specificity" and
that got me curious as to how the CSS is actually defined in Tapestry. I
downloaded the source and had a look at default.css and it contains the
following definition:
HTML>BODY DIV.t-error-popup SPAN {
background: transparent url('error-bevel-left.png') no-repeat;
}
which is very 'specific'. So, now I know why my css wasn't working. I
changed my CSS to below:
HTML>BODY DIV.t-error-popup SPAN {
background:url('../images/error-bevel-left-blue.png') no-repeat;
}
As both have same 'specificity' and as my css gets loaded after the default
(as rightly mentioned in the documentation), it overrides the default CSS.
Its all working now.
Thank you very much for all your help and assistance. Much appreciated.
Best Regards,
Sanket
On Mon, Sep 2, 2013 at 6:37 PM, Bob Harner <bo...@gmail.com> wrote:
> CSS problems like this are usually best solved by making the rule more
> *specific*. In CSS, the more specific rule wins.
>
> In simplistic terms, this means using more selectors. For example, just add
> "body", like this:
>
> body .t-error-popup span {
> background:url('../images/error-bevel-left-blue.png') no-repeat;
> }
>
> https://www.google.com/search?q=css+specificity
>
>
> On Mon, Sep 2, 2013 at 11:39 AM, Thiago H de Paula Figueiredo <
> thiagohp@gmail.com> wrote:
>
> > On Mon, 02 Sep 2013 12:21:49 -0300, Sanket Sharma <
> sanketsharma@gmail.com>
> > wrote:
> >
> > Is there an easy way to style the error messages in alpha 15?
> >>
> >
> > It's still CSS, but without bubbles. Just override the default styles
> > (from Twitter Bootstrap). As far as I can remember (Eclipse not opened
> > right now), in 5.4 the only JavaScript used is to show and hide the HTML
> > elements containing the errors and to change their messages according to
> > the inputs, which is less than 5.3 and before.
> >
> >
> > --
> > Thiago H. de Paula Figueiredo
> >
> > ------------------------------**------------------------------**---------
> > To unsubscribe, e-mail: users-unsubscribe@tapestry.**apache.org<
> users-unsubscribe@tapestry.apache.org>
> >
> > For additional commands, e-mail: users-help@tapestry.apache.org
> >
> >
>
Re: Overriding default CSS for validation errors
Posted by Bob Harner <bo...@gmail.com>.
CSS problems like this are usually best solved by making the rule more
*specific*. In CSS, the more specific rule wins.
In simplistic terms, this means using more selectors. For example, just add
"body", like this:
body .t-error-popup span {
background:url('../images/error-bevel-left-blue.png') no-repeat;
}
https://www.google.com/search?q=css+specificity
On Mon, Sep 2, 2013 at 11:39 AM, Thiago H de Paula Figueiredo <
thiagohp@gmail.com> wrote:
> On Mon, 02 Sep 2013 12:21:49 -0300, Sanket Sharma <sa...@gmail.com>
> wrote:
>
> Is there an easy way to style the error messages in alpha 15?
>>
>
> It's still CSS, but without bubbles. Just override the default styles
> (from Twitter Bootstrap). As far as I can remember (Eclipse not opened
> right now), in 5.4 the only JavaScript used is to show and hide the HTML
> elements containing the errors and to change their messages according to
> the inputs, which is less than 5.3 and before.
>
>
> --
> Thiago H. de Paula Figueiredo
>
> ------------------------------**------------------------------**---------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.**apache.org<us...@tapestry.apache.org>
>
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
Re: Overriding default CSS for validation errors
Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Mon, 02 Sep 2013 12:21:49 -0300, Sanket Sharma <sa...@gmail.com>
wrote:
> Is there an easy way to style the error messages in alpha 15?
It's still CSS, but without bubbles. Just override the default styles
(from Twitter Bootstrap). As far as I can remember (Eclipse not opened
right now), in 5.4 the only JavaScript used is to show and hide the HTML
elements containing the errors and to change their messages according to
the inputs, which is less than 5.3 and before.
--
Thiago H. de Paula Figueiredo
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: Overriding default CSS for validation errors
Posted by Sanket Sharma <sa...@gmail.com>.
Is there an easy way to style the error messages in alpha 15?
Downloading now....
Thank you very much
On 2 Sep 2013 17:18, "Thiago H de Paula Figueiredo" <th...@gmail.com>
wrote:
> On Sun, 01 Sep 2013 22:31:21 -0300, Sanket Sharma <sa...@gmail.com>
> wrote:
>
> Hi,
>>
>
> Hi!
>
> Sorry for asking the same question again, but I can't seem to find a
>> definitive answer on this one. I've read through the documentation and
>> even mailing lists but can't seem to get it to work.
>>
>> I'm relatively new to Tapestry and loving it so far. The only trouble I'm
>> having is when I try to override the default CSS, for client side
>> validation errors in particular.
>>
>
> You can try Tapestry 5.4-alpha-15, which doesn't use bubbles for showing
> error messages anymore.
>
> --
> Thiago H. de Paula Figueiredo
>
> ------------------------------**------------------------------**---------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.**apache.org<us...@tapestry.apache.org>
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
Re: Overriding default CSS for validation errors
Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Sun, 01 Sep 2013 22:31:21 -0300, Sanket Sharma <sa...@gmail.com>
wrote:
> Hi,
Hi!
> Sorry for asking the same question again, but I can't seem to find a
> definitive answer on this one. I've read through the documentation and
> even mailing lists but can't seem to get it to work.
>
> I'm relatively new to Tapestry and loving it so far. The only trouble I'm
> having is when I try to override the default CSS, for client side
> validation errors in particular.
You can try Tapestry 5.4-alpha-15, which doesn't use bubbles for showing
error messages anymore.
--
Thiago H. de Paula Figueiredo
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: Overriding default CSS for validation errors
Posted by Lenny Primak <lp...@hope.nyc.ny.us>.
Just a guess in the dark, but it looks like JavaScript is overriding what you are trying to do,
so the best option is to use the JumpStart method, of which you are already aware of.
Great job for finding somewhat complicated solution by the way.
Enjoy Tapestry
On Sep 1, 2013, at 9:31 PM, Sanket Sharma wrote:
> Hi,
>
> Sorry for asking the same question again, but I can't seem to find a
> definitive answer on this one. I've read through the documentation and even
> mailing lists but can't seem to get it to work.
>
> I'm relatively new to Tapestry and loving it so far. The only trouble I'm
> having is when I try to override the default CSS, for client side
> validation errors in particular.
>
> I'm basically trying to change the client side validation bubbles that pop
> up when validation fails.
>
> The documentation says (http://tapestry.apache.org/css.html):
>
> "Tapestry includes a built-in style sheet, default.css, in all HTML
> documents (documents that have an outer <html> element and a nested <head>
> element). The default.css style sheet is always ordered *first* ... any
> additional style sheets will come after. This allows you to override
> Tapestry's default styles with your own." So, I added the following CSS in
> my site.css:
>
> .t-error-popup span {
>
> background:url('../images/error-bevel-left-blue.png') no-repeat;
>
> }
>
> And in my laout component, added the following import:
>
> import org.apache.tapestry5.annotations.Import;
>
>
>
> @Import(stylesheet="context:css/site.css")
> public class MainPageLayout {
>
> }
> However, this did not affect the popup. When I inspected the element in
> Safari, my custom URL was crossed out, suggesting it was overridden by the
> default CSS. Not sure if I'm missing anything here?
>
> Other documentation on the web seem to suggest either overriding or perhaps
> even writing a custom ValidationDecorator. But that doesn't address the
> client side CSS issue. The only solution that might work seems to be
> writing/overriding the default java script (Tapestry.js) as hinted in this
> solution:
> http://jumpstart.doublenegative.com.au/jumpstart/examples/input/novalidationbubbles
>
> I also tried using jQuery and seems like I might just be able to get it to
> work, but I'd like to stick to out of the box functionality and only use
> another library if I really have to.
>
> I would like to know what is the "correct" way of doing it keeping
> performance and more importantly, version 5.4 with completely re engineered
> javascript support in mind.
>
> Thank you in advance.
>
>
> Best Regards,
> Sanket
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org