danilenko alexander. drupal 7 theming on omega. drupalcamp kyiv 2011

Omega (960gs & HTML5)

Danilenko Alexander

Gold Sponsor ofGold Sponsor ofDrupalCamp Kyiv 2011DrupalCamp Kyiv 2011

Silver Sponsors ofSilver Sponsors ofDrupalCamp Kyiv 2011DrupalCamp Kyiv 2011

What is OMEGA?What is OMEGA?

Creating subthemeCreating subtheme

Creating subthemeCreating subtheme

Creating subthemeCreating subtheme

Creating subthemeCreating subtheme

CHANGES TO YOUR_THEME_NAME.INFO

• name = Your Awesome Theme Name• description = Your Awesome Theme Description is very descriptive and cool!!

960.gs960.gs

960.gs960.gs

Omega settingsOmega settings

Zone settingsZone settings

Zone settingsZone settings

General Omega General Omega SettingsSettings

Optional CSSOptional CSS

Form SettingsForm Settings

Page titlesPage titles

Breadcrumb settingsBreadcrumb settings

Menu settingsMenu settings

Grid overlay settingsGrid overlay settings

Grid overlay sampleGrid overlay sample

CSS StylingCSS Styling• For CSS styling edit file

\sites\all\themes\subthemename\css\

subtheme.css

CSS pathCSS path

• ID – unique identifier• Class - indicates the appliances in Class

CSS pathCSS path

• <div id=“id1”>

• <div class=“class1”>

• div#id1 { … }

• div.class1 { .. }

HTML CSS

Tag hierarchyTag hierarchyHTML: HTML: <div class=“class1”> <div class=“class2”></div></div>

CSS:CSS:div.class1 div.class2 { .. }

What is classWhat is class

Class1

Class2

Class3

<div class=“class

1 class2 class3”>

What is classWhat is class

Class1

Class2

Class3

<div class=“class1 class2”>

Omega CSS path Omega CSS path samplessamples

• Blockso section#blockname {…} – path to block via IDo section.block {…} – all blockso section#blockname h2.title {…} –title of blocko aside. region-sidebar-first section#blockname

{…} - block in 1st sidebar