Posted by 
Phil Chett on 1184923019|%e %b %Y|agohover, last edited by 
James Kanjo on 1251359175|%e %b %Y at %H:%M |agohover
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.
Horizontal wide lines
Just put this code where you want the horizontal line:
[[div style="border-bottom: 1px solid #666;"]]
[[/div]]
which gives this:
To make the line lighter, just change the #666 to #777 (or #888 or higher).
[[div style="border-bottom: 1px solid #888;"]]
[[/div]]
gives:
Likewise, to make the line darker, just change the #666 to #555 (or #444 or lower).
[[div style="border-bottom: 1px solid #444;"]]
[[/div]]
gives:
You can also make the line thicker by changing the 1px to higher numbers:
[[div style="border-bottom: 2px solid #666;"]]
[[/div]]
gives:
From post
http://community.wikidot.com/forum/t-24928/horizontal-line-question#post-209918
Author:
James Kanjo. Please visit his/her userPage.
More Wide Lines
Using multiple divs can enhance the lines to be more stylish, and different attributes can have different effects. Here are a few examples.
You can make compound lines with two divs.
[[div style="border-bottom:2px solid #777; margin-bottom:1px;"]]
[[/div]]
[[div style="border-bottom:1px solid #777;"]]
[[/div]]
This code produces:
You can create decorative lines by mixing in the dashed and dotted line types. You might also try inset and outset.
[[div style="border-bottom:1px dashed #777;"]]
[[/div]]
[[div style="border-bottom:1px dotted #777;"]]
[[/div]]
[[div style="border-bottom:1px dashed #777;"]]
[[/div]]
This makes:
You can produce a gradient effect by changing the colors gradually for each line.
[[div style="border-bottom:1px solid #222;"]]
[[/div]]
[[div style="border-bottom:1px solid #444;"]]
[[/div]]
[[div style="border-bottom:1px solid #666;"]]
[[/div]]
[[div style="border-bottom:1px solid #888;"]]
[[/div]]
[[div style="border-bottom:1px solid #AAA;"]]
[[/div]]
This makes:
Experimenting with margin allows for creative designs.
[[div style="border-bottom:1px solid #555; margin:0 2em 1px 2em;"]]
[[/div]]
[[div style="border-bottom:1px solid #777; margin:0 0 1px 0;"]]
[[/div]]
[[div style="border-bottom:1px solid #999; margin:0 2em 0 2em;"]]
[[/div]]
The code produces:
You can nest divs within each other.
[[div style="border:1px solid #777; padding:1px 2em 1px 2em;"]]
[[div style="border-bottom:1px solid #444;"]]
[[/div]]
[[/div]]
This code renders:
There are many other things you can do, like experiment with colors for example.
Author:
Timothy Foster. Please visit his/her userPage.
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.
Not at all being a comprehensive list of unique Wikidot div/span classes, but just the ones that I've collected, because I thought they were funny.
DIV/SPAN classes used in Wikidot
(copied from the forum - thanks to 
ErichSteinboeck )
| What you type … | What you get … |
|
Please [[span class="spantip"]]hover over this[[/span]] text |
Please hover over this text |
|
When he said ``[[span class="wiki-email"]].#Madam, I'm Adam[[/span]]'' she knew who he was |
When he said “.#Madam, I'm Adam” she knew who he was |
|
Most [[span class="code"]]programming languages[[/span]] are more programming than languages |
Most programming languages are more programming than languages |
|
[[div class="code"]] |
**** COMMODORE 64 BASIC V2 **** |
|
Do not [[span class="wait-progress"]]wait for this[[/span]] to finish |
Do not wait for this to finish |
|
Is it still [[span class="wait-block"]]loading this page[[/span]]? |
Is it still loading this page? |
|
Please Mister Postman |
Please Mister Postman A letter for me |
|
Can you see the [[span class="gallery-item"]]this gallery's[[/span]] item? |
Can you see the this gallery's item? |
|
And the dish [[span class="edit-section-button"]]ran away [[/span]] with the spoon |
And the dish with the spoon |
|
This was posted [[span class="odate"]]1242070020|%O|agohover"[[/span]] ago, you know |
This was posted 1242070020|%O|agohover" ago, you know |
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.
I used the same concept to make bullet lists with correct spacing between each bullet. With the default value of no spacing is pretty hard to read level 2 bullets.
Has anyone tried to add to a div, id="MyId" ?
I thought wiki syntax only allowed for style and class like it says here.
— Blog ~ Life's Handbook
Yes, I've tried. The "id=…" gets stripped out of the HTML source. You can see this (or rather, not see this) if you examine the HTML page source.
Since [[div class="..."]] works, I don't see a big need to allow custom divs. Or am I missing something obvious?
-Ed
Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog
Gerdami, why would you want to use an ID over a class? They are identical except that IDs have inbuilt anchors…
λ James Kanjo | blog | photos | contact