• 0

I want one theme to act like another!


Question

Hey guys and gals. I have a new theme that I am working with and I have hit a road block. I want the portfolio from my new theme to act like the portfolio page from my old theme. Simply put, the old theme had video pop-outs that linked to my youtube page and the new theme does not and I want it to.

For those that have helped me before, you know that I don't know much about coding so anything that I am missing out feel free to educate me and I will give you what you need so we can come to a conclusion. Thanks, Also, I am literally working on 3 hours of sleep in the last almost 48 hours so I might not be making much sense lol. Thanks in advance for any help!

Edit: Don't know if it's my browser but the link to my old theme isn't working. Here is the theme page. I don't have the portfolio page on my personal site so there is no other existing link.

Link to comment
Share on other sites

24 answers to this question

Recommended Posts

  • 0

The theme in the second link doesn't load for me.

Thought it was just my browser. Damn. Let me see if I can take a video with my phone in Dreamweaver and upload it.

Link to comment
Share on other sites

  • 0

I think the Accentuate Premium HTML Theme / Business Portfolio preview link is down.

But by the sounds of it you are referring to the lightbox and it's ability to load videos from youtube within the same window.

It's probably just a small coding thing but would need to see the old theme to be sure.

Edit:

See this portfolio page: Here

When you mouse over the images do they just 'pop out' and nothing else? What happens when you click them?

I think my assumption above is correct.. You will need to code in some lightbox to get it running the way you had it before.

Link to comment
Share on other sites

  • 0

I think the Accentuate Premium HTML Theme / Business Portfolio preview link is down.

But by the sounds of it you are referring to the lightbox and it's ability to load videos from youtube within the same window.

It's probably just a small coding thing but would need to see the old theme to be sure.

Edit:

See this portfolio page: Here

When you mouse over the images do they just 'pop out' and nothing else? What happens when you click them?

I think my assumption above is correct.. You will need to code in some lightbox to get it running the way you had it before.

You hit the nail on the head and that's why I love this damn place lol. The video is just about finished uploading and that's what it is. They pop-out then the video plays right there. You got it! The video is almost done and I will post it. No sound tho...

Edit: http://www.zshare.net/download/8560120546ef8818/

Link to comment
Share on other sites

  • 0

No probs mate.

Post up the code of the new template portfolio page and we'll help you add the lightbox where it needs to go.

Edit:

So just to be clear, so I can get the files you will need, you want the portfolio in this screenshot

to be implemented in this page?

Right?

Link to comment
Share on other sites

  • 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DEBONAIR</title>
