JSPWiki: Add CSS Style

With %%add-css you can add any custom css to a wiki page,
adding new styles or even modifying the default styles of your jspwiki site.

Example style pages: Striped Text, Instagram Filters
See also Category.Add CSS Style
Note: Compat Styles contains a few style adjustments which more closely match the previous default template.

Introduction#

%%add-css 
   <css snippet>
/%

You can add any css snippet to a wiki-page, defining new styles or modifying the So, be careful not to make your site unaccessible or unreadable ! styles of your jspwiki site.

Notes:

make sure to escape any regular jspwiki markup which may interfere with css syntax, such as :
- css attribute selectors (those using [square] brackets) will interfere with ordinary wiki links. Use a double [[ to escape the opening bracket, like so: [[attr-name=value]
- empty strings '' will interfere with italics markup. Better use double quotes.
you can use regular JSPWiki links to refer to wiki attachments in places where url's are allowed, like so: background:url([wiki/attachment link]);
you can also use google fonts, by using the @import clause:
@import url(https://fonts.googleapis.com/css?family=<your font family>);
for securty reasons, all other links are removed.

Refer to Haddock Stylesheet Design for more details on the basic building blocks of the Haddock Template stylesheet.

Example:#

%%add-css
/* add a new %%marker style */
.marker { 
  display:block; background: gold; 
  width:50%; padding:1em; 
  transition: all .2s ease-in-out;
} 
.marker:hover { 
  transform: scale(1.5) rotate(5deg);
}
/* change existing style of header & footer */
.header, .footer { 
  background-image:url([Textures/dotted-dark-pink-canvas-1200x1093.jpg]); 
}
/% 

%%marker 
This text should be a dynamic yellow box (try hovering your mouse over it). 
If it is not, the __%~%add-css__ is not supported in your wiki engine. 
Too bad!
/%

/* add a new %%marker style */ .marker { display:block; background: gold; width:50%; padding:1em; transition: all .2s ease-in-out; } .marker:hover { transform: scale(1.5) rotate(5deg); } /* change existing style of header & footer */ .header, .footer { background-image:url( Textures/dotted-dark-pink-canvas-1200x1093.jpg

Textures/dotted-dark-pink-canvas-1200x1093.jpg

); }

This text should be a dynamic yellow box (try hovering your mouse over it). If it is not, the %%add-css is not supported in your wiki engine. Too bad!

Changing styles of the default JSPWiki template#

Adding styles to the LeftMenu #

When using %%add-css in the LeftMenu, the additional styles will be available to all the pages of your wiki-site. So now you can change any of the styles including colours, background, borders, fonts, etc. of the default JSPWiki template stylesheet to your needs.

You do protect your LeftMenu with [{ALLOW edit Admin}], do you ?

Add styles to your `[<username>Favorites]` page#

When using %%add-css inside your [<username>Favorites] page, the additional styles will become available as soon as your are authenticated.

: E.g. changing the default background color of the header or footer via your personal Favorites page is an easy way to quickly see that you are logged-in or not.

Including styles from another page#

%%add-css [some-page-with-additional-styles] /%

Reuse the styles defined in another wiki page by linking to that page.

Example:

%%add-css [Animated Text Color] /%
These styles where defined 
[elsewhere | Animated Text Color] !\\
%%animatedText Colourful Animated Text /%

Animated Text Color

These styles where defined elsewhere !
Colourful Animated Text