| 1 |
// $Id: README.txt,v 1.2 2009/08/24 06:41:20 geerlingguy Exp $
|
| 2 |
|
| 3 |
Thanks for downloading the Airy Blue theme, originally designed for Open Source Catholic (www.opensourcecatholic.com) by Jeff Geerling of Midwestern Mac, LLC (www.midwesternmac.com).
|
| 4 |
|
| 5 |
|
| 6 |
##############
|
| 7 |
To Install
|
| 8 |
##############
|
| 9 |
|
| 10 |
Download the theme from drupal.org, unzip the tarball, place it in sites/all/themes or sites/example.com/themes, and go to the admin/build/themes page on your Drupal site to enable the theme.
|
| 11 |
|
| 12 |
|
| 13 |
##############
|
| 14 |
Dependencies
|
| 15 |
##############
|
| 16 |
This theme REQUIRES the Zen core theme (2.x-dev as of this release) to be installed; without it, the theme will not work. You can download zen from http://drupal.org/project/zen (install it using the same process above).
|
| 17 |
|
| 18 |
|
| 19 |
##############
|
| 20 |
Maintenance Page
|
| 21 |
##############
|
| 22 |
In order to use this theme's maintenance page for your website (so it will not show the default 'minnelli' theme if your site is in maintenance mode or has a problem), you will need to add the line below to your settings.php file, before the closing ?> tag. For more information, see:
|
| 23 |
http://drupal.org/node/195435
|
| 24 |
|
| 25 |
$conf['maintenance_theme'] = 'airyblue';
|
| 26 |
|
| 27 |
|
| 28 |
##############
|
| 29 |
Graphic Header
|
| 30 |
##############
|
| 31 |
By default, the Title of the site is simply a text header at the top center of the display. If you'd like to make a graphic title (while preserving the text title—especially good for SEO), then you can do so following the steps below (which were used to create the header on www.opensourcecatholic.com):
|
| 32 |
|
| 33 |
1. Open the pages.css file in the airyblue folder.
|
| 34 |
|
| 35 |
2. Add the following lines in near the #site-name CSS definition (or replace that definition):
|
| 36 |
|
| 37 |
h1#site-name,
|
| 38 |
div#site-name
|
| 39 |
{
|
| 40 |
background: url(images/example-title.png) no-repeat top left;
|
| 41 |
width: XXXpx;
|
| 42 |
margin: 0 auto;
|
| 43 |
padding-top: 0;
|
| 44 |
height: 100px;
|
| 45 |
}
|
| 46 |
|
| 47 |
h1#site-name a,
|
| 48 |
div#site-name a
|
| 49 |
{
|
| 50 |
display: block;
|
| 51 |
text-indent: -9999px;
|
| 52 |
height: 80px;
|
| 53 |
width: XXXpx;
|
| 54 |
padding-top: 20px;
|
| 55 |
}
|
| 56 |
|
| 57 |
3. Place an example-title.png (which you'd like to use as your page title) file in the images folder.
|
| 58 |
|
| 59 |
4. Change the width values (so they match) to the width of your image.
|
| 60 |
|
| 61 |
5. Adjust the height/padding values according to the height of your title image.
|
| 62 |
|
| 63 |
Basically, what this code does is move the textual title off the screen (9999px to the left, to be exact), then places an image behind the place that text occupied.
|
| 64 |
|
| 65 |
Note: The Photoshop (PSD) file that was used to make this header is included in the 'sources' folder of the airyblue theme.
|
| 66 |
|
| 67 |
|
| 68 |
##############
|
| 69 |
Rounded Corners in Internet Explorer
|
| 70 |
##############
|
| 71 |
If you would like to give IE users and users of other older browsers the ability to see the rounded corners enjoyed by CSS3-compatible browsers, please see the Drupal issue #549590 and use the attached file: http://drupal.org/node/549590
|
| 72 |
|
| 73 |
|
| 74 |
##############
|
| 75 |
CSS Problems in Internet Explorer
|
| 76 |
##############
|
| 77 |
|
| 78 |
If you are experiencing layout problems in Internet Explorer 6/7/8, it might be caused by the number of CSS files referenced by this theme, along with all the modules enabled on the site. Internet Explorer may limit the number of CSS files you can reference.
|
| 79 |
|
| 80 |
To fix this problem, turn on CSS file aggregation in admin/settings/performance. This greatly reduces the number of CSS files loaded by the browser.
|