UPDATED Jan 21, 2012: Add New Video Link
Check out the 6 Other Videos I Created:
- Advanced Custom CSS in YOOthemes Video Series

Hey Natalie,

I recorded a screencast using your staging website to help you understand how to work with the YOOtheme Template on WordPress.

WordPress YOOtheme Setup

Watch Video Now - Time: 1 hour 8 min.

Description: In this video, I provide a detailed review on converting an existing WordPress website to run on YOOtheme's Big Easy template. The website being reviewed is www.natalie-brown.com. The requested approach was to apply elements of the Big Easy Demo to the new website. In the process, we explore managing supplemental content in WordPress Widgets and YOOtheme Widget Settings. Firebug is used quite a bit to review the structure of the demo website to better understand how to replicate the site structure and Module Positions.

Correction Notes from Video:

Issue with Markup in Logo Widget:
It appears I made a mistake in the video when I covered the Logo Widget. I added an image reference to your logo and wrapped it with an <a> link tag.

<a href="/" title="Natalie-Brown.com">  
    <img src="/wp-content/uploads/nb-weblogo.png" alt="Natalie Brown Music" width="185" height="82"/>  
</a>

Apparently, the Logo Widget adds the <a> link tag already, causing an invalid markup structure as seen below:

<a href="http://web.natalie-brown.com" id="logo">  
<a href="/" title="Natalie-Brown.com">  
    <img src="/wp-content/uploads/nb-weblogo.png" alt="Natalie Brown Music" width="185" height="82"/>  
</a>  
</a>

After I removed my <a> tag from the Logo Widget, the header issue was corrected:

<img src="/wp-content/uploads/nb-weblogo.png" alt="Natalie Brown Music" width="185" height="82"/>  

The screencast is not as organized as I would prefer. However, there is a lot of great information and useful tips to get you started.

Let me know if you have any questions.

Best Regards,

David Carroll

The linked video doesn't seem to be working.

Glad the video was helpful. I'm not sure when I'll have time to do another video building on this first one. Have you reviewed the 6 videos I created on Advanced Custom CSS in YOOthemes Video Series?

David! This is great! I will spend some time reviewing this today and let you know if I have any further questions. Should I checkmark this now or wait until I have things set up as I'd like?

Also are there tutorials anywhere else about using the Widgetkit items if I want to set up a gallery etc?

Thank you!

Nat

Go ahead and check this as answered since it addresses your question about how you can replicate the content. I'll try to do another video that covers WidgetKit setup next. Hopefully, that will be shorter for you to review.

Thanks,

David

Ok thanks!

Alright! Amazing video David!

Here are some notes... basically through using a straight demo installation in another folder, I was able to switch back and forth between the development site and the demo site (the one I installed on my server) to try the best I could to replicate the parts of the demo that I wanted to have on my own site. This allowed me to figure out styling elements as well as positioning.

There are just a few questions I have:
1. How can I remove post author name and date (can I do this in the theme controls or do I have to comment out the PHP/CSS that controls this within the WP main files?)
2. On Widgetkit Gallery how do I target for _blank for link?
3. Header >> why is header so tall? Can I shrink the height at all or is something i'm doing making it so tall?
4. How can I position the right side social icon items like they are in the demo? http://www.yootheme.com/demo/wordpress/bigeasy

Refer to dev site here: http://web.natalie-brown.com/

Again, amazing and helpful video. I was able to sort out the Widgetkit stuff by referring to the demo backend on the 2nd install I had that replicated the exact demo. I have yet to examine every feature, but will be excited to delve into it when the time comes.

Thanks again!

Thanks for the feedback. Great idea on setting up the demo installation as a reference guide. I'm glad the demo has enabled you to figure a lot out.

I've responded to your 4 questions below.

Item 1: To remove post author and date, add the following line to your /css/custom.css file:

#system .item > header .meta {  
    color: #999999;  
    display: none;  
}  

Item 2:
WidgetKit doesn't support the option to add target="_blank" without modifying the code or writing some jQuery to add it to the page from a separate file. Although the jQuery option would be the easiest (not modifying WidgetKit code) I suggest you not use external links from the home page gallery. The idea of this section is to highlight the best in your site. Leave your site immediately from this place can leave the visitor confused as to why you pushed them away so quickly. Rather, I'd consider using Social Media style icons with these links and place them in the header or below the gallery.

Item 3:
It appears I made a mistake in the video when I covered the logo Widget. I added an image reference to your logo and wrapped it with an <a> link tag.

<a href="/" title="Natalie-Brown.com">  
    <img src="/wp-content/uploads/nb-weblogo.png" alt="Natalie Brown Music" width="185" height="82"/>  
</a>

Apparently, the Logo Widget adds the <a> link tag already, causing an invalid markup structure as seen below:

<a href="http://web.natalie-brown.com" id="logo">  
<a href="/" title="Natalie-Brown.com">  
    <img src="/wp-content/uploads/nb-weblogo.png" alt="Natalie Brown Music" width="185" height="82"/>  
</a>  
</a>

After I removed my <a> tag from the Logo Widget, the header issue was corrected:

<img src="/wp-content/uploads/nb-weblogo.png" alt="Natalie Brown Music" width="185" height="82"/>  

Item 4:
It appears you figured this out. Essentially, add the markup below to the Widget Panel: toolbar-r

<ul class="social-icons">  
<li class="twitter"><a target="_blank" href="http://www.twitter.com/yootheme"></a></li>  
<li class="dribbble"><a target="_blank" href="http://www.dribbble.com/yootheme"></a></li>  
<li class="facebook"><a target="_blank" href="http://www.facebook.com"></a></li>  
<li class="rss"><a target="_blank" href="http://www.yootheme.com/rss/"></a></li>  
</ul>  

I think that covers your questions.

Best Regards,

David Carroll

Thanks for posting the video help David, any chance of seeing Part 2?

Being a first time user of WP, I'm finding it very difficult replicating the Big Easy home page with slider and images being aligned to the edge of panels.

Regards,
Taso.