A NomNom (Twenty Eleven) template with "full" content

Discussion in 'CSS and PHP' started by hama, Feb 3, 2012.

  1. hama New Member

    I'm trying to make a new template where the content has no padding because I'd like to embed a full size flash gallery on a single page. This page should only have header, content (flash gallery, no padding, nothing), footer.

    I can't do it. :( Can you help me please?

    Thanks a lot

    hama
    hama, Feb 3, 2012
    #1 Reply

  2. Zeaks Author

    Hi Hama, are you wanting to create a page template? Or increase the width of the content area in blog posts? The easiest thing to do would be to link me a page that shows what you're currently using, and I can probably tell you how to change it.
    Zeaks, Feb 4, 2012
    #2 Reply

  3. hama New Member

    Hi Zeaks

    Here is the link: http://ios-engelberg.ch/gallery/

    I used the template showcase from twentyeleven.

    I'm looking for a solution to have this flash gallery with no space on the left and on the right. Between the header and the gallery the space could be much smaller and at the bottom the same and in addition no "Aktuelle Artikel".

    Maybe it only needs some more css-lines, maybe it needs a new "full content template". I don't know, it's too difficult for me.

    Thanks :)

    hama
    hama, Feb 4, 2012
    #3 Reply

  4. hama New Member

    Hi Zeaks

    I tried something with a new file:

    http://ios-engelberg.ch/hama/

    This is the code. It works but there is a small white space (about 1 px on the right) and to much space on the top ... Di you have an idea?


    HTML:
    <!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">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>IOS Gallery</title>
        <script type="text/javascript" src="/ig/iv-includes/assets/js/swfobject.js"></script>
        <script type="text/javascript" src="/ig/iv-includes/assets/js/swfaddress.js"></script>
    </head>
<body>
 
<?php
/**
* Template Name: Showcase hama
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site will use a
* different template.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
get_header(); ?>
 
        <div id="imagevue">
            <div id="na">
                    <h1>
                    &nbsp;&nbsp;&nbsp;Oops! - Diese Seite ben&ouml;tigt<br/>
                    &nbsp;&nbsp;&nbsp;Flash Player and Javascript.
                    <br/><br/>
                    &nbsp;&nbsp;&nbsp;&raquo;&nbsp;Download <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash Player</a>
                    <br/><br/>
                    &nbsp;&nbsp;&nbsp;&raquo;&nbsp;Alternative: <a href="http://ios-engelberg.ch/ig/?/content/">IOS HTML Gallery</a><br/
                    </h1>
            </div>
        </div>
        <script type="text/javascript">
        //<![CDATA[
            var flashVars = {
                foreground_color: 'EEEEEE',
                background_color: '222222'
            };
            swfobject.embedSWF("/ig/iv-includes/imagevue2.swf", "imagevue", "1000px", "630px", "8.0.0", "/ig/iv-includes/expressInstall.swf", flashVars, {allowScriptAccess: 'always', allowFullScreen: true, bgcolor: '#222222', wmode:"transparent"}, {id: 'imagevue', name: 'imagevue'});
        // ]]>
        </script>
 
<?php get_footer(); ?>
 
</body>
</html>
    hama, Feb 4, 2012
    #4 Reply

  5. Zeaks Author

    This CSS should get rid of the space at the top for that page only.
    Code:
    .page-id-132 #access {margin-top: -10px;}
.page-id-132 #main {padding: 0;}
.page-id-132 #branding {padding-bottom: 0;}
    Zeaks, Feb 4, 2012
    #5 Reply

  6. hama New Member

    Yes, that's great! Everything works fine now in Firefox and Chrome. In IE I have 1 px white space on the right side, don't know why (see attachment) .

    The three lines CSS I inserted in the "Custom CSS" part of the NomNom theme options. Is that the right place?

    Thanks

    hama

    Attached Files:

    hama, Feb 4, 2012
    #6 Reply

  7. Zeaks Author

    You could try using a negative right margin on .page-id-132 #main {-10px;} probably wouldn't need it to be -10, but see if that gets rid of it.

    You coudl also try using a negative right margin or at least margin-right: 0; for <div id="imagevue"> and <div id="na">
    Zeaks, Feb 4, 2012
    #7 Reply

  8. hama New Member

    Hi Zeaks

    I tried it like that:

    HTML:
    .page-id-132 #imagevue {margin-right: -10px;}
.page-id-132 #na {margin-right: -10px;}
    No difference. Something is very special: When I change the size of the Internet Explorer window then the white space comes and goes. Maybe a bug in IE?

    hama
    hama, Feb 4, 2012
    #8 Reply

  9. Zeaks Author

    IE is a pain sometimes. If only firebug worked for IE :p Here is a site I go to when I am having annoying issues like this with IE http://www.welovecss.com/
    Zeaks, Feb 4, 2012
    #9 Reply

  10. hama New Member

    Hi Zeaks

    Thanks for this hint, I'll have a look.

    For the moment I changed the color behind the flash gallery from white to blue (same blue as flash gallery background).
    Not a professional solution but it works. ;)

    Have a good time

    hama
    hama, Feb 5, 2012
    #10 Reply
Reply to Thread

Share This Page