Editing a Theme in Drupal 7
Having recently been part of a project where we needed to take HTML pages and CSS rules and integrate them into the Drupal CMS, I couldn’t help but realise how confusing it was. So I thought I’d lend a hand by cataloging how to go about setting this up so you can concentrate on making your own awesome theme.
Once you’re all set up and coding in the right places, it’s all hunky dory (provided you know a competent amount of HTML and CSS), but it’s getting to that point that many (myself included to begin with) get a tad stuck. So this is here to set all who read it on the right path to being able to edit a bog-standard theme into something much more custom. Let’s begin!
Editing the styles
1) Pick a fairly clean theme that will be easy to manipulate. For example, ‘Stark’ (7.0) is a good example to use.
2) Open up your Drupal folder and navigate to Themes. There you make a copy of the theme you have installed and chosen to use
3) Place the copy of this into Drupal > Sites > all > Themes and rename it to whatever you wish to name it. Within this new folder, you also need to rename the .info file to the new theme name.
4) Open up the .info file in a text editor and change the name value that is found at the top of the file to the new name. You can delete the id value line at the top of the document as it is not needed.
5) You can then change the description of the theme to whatever you want (this will appear when selecting themes in the Drupal administrator panel.
6) The cleanest way to create a theme from scratch is to use a reset.css file (Eric Meyer’s is a good one to use). Add it to a new file and save it in the new theme folder.
7) You will then need to reference that stylesheet in the .info file using this line of code
stylesheets[all][] = reset.css
(note: you should place this line of code above the already present style sheet reference, simply because you want the styles to be reset before you begin applying your own custom rules.)
8 ) The version, project and datestamp information can be removed if you wish but it won’t do any harm there (unless you’re creating this theme for any other version of Drupal other than 7).
9) If you upload the appropriate files at this point and navigate to the themes page of your dashboard, your custom theme should be visible in the ‘disabled themes’ section.
10) You can hit ‘enable and set default’ to apply this theme to your Drupal project (this will be necessary so that you can easily view it as you begin editing the look of your theme)
11) You can now open the ‘layout.css’ file in the new theme folder and test that it is working by setting a simple style rule such as a distinctive background colour to test.
Editing the content & structure
So now that the themes styles are at the mercy of your CSS rules, we can move on to editing the actual layout of the HTML elements. Within Drupal itself, you can edit the position of elements in the ‘Structure > Blocks’ menu. However, this editing ability is restricted by the set layout of whatever theme you originally began editing from. Therefore, to edit this yourself, follow these steps:
1) Navigate to Drupal > Modules > System. Inside this folder you will find files with the extension of .tpl.php (this simply stands for template). You can copy the ‘page.tpl.php’ file (the file for the layout of the main page) and paste it in the folder of your custom theme.
2) This file, like all of the tpl.php files, have element tags that you can alter and reference in your layout.css file. (note: there is also a lot of php in these files that deal with loading the content of your page, so only mess around with them if you really know what you’re doing; it could be fatal Dun Dun Duhhhh).
3) Now, if you were to begin editing this page by, for example, adding some text to the page, you may find that the changes don’t seem to be appearing. This is simply because the template is cached in to the database.
4) So to be able to see the changes that you’re making, you need to go to the administrator panel of your Drupal project and navigate to ‘Configuration > Performance’ (performance is located under the ‘development’ tab on this page).
5) You then need to click ‘clear all caches’. Once this is done, refresh your browser and you should see your changes.
What you are doing in this process is overriding the template file of the original theme with the one in your theme folder. You can do this with the other .tpl.php files in the ‘Drupal > modules > system’ folder. At the top of these files, you will also find references to most variables that are in use and their function(s). This will enable you to edit these, should you want to, with a bit more knowledge of what you’re messing with.
(note: if you encounter any issues with using any of the variables displayed, one issue may be because they are already referenced in another place, in relation to the original name of the theme. Therefore, if you navigate to the ‘template.php’ file in your theme folder and replace every instance of the old name with your new name (hint: if you’re using Adobe Dreamweaver, the ‘find and replace’ tool is a saviour here!) Save it to your server and then clear all caches again, everything should then work fine.
And that’s it! The rest of the editing is up to you and your skills in HTML/CSS. Good luck and enjoy!
