Not signed in (Sign In)

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

General Support: Adjusting Width

Bottom of Page

1 to 12 of 12

  1.  
    • CommentAuthorthenotch
    • CommentTimeSep 10th 2007
     
    I have a completely CSS driven site and have DIV that is 580px in width floating left. This is where I would like to display my Plogger images.

    The problem is adjusting Plogger to fit within this area. I have tried adjusting the gallery.css file and the #wrapper div to 500px without any luck. Plogger continually overflows the DIV and ends up outside of the area I want it to.

    What is the best way to resize the default width of Plogger so it will fit within the constraints of this area?
    • CommentAuthorardamis
    • CommentTimeSep 10th 2007
     
    If you are using the default/classic theme, setting a width for #wrapper should constrain Plogger to that width. If the intermediate-sized image on the Pictures page is wider than the width of #wrapper, however, it will overflow. You'll have to reduce the width for that image in the Options (Intermediate Picture Width). If the width of #wrapper is less than roughly 590px, the comment textarea will also overflow, unless you edit the value for cols="70" in comments.php.

    If you're using a different theme, you may have to adjust a number of different DIVs. If you can post a link to your gallery, I'll take a look and see if I can identify where your overflow is coming from.

    -ardamis
    • CommentAuthorthenotch
    • CommentTimeSep 10th 2007
     
    That is the theme I am using (Default/Classic) and I only noticed a difference when I altered the #main_container div and then also edited the footer and header files. Altering the #wrapper div doesn't seem to be making a difference. I am editing the gallery.css file in the theme/default directory.

    I am still not getting the desired results I am looking for. Here is a screen shot of what I am getting:



    As you can see, I have the contents within the div I have setup but some of it is still spilling over past that div.

    Thoughts?
    • CommentAuthorardamis
    • CommentTimeSep 10th 2007
     
    The problem is that your "default.css" style sheet also has a #wrapper, on line 6, which is set to a width of 800px. Because that CSS file is referenced after the Plogger CSS file in the HTML, the #wrapper for the gallery area is using that 800px width instead of the 580px width from Plogger's "style.css" sheet.

    You could fix this by renaming the Plogger wrapper in the HTML to <div id="plogger_wrapper"> and the CSS to #plogger_wrapper.

    (Having two elements with the same ID is illegal in XHTML, by the way, so the above fix would correct that, as well.)

    Mike, if you read this, it may be a good idea to avoid common IDs, like #wrapper, in the themes that are designed to be incorporated into other pages, to avoid this problem.

    -ardamis
    • CommentAuthorthenotch
    • CommentTimeSep 11th 2007
     
    Bingo... that fixed it... I just renamed my divs since I knew exactly where they were...
    Awesome... looking forward to tweaking this even more to fit my site...

    Excellent program!
    • CommentAuthorcruzdre
    • CommentTimeSep 12th 2007
     
    Hi Ardamis n thenotch,
    I have the same problem and I can't seem to fix it.
    You refer to default.css n style.css, I don't have either of those files. I do have gallery.css,greybox, lightbox n tabs but I can't find anything that has anything more than 40px

    Can you'll or anyone PLEASE help me.
    The website is http://www.freshtalent.net.nz/plog/

    Thank you'll so so so much!!
    Andre
    • CommentAuthorjammindice
    • CommentTimeSep 12th 2007
     
    Try using the DOM inspector in Firefox... it's a great help to identify css issues easily..

    You don't have the default.css or style.css because that is what thenotch was using on his website.

    you have two settings setup that are conflicting.

    the first: .tablew2 has a width of 600px
    the second: #wrapper has a width of 750px

    you need to edit the gallery.css file in the theme you're using and adjust the #wrapper width till it looks appropriate... something less than 600 most likely

    gallery.css can be found here if you are using default theme:

    http://www.freshtalent.net.nz/plog/themes/default/gallery.css
    • CommentAuthorgrae.uk
    • CommentTimeSep 21st 2007
     
    Ok, i am having the same problem :(

    I have tried everything that has been suggested here but still don't seem to be able to get it :(

    Any advice would be much appreciated. Here is a link to my gallery so you can see what i mean: http://www.dalesdown.org.uk/plogger/

    Thanks in advanced! :)
    • CommentAuthorjammindice
    • CommentTimeSep 21st 2007
     
    ok you did the same thing... you named your main div "wrapper" you can't do this with plogger... change the name and all should be good... then set the width of the gallery in plogger/themes/(theme you use)/gallery.css

    these errors are easily found with the Firefox DOM inspector... if you do any kind of website design you should use this to troubleshoot css related issues. And one css issue is you cannot have two div entries with the same name or id, well you can but you shouldn't so change your name of the "wrapper" div you created to "main" or "wrapper-main" and amend your css files accordingly
    • CommentAuthorgrae.uk
    • CommentTimeSep 22nd 2007
     
    thanks jammindice!!! Much appreciated :) All works beautifully now !
  11.  
    I'm having the same problem. I'm using the Classic theme in my setup. you can view it at www[dot]neataudiowf[dot]com/gallery/index.php . I can't figure out what I'm doing wrong.
    •  
      CommentAuthorsidtheduck
    • CommentTimeDec 30th 2008
     
    qwertytechwf,

    You did the exact same thing. Probably the easiest thing to do is open themes/default/header and change this line:
    print '<div id="wrapper">
    to this:
    print '<div id="plog-wrapper">

    Then open themes/default/gallery.css and change this line:
    #wrapper {
    to this:
    #plog-wrapper {

1 to 12 of 12

  1.