ThemeShaper Forums » Thematic

Making a Skittles.com style page template

(13 posts)
  • Started 3 years ago by freedimensional
  • Latest reply from freedimensional
  • This topic is resolved

  1. freedimensional
    Member

    Hello!

    Have you seen Skittles.com recently, or Modernista.com?

    They use an iFrame behind a simple navigation menu to drive users across all of their social properties such as Wikipedia, YouTube and Flickr.

    I'd like to do the same with my Thematic install, so that I can send users to my Last.fm profile, my Twitter page, my LinkedIn etc, and I've made some progress.

    See http://digitalcortex.net/lab (currently testing with Google.com).

    In correspondence with Ian over on Twitter, he suggested I use Page Templates, and I've created several pages with this structure:


    <?php
    /*
    Template Name: iFrame
    */
    ?>

    <?php get_header() ?>

    <iframe class="iframe" src="http://www.google.com" frameborder="0" scrolling="auto"></iframe>

    <?php get_footer() ?>

    Styling my iFrame I'm using this in my child theme's CSS:


    .iframe {
    width: 100%;
    height: 768px;
    border: 1px solid black;
    margin-top: -46px;
    margin-bottom: -22px;
    margin-left: 0px;
    margin-right 0px;
    padding: 0px;
    }

    The problem I've found is that whatever I do or try, the iFrame never exceeds the width of the Main div. I presume because the Main div is called at the end of the Header?

    Is there a way to have my iFrame take up all space between the Header and Footer withough changing my Header code? Even better if the iFrame detects the height of its content automatically.

    All answers greatly appreciated.

    Tom

    Posted 3 years ago #

  2. dannydamnboy
    Member

    Adding

    width:100%;
    instead of
    width:960px;

    to the main div allows the iframe to enlarge through the maximum window width.
    I've tried it with your facebbok and youtube pages and it works.

    Posted 3 years ago #

  3. dannydamnboy
    Member

    about the height:

    if you take a look at the body classes (some may be different depending on your browser and os)

    wordpress y2009 m03 d09 h04 slug-twitter page pageid-495 page-author-freedimensional page-child parent-pageid-363 page-template page-template-iframe_twitter-php windows firefox ff3

    you could see that every page as a class with its slug name (in your twitter page is slug-twitter): the fastest way is to set via css a specific height for every page. It works if the page has a static height.

    Posted 3 years ago #

  4. freedimensional
    Member

    Thanks a lot for the response dannydamnboy. I've looked at your child themes and think they are wicked. Look forward to any new Thematic 0.9 releases.

    The code above is the only code I use in the Page Template, but the Main div is fired at the end of the Header php. How can I get my Header php to pull a 100% width Main div without affecting my entire site?

    Also, where do I include the height code, and what is the syntax I'll need?

    Sorry I'm such a noob. I am not worthy.

    Posted 3 years ago #

  5. freedimensional
    Member

    Does anybody have a suggestion as to how my Main div can be widened to 100% only on certain pages?

    Thanks,
    Tom

    Posted 3 years ago #

  6. Chris
    Moderator

    Try this one:

    body.pageid-82 #main {
background: #ABC;
}

    You need to change pageid-82 to your needs. And change background .. to width and so on.

    For more pages you can use

    body.pageid-82 #main, body.pageid-83 #main, body.pageid-84 #main {
}

    Cheers,

    Chris

    Posted 3 years ago #

  7. dannydamnboy
    Member

    @freedimensional

    you have to include in #main:

    height:XXXpx;

    where XXX is the height of a specific page.

    For your Google test page it could be:

    height:200px;

    Posted 3 years ago #

  8. dannydamnboy
    Member

    @freedimensional

    sorry, I can't understand what you mean with "How can I get my Header php to pull a 100% width Main div without affecting my entire site"

    Please try to let me understend better;)

    Posted 3 years ago #

  9. freedimensional
    Member

    Hi Chris, thanks for your answer - will try that tonight. Awesome!

    Hi dannydamnboy, what I mean is:
    Currently, when Header.php is called in my custom page template, it calls the Main div within it.
    I want to call Header.php, but also a Main div that has a width of 100% rather than 960px.
    If I change the width in my Child Theme, I change it for the entire site.
    My question put simply is "How do I constrain the width change to certain pages only?".

    I think Chris has the solution, but I'd love to hear any second opinions.

    Thanks again,
    Tom

    Posted 3 years ago #

  10. dannydamnboy
    Member

    Hi Tom: yes you have to use a unique id for every page, as Chris "The Guru" wrote...

    Posted 3 years ago #

  11. Chris
    Moderator

    @Danny .. just keep in mind .. under no circumstances you're going to post that picture! ;-)

    Posted 3 years ago #

  12. dannydamnboy
    Member

    I know it, Chris, I know it... ;)

    Posted 3 years ago #

  13. freedimensional
    Member

    Resolved!

    Here's what I did...

    I created several page templates like this:


    <?php
    /*
    Template Name: iFrame
    */
    ?>

    <?php get_header() ?>

    <iframe class="iframe" src="http://www.google.com" frameborder="0" scrolling="auto"></iframe>

    <?php get_footer() ?>

    Then in my Child Theme I added this set of rules:


    /* --------------------------------------------------------------
    Special Rules for Page Templates
    -------------------------------------------------------------- */

    .iframe {
    width:100%;
    height:100%;
    }

    body.pageid-363 #main, body.pageid-503 #main, body.pageid-501 #main, body.pageid-495 #main, body.pageid-499 #main, body.pageid-497 #main, body.pageid-493 #main, body.pageid-491 #main {
    width:100%;
    padding:0px;
    margin:0 0 -22px 0; /* this removes whitespace above the footer */
    }

    /* Google */
    body.pageid-363 #main {
    height:768px;
    }

    /* Facebook */
    body.pageid-503 #main {
    height:768px;
    }

    /* LinkedIn */
    body.pageid-501 #main {
    height:1000px;
    }

    /* Twitter */
    body.pageid-495 #main {
    height:768px;
    }

    /* Delicious */
    body.pageid-499 #main {
    height:1000px;
    }

    /* YouTube */
    body.pageid-497 #main {
    height:1585px;
    }

    /* Last.fm */
    body.pageid-493 #main {
    height:1000px;
    }

    /* Flickr */
    body.pageid-491 #main {
    height:1000px;
    }

    Thanks a lot for your help everyone.

    Tom

    Posted 3 years ago #

RSS feed for this topic

Reply

You must log in to post.