drupal camp manila 2014 - theming with zen

THEMING WITH ZEN

Japo DomingoDrupal Developer

Drupal.org id: japo32

WHAT’S HAPPENING NOW

Who am I?Why theme?Why Zen?How to Zen?

WHO AM I?

WHO AM I?

Japo Domingo

Web Developer/Graphic Artist/Web Designer/Animator since 2005

Computer Science graduate

Using Drupal since Drupal 5

Sort of active in Drupal Pilipinas since 2013

Currently working for Myrtec Pty. Ltd.an Australian IT firm.

Micro startup: Bad Panda Creatives

japo@japodomingo.com

fb.com/japodomingo

WHY THEME?

WHY THEME?

Let’s play a game!

Identify the website!

ROUND 1

WHY THEME?What siteis this?

ROUND 2

WHY THEME?

What siteis this?

How did you do?

THEMING IS LIKE A MAKEOVER FOR WEBSITES

BUT BE CAREFUL!

WHY ZEN?

WHAT IS ZEN?

https://drupal.org/project/zen

Zen is a powerful, yet simple, HTML5 starting theme with a responsive, mobile-first grid design.

WHAT IS ZEN?

WELL DOCUMENTED http://drupal.org/documentation/theme/zen

It’s OLD but NEW which means tested.

It’s heavily used - by HUNDREDS OF THOUSANDS of websites.

TONS OF FEATURES!

You may not need them in your current project, but you don’t need to learn everything to use ZEN.

7.x-5.x features at a glance:

HTML5, HTML5 shiv (or Modernizr), Responsive Design, Sass/Compass, CSS, Zen Grids, Normalize CSS , Respond.js, IE conditional classes, Optional IE6/7 Support, Documentation, Swappable layouts, Drush support, RTL language support, Accessibility

HOW TO ZEN

STEP 1: INSTALL ZEN

Automatic Go to the Zen project Home page,

and 'copy' the URL link location for the Drupal-7 Zen-7.x version that you want to install.

Visit your site page:[your-drupal-7-root]/admin/appearance/install

'Paste' the download location URL into the field-box "Install from a URL".

Click the button "Install".

STEP 1: INSTALL ZEN

Manual Download Zen from

http://drupal.org/project/zen

Unpack the downloaded file, take the entire zen folder (which includes the README.txt file, a STARTERKIT folder, etc.) and place it in your Drupal installation under sites/all/themes. (Additional installation folders can be used; see “Installing themes” for more information on installing contributed themes like Zen.)

Log in as an administrator on your Drupal site. For Drupal 7, go to the Appearance page at admin/appearance. For Drupal 6, go to the Themes page at admin/build/themes. If you installed the theme properly, you will see the Zen theme listed at the page-bottom under the heading "Disabled theme".

STEP 1: INSTALL ZEN

Drush On terminal, go to your site’s home directory

Enter the command ‘drush dl zen’

Wait for it to download.

STEP 1: INSTALL ZEN

You do not need to 'enable' the Zen theme for it to function as a base-theme for the Zen subtheme you will create next.

STEP 2: CREATE A SUBTHEME

Copy the STARTERKIT folder at:

[drupal7-root]/sites/all/themes/zen/STARTERKIT

and put the copy one-level up at:

[drupal7-root]/sites/all/themes/STARTERKIT

Rename your new STARTERKIT folder to be your new sub-theme.For example, rename the STARTERKIT folder to "foo", so that it resides at:

[drupal7-root]/sites/all/themes/foo

IMPORTANT: The name of your sub-theme folder must start with an alphabetic character and can only contain lowercase letters, numbers and underscores.

Why? Each theme should reside in its own folder. To make it easier to upgrade Zen, sub-themes should reside in a folder separate from the base theme.

STEP 2: CREATE A SUBTHEME

Rename the "STARTERKIT.info.txt" file, in your new sub-theme folder, to include the name of your new sub-theme; and remove the ".txt" extension.

For example, rename the file:[drupal7-root]/sites/all/themes/foo/STARTERKIT.info.txtto:[drupal7-root]/sites/all/themes/foo/foo.info

STEP 2: CREATE A SUBTHEME

Edit your new .info file: Change the "name" and "description" fields.

That is the name and description that accompanies your new sub-theme on your site's "Appearance" page.

Note: Instead of your having used "A Zen sub-theme", you can type anything you like for the 'description'. You can even use some HTML in that description, including <a href...>...</a> hyper-links.

STEP 2: CREATE A SUBTHEME

Choose your preferred page layout method or grid system.

Edit your sub-theme's styles.css file (or styles.scss if you're using SASS), and replace the reference to responsive.css with fixed.css.

For example, edit foo/styles.css and change this line:@import "layouts/responsive.css";to:@import "layouts/fixed.css";

In case of SASS, edit foo/styles.scss and change this line:@import "layouts/responsive";to:@import "layouts/fixed";

STEP 2: CREATE A SUBTHEME

Edit your sub-theme to use the proper function names.

Edit the template.php and theme-settings.php files in your sub-theme's folder; replace ALL occurrences of "STARTERKIT" with the name of your sub-theme.

It’s recommended to use an editor with the “Replace All” functionality.

STEP 2: CREATE A SUBTHEME

