Wikka: Custom Div Tags

Custom Div Tags

This is a page from the documentation from my site so if it doesnt follow the guideline here I will change it. I have removed the working examples as this server doesnt have this hack.

Purpose - The purpose of this is to enable the creation of custom div tags, and maintain the other wikka formating capabilities, and the ability to have a div inside of another div.
Syntax - This is a wikka command that is broken into two parts to allow div's inside of div's.
1. Opening Tag - This is the more complicated part, as it is one big shortcut. The basic syntax is the following "<<[bg_color][fg_color][width][floating]<"
  - [bg_color] - This is a single letter selecting the background color of the div
  - [fg_color] - This is a single letter selecting the font color in the div
  - [width] - This is a single number representing the width of the div, 0 = 100%, and all other number representing tenths
  - [floating] - This is a single letter representing the float css option, r = right, l = left, n = none.
2. Closing Tag - Always the same, no matter what you made for the opening tag. "<d<"
3. The following colors are selectable. For the bg_color and fg_color. (If you wish to add more then ammend the CSS) I selected soft colors so that they would look good in the browser and not detract from the appearance of the page. Also if you want to add more go ahead, and just add to the CSS, folowing the others as an example
  - r - Red
  - o - Orange
  - y - Yellow
  - g - Green
  - b - Blue
  - v - Violet (Purple)
  - k - Black
  - w - White
Examples
<<gk6r< Green box with black text Floating to the right covering 60% <d<

<<rk5n< Text inside the red would go here <<gk5r< And text inside the green would go here <d< <d<
Notes
- You need to keep track of all the parts that you open and you need to remember to close each, or you WILL screw up the HTML.
- All parts of the opening tag are required.
- Yes I know this isnt the most elegant solution but it works very well.
The Following Code Changes had to be made for this to work - remember that lines numbers, and filename are according to my system. Also Note that I do not usually code in php, so if my syntax is not according to the wikka standards please tell me and I will correct it.

The following code needs to go in /Formatters/wikka.php and needs to be in all the else if places towards the top

		// Create custom DIV boxes
		// Syntax = [bgColor][fgColor][width][floating], to close use 
		else if (preg_match("/\<\<....\</s", $thing, $matches)) 
		{
			return('<div style="width:'.((substr($thing, 4, 1) == "0") ? '97%' : substr($thing, 4, 1).'0%').';" class=" rl_default bg_'.substr($thing, 2, 1).' fg_'.substr($thing, 3, 1).' f_'.substr($thing, 5, 1).'">');
		}
		else if (preg_match("/\<d\</s", $thing, $matches)) 
		{
			return ('</div>');
		}

Latter in Formatters/wikka.php this change needs to be made, it needs to be right above the line that is commented as Wiki Markup

	"\<\<....\<|\<d\<|".

These are the additions to css/wikka.css to handle the new classes etc.

/* This is the section added for the customer div RobertLeckie */
.rl_default {
  border:1px solid #EDD
  margin:5px; 
  padding:0 15px 10px 15px; 
}

.f_l {
  float: left;
}
.f_r {
  float: right;
}
.f_n {
  float: none;
}

.bg_r {
  background-color: #FF7C80;
}
.bg_o {
  background-color: #FFCC99;
}
.bg_y {
  background-color: #FFFF99;
}
.bg_g {
  background-color: #CCFFCC;
}
.bg_b {
  background-color: #AAD4FF;
}
.bg_v {
  background-color: #D4AAFF;
}
.bg_k {
  background-color: #000000;
}
.bg_w {
  background-color: #FFFFFF;
}

.fg_r {
  color: #FF7C80;
}
.fg_o {
  color: #FFCC99;
}
.fg_y {
  color: #FFFF99;
}
.fg_g {
  color: #CCFFCC;
}
.fg_b {
  color: #AAD4FF;
}
.fg_v {
  color: #D4AAFF;
}
.fg_k {
  color: #000000;
}
.fg_w {
  color: #FFFFFF;
}
/* This is the end of the custom div section by RobertLeckie */

WantedFormatters

Wikka : InlineDivFormatting

Custom Div Tags