<link rel="stylesheet" type="text/css" href="css/all.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/colorbox.css" media="all" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Debonair-Calibri.js"></script>
<script type="text/javascript" src="js/Cufon-Settings.js"></script>
<script type="text/javascript" src="js/subnavie6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a[rel='cbox']").colorbox({transition:"fade"});
});
</script>
<!--[if lt IE 7]>
<script type="text/javascript" src="js/ie-png.js"></script>
<link rel="stylesheet" type="text/css" href="css/lt7.css" />
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
</head>
<body>
<!-- Start Wrapper -->
<div id="wrapper">
   <!--Start Wrapper Sub Elements -->
   <div class="w-main">
      <div class="w-top"> </div>
      <div class="w-content">
         <div class="main-wrapper">
            <!-- Start Header -->
            <div id="header">
               <div class="top">
                  <!-- Start Logo -->
                  <div class="logo"><a href="index.html"><img src="images/logo.gif" alt="Web 2.0 Business Template"/></a></div>
                  <!-- End Logo -->
                  <!-- Start Tagline -->
                  <div class="tagline">XXXXXXXXXXXXXXX</div>
                  <!-- End Tagline -->
                  <!-- Start Call Us Section -->
                  <div class="call-box"> <strong>CALL US NOW:</strong><em>XXXXXXXXXXXXXX</em> </div>
                  <!-- End Call Us Section -->
               </div>
               <!-- Start Nav Holder -->
               <div class="holder">
                  <!-- Start Nav -->
                  <ul id="nav">
                     <li><a href="index.html"><span class="c"><span>Home</span></span></a></li>
                     <li><a href="about.html"><span class="c"><span>About Us</span></span></a>
                        <!-- Start Sub Nav -->
                        <ul>
                           <li><a href="layout.html">Full Width Page Layout</a></li>
                           <li><a href="layout-sidebar.html">Page Layout with Sidebar</a></li>
                        </ul>
                        <!-- End Sub Nav -->
                     </li>
                     <li><a href="services.html"><span class="c"><span>Our Services</span></span></a></li>
                     <li class="selected"><a href="testimonials.html"><span class="c"><span>Testimonials</span></span></a></li>
                     <li><a href="articles.html"><span class="c"><span>Articles</span></span></a></li>
                     <li><a href="contact.html"><span class="c"><span>Contact Us</span></span></a></li>
                  </ul>
                  <!-- End Nav -->
                  <!-- Start Search -->
                  <form id="search-form" method="get" action="" class="form-search">
                     <fieldset>
                     <input name="search" type="text" class="txt" id="search" value="Search for..." onfocus="if(this.value == 'Search for...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search for...';}"/>
                     <input type="submit" value="Submit" class="btn-search"/>
                     </fieldset>
                  </form>
                  <!-- End Search -->
               </div>
               <!-- End Nav Holder -->
            </div>
            <!-- End Header -->
            <!-- Start Main -->
            <div id="main">
               <!-- Start Heading Banner -->
               <div class="pageheader">
                  <div class="holder">
                     <!-- Start Breadcrambs -->
                     <ul class="breadcrumbs">
                        <li> <a href="#">Home</a> </li>
                     </ul>
                     <!-- End Breadcrambs -->
                     <h1>Testimonials</h1>
                  </div>
               </div>
               <!-- End Heading Banner -->
               <!-- Start Inner Page Structure -->
               <div class="main">
                  <!-- Start Page Content -->
                  <div class="pagecontent">
                     <div class="txt-content">
                        <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it.</h2>
                        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
                     </div>
                     <!-- Start 3 Column Holder -->
                     <div class="box-holder">
                        <ul>
                           <!-- Start Portfolio Item #1 -->
                           <li>
                              <div class="img"><a rel="cbox" href="images/portfolio/zoom1.jpg"><img src="images/portfolio/thumb1.jpg" alt="" /></a></div>
                              <h3>What is Lorem Ipsum</h3>
                              <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                           </li>
                           <!-- End Portfolio Item #1 -->
                           <!-- Start Portfolio Item #2 -->
                           <li>
                              <div class="img"><a rel="cbox" href="images/portfolio/zoom1.jpg"><img src="images/portfolio/thumb1.jpg" alt="" /></a></div>
                              <h3>Where does it come from</h3>
                              <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                           </li>
                           <!-- End Portfolio Item #2 -->
                           <!-- Start Portfolio Item #3 -->
                           <li>
                              <div class="img"><a rel="cbox" href="images/portfolio/zoom1.jpg"><img src="images/portfolio/thumb1.jpg" alt="" /></a></div>
                              <h3>Why do we use it</h3>
                              <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                           </li>
                           <!-- End Portfolio Item #3 -->
                           <!-- Start Portfolio Item #4 -->
                           <li>
                              <div class="img"><a rel="cbox" href="images/portfolio/zoom1.jpg"><img src="images/portfolio/thumb1.jpg" alt="" /></a></div>
                              <h3>What is Lorem Ipsum</h3>
                              <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                           </li>
                           <!-- End Portfolio Item #4 -->
                           <!-- Start Portfolio Item #5 -->
                           <li>
                              <div class="img"><a rel="cbox" href="images/portfolio/zoom1.jpg"><img src="images/portfolio/thumb1.jpg" alt="" /></a></div>
                              <h3>Where does it come from</h3>
                              <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                           </li>
                           <!-- End Portfolio Item #5 -->
                           <!-- Start Portfolio Item #6 -->
                           <li>
                              <div class="img"><a rel="cbox" href="images/portfolio/zoom1.jpg"><img src="images/portfolio/thumb1.jpg" alt="" /></a></div>
                              <h3>Why do we use it</h3>
                              <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                           </li>
                           <!-- End Portfolio Item #6 -->
                        </ul>
                     </div>
                     <!-- End Multi Column Holder -->
                     <!-- Start Blog Pagination -->
                     <div class="pagination-holder">
                        <ul class="pagination">
                           <li><a href="#" class="btn-last"><span>« First</span></a></li>
                           <li><span>...</span></li>
                           <li><a href="#"><span>«</span></a></li>
                           <li><a href="#"><span>1</span></a></li>
                           <li><strong>2</strong></li>
                           <li><a href="#"><span>3</span></a></li>
                           <li><a href="#"><span>4</span></a></li>
                           <li><a href="#"><span>5</span></a></li>
                           <li><a href="#"><span>»</span></a></li>
                           <li><span>...</span></li>
                           <li><a href="#" class="btn-last"><span>Last »</span></a></li>
                        </ul>
                     </div>
                     <!-- End Blog Pagination -->
                  </div>
                  <!-- End Page Content -->
               </div>
               <!-- End Inner Page Structure -->
            </div>
            <!-- End Main -->
            <div class="lower-section">
               <div class="col-holder">
                  <div class="holder">
                     <!-- Start Column -->
                     <div class="col">
                        <h3 class="null">What is a FICO score?</h3>
                        <p>A FICO score provides a snapshot of risk that banks and other institutions use to help make lending decisions. Applicants with higher FICO scores may be offered better interest rates on mortgages or car loans.</p>
                        <div class="link-holder"> <a href="#" class="more-dark">Learn More</a> </div>
                     </div>
                     <!-- End Column -->
                     <!-- Start Column -->
                     <div class="col">
                        <h3 class="icon2">Lorem Ipsum Generators </h3>
                        <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
                        <div class="link-holder"> <a href="#" class="more-dark">Learn More</a> </div>
                     </div>
                     <!-- End Column -->
                     <!-- Start Column -->
                     <div class="col">
                        <h3 class="icon3">Subscribe to Our Newsletter</h3>
                        <!-- Start Newsletter Form -->
                        <form id="newsletter" method="get" action="" class="form-add">
                           <fieldset>
                           <div class="row">
                              <label for="name">Your Name:</label>
                              <div class="txt">
                                 <input id="name" name="name" type="text" />
                              </div>
                           </div>
                           <div class="row">
                              <label for="email">Email Address:</label>
                              <div class="txt">
                                 <input id="email" name="email" type="text" />
                              </div>
                           </div>
                           <div class="btn-holder">
                              <button type="submit" class="formbutton"><span>Sign Up</span></button>
                              <a href="#">Unsubscribe</a> </div>
                           </fieldset>
                        </form>
                        <!-- End Newsletter Form -->
                     </div>
                     <!-- End Column -->
                  </div>
               </div>
               <div class="bottom">
                  <!-- Start Follow Us Links -->
                  <div class="follow-box"> <strong>Follow us on:</strong>
                     <ul>
                        <li><a href="XXXXXXXXXXXXXXXXXXXXXXX" class="facebook">facebook</a></li>
                        <li><a href="#" class="twitter">twitter</a></li>
                        <li><a href="#" class="rss">rss</a></li>
                     </ul>
                  </div>
                  <!-- End Follow Us Links -->
                  <div class="txt-holder">
                     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the... <a href="#" class="more-dark">Find out more</a></p>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="w-bottom"></div>
   </div>
   <!--End Wrapper Sub Elements -->
   <!-- Start Footer -->
   <div id="footer">
      <!--Start Footer Nav -->
      <div class="footer-nav">
         <div class="w1">
            <div class="w2">
               <ul class="menu">
                  <li><a href="index.html">Home</a></li>
                  <li><a href="about.html">About Us</a></li>
                  <li><a href="services.html">Our Services</a></li>
                  <li><a href="testimonials.html">Testimonials</a></li>
                  <li><a href="articles.html">Articles</a></li>
                  <li><a href="contact.html">Contact Us</a></li>
               </ul>
            </div>
         </div>
      </div>
      <!--End Footer Nav -->
      <p>Copyright  © 2011 <a href="XXXXXXXXXXXXXXXXXXXXXXXXXX">XXXXXXXXXXXXXXXXXXXXXXXXXX</a>. All rights reserved.</p>
   </div>
   <!-- End Footer -->
