Not signed in (Sign In)

Vanilla 1.1.10 is a product of Lussumo. More Information: Documentation, Community Support.

General Support: Integration not going so well

Bottom of Page

1 to 17 of 17

  1.  
    • CommentAuthoramnesia
    • CommentTimeJul 26th 2007
     
    Hi there all,
    I decided to get a little gallery going but it's been a bit tricky for me.

    If you look at
    http://www.iloveqatar.net/pics.html you'll see that I used an iFrame to link to the gallery. The problem is that the iFrame cannot stretch the table to fit its needs.

    So I decided to integrate it the normal way.

    see http://www.iloveqatar.net/pics.php

    However for some odd reason everything doesn't look right. Text is large, the trail is tiny and the footer has shifter to the right...

    Can anyone help?
    •  
      CommentAuthormike
    • CommentTimeJul 26th 2007
     
    You just need to go into your gallery.css file in your current theme directory and tweak the font size a bit.

    You'll notice a lot of font sizes are set in EMs, EM's are a relative unit size. For example, look at the CSS definition for breadcrumbs.
    #breadcrumbs {
    background:#A1002F url(images/blue-gradient.gif) repeat-x scroll 0%;
    border:1px solid #A1002F;
    clear:both;
    color:#FFFFFF;
    font-size:1.3em;
    margin:0pt;
    min-height:24px;
    }

    Notice that the font size is set to 1.3em. This basically means that the font will be 1.3 times larger (130%) than the font inherited from the parent style (font-size specified by body in this case). Try changing that to 1.0em and it will be the same size as the rest of your text. If you want to explicitly set its size, try using pixel units. 13px would probably look nice.
    • CommentAuthoramnesia
    • CommentTimeJul 29th 2007
     
    Thanks so much for your help.
    I'll get on it straight away!
    I'd like to be able to help plogger for creating such a nice script!

    What can I do to support all your hard work? Do you have a thin banner I could place at the bottom of the page? Is there a specific URL you would like being linked to?
    • CommentAuthoramnesia
    • CommentTimeJul 29th 2007
     
    I did my beset and changed everything to px instead.

    However I still have some issues.

    The breadcrumb bar is a tiny slit and the text isn't ontop of it as it should be.
    The boxes look messed up in php but not when I direct link via html
    If you click on the photos, you'll see a really messed up page.

    Please see www.iloveqatar.net/pics.html

    and

    www.iloveqatar.net/pics.php

    or
    http://www.iloveqatar.net/pics.php?level=album&id=2

    Any suggestions? I'm not really that good at CSS because it seems confusing to guess what each section is supposed to do.
    • CommentAuthorardamis
    • CommentTimeJul 29th 2007
     
    I suspect that your font-size problems come from the Plogger area of the page inheriting font-sizes from table#table1 Although I can't see exactly how. The http://www.iloveqatar.net/pics.html page doesn't have the same table, and the text there looks to be the correct size.

    "The breadcrumb bar is a tiny slit and the text isn't ontop of it as it should be."
    -Try giving the breadcrumb div a specific height with
    #breadcrumbs {height: 24px}

    The footer isn't being pushed down because you commented out the link-back to http://www.plogger.org/, which used clear: both to make the footer properly contain the other floated elements.

    As for your comment about the CSS being difficult to follow, I'll try to to a better job of organizing and explaining it in future versions of the Air theme. That is certainly on my todo list.

    -ardamis
    • CommentAuthoramnesia
    • CommentTimeJul 30th 2007
     
    Thanks so much for your explanation. Are you the one who designed Ardamis? Do you have your own button or website you'd like me to link to ?

    I'll try to do what you suggested right now and get back.
    • CommentAuthoramnesia
    • CommentTimeJul 30th 2007
     
    hi again,
    Your fix for the top bar was spot on.

    Also, when it came to font sizes you were also right.
    You have to put <font> settings before and after the php gallery

    In my case it was

    <font face="Verdana" size="1">
    <?php the_gallery(); ?></font>

    However when it came to the footer it didn't solve the issue.

    If you go back to the two pages again, you'll notice that the gallery 'boxes' don't stretch to where they are supposed to (use the breadcrumb bar as a guide)
    and the footer indents for some odd reason.

    I'd prefer though to remove the Plogger link and your link from the footer of the gallery and add links to the bottom of the actual page (which I've already done :) )

    Kind regards and thanks for helping me even though you didn't have to!
    • CommentAuthoramnesia
    • CommentTimeJul 30th 2007 edited
     
    Another update,
    I changed the footer width to 800 as well as the container so now they look properly aligned in

    pics.php (however the breadcrumbs bar in pics.html is now shorter (which doesn't really matter although it would be nice if it still looked matching))

    EDIT: ok It looks FINE in Internet Explorer, but it looks shorter in Opera and FF. Could you help me get the width of the top area to now be 800 px?


    EDIT 2:

    OK I'll try to show everything as clearly as possible.


    In INTERNET EXPLORER - Everything looks fine (tables are sized correctly) Everything looks good except there is no thumbnail HOVER effect when you go to http://www.iloveqatar.net/gallery ( I had to change it from pics.php because clicking the images resulted in dead links)
    In Opera - Tables look messed up like FF except when you go to view the gallery, everything is centered and the middle table doesn't stretch to fit 800 px.
    (Each section, main page, gallery, album, collection, results in the header, body, and footer always changing to different widths).

    The wrap, breadcrumb, collections, and footer have all been set to 800px, I've even tried setting it to 100% but that doesn't make a difference.


    It's a pain trying to get everything to look right for ALL browsers :( But I want to satisfy both FF and IE users)
    • CommentAuthorardamis
    • CommentTimeJul 31st 2007
     
    Yes, getting a layout to look the same in FF, IE7, IE6, and Safari can be pretty difficult.

    The problems you've encountered integrating the Air theme into a containing page have brought to light some limitations of my design. It was intended to be used as a stand-alone theme, but I should have anticipated that people would want to use it differently. As a result, I've taken a close look at Air and made some changes that I hope will make future integrations easier.

    I've also rearranged the CSS a little, and added descriptive comments to each class and ID.

    This being the case, if you don't mind swapping out your colors and gradient files again, I'd recommend you try downloading the latest version of the theme from http://www.ardamis.com/2007/07/05/plogger-beta-3-theme-air/
    • CommentAuthoramnesia
    • CommentTimeJul 31st 2007
     
    I'll add them right this very instance and get back to you. I'm glad if I was able to help :)
    • CommentAuthoramnesia
    • CommentTimeJul 31st 2007
     
    You've done it Ardemis. It's 'almost' perfect on ALL browsers.

    I haven't checked FF yet but it in Opera the Collections table is wider than the header and footer table.

    I noticed that the footer is set to 748 instead of 798 (just mentioning in case it was a mistake)

    Everything else is great!

    please check my gallery to see for yourself.

    Many thanks for such a great theme! If there is anything you want help testing, please let me know.
    •  
      CommentAuthormike
    • CommentTimeJul 31st 2007
     
    Looks good amnesia, one thing you missed is the width of your footer -- try changing it (#footer:width) to 748px

    Ardamis, well done on the theme -- very well commented and very easy to learn from.
    • CommentAuthorardamis
    • CommentTimeJul 31st 2007
     
    The width of #footer must always be 52px less than the width of #wrapper (unless you start changing the borders or padding, of course). If the width of #wrapper is 800px, then #footer should be set to width: 748px. The math works like this: 800px - 25px left padding - 25px right padding - 1px left border - 1 px right border = 748px.

    I don't know why Opera doesn't give the collections the correct width when Firefox, IE7, IE6 and Safari all seem to.

    I'm glad it's working better, though, amnesia. Thanks for identifying those problem areas, and please post if you see any other problems.

    Thanks for the compliment, Mike.
    • CommentAuthoramnesia
    • CommentTimeAug 1st 2007
     
    Hi there again all,
    I've changed the footer to 748 (which is 52px less) however if you look at the footer in IE (IE7) it's smaller than the everything else.
    It's not aligned correctly. When I set it to 798 it looks fine in IE but not in Opera or FF.

    When it's set to 748 its fine in Opera and FF but not in IE7.

    I'm thoroughly looking through to see if I can find any problem areas but I think everything is pretty much perfect.
    • CommentAuthorardamis
    • CommentTimeAug 1st 2007
     
    If the problem exists only in IE7, you can use some conditional CSS to send special instructions to only that browser. Just add the following lines to the bottom of head.php (or below all the other CSS links in your page's head):

    <!--[if IE 7]&gt;
    &lt;style type=&quot;text/css&quot;&gt;
    #footer {
    width: 798px;
    }
    &lt;/style&gt;
    &lt;![endif]-->

    I'm curious about what's causing the problem with your footer, though.
    • CommentAuthoramnesia
    • CommentTimeAug 2nd 2007
     
    I'll add the right now
    • CommentAuthoramnesia
    • CommentTimeAug 3rd 2007
     
    Just wanted to add that everything is perfect :)

    I've moved on to trying to solve Lightwindow and Accordion problems now :p

    Many thanks and I hope this thread can benefit anyone who had the same problem as me.

1 to 17 of 17

  1.