Community Central
Community Central
No edit summary
No edit summary
Line 138: Line 138:
   
 
This tricks looks complex but actually simple.
 
This tricks looks complex but actually simple.
  +
  +
Example of the CSS can be seen at [[w:c:food:MediaWiki:Common.css]] (section: Color schemes for Main Page and Portals) and example of the result can be seen at [[w:c:food:User:Agus elex 2005/color scheme samples/shades of green]], [[w:c:food:User:Agus elex 2005/color scheme samples/earth color]], and [[w:c:food:User:Agus elex 2005/color scheme samples/pinky love]].

Revision as of 06:24, 3 April 2007

I am Agustinus, a book editor from Indonesia. I edit and sometimes translate books from English and German into Bahasa Indonesia, although actually I only understand one or two words in German. Thanks to the translation software! By the way, I do not use any translation software when translating English.

I also happen to be Indonesian born Chinese so I understand Chinese, even though only four of five words. I do not understand written Chinese. My parents can talk and write in Chinese.

My contibutions to Wikia are translations of Home page, Copyright, Disclaimer, and some other pages into Bahasa Indonesia. I also contribute some templates to Starter Wiki.

I am the one who started Karl May Indonesia Wiki.

I currently also the admin of Indonesia Wiki and Foodopedia. [ Agus TalkGuestbookFoodopediA ]

Template:User id
Template:User en-3
Template:User de-0
Template:User zh-0

My awards:
Bronze taskstarBronze taskstar
Both are from sannse for doing tasks asked by her.
Special thanks to splarka for helping me on the second task.

These are wiki logos that I've made and actually been used:

My tricks

Creating color themes for complex table structure

This could make it easier to change complex table structure like those often used in the Main Page. This is achieved by creating a table class in your MediaWiki CSS page (MediaWiki:Monobook.css, MediaWiki:Common.css, or user Monobook.css) and creating variations in <td> and also creating sub-table class.

  • First, create a table class, such as:
table.green {border-spacing:0.5em; width:100%}
table.green td { background: #E9F4D2; border: 1px solid #86B960; padding: 0.5em; color: #32511C; -moz-border-radius:10px; vertical-align:top;}
  • create variations in <td>, such as (I call the variations as "sitetitle", "messagebox", and "iconbox"):
table.green td.sitetitle { background: #508332; border: 1px solid #035901; color:#E0F4D2; padding: 0.5em;}
table.green td.messagebox  { background: #EDF4D2; border: 1px solid #86B960; color: #32511C; text-align:center; padding: 0em;}
table.green td.iconbox  { background: white; border: none; color: black; padding: 0em;}
  • For cell title, you can create a child-table class, such as:
table.green table.title { background: transparent; width:100%; margin-bottom:0.5em; }
table.green table.title td { background: #6A9B4D; border: 1px solid #035901; color:#E9F4D2; font-size:120%; font-weight:bold; padding: 0.2em 0.5em 0.2em 0.5em; }
  • For special purpose, also create a child-table class, such as (this is to have a transparent background for managing lay-out inside a table cell):
table.green table.clear { background: inherit; border-spacing:0em;}
table.green table.clear td { background: inherit; border: none; color:#E0F4D2; padding:0em; }
  • For setting colors in external link (this one inside table.green table.title):
#bodyContent table.green table.title td a.external { color:#E1FBAB; background: none !important;  padding: 0 !important; }
#bodyContent table.green table.title td a.external:visited { color:#F4F3D2; }

If you want to set colors for internal link, just remove #bodyContent and .external

The overall code will look like this:

/* main page colorscheme "shades of green" */
table.green {border-spacing:0.5em; width:100%}
table.green td { background: #E9F4D2; border: 1px solid #86B960; padding: 0.5em; color: #32511C; -moz-border-radius:10px; vertical-align:top;}
table.green td.sitetitle { background: #508332; border: 1px solid #035901; color:#E0F4D2; padding: 0.5em;}
table.green td.messagebox  { background: #EDF4D2; border: 1px solid #86B960; color: #32511C; text-align:center; padding: 0em;}
table.green td.iconbox  { background: white; border: none; color: black; padding: 0em;}
table.green table.title { background: transparent; width:100%; margin-bottom:0.5em; }
table.green table.title td { background: #6A9B4D; border: 1px solid #035901; color:#E9F4D2; font-size:120%; font-weight:bold; padding: 0.2em 0.5em 0.2em 0.5em; }
table.green table.clear { background: inherit; border-spacing:0em;}
table.green table.clear td { background: inherit; border: none; color:#E0F4D2; padding:0em; }
#bodyContent table.green table.title td a.external { color:#E1FBAB; background: none !important;  padding: 0 !important; }
#bodyContent table.green table.title td a.external:visited { color:#F4F3D2; }

To create other color themes, just copy it and paste below it, change the class name (table.green) and also the colors: (such as #6A9B4D).

The implementation will look like this:

__NOTOC____NOEDITSECTION__
{|class="green"
|-
|class="sitetitle" colspan="2" |
{|class="clear"
|-
| This is the title divided into two cells: this is the first cell
| This is the title divided into two cells: this is the second cell
|}
|-
|class="messagebox" colspan="2" | This is the message box
|-
|class="iconbox" colspan="2" |
{|class="clear"
|-
| This is your icon box diveded into as many cells as you like: this is the first cell
| This is your icon box diveded into as many cells as you like: this is the second cell
|}
|-
|width="50%"|
{|Class="title"
|-
| This is your cell title
|}
This is your multi purpose boxes: first cell
|
{|Class="title"
|-
| This is your cell title
|}
This is your multi purpose boxes: second cell
|-
|
{|Class="title"
|-
| This is your cell title
|}
This is your multi purpose boxes: third cell
|
{|Class="title"
|-
| This is your cell title
|}
This is your multi purpose boxes: fourth cell
|}

To change color themes with another one that you already prepared in MediaWiki CSS page, just change class="green".

This tricks looks complex but actually simple.

Example of the CSS can be seen at w:c:food:MediaWiki:Common.css (section: Color schemes for Main Page and Portals) and example of the result can be seen at w:c:food:User:Agus elex 2005/color scheme samples/shades of green, w:c:food:User:Agus elex 2005/color scheme samples/earth color, and w:c:food:User:Agus elex 2005/color scheme samples/pinky love.