This page (revision-10) was last changed on 18-Apr-2021 11:28 by Dirk Frederickx 

This page was created on 23-Jun-2015 17:41 by unknown

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Version Date Modified Size Author Changes ... Change note
10 18-Apr-2021 11:28 4 KB Dirk Frederickx to previous Adding section with how-to pages
9 30-Jul-2017 09:48 4 KB Dirk Frederickx to previous | to last Correcting typo's
8 18-Mar-2017 18:51 4 KB Dirk Frederickx to previous | to last
7 18-Mar-2017 10:47 4 KB Dirk Frederickx to previous | to last Image Filters ==> Instagram Filters
6 18-Dec-2016 19:50 4 KB Dirk Frederickx to previous | to last
5 01-May-2016 12:36 4 KB Dirk Frederickx to previous | to last
4 01-May-2016 12:22 4 KB Dirk Frederickx to previous | to last Minor update
3 25-Mar-2016 18:18 2 KB Harry Metske to previous | to last restored previous version
2 25-Mar-2016 17:56 4 KB mark cooper to previous | to last
1 23-Jun-2015 17:41 2 KB unknown to last

Difference between version and

At line 3 added 3 lines
%%info.center
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./%
At line 4 removed 5 lines
%%lead
With {{%~%add-css}} you can add any custom css into a wiki page, adding new styles or even modifying existing styles.
/%
See also [Category.Add CSS Style] \\
At line 10 changed one line
[Compat Styles] contains some style adjustments to more closely match the previous default template.
See also %%category [Category.Add CSS Style] /%\\
Note: [Compat Styles] contains a few style adjustments which more closely match the previous default template.
At line 12 changed 2 lines
!!{{{%%add-css ... /%}}}
You can add any css snippet to a wiki-page, to define new styles or change existing styles. (actually overwriting existing style definitions of {{{jspwiki.css}}})
!!Introduction
{{{
%%add-css
<css snippet>
/%
}}}
You can add any css snippet to a wiki-page, defining new styles or modifying the %%tip-default So, be careful not to make your site unaccessible or unreadable !/% styles of your jspwiki site.
At line 15 removed one line
At line 17 changed 4 lines
* make sure to escape regular jspwiki markup which interferes with css syntax
** css attribute selectors (those using square brackets) should be escaped to avoid confusion with ordinary wiki links, like so: {{[[[attr-name=value]}}
** wiki attachments can be referred to as url's, like so: {{url([[wiki/attachment link])}}
* you can use google fonts, by using the @import clause: \\{{@import url(https://fonts.googleapis.com/css?family=<your font family>);}}
* 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>);}}
At line 26 added one line
Refer to [Haddock Stylesheet Design] for more details on the basic building blocks of the [Haddock Template] stylesheet.
At line 23 changed one line
Example:
!!Example:
At line 27 changed 3 lines
/* 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); }
/* 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);
}
At line 31 changed one line
.header, .footer { background:linear-gradient(90deg,rgb(25,136,189),rgb(23,158,166)); }
.header, .footer {
background-image:url([Textures/dotted-dark-pink-canvas-1200x1093.jpg]);
}
At line 47 changed one line
.header, .footer { background:linear-gradient(90deg,rgb(25,136,189),rgb(23,158,166)); }
.header, .footer { background-image:url([Textures/dotted-dark-pink-canvas-1200x1093.jpg]); }
At line 59 changed 2 lines
! Add styles to the [LeftMenu]
When using {{%~%add-css}} in your LeftMenu, the additional styles will be available to all the pages of your wiki-site. So now you can change any of the default styles including colors, background, fonts, etc. of the JSPWiki template to your needs. \\You do protect your LeftMenu with {{[[{ALLOW edit Admin}]}} do you ?
!! 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 styles including colors, background, borders, fonts, etc. of the default JSPWiki template styelsheet to your needs.
You do protect your LeftMenu with {{[[{ALLOW edit Admin}]}}, do you ?
At line 62 changed 2 lines
! Add styles to the your {{[[<username>Favorites]}} page
When using {{%~%add-css}} inside your {{[[<username>Favorites]}} page, the additional styles will be available as long as you are authenticated. Changing some default styles such as the background of the header or footer via your personal Favorites page is an easy way to quickly see that you are logged-in or not.
!! Add styles to your {{[[<username>Favorites]}} page
At line 65 changed 2 lines
!! {{{%%add-css [some-page] /%}}}
You can easily reuse the styles defined in another wiki 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.
At line 68 changed one line
Example:
!! Including styles from another page
At line 70 changed one line
%%add-css [Animated Text Color] /%
%%add-css [some-page-with-additional-styles] /%
At line 87 added 3 lines
Reuse the styles defined in another wiki page by linking to that page.
Example:
At line 92 added one line
%%add-css [Animated Text Color] /%
At line 75 changed one line
[elsewhere|Animated Text Color] !\\
[elsewhere | Animated Text Color] !\\
At line 106 added 2 lines
[{If group='Admin'
At line 144 added 3 lines
}]