Post on 15-May-2015
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
• Symbols
• Styles
• Vector Objects
• Libraries
• Grouping
• Interactive Gradients
• Web Layers
• Slice-Scaling
• Easy to Learn
http://boagworld.com/design/fireworks-vs-photoshop/
What’s Genesis?
Why Genesis?
• Genesis is Search Engine Optimized
• Genesis Offers Great-Looking Turn-key Designs
• Genesis Gives You Unlimited Everything
• Genesis Gives You State-of-the-Art Security
• Genesis Lets You Update Your Site Instantly
• Genesis Makes Customizing Your Site Incredibly Easy
• Genesis has Custom Widgets and Layout Options
Theme Options
Custom Widgets
Original Design
Challenges With This Design
• Header and Footer Menus
• Graphite outlines around boxes
• Asymmetric drop shadows behind boxes
• Tabbed slider with rotating images
• Exact spacing
Pillaging Child Themes
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
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 Widgets
Remember 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 Bottom
Add three more just like this. Note the box classes for the backgrounds. We’re going to have to change those, too.
End of Home.php
SO WHAT’S UP WITH THESE WIDGETS?
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;
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;
}
Test HTML for Widgets<div class="box-area">
<div class="box-header-blue"><div class="head-text">BOX HEADER TEXT</div></div>
<div class="box"><div class="content">
The box and its contents.<br><br>
And another line of text.<br>And some more.<br>Just to fill things up a
bit.<br><br>And something to end with.
</div></div><div class="box-bottom"> </div>
</div>
What This Looks Like
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 Home Bottom #1. It is using the Genesis - Featured Post widget to display what you see on the Executive child theme demo site. To get started, log into your WordPress dashboard, and then go to the Appearance > Widgets screen. There you can drag the Genesis - Featured Post widget into the Home Bottom #1 widget area on the right hand side. To get the image to display, simply upload an image through the media uploader on the edit post screen and publish your post. The Featured Post widget will know to display the post image as long as you select that option in the widget interface.", 'genesis'); ?></p>
</div><?php endif; ?></div><!-- end .home-bottom-1 -->
Translating CSS Test to Genesis
This looked great at first. Who can see the problem with this solution?
So Where Can We Put the CSS?
In the functions.php file
The Final Home Page
Look, Ma! No Tabs.
Final Home Page, 2
Locations Page
Success Stories
Where to Find Us
Sallie Goetsch
wpfangirl.comLinda Shum
shumdesign.com