Monday, February 10, 2014

How to make a new Drupal theme.

How to make a new drupal theme:


Make a copy of core theme e.g. Garland, copy Garland direcotry and rename to it mytheme or as you wish. e.g. mytheme.

Now we have /sites/all/mytheme/ with all the templates files.
On this directory are important files, and that is the important part to make a new theme.

Drupal theme files:

.../sites/all/mytheme/

screenshot.png
logo.png
mytheme.info
/css
/images
/color
page.tpl.php
node.tpl.php
template.php
maintenance-page.tpl.php
comment.tpl.php
theme-settings.php


1.screenshot.png:
The screenshot should show the entire page and be about ~960x720 (4:3 ratio) resized to exactly 294x219 (~30% of the original size). Try to show many useful page elements (menu, tabs, title, links). Don't include browser chrome (toolbar, status bar, scrollbar, etc). A screenshot used for display purposes in the admin panel.

2.logo.png:
Your logo, if you are using one.

3.mytheme.info:
A required file that is new to Drupal 6 which provides information about the theme.

4.page.tpl.php
!!!page.tpl.php is the only file which is absolutely required. It overrides the theme('page') function, which outputs the final page contents, along with all the extra decorations like a header, tabs, breadcrumbs, sidebars and a footer.
This template defines the main skeleton for the page.
The main template that defines the content on most of the page.

5.node.tpl.php
This file defines the content of the nodes.
This template controls the display of a node, and a node summary. It can only affect the output of the $content variable.

6.template.php
Any PHP functions in your theme should use the Drupal API and follow best practices for writing secure code. Note that functions should be placed in template.php or a module and not in *.tpl.php.
7.maitenance-page.tpl.php

8.comment.tpl.php
Defines the content of the comments.

9.theme-settings.php
Any PHP functions in your theme should use the Drupal API and follow best practices for writing secure code. Note that functions should be placed in template.php or a module and not in *.tpl.php.

10.html.tpl.php
Default theme implementation to display a single Drupal page.

style.css — The CSS file that sets the CSS rules for the template.
block.tpl.php — Defines the content of the blocks.
box.tpl.php — puts a box around things like comments. See also http://drupal.org/node/11814.
style-rtl.css — this file is new to Drupal 6's Bluemarine. I think it's a CSS for right to left languages and can be ignored if you're using a left-to-right language like English.

#You can create files to override the following functions:
theme('page') (page.tpl.php): theme a page
theme('block') (block.tpl.php): theme a block in sidebar
theme('box') (box.tpl.php): theme a generic container for the main area
theme('comment') (comment.tpl.php): theme a comment
theme('node') (node.tpl.php): theme a node

Useful links for druapl theme information

https://drupal.org/node/341707
https://drupal.org/documentation/theme
https://drupal.org/node/173880

No comments: