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

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 • Interactive• Styles Gradients• Vector Objects • Web Layers• Libraries • Slice-Scaling • Easy to Learn http://boagworld.com/design/fireworks-vs-photoshop/

What’s Genesis?

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

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 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, too.

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; 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"><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"> </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 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>

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

http://eastbaywp.com	253
http://www.wpfangirl.com	35
http://local.wpfangirl.com	5

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

by East Bay WordPress Meetup on Jul 24, 2011

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 293

Statistics

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