Click here if you already know what to do, otherwise continue reading. It is important that you read this first even if you already know CSS to avoid wasting your effort.
This is a test bed for creating new design for use with VIOXYS. First step is to get yourself acquainted with the structure of VIOXYS css directories. There are only 2 directories that you will need to be keeping an eye on. These are:
All CSS are stored at /css and all images under /images. Notice also that under /css directory are more subdirectories that corresponds to the "Theme". Example, the theme "I Luv Pink" is stored under /css/iluvpink with corresponding images under /images/iluvpink.
In order to maintain flexibility, VIOXYS loads the css as follows:
VIOXYS will load clean theme first
followed by the corresponding theme.
Example, if you select the "I Luv Pink" theme, VIOXYS will load clean theme first followed by the "I Luv Pink" theme. This is important since VIOXYS is continuously being developed. New features means a need to update the design as well. In order to prevent the need to edit all designs every time a new feature is introduced, only the "Clean" theme will be edited which will hold a 'neutral' theme so that all other theme will have a 'neutral' look if a certain feature doesn't have a corresponding theme.
For your convenience, a 'template' theme is already created with the same theme as 'Nature' theme. The folder is located at:
Use the corresponding folders to store your new theme. It is also important to keep all files under each corresponding directories and theme. Also, never modify other themes as any modification to other theme and its corresponding folders will be discarded. Also, follow the file names and the corresponding contents based on the 'clean' theme. Example, navigation related css should be kept only under style___navbar.css.
For more information, view the files under /css/default to better understand the categorization of design to corresponding files.
To summarize:
Click here to proceed to the test bed.