Some example of how to embellish your text in your wiki. These have all been swiped from the forums, to put them all in one place. Please feel free to add more.
|
Table of Contents
|
Text Size
Size of text in a Page can be changed using the SIZE tag
[[size 200%]]200% of Normal Size[[/size]]
[[size 80%]]80% of Normal Size[[/size]]
[[size 50%]]50% of Normal Size[[/size]]
200% of Normal Size
80% of Normal Size
50% of Normal Size.
Author:
Goon. Please visit his/her userPage.
Text Size 2
[[size //size-value//]] … [[/size]]
where //size-value// can be: small, x-small, xx-small, large, x-large, xx-large, smaller, larger
[[size xx-large]]Sample xx-large text[[/size]]
[[size x-large]]Sample x-large text[[/size]]
[[size large]]Sample large text[[/size]]
[[size larger]]Sample larger text[[/size]]
Sample regular text
[[size smaller]]Sample smaller text[[/size]]
[[size small]]Sample small text[[/size]]
[[size x-small]]Sample x-small text[[/size]]
[[size xx-small]]Sample xx-small text[[/size]]
Sample xx-large text
Sample x-large text
Sample large text
Sample larger text
Sample regular text
Sample smaller text
Sample small text
Sample x-small text
Sample xx-small text
Copied and extended by
gerdami. Please visit his/her userPage.
from post http://community.wikidot.com/forum/t-514/font-size-and-color#post-926.
Greater Lines
The trick is to "hide" the 4 minus / which are translated ( parsed) to a line (and have the function of "div" style=clear,both)
with including them in 2 @ :
[[size 150%]]@@-----------@@[[/size]]
[[size 120%]]@@----@@[[/size]]
[[size 120%]]=======[[/size]]
[[size 180%]]@@-----------@@[[/size]]
[[size 180%]]=======[[/size]]
[[div style="font-size:300%;color:#F00;font-family:Comic Sans, Comic Sans MS,cursive;""]]
@@-----------------------------@@
[[/div]]
[[div style="font-size:150%;color:#0F0;font-family:Comic Sans, Comic Sans MS,cursive;""]]
@@-----------------------------@@
[[/div]]
[[div style="font-size:150%;color:#00F;font-family:Comic Sans, Comic Sans MS,cursive;""]]
=======================
[[/div]]
-----------
----
=======
-----------
=======
-----------------------------
-----------------------------
=======================
Change Font
Use the
[[div style="font-family:Arial Narrow"]] to change the font in a block of text[[/div]]:-
to change the
font in a
block of text
Note, there are only so many fonts supported.
If you want to change the font of a few words in a line of text, then you need to use
[[span style="font-family: Arial Black;"]]Your text [[/span]]
You can also change the font size using the "font size" attribute
[[span style="font-family: Arial Black; font-size: 140%;"]] your text [[/span]]
michal frackowiak. Please visit his/her userPage.
Headings
+++ Example header 3 gives:
Example header 3
+++ **Example header 3 bold** ( makes no difference to section-"header") gives:
Example header 3 bold
+++ //Example header 3 italic// gives:
Example header 3 italic
+++ **//Example header 3 italic bold//** gives:
Example header 3 italic bold
+++ **//__Example header 3 italic bold underline __//** gives:
Example header 3 italic bold underline
+++ [[span style="font-size: 140%; color: #FF0000;"]]Example header 3 red[[/span]] gives:
(using [[span style="font-family: Arial Black; font-size: 140%;"]] your text [[/span]])
Example header 3
+++ [[span style="font-size: 140%; font-style: italic; color: #77FF00;"]]Example header 3 mini-green, italic[[/span]] gives:
Example header 3 mini-green,italic
+++ [[span style="font-size: 140%; font-style: italic; font-weight: bold; color: #00FF00;"]]Example header 3 green, italic. bold[[/span]] gives:
Example header 3 green, italic. bold
+++ [[span style="font-size: 140%; font-style: oblique; font-weight: bolder; color: #800000;"]]Example header 3 MARON, cursiv(oblique). extra-bold(er!)[[/span]] gives:
Example header 3 MARON, cursiv(oblique). extra-bold(er)
(new: text-decoration: underline or overline, blink, none, line-through) gives:
+++ [[span style="font-size: 140%; font-style: oblique; font-weight: bolder; color: #800000; text-decoration: underline;"]]Example header 3 MARON, cursiv(oblique). extra-bold(er), Underline[[/span]]
Example header 3 MARON, cursiv(oblique). extra-bold(er), Underline
+++ [[span style="font-size: 140%; font-style: oblique; font-weight: bolder; color: #800000; text-decoration: blink;"]]Example header 3 MARON, cursiv(oblique). extra-bold(er), blink[[/span]] ( blink does not work..?)
Example header 3 MARON, cursiv(oblique). extra-bold(er), blink
new: letter-spacing: 7pt:
+++ [[span style="font-size: 140%; font-style: italic; font-weight: bolder; color: #808000; text-decoration: underline; letter-spacing: 7pt;"]]Example header 3 , Olive, cursiv(italic). extra-bold(er), Underline, letter-spacing[[/span]]
Example header 3 Olive, cursiv(italic). extra-bold(er), Underline, letter-spacing
plus line-height: 2.5 :
+++ [[span style="font-size: 140%; font-style: italic; font-weight: bolder; color: #808000; text-decoration: underline; letter-spacing: 7pt; line-height: 2.5;"]]Example header 3 , Olive, cursiv(italic). extra-bold(er), Underline, letter-spacing; line-height: 2.5[[/span]]
Example header 3 Olive, cursiv(italic). extra-bold(er), Underline, letter-spacing,line-height: 2.5
And so on.. :
http://meyerweb.com/eric/css/references/css1ref.html
Helmuti_pdorf. Please visit his/her userPage.
More examples:
[[div style="font-size:300%;color:#F00;font-family:Comic Sans, Comic Sans MS,cursive;""]]
Don't Panic!
[[/div]]
gives:-
Don't Panic!
hartnell. Please visit his/her userPage.
Change Spacing
[[div style="letter-spacing: 7pt ; word-spacing: 10pt ; line-height: 2.5"]]
Don't Panic!
Some example of how to embellish your text in your wiki. These have all been swiped from the forums, to put them all in one place. Please feel free to add more.
* item 27
* item 27 - 36
* item 28
* item 29
* item 29 -40
* item 29 - 41
[[/div]]
Normal:
Don't Panic!
Some example of how to embellish your text in your wiki. These have all been
swiped from the forums, to put them all in one place. Please feel free to add more.
- item 27
- item 27 - 36
- item 28
- item 29
- item 29 -40
- item 29 - 41
In action:
Don't Panic!
Some example of how to embellish your text in your wiki. These have all been
swiped from the forums, to put them all in one place. Please feel free to add more.
- item 27
- item 27 - 36
- item 28
- item 29
- item 29 -40
- item 29 - 41
Helmuti_pdorf. Please visit his/her userPage.
Force new Paragraph
A space and an underscore at the end of a line _
Forces a linebreak. one can (ab)use this _
_
_
_
to override regular paragraphs.
A space and an underscore at the end of a line
forces a linebreak. one can (ab)use this
to override regular paragraphs.
Goon
Table width
Column width by padding-right
If you want to increase the width of a table-column than you should do exact this!
With using "padding-right" in one cell ( wherever..) :
[[span style="padding-right:45px"]]Your text[[/span]] :
here is an example:
Row 1: Header
Row 2: bla bla n
Row 3, cell 3:
[[span style="color:#F00; background-color: #FFFF00; padding-right:45px"]]Your text [[/span]]
| header1 | Header2 | header3 |
|---|---|---|
| bla bla 1 | bla bla 2 | bla bla 3 |
| short | short | Your text |
Column width by Underscore trick
||this sentence is going _
to keep the column width _
to about this size _
because i have used the _
underscore trick||
| this sentence is going to keep the column width to about this size because i have used the underscore trick |
||with a long sentence like this, then the column width will adjust to the with according to your browser window size automatically. I'll just type a bit more so that you can see what i mean, by making this a really long sentence.||
| with a long sentence like this, then the column width will adjust to the with according to your browser window size automatically. I'll just type a bit more so that you can see what i mean, by making this a really long sentence |
Putting the two together gives:-
| this sentence is going to keep the column width to about this size because i have used the underscore trick |
with a long sentence like this, then the column width will adjust to the with according to your browser window size automatically. I'll just type a bit more so that you can see what i mean, by making this a really long sentence |
Notice that the first column has also done a wraparound, So there are times when the underscore trick will not give you what you need
The wraparound feature does not work with URLs, So, as gerdami says it is best to give that url a name.
So:
||[http://www.wikidot.com Wikidot]||
Gives
| Wikidot |
The technique in detail:
where you want the break to occur
lastword space underscore return
tip comes from Forum post:
http://community.wikidot.com/forum/t-19550/table-width#post-48753
copied for
Phil Chett. Please visit his/her userPage.
Faked Numbered Lists
A) Numbered (nested) list
- Paragraph 1
- paragraph 1.1
- paragraph 1.2
- paragraph 1.2.1
- Paragraph 2
- Paragraph 2.1
- Paragraph 3
B) Faked numbered (span) list
1. Paragraph 1
1.1. Paragraph 1.1
1.2. Paragraph 1.3
1.2.1. Paragraph 1.2.1
2. Paragraph 2
2.1. Paragraph 2.1
3. Paragraph 3
Done with:
[[span style="margin-left:20px"]] 1. Paragraph 1 [[/span]]
[[span style="margin-left:40px"]] 1.1. Paragraph 1.1 [[/span]]
[[span style="margin-left:40px"]] 1.2. Paragraph 1.3 [[/span]]
[[span style="margin-left:60px"]] 1.2.1. Paragraph 1.2.1 [[/span]]
[[span style="margin-left:20px"]] 2. Paragraph 2 [[/span]]
[[span style="margin-left:40px"]] 2.1. Paragraph 2.1 [[/span]]
[[span style="margin-left:20px"]] 3. Paragraph 3 [[/span]]
B.1.) With Bold and Italic letters:
1. Paragraph 1
1.1. Paragraph 1.1
1.2. Paragraph 1.3
1.2.1. Paragraph 1.2.1
2. Paragraph 2
2.1. Paragraph 2.1
3. Paragraph 3
Done with:
[[span style="margin-left:20px"]] **1. Paragraph 1** [[/span]]
[[span style="margin-left:40px"]] //1.1. Paragraph 1.1// [[/span]]
[[span style="margin-left:40px"]] //1.2. Paragraph 1.3// [[/span]]
[[span style="margin-left:60px"]] 1.2.1. Paragraph 1.2.1 [[/span]]
[[span style="margin-left:20px"]] **2. Paragraph 2** [[/span]]
[[span style="margin-left:40px"]] //2.1. Paragraph 2.1// [[/span]]
[[span style="margin-left:20px"]] **3. Paragraph 3** [[/span]]
C) Faked numbered (») list
1. Paragraph 1
1.1. Paragraph 1.1
1.2. paragraph 1.21.2.1.. paragraph 1.2.1
2. Paragraph 2
1.1. Paragraph 2.1
3. Paragraph 3
Done with:
1. Paragraph 1
> 1.1. Paragraph 1.1
> 1.2. paragraph 1.2
>> 1.2.1.. paragraph 1.2.1
2. Paragraph 2
> 1.1. Paragraph 2.1
3. Paragraph 3
Further Reading:
Two Column Layout
Left, right, centered and justified
Indentation
The Bibliography trick
: I have this line and it only has some text : but I want this to indent.
- I have this line and it only has some text
- but I want this to indent.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed at velit.
- Quisque sem eros, condimentum sed, gravida et, tincidunt vel, arcu. Nam id massa vitae arcu imperdiet eleifend. Fusce nisl urna, lobortis quis, viverra quis, cursus vitae, justo. In auctor libero sit amet nisi. Phasellus nec augue ac ipsum congue blandit. Quisque euismod leo sed ante. Praesent vehicula, metus vel laoreet aliquet, ante massa adipiscing tellus, fermentum lacinia ipsum metus et leo. Cras tempus, enim nec vehicula rhoncus, nunc odio fermentum purus, sed congue purus augue non dolor. Praesent id ante non purus sollicitudin luctus. Aenean non neque.
- Maecenas dui. Proin quis sem a magna sollicitudin interdum. Vivamus imperdiet imperdiet tortor.
- Praesent eros odio, adipiscing sit amet, interdum ut, dapibus ac, nibh. Nam sit amet pede et orci rutrum iaculis. Praesent ultrices pede et sem. Suspendisse semper, pede vel accumsan rhoncus, ligula velit auctor lacus, non dictum magna nulla ullamcorper neque. In odio. Ut pretium ligula ut turpis. Donec at arcu accumsan orci condimentum vehicula. Nulla facilisi. Duis aliquet fermentum ipsum.
Comments
Example header 3 MARON, cursiv(oblique). extra-bold(er), blink
I do not think that it is a good idea to modify headings via the page content editor.
If one is not happy with current headings of a theme, he should modify the Theme stylesheet itself in order to keep harmonised headings throughout his website.