1) HTML5. Short preview. 2) 960 Grid system 3) What is omega? 4) Omega settings - Omega regions 5) General Omega Settings 6) CSS Path to object Редактирование *.tpl.php файлов не будет рассмотрено, так как доклад расчитан на новичков.

1. Omega
(960gs & HTML5)
Danilenko Alexander

2. Gold Sponsor of
DrupalCamp Kyiv 2011

3. Silver Sponsors of
DrupalCamp Kyiv 2011

4. What is OMEGA?

5. Creating subtheme

6. Creating subtheme

7. Creating subtheme

8. Creating subtheme
CHANGES TO YOUR_THEME_NAME.INFO
• name = Your Awesome Theme Name
• description = Your Awesome
Theme Description is very
descriptive and cool!!

9. 960.gs

10. 960.gs

12. Omega settings

13. Zone settings

14. Zone settings

15. General Omega
Settings

16. Optional CSS

17. Form Settings

18. Page titles

19. Breadcrumb settings

20. Menu settings

21. Grid overlay settings

22. Grid overlay sample

23. CSS Styling
• For CSS styling edit file
sitesallthemessubthemenamecss
subtheme.css

24. CSS path
• ID – unique identifier
• Class - indicates
the appliances in Class

25. CSS path
HTML CSS
• <div id=“id1”> • div#id1 { … }
• <div • div.class1 { .. }
class=“class1”>

26. Tag hierarchy
HTML:
<div class=“class1”>
<div class=“class2”></div>
</div>
CSS:
div.class1 div.class2 { .. }

27. What is class
Class
Class2
1
<div
class=“class
1 class2
class3”>
Class3

28. What is class
Class
Class2
1
<div
class=“class
1 class2”>
Class3

29. Omega CSS path
samples
• Blocks
o section#blockname {…} – path to block via ID
o section.block {…} – all blocks
o section#blockname h2.title {…} –title of block
o aside. region-sidebar-first section#blockname
{…} - block in 1st sidebar