Set your new sub-theme as your website's default theme.

Log in as an administrator on your Drupal site.

Go to the "Appearance" page at admin/appearance, and click the link "Enable and set default" for your new sub-theme.

NOTE: When you change any files in your subtheme (template.php or template files), Drupal 7 might be caching them. To apply any new changes to any of those files, simply visit your site's "Appearance" page at [dupal7-root]/admin/appearance.

SASS & SCSS

Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself.Sass consists of two syntaxes. The original syntax, called "the indented syntax", uses a syntax similar to Haml.[3] It uses indentation to separate code blocks and newline characters to separate rules.The newer syntax, "SCSS", uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss respectively.

http://en.wikipedia.org/wiki/.scss

SCSS CSS

HOW TO USE SCSS IN ZEN

Install RubyLinux: apt (sudo apt-get install ruby) or yum (sudo yum install ruby)Windows: http://www.rubyinstaller.org/MAC: Ruby is installed by default!

Install SASSgem install sass

Double checksass -v

Install Compasssudo gem install compass

To start developing, in terminal go to your theme directory andcompass watch

Compass will automatically detect changes in your scss files.

More info here: https://drupal.org/node/1548946

WHEN TO USE SCSS IN ZEN

It depends on your situation.

Easier

Though not everyone knows SCSS

ME: Use SCSS for BASIC Layout then use a regular css file for theme styling.

YOU: I don’t know. :D Try it out and find what works for you.

SCSS is a topic big enough for another session.

STEP 3: CHANGE THE LAYOUT

We will change the layout tofixed width, 960px wide, with 6 columns.

To check your current layout go to:http://www.example.com/admin/structure/block/demo/foo Make sure compass is running. Edit sass/styles.scss

Edit sass/layouts/_fixed.scss

STEP 3: CHANGING THE LAYOUT

Edit sass/layouts/_fixed.scss

STEP 3: CHANGE THE LAYOUT

Edit sass/layouts/_fixed.scss

STEP 3: CHANGING THE LAYOUT

STEP 3: CHANGING THE LAYOUT

Edit sass/_init.scss

STEP 3: CHANGING THE LAYOUT

Before

After

STEP 4: ADJUST SETTINGS

Current Homepage

STEP 4: ADJUST SETTINGS

Overwrite the logo.png on your theme directory

Edit your theme settings in /admin/appearance/settings/foo Upload a custom favicon Disable site name Disable site slogan

STEP 5: ADD REGIONS

You can add new regions to your theme!We’ll add 3 new regions arranged as 3 columns just above the footer.First add the regions in your .info file

STEP 5: ADD REGIONS

Then copy page.tpl.php from zen into your theme. This is where you will add the regions.

STEP 5: ADD REGIONS

Then edit the copied page.tpl.php.Also add a bit of php logic so the regions will not appear when all regions are empty.

STEP 5: ADD REGIONS

Make sure to flush your site’s caches for the new regions to be detected.

Next we apply some zen grids theming to the new region containers.

STEP 5: ADD REGIONS

Then add this magical bit of scss at the end.

STEP 5: ADD REGIONS

BEFORE SCSS

AFTER SCSS

STEP 6: ADD CUSTOM CSS AND JS

Create a new stylesheet[drupal7-root]/sites/all/themes/foo/css/newlook.css

Add it to your .info file

Optionally also add javascript:

Make sure to clear your caches after editing the .info file

STEP 7: ADD CUSTOM SCSS

There are 2 ways to add scss.1) Add it so it compiles to it’s own css file. Create your file.

Add it into styles.scssRESULT

STEP 7: ADD CUSTOM SCSS

There are 2 ways to add scss.2) Add it so it’s included in styles.css Create your file.

Add it into styles.scss

RESULT in styles.css

STEP 7: STYLING

Some tips on styling: Use Web Development tools on your browser

to quickly identify the classes and id of specific DOM elements. Firefox – Firebug (an addon) Chrome – Inspect ElementBoth of these allow you to right click anywhere on the page and get info on DOM elements.

STEP 7: STYLING

Add your styles to either the scss files OR your custom css files.

Use some photoshop magic and epic skills.

RESULTBEFORE AFTER

NEXT STEP: TEMPLATING

Templating is a more advanced form of theming where you edit the .tpl.php files (i.e. template files) of your theme.

.tpl.php files area available in the zen/templates folder.

Copy any you want to use into your_theme_folder/templates

More about templateshttps://drupal.org/node/190815

Topic for a future talk

SUMMARY

Install ZenCreate a SubthemeChange the LayoutAdjust SettingsAdd RegionsAdd Custom CSS and JSAdd Custom SCSSStylingTemplating

IMPORTANT REMINDERS: When working with

scss make sure compass is running.

If your changes are not reflecting clear your site’s cache.

THANK YOU!

Useful ResourcesCSS3 Gradient Editor

http://www.colorzilla.com/gradient-editor/

CSS3 Generator

http://css3generator.com/

Zen Grids

http://zengrids.com/

Get in touch!

Japo Domingo Myrtec Pty Ltd (we’re hiring!)

Bad Panda Creatives (we’re not! Yet.)

japo@japodomingo.com

fb.com/japodomingo

www.japodomingo.com

Contact #: ask me!