Adding Custom CSS Stylesheets in Wicket

Because Java Wicket uses simple HTML files you can easily add a <link rel=”stylesheet” ../> tag to a base or individual HTML file, but if you want add your CSS resources in Java here's how to do it.

Let's start by seeing what the final HTML will look like.

Now let's see how to get there. Our CSS file is named custom.css and is loaded as a CssResourceReference Java Class in Wicket along with other resources that are concatenated to form a single CSS file. You can see the correlation between the creation of application.css in the WicketApplication class below and the generated HTML shown above.

Here's what the CustomCssReference Java Class looks like.

Our CustomCssReference.java class and CSS files are located within the project class area.

You'll notice a home.css file above. I'm loading that individually in the Java class for the Home Page, like so.

Instant Updates

I wanted to add a special note for Java developers who may be asking the question, “if CSS files are loaded as CssResourceReference objects do you have to wait for the Wicket App to recompile to reflect any CSS changes?” I can happily tell you that any updates you make to your CSS files in the course of development are reflected instantly on reloading your web pages. Awesome!

Posted May 29, 2014 05:11 PM EDT

More Like This Post