Drupal 7 theming on omega

9,651 views

Published on

My presentation from DrupalCamp 2011 Kyiv
http://camp11.drupal.ua/

Published in: Business, Technology, Education
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,651
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
157
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Drupal 7 theming on omega

  1. 1. Omega (960gs & HTML5) Danilenko Alexander
  2. 3. Creating subtheme
  3. 4. Creating subtheme
  4. 5. Creating subtheme
  5. 6. Creating subtheme <ul><li>CHANGES TO YOUR_THEME_NAME.INFO </li></ul><ul><li>name = Your Awesome Theme Name </li></ul><ul><li>description = Your Awesome Theme Description is very descriptive and cool!! </li></ul>
  6. 8. 960.gs
  7. 10. Omega settings
  8. 11. Zone settings
  9. 12. Zone settings
  10. 13. General Omega Settings
  11. 14. Optional CSS
  12. 15. Form Settings
  13. 16. Page titles
  14. 17. Breadcrumb settings
  15. 18. Menu settings
  16. 19. Grid overlay settings
  17. 20. Grid overlay sample
  18. 21. CSS Styling <ul><li>For CSS styling edit file </li></ul><ul><li>sitesallthemessubthemenamecss </li></ul><ul><li>subtheme.css </li></ul>
  19. 22. CSS path <ul><li>ID – unique identifier </li></ul><ul><li>Class - indicates the appliances in Class </li></ul>
  20. 23. CSS path <ul><li><div id=“id1”> </li></ul><ul><li><div class=“class1”> </li></ul><ul><li>div#id1 { … } </li></ul><ul><li>div.class1 { .. } </li></ul>HTML CSS
  21. 24. Tag hierarchy <ul><li>HTML: </li></ul><ul><li><div class=“ class1 ”> </li></ul><ul><li><div class=“ class2 ”>< / div> </li></ul><ul><li>< / div> </li></ul><ul><li>CSS: </li></ul><ul><li>div.class1 div.class2 { .. } </li></ul>
  22. 25. What is class Class1 Class2 Class3 <div class=“class1 class2 class3”>
  23. 26. What is class Class1 Class2 Class3 <div class=“class1 class2”>
  24. 27. Omega CSS path samples <ul><li>Blocks </li></ul><ul><ul><li>section#blockname {…} – path to block via ID </li></ul></ul><ul><ul><li>section.block {…} – all blocks </li></ul></ul><ul><ul><li>section#blockname h2.title {…} –title of block </li></ul></ul><ul><ul><li>aside. region-sidebar-first section#blockname {…} - block in 1 st sidebar </li></ul></ul>

×