</div>
<!-- End Wrapper -->
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>

No probs mate.

Post up the code of the new template portfolio page and we'll help you add the lightbox where it needs to go.

Edit:

So just to be clear, so I can get the files you will need, you want the portfolio in this screenshot

to be implemented in this page?

Right?

Yes

Edit: The portfolio page of the Debonair theme.

Link to comment
Share on other sites

  • 0

Ok cool - you will need to download the PrettyPhoto plugin.

In that link there is a demo half way down the page called YouTube Content - just confirm thats how you want your videos to load for me.

I also need to find the jquery they used to create that rollover effect. If you have the old theme there should be some jquery/js files with the name of the plugin they used. Do you have that by any chance?

Link to comment
Share on other sites

  • 0

Ok cool - you will need to download the PrettyPhoto plugin.

In that link there is a demo half way down the page called YouTube Content - just confirm thats how you want your videos to load for me.

So I was on the right path. That link you gave me looks to be very very helpfuly. I already have the plugin since I own the Accentuate theme and the Debonair theme. So I'm guessing that all I have to do is follow the instructions from the link you provided and I should be good, correct?

Ok cool - you will need to download the PrettyPhoto plugin.

In that link there is a demo half way down the page called YouTube Content - just confirm thats how you want your videos to load for me.

I also need to find the jquery they used to create that rollover effect. If you have the old theme there should be some jquery/js files with the name of the plugin they used. Do you have that by any chance?

Yeah I will take a quick screenshot...

Edit: post-111965-0-02344900-1295766308.jpg

Link to comment
Share on other sites

  • 0

Yeh pretty much.

That's what the old theme is using to load the videos. As for the image rollovers they should also be in the original template files.

So you basically replace one with the other and your good to go.

Don't forget to replace the current css, js, and jquery files with the old files and add them into your header and </body> tags for the relevant pages.

Link to comment
Share on other sites

  • 0

Yeh pretty much.

That's what the old theme is using to load the videos. As for the image rollovers they should also be in the original template files.

So you basically replace one with the other and your good to go.

Don't forget to copy over all the new css, js, and jquery files into your header and </body> tags for the relevant pages.

So I will have to edit more than a few pages correct?

Link to comment
Share on other sites

  • 0

So I will have to edit more than a few pages correct?

Nah just the page with the portfolio gallery in it.

Edit: post-111965-0-02344900-1295766308.jpg

Yeh that screenshot shows the js files for the PrettyPhoto plugin.

It's probably easier to download the original files from the site and start over.

Link to comment
Share on other sites

  • 0

Nah just the page with the portfolio gallery in it.

Yeh that screenshot shows the js files for the PrettyPhoto plugin.

It's probably easier to download the original files from the site and start over.

Okay, thank you so much. I really really appreciate it. If I have any other questions I will post back in here. I'm off to bed, gotta go to Disney in the morning. Thanks again...

Link to comment
Share on other sites

  • 0

Primarily this is what you will need to do to the code:

I've just trimmed it to one portfolio image to give you an example.

1. Download the prettyPhoto plugin.

2. Unzip all the files and add them to the relevant folder i.e. css files go in your css folder, js files go in your js folder etc etc

3. Add the following to the header section of the page:

&lt;script src="js/jquery.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /&gt;
&lt;script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;

4. Add the following just before the </body> tag.

&lt;script type="text/javascript" charset="utf-8"&gt;
		$(document).ready(function(){
			$("a[rel^='prettyPhoto']").prettyPhoto();
		});
	&lt;/script&gt;

*Note: Check documentation file to ensure you have the parameters set how you want.*

5. Change the rel attribute from cboc to prettyPhoto.

&lt;!-- Start 3 Column Holder --&gt;
                     &lt;div class="box-holder"&gt;
                        &lt;ul&gt;
                           &lt;!-- Start Portfolio Item #1 --&gt;
                           &lt;li&gt;
                              &lt;div class="img"&gt;&lt;a rel="[color="#FF0000"]prettyPhoto[/color]" href="images/portfolio/zoom1.jpg"&gt;&lt;img src="images/portfolio/thumb1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;h3&gt;What is Lorem Ipsum&lt;/h3&gt;
                              &lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&lt;/p&gt;
                           &lt;/li&gt;
                           &lt;!-- End Portfolio Item #1 --&gt;
                        &lt;/ul&gt;
                     &lt;/div&gt;
                     &lt;!-- End Multi Column Holder --&gt;

*Note: Check the code on this page to ensure you are implementing the right code for the right file type i.e. if you want a video to load, change the code to the "YouTube content" code as detailed on that link/page.*

NB. Make sure your images match the width and height specifications set in the css file under the 'box-holder img class'.

Link to comment
Share on other sites

  • 0

Put Disney off till tomorrow, gotta finish this up first. I made all the changes but for some reason it isn't working. I am probably missing something very minute.

