Team:KULeuven/Tools/Wiki Help

From 2008.igem.org

(Difference between revisions)

Latest revision as of 18:38, 16 September 2008

dock/undock dropdown

CSS styling (under construction)

For general styling, here are some interesting links:

[http://www.w3.org/Style/CSS W3C CSS Standard]
- [http://www.w3.org/TR/css3-selectors CSS Selectors]
- [http://www.w3.org/TR/CSS2/cascade.html CSS Cascading (import, inherit, ...)]
[http://www.w3schools.com/css W3Schools CSS tutorials]
[http://www.quirksmode.org/css/display.html CSS Display Property (table, inline-block, block, ...)]
[http://www.zoffix.com/css/center Various centering tricks in CSS]
- [http://www.tyssendesign.com.au/articles/css/centering-a-dropdown-menu Centering a dropdown menu (centered horizontal ul list)]

Retrieving the wiki CSS files

Firefox users have a benefit when it comes to inspecting HTML source code cause of the syntax highlighting, while IE users are left with a .txt file looking source. To view the source code right click in the browser window and select

"View Page Source" for FF
"View Source" for IE

A lot of information can be retrieved by investigating the css files used on the iGEM wiki, they will be found in the head section of the html source, the url can be found at the import statements:

<head>

...

<style type="text/css">

  @import url('... url to the css file ...');

  @import url('... another url to another css file');

</style>

...

</head>

In case of the 2008 iGEM wiki the interesting CSS files are:

Wiki HTML structure

For the non-visual approach, compare css declarations with the corresponding sections in the HTML source, if you'd like a more visual approach, then I recommend the DOM Visual Inspector (Firefox only): DOM Inspector or Firebug.

Once you get to understand the wiki HTML structure, you're capable of editing the smallest details.

Navigation and Dropdown menu's

Interesting stuff:

[http://www.eastonmass.net/tullis/WebsiteNavigation/WebsiteNavigationPaper.htm]
[http://www.efuse.com/Design/navigation.html]
[http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples]

If a dropdown menu is desired here are some good links with info on how to set it up:

[http://javascript-array.com/scripts/simple_drop_down_menu Simple Dropdown menu]
[http://be.twixt.us/jquery/suckerFish.php Suckerfish menu, using jQuery]
[http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery Multilevel Dropdown using jQuery]

KULeuven dropdown

FAQ

Q: Do I need to put templates in the Template namespace (e.g. Template:Navigation_Menu)?

A: No, if you read [http://meta.wikimedia.org/wiki/Help:Embed_page this page on the Mediawiki homepage], you'll find out you can put templates simply in any namespace. For example, take we have a template located at the url ".../Team:KULeuven/Tools/A_Template" then we could include in a wiki page by typing:

{{:Team:KULeuven/Tools/A_Template}}

The only difference is that you have to put an extra colon(:) right after the two first braces({{)

Q: How come I can't upload SVG (Scalable Vector Graphics), JS (Javascript) files or use add-ons that I can on other wiki's (e.g. Wikipedia)?

A: This will often require added functionality that comes in the form of [http://www.mediawiki.org/wiki/Extensions extensions]. Extensions need to be installed manually and you'll need access to the wiki server files, which isn't granted.

Q: I wish to use html syntax (e.g. <a>, <ul>, ...) but it doesn't work, what do I do?

A: Simply put it between <html> ... </html> tags. The wiki engine will then remove the html tags but still interpret it as html code instead of wiki code, which unevitably means that you can't add wiki code between html tags.

Q: How do I show wiki code on a page?

test

A: Put it between <nowiki> ... </nowiki> tags.

@@ Line 1: / Line 1: @@
 {{:Team:KULeuven/Tools/Header}}
-== CSS styling ==
+== CSS styling (under construction) ==
 For general styling, here are some interesting links:
@@ Line 12: / Line 12: @@
 ** [http://www.tyssendesign.com.au/articles/css/centering-a-dropdown-menu Centering a dropdown menu (centered horizontal ul list)]
-Anybody who knows CSS a bit, can manipulate the wiki style easily by investigating id's and classes of the wiki structure. Firefox users can make handy use of the syntax highlighting of the HTML source code (right click in a webpage and select "View Page Source"), whereas IE users are stuck with a simple .txt file.
+=== Retrieving the wiki CSS files ===
+Firefox users have a benefit when it comes to inspecting HTML source code cause of the syntax highlighting, while IE users are left with a .txt file looking source. To view the source code right click in the browser window and select
+* "View Page Source" for FF
+* "View Source" for IE
 A lot of information can be retrieved by investigating the css files used on the iGEM wiki, they will be found in the head section of the html source, the url can be found at the import statements:
@@ Line 24: / Line 28: @@
   ...<br/>
   &lt;/head&gt;
+In case of the 2008 iGEM wiki the interesting CSS files are:
+* [https://2008.igem.org/wiki/skins/igem/main.css Igem.css]
+* [https://2008.igem.org/wiki/skins/common/shared.css Shared.css]
+=== Wiki HTML structure ===
+For the non-visual approach, compare css declarations with the corresponding sections in the HTML source, if you'd like a more visual approach, then I recommend the DOM Visual Inspector (Firefox only): [https://addons.mozilla.org/en-US/firefox/addon/6622 DOM Inspector] or [https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug].
+Once you get to understand the wiki HTML structure, you're capable of editing the smallest details.
+== Navigation and Dropdown menu's ==
+Interesting stuff:
+* [http://www.eastonmass.net/tullis/WebsiteNavigation/WebsiteNavigationPaper.htm]
+* [http://www.efuse.com/Design/navigation.html]
+* [http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples]
+If a dropdown menu is desired here are some good links with info on how to set it up:
+* [http://javascript-array.com/scripts/simple_drop_down_menu Simple Dropdown menu]
+* [http://be.twixt.us/jquery/suckerFish.php Suckerfish menu, using jQuery]
+* [http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery Multilevel Dropdown using jQuery]
+=== KULeuven dropdown ===
 == FAQ ==
@@ Line 31: / Line 61: @@
 '''A''': No, if you read [http://meta.wikimedia.org/wiki/Help:Embed_page this page on the Mediawiki homepage], you'll find out you can put templates simply in any namespace. For example, take we have a template located at the url ".../Team:KULeuven/Tools/A_Template" then we could include in a wiki page by typing:
   <nowiki>{{:Team:KULeuven/Tools/A_Template}}</nowiki>
-The only difference is that you have to put an extra colon(:) right after the two first braces({{)
+The only difference is that you have to put an extra colon(''':''') right after the two first braces('''{{''')
 <blockquote>'''Q''': How come I can't upload SVG (Scalable Vector Graphics), JS (Javascript) files or use add-ons that I can on other wiki's (e.g. Wikipedia)?</blockquote>
@@ Line 39: / Line 69: @@
 <blockquote>'''Q''': I wish to use html syntax (e.g. &lt;a&gt;, &lt;ul&gt;, ...) but it doesn't work, what do I do?</blockquote>
-'''A''': Simply put it between &lt;html&gt; tags, don't forget to close it with &lt;/html&gt;. This approach is discouraged by the W3C standard, but it is the only way.
+'''A''': Simply put it between &lt;html&gt; ... &lt;/html&gt; tags. The wiki engine will then remove the html tags but still interpret it as html code instead of wiki code, which unevitably means that you can't add wiki code between html tags.
 <blockquote>'''Q''': How do I show wiki code on a page?</blockquote>
+test
 '''A''': Put it between &lt;nowiki&gt; ... &lt;/nowiki&gt; tags.