Welcome to the Plain Grail project page, one of my free drupal themes.
The theme has been tested right on this site from the very early development stage. The latest stable release has a lot more improvements both on codes and theme settings in your administration page, as you can see from the CHANGELOG.
This theme is based on Holy Grail and controlled by Grid and developed as a subtheme of Zen. It is released under GNU General Public License (GPL) so you have my legal permission to copy, distribute and/or modify it to suit your website design needs.
Other Holy Grail themes in series:
Features:
NOTE: You must install the Zen theme before using this theme! See http://drupal.org/project/zen.
Full documentation on the Zen theme can be found in Drupal's Handbook:
http://drupal.org/node/193318
Excellent documentation on Drupal theming can be found in the Theme Guide:
http://drupal.org/theme-guide
1. Download plainGrail from http://drupal.org/project/plaingrail
2. Unpack the downloaded file, take the entire plainGrail folder and place it in your Drupal installation under one of the following locations:
It is better to be placed outside of zen folder for easier upgrade to each!
3. Log in as an administrator on your Drupal site and go to Administer > Site building > Themes (admin/build/themes) and enable plainGrail.
4. Configure at Administer > Site building > Themes(admin/build/themes/settings/plaingrail)
There are several width alternatives to generate dynamically under Theme-specific settings:
Apart from defaults #sidebar-left = 130px and #sidebar-right = 230px
5. If you need any override, rename the provided CSS file (grail-overrides-rename.css ), so that it is never overridden in every upgrade:
grail-overrides-rename.css
change to:
grail-overrides.css
Once you have satisfying widths to your design, you may delete grail-devwidth.css for good
6. Activate it via admin/build/themes/settings/plaingrail or
permanently in your plaingrail.info, by removing semicolon before the line:
;stylesheets[all][] = grail-overrides.css
change to
stylesheets[all][] = grail-overrides.css
IMPORTANT: In Drupal 6, the theme system caches template files and which theme functions should be called. What that means is if you add a new theme or preprocess fuction to your template.php file or add a new template (.tpl.php) file to your sub-theme, you will need to rebuild the "theme registry."
See http://drupal.org/node/173880#theme-registry
See admin/build/block for visual representation or page.tpl for detailed explanations
Out of the box block supports:
1. Search form, go to admin/build/themes/settings/plaingrail, and enable "Search box"
See template.php for each usage:
Other optional functions are removed from the latest release just to make the plaingrail slimmer and more extensible.
Most of the layout stuffs go to layout.css.
All static and dynamic holy grail techs go to grail-devwidth.css.
Alternative widths to play around:
Other optional decorations:
Most decoration stuffs go to plaingrail.css.
Each file are heavily commented for explanation
Grid Control:
Control your layout with the Grid toggle button provided during your dev.
Switch between 24 and 16 columns of Grid, you need to change it in plaingrail.css (.showgrid #page-inner).
It's the last line there.
Feel free to modify any of plainGrail files to suit your need. Comments and explanations are preserved in each of the files and CSS files
Always visit admin/build/themes/select to clear theme registry,
or activate registry cleaner on theme settings,
or even press key F5, to clear your browser cache
See http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm
Important things to customize width of the columns, sample listed here is taken from grail-170x170.css:
You may reduce padding to total 20px or 10px each side, have a dummy/wireframe first.
The fixed width is set to 960px on #page on layout.css. You can make it fluid by removing 960px from #page, and set margin or padding instead to have white spaces on each side.
Only the properties and values mentioned here are candidates to customize, use it wisely :)
Please note the order of the appearance as well. Do the adjustment one at a time. Give the actual width first, then adjust the position and margin.
/*-----!!!!!!BOTH SIDEBARS ACTIVE!!!!!!------*/
Most important things to adjust from grail-devwidth.css into your grail-overrides.css are listed here:
To remove borders, remove the same section from layout.css for good,
or better override values to 0 here,
or best dynamically via admin/build/themes/settings/plaingrail for smooth upgrades to layout.css
#main-inner, .farleft{border-right:1px solid #eaeaea;}
#main{border-top:1px solid #eaeaea;}
#main{
min-height:320px; /* Make it is not too short, such as in 404*/
background-color:#fff; /* #sidebar-right background color which is the base of the other columns below*/
}
#sidebar-left{
width:170px; /* Width of #sidebar-left minus/without left and right padding */
left:185px; /* Width of #sidebar-left plus padding on the left, adjust .farleft accordingly*/
}
#sidebar-right{
width:170px; /* Width of #sidebar-right minus left and right padding */
left:555px; /* Do some bargain here to reach the correct measure to your chosen width*/
}
/*corresponds to #sidebar-right*/
#main-inner{
background:#fff; /* #sidebar-left background colour */
margin-left:-200px; /* Width of #sidebar-right, including total padding */
}
/*corresponds to #sidebar-left*/
.farleft{
background:#fff; /* First column background color where content goes */
margin-left:-200px; /* Width of #sidebar-left + total padding, adjust #sidebar-left */
}
/*This should be the last thing to do after all above values are set*/
#content-inner{
margin:20px 15px 20px 415px; /* Content column side padding:
Left padding = first column width + left sidebar/middle column left padding width
Right padding = last column width + left sidebar/middle column right padding width */
}
/*------!!!!!!ONE SIDEBAR ACTIVE!!!!!!------*/
body.one-sidebar #main-inner{
margin-left:-400px; /* Width of #sidebar-right plus padding each */
}
body.one-sidebar .farleft{
margin-left:0; /* Collapse #sidebar-left container */
}
body.one-sidebar #content{
}
body.one-sidebar #content-inner{
margin:20px 10px 20px 410px; /* #sidebar-left side padding:
Left padding = Content width + left sidebar left padding width
Right padding = #sidebar-right width + left sidebar right padding width */
}
body.one-sidebar #sidebar-left{
left:390px; /* Width of the left-hand side padding (#sidebar-left width plus left padding)*/
width:380px; /* Width of #sidebar-left minus left and right padding */
}
body.one-sidebar #sidebar-right{
left:390px;
width:380px; /* Width of #sidebar-right minus left and right padding */
}
/*------!!!!!!NO SIDEBAR ACTIVE!!!!!------*/
Most are fine, so leaving these out is okay:)
.no-sidebars #content,.no-sidebars .farleft,
.no-sidebars #main-inner, .no-sidebars #main{
}
.no-sidebars #content-inner {
}Transparent rss.png is provided if you want to change navbar background color from black to others. Use pngfix.module to help IE6, or else add background color by image editor.
If you have more graphics which can be combined,
embed them in your sprites.png and adjust their background positions accordingly. Currently it holds grid buttons and search background.
Sprite is good to reduce http-requests to your server, so page can be served more quickly.
It's more usable as references during devs. It's disabled by default.
Always keep grail-overrides.css and plaingrail.info safe.
Put other custom CSS in your grail-overrides.css
If you have any other better width alternatives you would like to share to drupal community, I will be very happy to include your custom sidebar widths as alternatives in the next release of Plain Grail.
And if you have any question related to this theme, you may use the project page for the issues, or right here for general questions.
Thanks