intro
This article describes design elements that were used while creating demonstration site. You can check the screens from demonstration site.
1.Specifying Style Class of Submit Buttons
At first, css class of submit buttons were specified like the following.
|
1 2 3 4 5 6 7 |
<?php $decorators = array( 'ViewHelper', array('HtmlTag', array('tag' => 'dt', 'class' => 'submit')) ); $submit = $form->createElement('submit', 'submit'); $submit->setDecorators($decorators); |
2.Creating CSS
Then, css file were created like the following.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// .... #content dl { width: 500px; } #content dt { width: 150px; font-weight: bold; border-bottom: 1px solid #ccc; padding-top: 0.2em; margin: 0; } #content dd { border-bottom: 1px dashed #ccc; margin-top: -1.25em; margin-left: 150px; padding: 0; } #content form dl { margin-top: 1em; } #content form dt { border: 0; } #content form dd { border: 0; } #content .submit { width: 150px; float: left; text-align: center; margin-top: 10px; } // ... |
3.Multilingual
The site can be displayed in English(default) and Japanese(ja). It is switched according to the language preference of your browser.