From a Fireworks Compto a Genesis Child Theme  Linda Shum & Sallie Goetsch           7/24/11
What’s Fireworks?
Why Some People Like Fireworks       Better Than Photoshop•   Multiple Pages                • Grouping•    Symbols        ...
What’s Genesis?
Why Genesis?• Genesis is Search       • Genesis Lets You  Engine Optimized          Update Your Site• Genesis Offers Great...
Theme Options
Custom Widgets
Original Design
Challenges With This Design•   Header and Footer Menus•   Graphite outlines around boxes•   Asymmetric drop shadows behind...
Pillaging Child Themes
What Came from Where• Top and Bottom menus from News Theme• Main menu from Mocha Theme• Tabbed slider from Venture Theme• ...
News Theme Header Menu
News Theme Header Menu Code  Don’t ask ME what this is doing in functions.php. I didn’t  write it that way.
Mocha Menu
Venture Theme Slider
Executive Theme Widgets
Platinum Theme Footer
Contents of Theme Folder
Theme Images Folder
Theme Lib Folder
Style.css (Key to a Child Theme)
Functions.php
Registering WidgetsRemember this: we’re going to need to make some changes here.
THE ORIGINAL HOME PAGE
Home.php: Tabbed Slider
Home.php Top Right
Home.php Mission Statement
Home.php Middle Right
Home.php BottomAdd three more just like this. Note the box classes for thebackgrounds. We’re going to have to change those...
End of Home.php
SO WHAT’S UP WITH THESEWIDGETS?
Close-Up of Widget Design
Widget Sliced for Site
Test CSS for Widgets/* JUST SOMETHING TO HOLD THE BOX TOGETHER IN A FLOATING AREA */.box-area {        float: left;       ...
Test HTML for Widgets<div class="box-area">     <div class="box-header-blue"><divclass="head-text">BOX HEADER TEXT</div></...
What This Looks Like
Original Genesis Widget Code      <div id="home-bottom-bg">      <div id="home-bottom">             <div class="home-botto...
Translating CSS Test to GenesisThis looked great at first. Who can see the problem with thissolution?
So Where Can We Put the CSS?In the functions.php file
The Final Home PageLook, Ma! No Tabs.
Final Home Page, 2
Locations Page
Success Stories
Where to Find UsSallie Goetsch           Linda Shumwpfangirl.com            shumdesign.com
Upcoming SlideShare
Loading in...5
×

From a Fireworks Comp to a Genesis Child Theme, Step by Step

3,816

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,816
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

From a Fireworks Comp to a Genesis Child Theme, Step by Step

  1. 1. From a Fireworks Compto a Genesis Child Theme Linda Shum & Sallie Goetsch 7/24/11
  2. 2. What’s Fireworks?
  3. 3. Why Some People Like Fireworks Better Than Photoshop• Multiple Pages • Grouping• Symbols • Interactive• Styles Gradients• Vector Objects • Web Layers• Libraries • Slice-Scaling • Easy to Learn http://boagworld.com/design/fireworks-vs-photoshop/
  4. 4. What’s Genesis?
  5. 5. Why Genesis?• Genesis is Search • Genesis Lets You Engine Optimized Update Your Site• Genesis Offers Great- Instantly Looking Turn-key • Genesis Makes Designs Customizing Your Site• Genesis Gives You Incredibly Easy Unlimited Everything • Genesis has Custom• Genesis Gives You Widgets and Layout State-of-the-Art Options Security
  6. 6. Theme Options
  7. 7. Custom Widgets
  8. 8. Original Design
  9. 9. Challenges With This Design• Header and Footer Menus• Graphite outlines around boxes• Asymmetric drop shadows behind boxes• Tabbed slider with rotating images• Exact spacing
  10. 10. Pillaging Child Themes
  11. 11. What Came from Where• Top and Bottom menus from News Theme• Main menu from Mocha Theme• Tabbed slider from Venture Theme• Four-widget home page layout from Executive Theme• Large widgeted footer from Platinum Theme
  12. 12. News Theme Header Menu
  13. 13. News Theme Header Menu Code Don’t ask ME what this is doing in functions.php. I didn’t write it that way.
  14. 14. Mocha Menu
  15. 15. Venture Theme Slider
  16. 16. Executive Theme Widgets
  17. 17. Platinum Theme Footer
  18. 18. Contents of Theme Folder
  19. 19. Theme Images Folder
  20. 20. Theme Lib Folder
  21. 21. Style.css (Key to a Child Theme)
  22. 22. Functions.php
  23. 23. Registering WidgetsRemember this: we’re going to need to make some changes here.
  24. 24. THE ORIGINAL HOME PAGE
  25. 25. Home.php: Tabbed Slider
  26. 26. Home.php Top Right
  27. 27. Home.php Mission Statement
  28. 28. Home.php Middle Right
  29. 29. Home.php BottomAdd three more just like this. Note the box classes for thebackgrounds. We’re going to have to change those, too.
  30. 30. End of Home.php
  31. 31. SO WHAT’S UP WITH THESEWIDGETS?
  32. 32. Close-Up of Widget Design
  33. 33. Widget Sliced for Site
  34. 34. Test CSS for Widgets/* JUST SOMETHING TO HOLD THE BOX TOGETHER IN A FLOATING AREA */.box-area { float: left; margin: 0 15px 0 0;}/* THE ACTUAL BOX, HEAD ON TOP, BOX WITH BACKGROUND, AND A BOTTOM */.box-header-blue { background: #FFFFFF url(box-head-blue.png) no-repeat; width: 235px; height: 45px; color: #FFFFFF;}.box { background: #FFFFFF url(box-back.png) no-repeat; background-position: bottom right; width: 235px;}.box-bottom { background: #FFFFFF url(box-bottom.png) no-repeat; width: 235px;}
  35. 35. Test HTML for Widgets<div class="box-area"> <div class="box-header-blue"><divclass="head-text">BOX HEADER TEXT</div></div> <div class="box"> <div class="content"> The box and itscontents.<br><br> And another line of text.<br> And some more.<br> Just to fill things up abit.<br><br> And something to end with. </div> </div> <div class="box-bottom">&nbsp;</div></div>
  36. 36. What This Looks Like
  37. 37. Original Genesis Widget Code <div id="home-bottom-bg"> <div id="home-bottom"> <div class="home-bottom-1"> <?php if (!dynamic_sidebar(Home Bottom #1)) : ?> <div class="widget"><h4><?php _e("Home Bottom #1 Widget", genesis); ?></h4><p><?php _e("This is a widgeted area which is called HomeBottom #1. It is using the Genesis - Featured Post widgetto display what you see on the Executive child theme demosite. To get started, log into your WordPress dashboard,and then go to the Appearance > Widgets screen. There youcan drag the Genesis - Featured Post widget into the HomeBottom #1 widget area on the right hand side. To get theimage to display, simply upload an image through the mediauploader on the edit post screen and publish your post.The Featured Post widget will know to display the postimage as long as you select that option in the widgetinterface.", genesis); ?></p> </div> <?php endif; ?> </div><!-- end .home-bottom-1 -->
  38. 38. Translating CSS Test to GenesisThis looked great at first. Who can see the problem with thissolution?
  39. 39. So Where Can We Put the CSS?In the functions.php file
  40. 40. The Final Home PageLook, Ma! No Tabs.
  41. 41. Final Home Page, 2
  42. 42. Locations Page
  43. 43. Success Stories
  44. 44. Where to Find UsSallie Goetsch Linda Shumwpfangirl.com shumdesign.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×