Overview
Granada is a Fusion sub-theme taking advantage of both Skinr and DesignKit. It is recolorable using either one or two colors and may additionally have a background image with opacity. Granada has been designed for use with the Open Outreach distribution but is also available for use independently.
As a Fusion sub-theme it comes with the great variety of regions created by Fusion allowing easy site configuration using blocks. Skinr allows even further “point and click” customization of the blocks.
Designkit has been integrated to allow the site to be recolorable using any hexidecimal color. Color on the site is provided using tints and tones of this one color. A second color can also be added. More on selecting colors below.
Additionally, Designkit allows for easy upload of a logo image as well as a background image, if desired.
Granada is designed by Rosemary Mann and sponsored by Chocolate Lily.
Using Granada
- Install and enable Fusion, Skinr and Designkit as well as Granada.
- Under admin/appearance select Granada as your default theme.
- Under the appearance menu, select the settings button for Granada. This gives you the option to configure layout, typography etc. You may keep to Granada’s set configuration options or select your own. The default is set for the second sidebar (right) to be set at 5 grid widths (of 16). You will also be given an option to upload your own favicon for your site, or you may use the Granada default.
- Upload your site’s logo using the browse button. If you would like a background image for your site, upload it below the logo. Your photo should be at least 1600 pixels wide to accommodate wide screens. Not all photos will work well for a background image so expect trial and error at this phase. You can easily delete a background image by clicking the delete image button. The image cache preset for the background image is 1600 by 1200 pixels. Granada ships with a default background image. To remove it and have no image, delete the image titled "shells_background.jpg" from the img folder within Granada.
- Now choose your color or colors. You can use the color wheel provided or visit any of the many sites that list hex colors (I like http://www.december.com/html/spec/color.html). Enter the # and the 6 digit hex number. Leave blank to use the default color.
- If you want a second color, enter the hex value in the second color field. If you are needing help with selecting colors that work well together there are lots of sites that provide complementary colors which can be a good starting point. (See http://www.colorsontheweb.com/colorwizard.asp for example.) If you want only one color, copy the primary hex color into the “second color” field to override the defaults. Remember to save your configuration options.
- To ensure correct placement of blocks, ensure that the block Main menu goes in the Main menu region. The Main page content needs to go in the Content region.
- Because Granada uses Skinr, you can easily change the appearance of your blocks. Click on the gear that appears when you hover over any block to enter the Skinr configuration menu for that block. Selecting the “border” option under “general styles” will give you a box with fill and colored border.
Granada theme works well with menu items listed again in the postscript bottom region. This area has a gray screen and a colored border will appear above this region as soon as a block is enabled in this region. Again, the menu listing can be configured using Skinr.
2.x Branch
May 2012: Granada is now branched to follow the developments in Fusion.
For the the 2.x branch of Granada use Fusion 2.x and Fusion Accelerator.
