After Land I wanted to continue exploring the theme but I needed a new challenge so turned to colour. I explored Bradford and produced a series of urban landscapes that I liked, but because Land had made such an impact on the general public my colour work wasn't reviewed. - Fay Godwin This post is actually a guide for myself in customizing theme on Drupal, so it will be my step-by step theming guide on Drupal.
Maybe it can also help others who like to use Drupal and creating nice looking website.
This guide assumes you have already installed Drupal on your site, and have Zen theme installed in the themes directory of your site. Also you have quite moderate understanding of HTML and CSS
Why use Zen, because of hours and hours of modifying a few themes, I found Zen is the best place to start creating your own Drupal theme to suite your idea.
Zen Drupal Theme walkthrough in creating a subtheme:
1. After putting the Zen theme inside you theme directory, unpacked it, and copy the whole 'STARTERKIT' to you themes folder. It should be outside of the Zen folder
2. Now rename "STARTERKIT" to something you like, I'll call it "mytheme" from this point forward.
3. Now the setting up part, find this file "STARTERKIT.info.txt" and change it to your theme name, so that will be "mytheme.info"
4. Open the file and edit this bit:
screenshot = screenshot.png
name = Zen Sub-theme Starter Kit
description = Read the online docs or the included README.txt on how to create a theme with Zen.
To something like this
screenshot = screenshot.png
name = My Theme
description = This is a subteme for Zen theme in Drupal for my site
Don't worry about the screenshot.png, that's the picture that will show up in admin>appearance to describe you themes option
5. Change another snippet, to chose the type of layout you want, liquid or fixed by editing this line:
stylesheets[all][] = css/layout-fixed.css
and we are on our way to customize the theme.
What else can we do inside this info file,
1. Adding javascript by editing this snippet:
;scripts[] = js/script.jsjust by removing the comment ';' semicolon symbol at the front
2. Adding new region, block and region in Drupal is not the same, block is the content of certain region, region is pre-define in your theme CSS and page. How? by editting this code and also copying this file "page.tpl.php" into your subtheme from Zen main folder
This is the default region from the starterkit, the take note of the name as that the guide to your theming in CSS later
Back to editing the "mytheme.info" file, at this stage it's complete.
Now find "template.php" and "theme-settings.php" and edit this every "STARTERKIT" word in the file with your theme.info file name, for me that will be "mytheme"
Search and replace.
Now we move on to setting it on Drupal, login to your administrator account go to >Appearance
You should see the "mytheme" description there, enable and set default. But let the administrator theme remains the same because it might get tricky to navigate once you start editing the CSS.
Now we can see the theme in action at your page e.g: www.mysite.com
which will look completely basic
If you like, copy "page.tpl.php" and "search-block-form.tpl.php" from Zen folder into the sub-theme folder for easier handling once we want to add other features and region for the site. I recommend you to it, to avoid confusion later on.
regions[help] = Help
regions[sidebar_first] = First sidebar
regions[sidebar_second] = Second sidebar
regions[navigation] = Navigation bar
regions[highlighted] = Highlighted
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
regions[bottom] = Page bottom
regions[page_top] = Page top
regions[page_bottom] = Page bottom
This is the default region from the starterkit, the take note of the name as that the guide to your theming in CSS later
Back to editing the "mytheme.info" file, at this stage it's complete.
Now find "template.php" and "theme-settings.php" and edit this every "STARTERKIT" word in the file with your theme.info file name, for me that will be "mytheme"
Search and replace.
Now we move on to setting it on Drupal, login to your administrator account go to >Appearance
You should see the "mytheme" description there, enable and set default. But let the administrator theme remains the same because it might get tricky to navigate once you start editing the CSS.
Now we can see the theme in action at your page e.g: www.mysite.com
which will look completely basic
If you like, copy "page.tpl.php" and "search-block-form.tpl.php" from Zen folder into the sub-theme folder for easier handling once we want to add other features and region for the site. I recommend you to it, to avoid confusion later on.
The "page.tpl.php" can be found inside the themes>zen>template folder while "search-block-form.tpl.php" is in the >modules>search folder, not inside theme folder. Copy both to >themes>mytheme>template.
Visit the appearance site again to build the theme registry. (nothing to do, just visit admin>appearance, and it's done)
Part 2: Zen Sub-theming with Drupal for complete beginner
Composers in the old days used to keep strictly to the base of the theme, as their real subject. Beethoven varies the melody, harmony and rhythms so beautifully. -Johannes Brahms
1 comments:
Thanks, good article!
Post a Comment