Customizing your theme
This presentation is the property of its rightful owner.
Sponsored Links
1 / 22

Customizing your Theme PowerPoint PPT Presentation


  • 115 Views
  • Uploaded on
  • Presentation posted in: General

Information Systems 337 Prof. Harry Plantinga. Customizing your Theme. Customizing Themes. Beginner options: Changing title slogan Changing logo Changing color schemes Basically, anything you can do through administration interface. Customizing Themes. Intermediate options

Download Presentation

Customizing your Theme

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Customizing your theme

Information Systems 337

Prof. Harry Plantinga

Customizing your Theme


Customizing themes

Customizing Themes

  • Beginner options:

    • Changing title slogan

    • Changing logo

    • Changing color schemes

    • Basically, anything you can do through administration interface


Customizing themes1

Customizing Themes

  • Intermediate options

    • Make a copy of a theme and modify it (or create a subtheme)

    • Replace images

    • Edit Styles.css and other CSS files


Customizing themes2

Customizing Themes

  • Advanced options

    • Make a copy of a theme and modify it (or create a subtheme)

    • Edit template files (foo.tpl.php)

    • Create new template files (node-game.tpl.php)

    • Override PHP functions


How can i

How can I…

  • Change the style of an element on a page?

    • Make a custom copy of your base theme

    • Find the relevant stylesheet entry with firebug

    • Turn off CSS file optimization so you can see changes (Site Configuration -> Performance)

    • Edit the appropriate stylesheet


How can i1

How can I…

  • Change the HTML of an element on a page?

    • Customize the appropriate template file (tpl.php)…


What is a theme

What is a theme?

  • Provides the opportunity to modify a page before it is displayed

  • Every element on a page is run through the theme system

  • Theme engine, e.g. PHPTemplate [default], Smarty, PHPTAL

  • Theme, e.g. Garland


How do themes get applied

How do themes get applied?

http://site.org/node/1

Node Module

Currently Enabled Theme

Final HTML

BasicHTML

Theme Engine


Theme basics

Theme basics

name = NewsFlash

description = A Drupal 6 Theme by RoopleTheme

version = VERSION

core = 6.x

engine = phptemplate

regions[sidebar_left] = Left Sidebar

regions[sidebar_right] = Right Sidebar

regions[header] = Header

regions[suckerfish] = Suckerfish Menu

regions[user1] = User 1

regions[user2] = User 2

regions[user3] = User 3

regions[content_top] = Content Top

regions[content_bottom] = Content Bottom

regions[user4] = User 4

regions[user5] = User 5

regions[user6] = User 6

regions[footer_region] = Footer

  • .info files

  • Other attributes:

    • screenshot

    • base theme

    • features

    • stylesheets

    • scripts


Regions

Regions

  • By default there are five:

    • Header (header)

    • Footer (footer)

    • Left sidebar (left)

    • Right Sidebar (right)

    • Content (content)

  • You can define as a custom set in the .info file

    • regions[header] = Header

    • regions[content] = Content

    • regions[ads] = Ads


Features

Features

  • Default features

    • Logo (logo)

    • Site name (name)

    • Site slogan (slogan)

    • Mission stmt (mission)

    • node_user_pictures

    • comment_user_pictures

    • Search box

    • Shortcut icon

    • Primary links

    • Secondary links

  • Or define custom features:

    • features[] = name

    • features[] = slogan

    • features[] = mission

    • features[] = blurb

    • features[] = contact


Css javascript

CSS, JavaScript

  • By default, Drupal will include the CSS file "styles.css"

  • If you want other files, customize:

    • stylesheets[all][] = styles/reset.css

    • stylesheets[all][] = styles/typography.css

    • stylesheets[all][] = styles/forms.css

    • stylesheets[all][] = styles.css

  • Similarly for JavaScript; default is script.js


Hint stylesheet optimization

Hint: stylesheet optimization

  • How many stylesheets are included in a page on your website?

  • Configuration -> Performance

    • Optimize CSS

    • Optimize JavaScript

    • Enable page cache

    • Enable block cache

    • [these options make development harder]


More customization

More customization?

  • Options so far allow images and CSS

  • What if you want to move the picture from the top of a post to the bottom?

  • Template files (*.tpl.php)

    • comment.tpl.php –controls comment output

    • page.tpl.php – controls page output

    • node.tpl.php – guess

  • Theme Developer module is extremely helpful


Templates and defaults

Templates and defaults

  • Templates control behavior

    • comment: modules/comment/comment.tpl.php

    • override: sites/all/marinelli/comment.tpl.php

  • Theme engine handles overriding


Example add a div

Example: Add a div

  • Example: you want to add a <div> around the comment's title.

    • Copy modules/comment/comment.tpl.php to sites/all/modules/yourmod

    • Edit it to your heart's content


Example move breadcrumbs up

Example: move breadcrumbs up

  • How to move breadcrumbs into the header region?

    • If necessary, copy page.tpl.php into the theme

    • Edit to move breadcrumb variable

    • Add .breadcrumb, .breadcrumb a styles to stylesheet as needed


Example adding a region

Example: adding a region

  • Edit theme.info to add the region you want

  • Edit page.tpl.php to display the region


Theming specific content types

Theming specific content types

  • Suppose you've created a new content type, 'game'. How to theme it?

    • Copy node.tpl.php into your theme directory

    • Copy node.tpl.php to node-game.tpl.php

    • Edit node-game.tpl.php to your heart's content!

  • But how to you get at the fields?

    • Can get at individual fields in the template file content-field.tpl.php—but only one at a time

    • Can we hack the $content of the node?


Template php file

template.php file

  • .tpl.php files are cool…

    • can modify HTML output…

    • …but you can't change what you are given in the variables

  • template.php: override just about anything

    • Want a new variable called $authored that can be used in node.tpl.php?

    • This requires PHP. (Only PHP can get at the deepest layers of Drupal.)

    • (Documentation: see Drupal 6 theming guide)


Template php example from foundation module

template.php example from Foundation module

<?php

/**

* override or insert PHPTemplate

* variables into the node templates

*/

function foundation_preprocess_node(&$vars) {

// Set author info line separately from the full $submitted variable

$vars['authored'] = t('Submitted by') . ' ' . $vars['name'];

}


Adding theme variables

Adding theme variables

  • All variables that go out to a theme are sent through a preprocess function

  • You can create your own variables, or change existing ones, in the template.php file:

    <?php

    function prepsoccer_preprocess_node(&$vars) {

    $vars['random_number'] = rand(1,100);

    }

    ----- in a .tpl.php file -----

    <?php print $random_number; ?>


  • Login