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>
/%

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.

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(); }

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#

• How to change the width of the LeftMenu
• How to change the site logo

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] /%

Example:

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