Here is the OLD code.

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;DEBONAIR&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href="css/all.css" media="all" /&gt;
&lt;link rel="stylesheet" type="text/css" href="css/colorbox.css" media="all" /&gt;
&lt;script type="text/javascript" src="js/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.colorbox-min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/cufon-yui.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/Debonair-Calibri.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/Cufon-Settings.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/subnavie6.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function(){
$("a[rel='cbox']").colorbox({transition:"fade"});
});
&lt;/script&gt;
&lt;!--[if lt IE 7]&gt;
&lt;script type="text/javascript" src="js/ie-png.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="css/lt7.css" /&gt;
&lt;![endif]--&gt;
&lt;!--[if IE]&gt;
&lt;link rel="stylesheet" type="text/css" href="css/ie.css" /&gt;
&lt;![endif]--&gt;
&lt;!--[if IE 7]&gt;
&lt;link rel="stylesheet" type="text/css" href="css/ie7.css" /&gt;
&lt;![endif]--&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- Start Wrapper --&gt;
&lt;div id="wrapper"&gt;
   &lt;!--Start Wrapper Sub Elements --&gt;
   &lt;div class="w-main"&gt;
      &lt;div class="w-top"&gt; &lt;/div&gt;
      &lt;div class="w-content"&gt;
         &lt;div class="main-wrapper"&gt;
            &lt;!-- Start Header --&gt;
            &lt;div id="header"&gt;
               &lt;div class="top"&gt;
                  &lt;!-- Start Logo --&gt;
                  &lt;div class="logo"&gt;&lt;a href="index.html"&gt;&lt;img src="images/logo.gif" alt="Web 2.0 Business Template"/&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;!-- End Logo --&gt;
                  &lt;!-- Start Tagline --&gt;
                  &lt;div class="tagline"&gt;XXXXXXXXXXXXXXX&lt;/div&gt;
                  &lt;!-- End Tagline --&gt;
                  &lt;!-- Start Call Us Section --&gt;
                  &lt;div class="call-box"&gt; &lt;strong&gt;CALL US NOW:&lt;/strong&gt;&lt;em&gt;XXXXXXXXXXXXXX&lt;/em&gt; &lt;/div&gt;
                  &lt;!-- End Call Us Section --&gt;
               &lt;/div&gt;
               &lt;!-- Start Nav Holder --&gt;
               &lt;div class="holder"&gt;
                  &lt;!-- Start Nav --&gt;
                  &lt;ul id="nav"&gt;
                     &lt;li&gt;&lt;a href="index.html"&gt;&lt;span class="c"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="about.html"&gt;&lt;span class="c"&gt;&lt;span&gt;About Us&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
                        &lt;!-- Start Sub Nav --&gt;
                        &lt;ul&gt;
                           &lt;li&gt;&lt;a href="layout.html"&gt;Full Width Page Layout&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="layout-sidebar.html"&gt;Page Layout with Sidebar&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                        &lt;!-- End Sub Nav --&gt;
                     &lt;/li&gt;
                     &lt;li&gt;&lt;a href="services.html"&gt;&lt;span class="c"&gt;&lt;span&gt;Our Services&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                     &lt;li class="selected"&gt;&lt;a href="testimonials.html"&gt;&lt;span class="c"&gt;&lt;span&gt;Testimonials&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="articles.html"&gt;&lt;span class="c"&gt;&lt;span&gt;Articles&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="contact.html"&gt;&lt;span class="c"&gt;&lt;span&gt;Contact Us&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;!-- End Nav --&gt;
                  &lt;!-- Start Search --&gt;
                  &lt;form id="search-form" method="get" action="" class="form-search"&gt;
                     &lt;fieldset&gt;
                     &lt;input name="search" type="text" class="txt" id="search" value="Search for..." onfocus="if(this.value == 'Search for...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search for...';}"/&gt;
                     &lt;input type="submit" value="Submit" class="btn-search"/&gt;
                     &lt;/fieldset&gt;
                  &lt;/form&gt;
                  &lt;!-- End Search --&gt;
               &lt;/div&gt;
               &lt;!-- End Nav Holder --&gt;
            &lt;/div&gt;
            &lt;!-- End Header --&gt;
            &lt;!-- Start Main --&gt;
            &lt;div id="main"&gt;
               &lt;!-- Start Heading Banner --&gt;
               &lt;div class="pageheader"&gt;
                  &lt;div class="holder"&gt;
                     &lt;!-- Start Breadcrambs --&gt;
                     &lt;ul class="breadcrumbs"&gt;
                        &lt;li&gt; &lt;a href="#"&gt;Home&lt;/a&gt; &lt;/li&gt;
                     &lt;/ul&gt;
                     &lt;!-- End Breadcrambs --&gt;
                     &lt;h1&gt;Testimonials&lt;/h1&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;!-- End Heading Banner --&gt;
               &lt;!-- Start Inner Page Structure --&gt;
               &lt;div class="main"&gt;
                  &lt;!-- Start Page Content --&gt;
                  &lt;div class="pagecontent"&gt;
                     &lt;div class="txt-content"&gt;
                        &lt;h2&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it.&lt;/h2&gt;
                        &lt;p&gt;Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.&lt;/p&gt;
                     &lt;/div&gt;
                     &lt;!-- Start 3 Column Holder --&gt;
                     &lt;div class="box-holder"&gt;
                        &lt;ul&gt;
                           &lt;!-- Start Portfolio Item #1 --&gt;
                           &lt;li&gt;
                              &lt;div class="img"&gt;&lt;a rel="cbox" href="images/portfolio/zoom1.jpg"&gt;&lt;img src="images/portfolio/thumb1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;h3&gt;What is Lorem Ipsum&lt;/h3&gt;
                              &lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&lt;/p&gt;
                           &lt;/li&gt;
                           &lt;!-- End Portfolio Item #1 --&gt;
                           &lt;!-- Start Portfolio Item #2 --&gt;
                           &lt;li&gt;
                              &lt;div class="img"&gt;&lt;a rel="cbox" href="images/portfolio/zoom1.jpg"&gt;&lt;img src="images/portfolio/thumb1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;h3&gt;Where does it come from&lt;/h3&gt;
                              &lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&lt;/p&gt;
                           &lt;/li&gt;
                           &lt;!-- End Portfolio Item #2 --&gt;
                           &lt;!-- Start Portfolio Item #3 --&gt;
                           &lt;li&gt;
                              &lt;div class="img"&gt;&lt;a rel="cbox" href="images/portfolio/zoom1.jpg"&gt;&lt;img src="images/portfolio/thumb1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;h3&gt;Why do we use it&lt;/h3&gt;
                              &lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&lt;/p&gt;
                           &lt;/li&gt;
                           &lt;!-- End Portfolio Item #3 --&gt;
                           &lt;!-- Start Portfolio Item #4 --&gt;
                           &lt;li&gt;
                              &lt;div class="img"&gt;&lt;a rel="cbox" href="images/portfolio/zoom1.jpg"&gt;&lt;img src="images/portfolio/thumb1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;h3&gt;What is Lorem Ipsum&lt;/h3&gt;
                              &lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&lt;/p&gt;
                           &lt;/li&gt;
                           &lt;!-- End Portfolio Item #4 --&gt;
                           &lt;!-- Start Portfolio Item #5 --&gt;
                           &lt;li&gt;
                              &lt;div class="img"&gt;&lt;a rel="cbox" href="images/portfolio/zoom1.jpg"&gt;&lt;img src="images/portfolio/thumb1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;h3&gt;Where does it come from&lt;/h3&gt;
                              &lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&lt;/p&gt;
                           &lt;/li&gt;
                           &lt;!-- End Portfolio Item #5 --&gt;
                           &lt;!-- Start Portfolio Item #6 --&gt;
                           &lt;li&gt;
                              &lt;div class="img"&gt;&lt;a rel="cbox" href="images/portfolio/zoom1.jpg"&gt;&lt;img src="images/portfolio/thumb1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;h3&gt;Why do we use it&lt;/h3&gt;
                              &lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&lt;/p&gt;
                           &lt;/li&gt;
                           &lt;!-- End Portfolio Item #6 --&gt;
                        &lt;/ul&gt;
                     &lt;/div&gt;
                     &lt;!-- End Multi Column Holder --&gt;
                     &lt;!-- Start Blog Pagination --&gt;
                     &lt;div class="pagination-holder"&gt;
                        &lt;ul class="pagination"&gt;
                           &lt;li&gt;&lt;a href="#" class="btn-last"&gt;&lt;span&gt;« First&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;span&gt;...&lt;/span&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;«&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;strong&gt;2&lt;/strong&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;5&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;»&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;span&gt;...&lt;/span&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#" class="btn-last"&gt;&lt;span&gt;Last »&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                     &lt;/div&gt;
                     &lt;!-- End Blog Pagination --&gt;
                  &lt;/div&gt;
                  &lt;!-- End Page Content --&gt;
               &lt;/div&gt;
               &lt;!-- End Inner Page Structure --&gt;
            &lt;/div&gt;
            &lt;!-- End Main --&gt;
            &lt;div class="lower-section"&gt;
               &lt;div class="col-holder"&gt;
                  &lt;div class="holder"&gt;
                     &lt;!-- Start Column --&gt;
                     &lt;div class="col"&gt;
                        &lt;h3 class="null"&gt;What is a FICO score?&lt;/h3&gt;
                        &lt;p&gt;A FICO score provides a snapshot of risk that banks and other institutions use to help make lending decisions. Applicants with higher FICO scores may be offered better interest rates on mortgages or car loans.&lt;/p&gt;
                        &lt;div class="link-holder"&gt; &lt;a href="#" class="more-dark"&gt;Learn More&lt;/a&gt; &lt;/div&gt;
                     &lt;/div&gt;
                     &lt;!-- End Column --&gt;
                     &lt;!-- Start Column --&gt;
                     &lt;div class="col"&gt;
                        &lt;h3 class="icon2"&gt;Lorem Ipsum Generators &lt;/h3&gt;
                        &lt;p&gt;All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.&lt;/p&gt;
                        &lt;div class="link-holder"&gt; &lt;a href="#" class="more-dark"&gt;Learn More&lt;/a&gt; &lt;/div&gt;
                     &lt;/div&gt;
                     &lt;!-- End Column --&gt;
                     &lt;!-- Start Column --&gt;
                     &lt;div class="col"&gt;
                        &lt;h3 class="icon3"&gt;Subscribe to Our Newsletter&lt;/h3&gt;
                        &lt;!-- Start Newsletter Form --&gt;
                        &lt;form id="newsletter" method="get" action="" class="form-add"&gt;
                           &lt;fieldset&gt;
                           &lt;div class="row"&gt;
                              &lt;label for="name"&gt;Your Name:&lt;/label&gt;
                              &lt;div class="txt"&gt;
                                 &lt;input id="name" name="name" type="text" /&gt;
                              &lt;/div&gt;
                           &lt;/div&gt;
                           &lt;div class="row"&gt;
                              &lt;label for="email"&gt;Email Address:&lt;/label&gt;
                              &lt;div class="txt"&gt;
                                 &lt;input id="email" name="email" type="text" /&gt;
                              &lt;/div&gt;
                           &lt;/div&gt;
                           &lt;div class="btn-holder"&gt;
                              &lt;button type="submit" class="formbutton"&gt;&lt;span&gt;Sign Up&lt;/span&gt;&lt;/button&gt;
                              &lt;a href="#"&gt;Unsubscribe&lt;/a&gt; &lt;/div&gt;
                           &lt;/fieldset&gt;
                        &lt;/form&gt;
                        &lt;!-- End Newsletter Form --&gt;
                     &lt;/div&gt;
                     &lt;!-- End Column --&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;div class="bottom"&gt;
                  &lt;!-- Start Follow Us Links --&gt;
                  &lt;div class="follow-box"&gt; &lt;strong&gt;Follow us on:&lt;/strong&gt;
                     &lt;ul&gt;
                        &lt;li&gt;&lt;a href="XXXXXXXXXXXXXXXXXXXXXXX" class="facebook"&gt;facebook&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#" class="twitter"&gt;twitter&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#" class="rss"&gt;rss&lt;/a&gt;&lt;/li&gt;
                     &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;!-- End Follow Us Links --&gt;
                  &lt;div class="txt-holder"&gt;
                     &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the... &lt;a href="#" class="more-dark"&gt;Find out more&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="w-bottom"&gt;&lt;/div&gt;
   &lt;/div&gt;
   &lt;!--End Wrapper Sub Elements --&gt;
   &lt;!-- Start Footer --&gt;
   &lt;div id="footer"&gt;
      &lt;!--Start Footer Nav --&gt;
      &lt;div class="footer-nav"&gt;
         &lt;div class="w1"&gt;
            &lt;div class="w2"&gt;
               &lt;ul class="menu"&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="services.html"&gt;Our Services&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="testimonials.html"&gt;Testimonials&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="articles.html"&gt;Articles&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--End Footer Nav --&gt;
      &lt;p&gt;Copyright  © 2011 &lt;a href="XXXXXXXXXXXXXXXXXXXXXXXXXX"&gt;XXXXXXXXXXXXXXXXXXXXXXXXXX&lt;/a&gt;. All rights reserved.&lt;/p&gt;
   &lt;/div&gt;
   &lt;!-- End Footer --&gt;
&lt;/div&gt;
&lt;!-- End Wrapper --&gt;
&lt;script type="text/javascript"&gt; Cufon.now(); &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Here is the NEW code with the changes. Where am I going wrong??

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;DEBONAIR&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href="css/all.css" media="all" /&gt;
&lt;script src="js/jquery.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /&gt;
&lt;script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/cufon-yui.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/Debonair-Calibri.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/Cufon-Settings.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/subnavie6.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
                $(document).ready(function(){
                        $("a[rel^='prettyPhoto']").prettyPhoto();
                });
        &lt;/script&gt;
&lt;!--[if lt IE 7]&gt;
&lt;script type="text/javascript" src="js/ie-png.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="css/lt7.css" /&gt;
&lt;![endif]--&gt;
&lt;!--[if IE]&gt;
&lt;link rel="stylesheet" type="text/css" href="css/ie.css" /&gt;
&lt;![endif]--&gt;
&lt;!--[if IE 7]&gt;
&lt;link rel="stylesheet" type="text/css" href="css/ie7.css" /&gt;
&lt;![endif]--&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- Start Wrapper --&gt;
&lt;div id="wrapper"&gt;
   &lt;!--Start Wrapper Sub Elements --&gt;
   &lt;div class="w-main"&gt;
      &lt;div class="w-top"&gt; &lt;/div&gt;
      &lt;div class="w-content"&gt;
         &lt;div class="main-wrapper"&gt;
            &lt;!-- Start Header --&gt;
            &lt;div id="header"&gt;
               &lt;div class="top"&gt;
                  &lt;!-- Start Logo --&gt;
                  &lt;div class="logo"&gt;&lt;a href="index.html"&gt;&lt;img src="images/logo.gif" alt="Web 2.0 Business Template"/&gt;&lt;/a&gt;&lt;/div&gt;
                  &lt;!-- End Logo --&gt;
                  &lt;!-- Start Tagline --&gt;
                  &lt;div class="tagline"&gt;XXXXXXXXXXXXXXX&lt;/div&gt;
                  &lt;!-- End Tagline --&gt;
                  &lt;!-- Start Call Us Section --&gt;
                  &lt;div class="call-box"&gt; &lt;strong&gt;CALL US NOW:&lt;/strong&gt;&lt;em&gt;(407)XXXXXXXXX&lt;/em&gt; &lt;/div&gt;
                  &lt;!-- End Call Us Section --&gt;
               &lt;/div&gt;
               &lt;!-- Start Nav Holder --&gt;
               &lt;div class="holder"&gt;
                  &lt;!-- Start Nav --&gt;
                  &lt;ul id="nav"&gt;
                     &lt;li&gt;&lt;a href="index.html"&gt;&lt;span class="c"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="about.html"&gt;&lt;span class="c"&gt;&lt;span&gt;About Us&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
                        &lt;!-- Start Sub Nav --&gt;
                        &lt;ul&gt;
                           &lt;li&gt;&lt;a href="layout.html"&gt;Full Width Page Layout&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="layout-sidebar.html"&gt;Page Layout with Sidebar&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                        &lt;!-- End Sub Nav --&gt;
                     &lt;/li&gt;
                     &lt;li&gt;&lt;a href="services.html"&gt;&lt;span class="c"&gt;&lt;span&gt;Our Services&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                     &lt;li class="selected"&gt;&lt;a href="testimonials.html"&gt;&lt;span class="c"&gt;&lt;span&gt;Testimonials&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="articles.html"&gt;&lt;span class="c"&gt;&lt;span&gt;Articles&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                     &lt;li&gt;&lt;a href="contact.html"&gt;&lt;span class="c"&gt;&lt;span&gt;Contact Us&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;!-- End Nav --&gt;
                  &lt;!-- Start Search --&gt;
                  &lt;form id="search-form" method="get" action="" class="form-search"&gt;
                     &lt;fieldset&gt;
                     &lt;input name="search" type="text" class="txt" id="search" value="Search for..." onfocus="if(this.value == 'Search for...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search for...';}"/&gt;
                     &lt;input type="submit" value="Submit" class="btn-search"/&gt;
                     &lt;/fieldset&gt;
                  &lt;/form&gt;
                  &lt;!-- End Search --&gt;
               &lt;/div&gt;
               &lt;!-- End Nav Holder --&gt;
            &lt;/div&gt;
            &lt;!-- End Header --&gt;
            &lt;!-- Start Main --&gt;
            &lt;div id="main"&gt;
               &lt;!-- Start Heading Banner --&gt;
               &lt;div class="pageheader"&gt;
                  &lt;div class="holder"&gt;
                     &lt;!-- Start Breadcrambs --&gt;
                     &lt;ul class="breadcrumbs"&gt;
                        &lt;li&gt; &lt;a href="#"&gt;Home&lt;/a&gt; &lt;/li&gt;
                     &lt;/ul&gt;
                     &lt;!-- End Breadcrambs --&gt;
                     &lt;h1&gt;Testimonials&lt;/h1&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;!-- End Heading Banner --&gt;
               &lt;!-- Start Inner Page Structure --&gt;
               &lt;div class="main"&gt;
                  &lt;!-- Start Page Content --&gt;
                  &lt;div class="pagecontent"&gt;
                     &lt;div class="txt-content"&gt;
                        &lt;h2&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it.&lt;/h2&gt;
                        &lt;p&gt;Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.&lt;/p&gt;
                     &lt;/div&gt;
                     &lt;!-- Start 3 Column Holder --&gt;
                     &lt;div class="box-holder"&gt;
                        &lt;ul&gt;
                           &lt;!-- Start Portfolio Item #1 --&gt;
                           &lt;li&gt;
                              &lt;div class="img"&gt;&lt;a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM"&gt;&lt;img src="images/portfolio/thumb1.jpg" rel="prettyPhoto" alt="YouTube" width="271" height="148" /&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;h3&gt;What is Lorem Ipsum&lt;/h3&gt;
                              &lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&lt;/p&gt;
                           &lt;/li&gt;
                           &lt;!-- End Portfolio Item #1 --&gt;
                           &lt;!-- Start Portfolio Item #2 --&gt;
                           &lt;li&gt;
                              &lt;div class="img"&gt;&lt;a rel="prettyPhoto" href="images/portfolio/zoom1.jpg"&gt;&lt;img src="images/portfolio/thumb1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;h3&gt;Where does it come from&lt;/h3&gt;
                              &lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&lt;/p&gt;
                           &lt;/li&gt;
                           &lt;!-- End Portfolio Item #2 --&gt;
                           &lt;!-- Start Portfolio Item #3 --&gt;
                           &lt;li&gt;
                              &lt;div class="img"&gt;&lt;a rel="prettyPhoto" href="images/portfolio/zoom1.jpg"&gt;&lt;img src="images/portfolio/thumb1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;h3&gt;Why do we use it&lt;/h3&gt;
                              &lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&lt;/p&gt;
                           &lt;/li&gt;
                           &lt;!-- End Portfolio Item #3 --&gt;
                           &lt;!-- Start Portfolio Item #4 --&gt;
                           &lt;li&gt;
                              &lt;div class="img"&gt;&lt;a rel="prettyPhoto" href="images/portfolio/zoom1.jpg"&gt;&lt;img src="images/portfolio/thumb1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;h3&gt;What is Lorem Ipsum&lt;/h3&gt;
                              &lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&lt;/p&gt;
                           &lt;/li&gt;
                           &lt;!-- End Portfolio Item #4 --&gt;
                           &lt;!-- Start Portfolio Item #5 --&gt;
                           &lt;li&gt;
                              &lt;div class="img"&gt;&lt;a rel="prettyPhoto" href="images/portfolio/zoom1.jpg"&gt;&lt;img src="images/portfolio/thumb1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;h3&gt;Where does it come from&lt;/h3&gt;
                              &lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&lt;/p&gt;
                           &lt;/li&gt;
                           &lt;!-- End Portfolio Item #5 --&gt;
                           &lt;!-- Start Portfolio Item #6 --&gt;
                           &lt;li&gt;
                              &lt;div class="img"&gt;&lt;a rel="prettyPhoto" href="images/portfolio/zoom1.jpg"&gt;&lt;img src="images/portfolio/thumb1.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;h3&gt;Why do we use it&lt;/h3&gt;
                              &lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&lt;/p&gt;
                           &lt;/li&gt;
                           &lt;!-- End Portfolio Item #6 --&gt;
                        &lt;/ul&gt;
                     &lt;/div&gt;
                     &lt;!-- End Multi Column Holder --&gt;
                     &lt;!-- Start Blog Pagination --&gt;
                     &lt;div class="pagination-holder"&gt;
                        &lt;ul class="pagination"&gt;
                           &lt;li&gt;&lt;a href="#" class="btn-last"&gt;&lt;span&gt;« First&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;span&gt;...&lt;/span&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;«&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;strong&gt;2&lt;/strong&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;3&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;4&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;5&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;»&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;span&gt;...&lt;/span&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#" class="btn-last"&gt;&lt;span&gt;Last »&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                     &lt;/div&gt;
                     &lt;!-- End Blog Pagination --&gt;
                  &lt;/div&gt;
                  &lt;!-- End Page Content --&gt;
               &lt;/div&gt;
               &lt;!-- End Inner Page Structure --&gt;
            &lt;/div&gt;
            &lt;!-- End Main --&gt;
            &lt;div class="lower-section"&gt;
               &lt;div class="col-holder"&gt;
                  &lt;div class="holder"&gt;
                     &lt;!-- Start Column --&gt;
                     &lt;div class="col"&gt;
                        &lt;h3 class="null"&gt;What is a FICO score?&lt;/h3&gt;
                        &lt;p&gt;A FICO score provides a snapshot of risk that banks and other institutions use to help make lending decisions. Applicants with higher FICO scores may be offered better interest rates on mortgages or car loans.&lt;/p&gt;
                        &lt;div class="link-holder"&gt; &lt;a href="#" class="more-dark"&gt;Learn More&lt;/a&gt; &lt;/div&gt;
                     &lt;/div&gt;
                     &lt;!-- End Column --&gt;
                     &lt;!-- Start Column --&gt;
                     &lt;div class="col"&gt;
                        &lt;h3 class="icon2"&gt;Lorem Ipsum Generators &lt;/h3&gt;
                        &lt;p&gt;All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.&lt;/p&gt;
                        &lt;div class="link-holder"&gt; &lt;a href="#" class="more-dark"&gt;Learn More&lt;/a&gt; &lt;/div&gt;
                     &lt;/div&gt;
                     &lt;!-- End Column --&gt;
                     &lt;!-- Start Column --&gt;
                     &lt;div class="col"&gt;
                        &lt;h3 class="icon3"&gt;Subscribe to Our Newsletter&lt;/h3&gt;
                        &lt;!-- Start Newsletter Form --&gt;
                        &lt;form id="newsletter" method="get" action="" class="form-add"&gt;
                           &lt;fieldset&gt;
                           &lt;div class="row"&gt;
                              &lt;label for="name"&gt;Your Name:&lt;/label&gt;
                              &lt;div class="txt"&gt;
                                 &lt;input id="name" name="name" type="text" /&gt;
                              &lt;/div&gt;
                           &lt;/div&gt;
                           &lt;div class="row"&gt;
                              &lt;label for="email"&gt;Email Address:&lt;/label&gt;
                              &lt;div class="txt"&gt;
                                 &lt;input id="email" name="email" type="text" /&gt;
                              &lt;/div&gt;
                           &lt;/div&gt;
                           &lt;div class="btn-holder"&gt;
                              &lt;button type="submit" class="formbutton"&gt;&lt;span&gt;Sign Up&lt;/span&gt;&lt;/button&gt;
                              &lt;a href="#"&gt;Unsubscribe&lt;/a&gt; &lt;/div&gt;
                           &lt;/fieldset&gt;
                        &lt;/form&gt;
                        &lt;!-- End Newsletter Form --&gt;
                     &lt;/div&gt;
                     &lt;!-- End Column --&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;div class="bottom"&gt;
                  &lt;!-- Start Follow Us Links --&gt;
                  &lt;div class="follow-box"&gt; &lt;strong&gt;Follow us on:&lt;/strong&gt;
                     &lt;ul&gt;
                        &lt;li&gt;&lt;a href="http://www.facebook.com/XXXXXXXX" class="facebook"&gt;facebook&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#" class="twitter"&gt;twitter&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#" class="rss"&gt;rss&lt;/a&gt;&lt;/li&gt;
                     &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;!-- End Follow Us Links --&gt;
                  &lt;div class="txt-holder"&gt;
                     &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the... &lt;a href="#" class="more-dark"&gt;Find out more&lt;/a&gt;&lt;/p&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="w-bottom"&gt;&lt;/div&gt;
   &lt;/div&gt;
   &lt;!--End Wrapper Sub Elements --&gt;
   &lt;!-- Start Footer --&gt;
   &lt;div id="footer"&gt;
      &lt;!--Start Footer Nav --&gt;
      &lt;div class="footer-nav"&gt;
         &lt;div class="w1"&gt;
            &lt;div class="w2"&gt;
               &lt;ul class="menu"&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="services.html"&gt;Our Services&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="testimonials.html"&gt;Testimonials&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="articles.html"&gt;Articles&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--End Footer Nav --&gt;
      &lt;p&gt;Copyright  © 2011 &lt;a href="XXXXXXXXX"&gt;XXXXXXXX&lt;/a&gt;. All rights reserved.&lt;/p&gt;
   &lt;/div&gt;
   &lt;!-- End Footer --&gt;
&lt;/div&gt;
&lt;!-- End Wrapper --&gt;
&lt;script type="text/javascript"&gt; Cufon.now(); &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Thanks!!

Link to comment
Share on other sites

  • 0

First things first - move this script tag to the bottom of the page just before the </body> tag.

&lt;script type="text/javascript" charset="utf-8"&gt;
		$(document).ready(function(){
			$("a[rel^='prettyPhoto']").prettyPhoto();
		});
	&lt;/script&gt;

Looking through the rest of the code now.

Is the page online?

Link to comment
Share on other sites

  • 0

First things first - move this script tag to the bottom of the page just before the </body> tag.

&lt;script type="text/javascript" charset="utf-8"&gt;
		$(document).ready(function(){
			$("a[rel^='prettyPhoto']").prettyPhoto();
		});
	&lt;/script&gt;

Looking through the rest of the code now.

Is the page online?

No it's not, I would have PM'd you the URL long long ago lol. Most of my clients are reluctant to go on camera so I never put it up. I am going to hire actors to read testimonials sent in and that's why I decided to make this page work all of a sudden.

   &lt;!-- End Footer --&gt;
&lt;/div&gt;
&lt;!-- End Wrapper --&gt;
&lt;script type="text/javascript"&gt; Cufon.now(); &lt;/script&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
                $(document).ready(function(){
                        $("a[rel^='prettyPhoto']").prettyPhoto();
                });
        &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Added it to the bottom, no change. If you need me to try something else, just name it.

Link to comment
Share on other sites

  • 0

Add this to your header:

&lt;script src="js/jquery-1.4.4.min.js" type="text/javascript"&gt;&lt;/script&gt;

Just double check that file is in your 'js' folder too ;)

Added and it's there. Nothing.

&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;DEBONAIR&lt;/title&gt;
&lt;link rel="stylesheet" type="text/css" href="css/all.css" media="all" /&gt;
&lt;script src="js/jquery.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /&gt;
&lt;script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/cufon-yui.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/Debonair-Calibri.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/Cufon-Settings.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/subnavie6.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery-1.4.4.min.js" type="text/javascript"&gt;&lt;/script&gt;

Link to comment
Share on other sites

  • 0

Hey mate your youtube tag needs a rel attribute:

&lt;a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title=""&gt;&lt;img src="images/thumbnails/flash-logo.jpg" alt="YouTube" width="60" /&gt;&lt;/a&gt;

Here is the text file I created with your code - and changed it a bit to make it work.

Just removed all the other js files from the header.. Do the same and then re-add them one by one to ensure there are no conflicts.

Sometimes js files play up a bit and that's the approach I take to ensure there are no issues.

index.html

Keep me posted! Im interested to see if that fixes the issue now.

Working screenshot:

post-179373-0-42942300-1295825628.jpg

Link to comment
Share on other sites

  • 0

Nice! I will try that now. And was that YouTube video something you inserted? Or was it already there? LOL, I almost died laughing at the title...

Link to comment
Share on other sites

  • 0

That was already there!

Dude I thought it was your video! hahahahah I was like "what kinda site is this guy running?" :p

lmao

I tested a few times mate - it should all work now. Keep me posted.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.