danilenko alexander. drupal 7 theming on omega. drupalcamp kyiv 2011
DESCRIPTION
1) HTML5. Short preview.2) 960 Grid system3) What is omega?4) Omega settings - Omega regions5) General Omega Settings6) CSS Path to objectРедактирование *.tpl.php файлов не будет рассмотрено, так как доклад расчитан на новичков.TRANSCRIPT
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