You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Petr Fejfar <pe...@gmail.com> on 2009/07/23 11:36:53 UTC

How to customize/override .CSS of 3rd party component

Hi all,

I do not know, how to override/customize CSS styles
of 3rd party component, in this case YUI menu.

It seems to me they are loaded from packaged resource with URL
resources/org.wicketstuff.yui.inc.YUI/2.7.0b/menu/assets/menu.css,
which is embedded in yui.jar.

I tried to make a local copy of menu.css and put it into applications
root and include it into page's header to override particular style definition
within the page what normally works. This is not the case: resource inspector
shows that original .css file is loaded *after* the included one, probably
by Javascript in run-time...

Please, could somebody explain to me, how to customize those
style sheets?


Thanks, Petr

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


Re: How to customize/override .CSS of 3rd party component

Posted by Petr Fejfar <pe...@gmail.com>.
> You might want to google for YUI skins and take a look at
> YuiHeaderContributor

OK. Thanks for hint - I'll probably use YuiHeader Contributor.

Petr

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


Re: How to customize/override .CSS of 3rd party component

Posted by Mathias Nilsson <wi...@gmail.com>.
Ok,

You might want to google for YUI skins and take a look at
YuiHeaderContributor 
-- 
View this message in context: http://www.nabble.com/How-to-customize-override-.CSS-of-3rd-party-component-tp24622417p24623391.html
Sent from the Wicket - User mailing list archive at Nabble.com.


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


Re: How to customize/override .CSS of 3rd party component

Posted by Petr Fejfar <pe...@gmail.com>.
On Thu, Jul 23, 2009 at 12:26 PM, Mathias
Nilsson<wi...@gmail.com> wrote:

> I don't exactly know which component you are trying to implement but what
> about.
>
> add( new YUIMenu( "id" ){
>   @Override
>   protected void onBeforeRender() {
>     super.onBeforeRender();
>    // Add css reference here or something else
>  }
> });

I'm violating YuiMenuBar :-)

Overriding getCssClass() method did the job - it allows to change
"root" class name of all Yui menu hierarchy hence I can introduce my
own styles in another .css file.

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


Re: How to customize/override .CSS of 3rd party component

Posted by Mathias Nilsson <wi...@gmail.com>.
That's odd..... I works for alot of components I use.

I don't exactly know which component you are trying to implement but what
about.

add( new YUIMenu( "id" ){
   @Override
   protected void onBeforeRender() {
     super.onBeforeRender();
    // Add css reference here or something else
  }
});
-- 
View this message in context: http://www.nabble.com/How-to-customize-override-.CSS-of-3rd-party-component-tp24622417p24623102.html
Sent from the Wicket - User mailing list archive at Nabble.com.


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


Re: How to customize/override .CSS of 3rd party component

Posted by Petr Fejfar <pe...@gmail.com>.
On Thu, Jul 23, 2009 at 11:45 AM, Mathias
Nilsson<wi...@gmail.com> wrote:


> You could extends the component, create own markup and css.

Really: there is the getCssClass() method supplying class name of style...
Thanks for prompt reply.


> You can also just look at the css and then in the header of your class add
> override them.

If I didn't miss anything, it does not work (even if it should) - this
is probably due
run-time loading of .css file by JavaScript e.g. on load my internal
style is used,
but on page refresh and/or menu click, it is replaced by original one.

Petr








> Let´s say YUI have a css class of .menu.
>
> <style type="text/css">
>  .menu{
>    color: red;
>  }
> </style>
> --
> View this message in context: http://www.nabble.com/How-to-customize-override-.CSS-of-3rd-party-component-tp24622417p24622529.html
> Sent from the Wicket - User mailing list archive at Nabble.com.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>

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


Re: How to customize/override .CSS of 3rd party component

Posted by Mathias Nilsson <wi...@gmail.com>.
You could extends the component, create own markup and css.

You can also just look at the css and then in the header of your class add
override them.
Let´s say YUI have a css class of .menu. 

<style type="text/css">
 .menu{
    color: red;
  }
</style>
-- 
View this message in context: http://www.nabble.com/How-to-customize-override-.CSS-of-3rd-party-component-tp24622417p24622529.html
Sent from the Wicket - User mailing list archive at Nabble.com.


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