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
Incoming links Outgoing links
Add CSS Style
Add CSS Style

Difference between version and

At line 1 changed one line
%%information This page is best viewed with the [Haddock Template] /%
[{PageViewPlugin}]
[{SET page-styles='prettify-nonum'}]
%%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 3 changed 4 lines
%%prettify-nonum
With the {{%~%add-css}} %%category [style|Haddock Styles]/% you can inject any custom css into a wiki page, adding new styles or even changing existing styles (actually overwriting the style definition of {{jspwiki.css}}).\\
You can either directly insert the css definitions in your page or retrieve it from another wiki page.
Example style pages: [Striped Text], [Instagram Filters]\\
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 11 added 7 lines
!!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 9 removed one line
!!Add styles in the page
At line 11 changed 2 lines
* attribute selectors should be escaped to avoid confusion with wiki links {{[[[attr-name=value]}}
* wiki attachments inside {{url([[wiki/attachment link])}} are allowed, other links are removed.
* 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:
At line 16 changed 4 lines
.marker { display:block; background:yellow; width:50%; padding:1em; }
/* overwrite jspwiki.css style */
.header,.footer { background-image:url([Textures/dotted-dark-pink-canvas-1200x1093.jpg]); }
/%
/* 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]);
}
/%
At line 22 changed 2 lines
This text should be yellow.
If is it not, the __%~%add-css__ is not supported in your wiki engine.
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.
At line 54 added one line
At line 29 changed one line
.marker { display:block; background:yellow; width:50%; padding:1em; }
/* 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 */
At line 34 changed 2 lines
This text should be yellow.
If is it not, the __%~%add-css__ is not supported in your wiki engine.
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.
At line 40 removed one line
Note: when adding the {{%~%add-css}} to your {{<username>Favorites}} page, the additional styles will be available as long as your are logged in. E.g. changing the background of the header or footer via you Favorites page is one easy way to see that you are logged-in or not.
At line 72 added one line
!!Changing styles of the default JSPWiki template
At line 44 changed 2 lines
!! Add styles from another wiki page
%%columns
* [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
At line 47 changed one line
%%add-css [Add CSS Style Example Page] /%
%%add-css [some-page-with-additional-styles] /%
}}}
Reuse the styles defined in another wiki page by linking to that page.
At line 94 added 4 lines
Example:
%%columns
{{{
%%add-css [Animated Text Color] /%
At line 50 changed one line
[elsewhere|Add CSS Style Example Page] !\\
[elsewhere | Animated Text Color] !\\
At line 54 changed one line
%%add-css [Add CSS Style Example Page] /%
%%add-css [Animated Text Color] /%
At line 57 changed one line
[elsewhere|Add CSS Style Example Page] !\\
[elsewhere|Animated Text Color] !\\
At line 111 added 2 lines
[{If group='Admin'
At line 149 added 3 lines
}]
This page (revision-10) was last changed on 18-Apr-2021 11:28 by Dirk Frederickx  Top