The CSS development side of kukui-cup-pinax are developing different themes for the Dorm Energy website using only CSS markups. This allows users to choose from a list of themes to use for their own profile.
Below are screenshots of each of these themes with an explanation of the CSS features used to produce its look.
Here is the default theme or the “original” look developed by George. As you can see, This theme is quite umm, gray. But it does follow a very standard layout with a title/banner at the top of the page, follow by a navigation menu bar, and the content at the center of the page. This theme served as the starting point for all the other themes.
The dark theme is a theme taking from the “Do it in the dark” T-shirt and button idea. Some of the CSS features used in this theme includes backgrounds, text substitution, and rounded-corners. A dark image is used for the main background while light bulbs images were used for each menu selection to go with the “dark” theme. The menu images change as u hover over it (half lite bulb) and when you select it (fully lite bulb). The “University of Hawaii at Manoa” text has been replace with an image of the UH logo and a image of text instead. And finally the use of rounded-corner borders to give the site a curvier look and frames the context in the middle so they don’t seem like they’re just floating around.
The windmill theme is also another theme taken from the T-shirt and button ideas. For this theme, we wanted to incorporate a minimalist design. Something that looks clean and simple yet follows the theme. This theme used multiple image background which works very well with the theme, an image that replaces the title text, tab like navigation menu, and opacity settings so the background image can be seen under the center content. This minimalist layout is quite popular for small websites because of its clean and simple look.
The energybook theme is a duplication of the popular social networking site “Facebook”. Minor modifications to the HTML files was require in order to move the content of the page around, such as moving the navigation menu out of the main content div and adding additional div in the main content div to give it the multi-column look. The left column is the navigation menu that we’ve taken out of the main content, the center column is to hold the main content, and the right column is for additional content. Fackbook is are very busy website jam packed with content, so in order to make this theme look more like Facebook, addidtional content is required. Hopefully as this Dorm Energy project continues, more content will be added on the site.
The google theme takes the “google-style” that we are all familiar with and applies it to this website. Some “google aspects” include the simple white background, blue coloring, rounded corners, and minimalist layout.
The green theme follows the minimalist look of the Google layout while adding some color and making the page look not as plain. With the page being about energy conservation, the color green was chosen to follow the theme. Content is held in containers that have rounded corners and a white background for easy integration of new content.
