How to adapt Box styles ?

The following is a rough overview how to extend the box styles. Open the style.css file from \lib\plugins directory with PSPad editor. The color definition starts at line 56.

  1. copy an existing color scheme definition as shown below
  2. insert this block before the commented line /* IE fixes for unsupported child selector \*/
  3. use a paint software like Paint.NET to test and select the color HEX values
  4. the relation of variables and box relation is provided by following picture

blue.css
/* blue */
div.box.blue, div.box.blue > * > .box_content, div.box.blue > .xbox, 
div.box.blue > * > .xb1, div.box.blue > * > .xb2, div.box.blue > * > .xb3, div.box.blue > * > .xb4 {
  border-color:  #bbbbdd;
}
 
div.box.blue, div.box.blue > .xbox, 
div.box.blue > * > .xb1, div.box.blue > * > .xb2, div.box.blue > * > .xb3, div.box.blue > * > .xb4 {
  background: #e4ecf8;
}
 
div.box.blue > * > p.box_title, div.box.blue > * > p.box_caption {background: #cad0ee;}
div.box.blue > * > .box_content {background: #f4f8fd;}

Please do not forget to adapt also the Internet Explorer blocks for the color and nested color.
You will proceed as explained above but with copies of the related code blocks from the
/* IE fixes for unsupported child selector \*/ section.
This will secure the compatibility.

Style Examples

The following two examples are my favorites.

Info

     Some info you may provide.
<box outline left 90% round|{{:elements:info.png?nolink }}__**Info**__>

Code shows the syntax for this box without closing tag.

SECTION RESULT


     Something you may want to notify the reader for.
<box round silver 90% left|{{:elements:notify.png?nolink |}}__**SECTION RESULT**__>

Now available color schemes

outline

test content





standard

test content

blue

test content

darkblue

test content

red

test content

darkred

test content

green

test content

darkgreen

test content

orange

test content

sand

test content

silver

test content

grey

test content

violet

test content

darkmagenta

test content
tips/box_tips.txt · Last modified: 2014/04/30 09:36 (external edit)

This Wiki is hosted and ruled by Policies of Frister Consultancy Services.
By using this wiki you accept these rules. -> Impressum