Search for this code on each page:

<div class="twitter-content clearfix" id="twitter_div">
    <ul id="twitter_update_list"><li>Please wait, fetching latest tweets...</li>
    </ul>
</div>
<div class="follow-me-button"><a class="button-press" href="#">Follow my tweets</a></div>

Replace this code with:

<div style="padding: 12px;" class="clearfix">
<div id="fb-root" /><script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
    //<![CDATA[
        document.write('<fb:like-box href="http://www.facebook.com/pages/ThemeCatcher/203183303039393" width="217" show_faces="true" border_color="#f7f7f7" stream="false" header="false"></fb:like-box>');
    //]]>
</script>
</div>

Change the URL http://www.facebook.com/pages/ThemeCatcher/203183303039393 to your own Facebook page. Search for:

<span class="up-ico">Twitter</span>

Replace with:

<span class="up-ico">Facebook</span>

In the file js/scripts.js, find this text:

// Bind the view map button

Above this line, add the code:

$('#twitter-pop-out-trigger').click();

Regards, TC

Thank you for replying so quickly! Trouble is, I forgot to mention I am using the Ajax version. i have a few more questions, and my page is DavidVRJ.co.nf

1. Every time the ”#” link changes, the Facebook feed opens or closes. Plus, when you first open my site, there is no ”#”, so the feed is closed by default. Is there any way to have it so the feed opens when you first open the site, and only opens when you want to click the trigger button or go to #index?

2. I want to use colorbox, but whenever you click a photo it opens the popup in a new page. How do I get it working? I’ve looked in the colorbox site and can’t figure it out, sorry.

3.how do I change the black header strip so instead of reaching the ends of the page, it is similar to header-middle from pearl?

Once again, thanks for such an impressive, clean program!

The “headshots” page is colorbox

1. Can you remove the code you added before

$('#twitter-pop-out-trigger').click(); 

In scripts.ajax.js at the end of the block of code starting with the comment

// Bind the Twitter button

there is a line looking like this:

});

Change that to:

}).click();

2. In the head of the page find this line:

<link rel="stylesheet" type="text/css" href="js/serene/serene.css" />

Replace it with:

<link rel="stylesheet" type="text/css" href="js/colorbox/colorbox.css" />

Also find this line:

<script type="text/javascript" src="js/serene/jquery.serene.js"></script>

Replace this with:

<script type="text/javascript" src="js/colorbox/jquery.colorbox-min.js"></script>

In the js/scripts.ajax.js file, find this code:

// Gallery
$('.serene-portfolio a.portfolio-thumb-link').serene({
    onOpen: $.fullscreen.unbindKeyboard,
    onClose: $.fullscreen.bindKeyboard
});

Replace it with:

$('.colorbox-portfolio a.portfolio-thumb-link').colorbox({
    current: "Image {current} of {total}",
    onOpen: $.fullscreen.unbindKeyboard,
    onClosed: $.fullscreen.bindKeyboard
});

3. Our designer will get back to you about this.

Regards, TC

3: Go to Theme Options – Global – Layout – Header style – and change to: Not stretched.

1. worked like a charm, but i’m still having trouble with 2 and 3.

2. it didn’t work at all. in Storm Ajax version i would like my portfolio pages to be:

colorbox-2columns.html colorbox-3columns.html fullscreen-3columns.html

I can settle for only colorbox, but your method didn’t work.

in colorbox-2columns.html, <link rel=”stylesheet” type=”text/css” href=”js/serene/serene.css” /> did not exist and <link rel=”stylesheet” type=”text/css” href=”js/colorbox/colorbox.css” /> was the default code, so I figured you were referring to fullscreen-2columns.html since the fullscreen version already works fine in ajax. i replaced the two lines of code you posted into that one instead

I tried both the 2column.html pages with the script.ajax.js replacement $(’.colorbox-portfolio a.portfolio-thumb-link’).colorbox({ current: “Image {current} of {total}”, onOpen: $.fullscreen.unbindKeyboard, onClosed: $.fullscreen.bindKeyboard });

but it wouldn’t work and none of the galleries at all would open, One thing i noticed was that when I clicked either one of the colorbox galleries i referred to and then the “portfolio” button, only then would it pop up, and the photos would still only open in a new page. Hopefully I’m being clear enough; the my site for now is once again davidvrj.co.nf and the headshots tab is the one I want to have working with colorbox

3. how do i get into these pages you mentioned? I tried changing this in files

header-outer { margin: 0 auto; color: #FFF; background-image: url(../images/header.png); background-repeat: repeat-x; background-position: left 15px; border-top-width: 5px; border-top-style: solid; border-top-color: #000;

and changed background-repeat into Not stretched in a variety of ways but i wasn’t able to. I looked in many places and I think i just don’t know how to get to the place you’re talking about

2. The index.html is the only page you need to make the changes to. Please follow the guide again with that in mind. However, now that you say you want to keep the full screen gallery, do not remove any of the serene/full screen code where I told you to, instead just add in the colorbox code below it. This also applies to the scripts.ajax.js file, keep the existing gallery code and add the colorbox code below it.

Regards, TC

3: Sorry, I thought you had the WP version! My fault.

Copy this CSS into the bottom of your stylesheet:

#header-outer {
background: none;
border: 0 none;
}
#header-inner {
background-image: url(../images/header.png);
background-position: left 15px;
background-repeat: repeat-x;
border-top: 5px solid #000000;
padding: 0 20px;
width: 900px;
}

That should do the trick.

Regards, Allan

great success! Thank you so much!

Sorry, one more thing; any tips on getting quicksand to work on this Ajax version Storm? for, say, 4 column fullscreen?

If you look in the page source, you will find this line

<script type="text/javascript" src="js/scripts.js"></script>

Before this line, add the code for the single background image.

<script type="text/javascript">
var backgrounds = [
   'images/backgrounds/your_background1.jpg'
];
</script>

Regards, TC

For some gallery types you can do this, what one are you using?

Regards, TC