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.

    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]<"
    1. Closing Tag - Always the same, no matter what you made for the opening tag. "<d<"
    1. 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
<<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<
The following code needs to go in /Formatters/wikka.php and needs to be in all the else if places towards the top
/var/www/html/Wikka/Formatters/wikka.php (line 73)
  1.         // Create custom DIV boxes
  2.         // Syntax = [bgColor][fgColor][width][floating], to close use
  3.         else if (preg_match("/\<\<....\</s", $thing, $matches))
  4.         {
  5.             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).'">');
  6.         }
  7.         else if (preg_match("/\<d\</s", $thing, $matches))
  8.         {
  9.             return ('</div>');
  10.         }

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
/var/www/html/Wikka/Formatters/wikka.php (line 423)
  1.     "\<\<....\<|\<d\<|".

These are the additions to css/wikka.css to handle the new classes etc.
/var/www/html/Wikka/css/wikka.css (line 605)
  1. /* This is the section added for the customer div RobertLeckie */
  2. .rl_default {
  3.   border:1px solid #EDD
  4.   margin:5px;
  5.   padding:0 15px 10px 15px;
  6. }
  7.  
  8. .f_l {
  9.   float: left;
  10. }
  11. .f_r {
  12.   float: right;
  13. }
  14. .f_n {
  15.   float: none;
  16. }
  17.  
  18. .bg_r {
  19.   background-color: #FF7C80;
  20. }
  21. .bg_o {
  22.   background-color: #FFCC99;
  23. }
  24. .bg_y {
  25.   background-color: #FFFF99;
  26. }
  27. .bg_g {
  28.   background-color: #CCFFCC;
  29. }
  30. .bg_b {
  31.   background-color: #AAD4FF;
  32. }
  33. .bg_v {
  34.   background-color: #D4AAFF;
  35. }
  36. .bg_k {
  37.   background-color: #000000;
  38. }
  39. .bg_w {
  40.   background-color: #FFFFFF;
  41. }
  42.  
  43. .fg_r {
  44.   color: #FF7C80;
  45. }
  46. .fg_o {
  47.   color: #FFCC99;
  48. }
  49. .fg_y {
  50.   color: #FFFF99;
  51. }
  52. .fg_g {
  53.   color: #CCFFCC;
  54. }
  55. .fg_b {
  56.   color: #AAD4FF;
  57. }
  58. .fg_v {
  59.   color: #D4AAFF;
  60. }
  61. .fg_k {
  62.   color: #000000;
  63. }
  64. .fg_w {
  65.   color: #FFFFFF;
  66. }
  67. /* This is the end of the custom div section by RobertLeckie */



WantedFormatters
There is one comment on this page. [Display comment]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki