Jump to content
illinimatt81

Create Page Like Pagelines Tour Page

Recommended Posts

illinimatt81    21
illinimatt81

I am interested in creating a page similar to the Pagelines Tour Page http://pagelines.com/tour

 

I saw another thread inquiring about this and it mentioned using the hero unit and then it was 'resolved'.  I am pretty resourceful so I started poking around on the Tour Page with firebug to try to identify the elements.  I am struggling to figure out how the page was created.

 

First the nav bar seems like nothing else in pagelines.  Is it a styled Scroll Spy bar or something else?  I see images are added...

 

For the actual content, how is that being displayed or where is it called from?

 

I noticed that everything seems to be on the same page as opposed to different pages and what displays is dependent upon the selection in the nav bar.  The fade effect is beautiful as well.

 

Appreciate any guidance in pointing me in the right direction in creating something similar.

 

For a point of reference, I am planning to create a product tour with it myself.

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, I think this page was created prior to the incorporation of bootstrap to the framework.

 

However, looking at the source code its using a modified version of tabs interface (http://demo.pagelines.me/tools/) for the nav menu at the top of the page. The content that loads on each section is contained within the tab shortcode.

 

You can find more info on the tabs at http://twitter.github.com/bootstrap/javascript.html#tabs


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Simon    247
Simon

Its a custom section we made just for the tour page. It uses jquery.fancybox

 

Unfortunately the section is all hardcoded there are no options for it so its unlikely to ever be released as a user section.

Share this post


Link to post
Share on other sites
illinimatt81    21
illinimatt81
Its a custom section we made just for the tour page. It uses jquery.fancybox

 

Unfortunately the section is all hardcoded there are no options for it so its unlikely to ever be released as a user section.

 

That's too bad, I thought everything on the site was made in the Framework.  That explains why I couldn't figure it out.  

 

Would there be a way to put icons in the scroll spy bar?  I could probably live with making a page that way.  The tab option might be something I can consider too.

Share this post


Link to post
Share on other sites
James B    436
James B

Depending on what type of icons you wanted to add you could use css to insert the icon. Something like the below, you'd need to add css to align and give it padding etc. For more info on the :after selector see http://www.w3schools.com/cssref/sel_after.asp

 

.nav-tabs:after, .nav-pills:after {
    clear: both;
    content: url(your full url to the icon/image goes here);
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×