CSS Framework

See Mike Stenhouse's A CSS Framework to learn more about the CSS Framework used in AppFuse. A CSS Framework Design Contest helped to come up with all the theme choices for AppFuse. Currently, AppFuse ships with puzzlewithstyle, andreas01 and simplicity. More themes from the design contest will be added as demand warrants.

First off, we recommend you get FireFox with FireBug installed if you don't have it already - it is a fantastic tool for debugging CSS. Just click on an element in the DOM view, and it will not only show you where that element is on the screen, but also how it is styled and, more importantly, where it gets its styling instructions from.

Change a profile

If you want to use a different profile open your web.xml and change the following context parameter:

 
<context-param>
    <param-name>csstheme</param-name>
    <param-value>simplicity</param-value>
</context-param>

Common Questions

• How do I adjust the Simplicity theme so it fills the width of my browser?

How do I adjust the Simplicity theme so it fills the width of my browser?

The divs are explicitly sized in the simplicity theme. If you want to display wide lists, you probably need to increase their size. You will find all you need inside layout-navtop-subright.css, which is the layout used by default. 1 main column 530 pixels wide with a side column on the right 120 pixels wide. Both these sit inside the content pane which is 701 pixels wide, which in turn sits inside the page div which is 780 pixels wide (inside layout.css). To display a wide list, increase the size of at least the page, content pane and the main column. You may also consider using the layout-1col.css, which only has a single column for content. To switch change the name of the include file inside theme.css.