Not signed in (Sign In)

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

    • CommentAuthorC4talyst
    • CommentTimeOct 11th 2008
     
    I've exhausted my searches here trying to figure out why I can't get my content centered using the default theme. I know floats are in use here, however I tried wrapping them in resized div's within all the theme templates and have edited a lot of the gallery.css and I can't get my content/thumbs centered.

    Do I need to get rid of the floats and use some crappy tables to accomplish this?
    •  
      CommentAuthorkimparsell
    • CommentTimeOct 11th 2008
     
    How about a link to your gallery so we can figure out what the problem might be?
    • CommentAuthorC4talyst
    • CommentTimeOct 12th 2008
     
    http://www.timsrivershore.net/plogger/index.php?level=album&id=3

    Sorry, and thanks for helping me. I'm glad I chose plogger first, love it.
    •  
      CommentAuthorkimparsell
    • CommentTimeOct 12th 2008
     
    Thanks for providing the link. :) I provided a solution for another poster in this thread that I've adapted to work with your gallery, using your colors.

    To get the thumbnail content centered on the collections, collection and album pages, find ul.slides and .slides li in your stylesheet and completely replace what's there with the code below:
    ul.slides {
    margin-top: 15px;
    margin-left: 27px;
    padding: 0;
    list-style: none;
    line-height: 1.4em;
    }

    .slides li {
    display: block;
    float: left;
    margin: 0 10px 10px 0;
    padding: 0;
    width: 125px;
    height: auto;
    }

    To keep the collection and album titles centered and wrapping properly, look for .tag and replace with the code below:
    .tag {
    text-align: center;
    width: 125px;
    white-space: wrap;
    }

    I noticed that your thumbnails move when hovering over them. To fix this and retain the border width change, look for .thumbnail img and .thumbnail a:hover img, and replace with the code below:
    .thumbnail img {
    padding: 5px;
    text-align: center;
    margin: 10px 3px;
    background: #fff;
    border: 1px solid #C22219;
    }

    .thumbnail a:hover img {
    border: 2px solid #C22219;
    margin: 9px 2px;
    }

    I also noticed that the large image moves on hover. To fix this and retain the border width change you made, look for .photos, .photos-large, and #picture-holder a:hover img, and replace with the code below:
    .photos {
    padding: 5px;
    margin: 3px;
    border: 1px solid #C22219;
    }

    .photos-large {
    border: 1px solid #C22219;
    padding: 10px;
    margin: 3px;
    }

    #picture-holder a:hover img {
    text-align: center;
    border: 2px solid #C22219;
    margin: 2px;
    }

    There are some other tweaks to the stylesheet that you can make to get the breadcrumbs, date, picture caption, rss feed image, Plogger link, etc. with more of a margin - right now they are right up against the sides of the page. If you'd like to fix those, then look for the following in your stylesheet and replace with the code below each item.

    Breadcrumbs:
    #breadcrumbs {
    margin: 0;
    padding: 2px;
    border-top: 1px solid #A0A0A0;
    border-bottom: 1px solid #A0A0A0;
    }

    To center the Show details link under the large image:
    #exif_toggle {
    padding: 0;
    margin: 0;
    text-align: center;
    }

    To pull the whole gallery in just a bit from the sides:
    #inner_wrapper {
    width: 97%;
    }

    To move the rss feed image in from the right margin:
    #rss-image {
    margin: 0 5px 0 0;
    padding: 0;
    display: inline;
    }

    To fix the date and picture caption at the top of the large image:
    .date, #picture_caption {
    font-size: 0.9em;
    font-weight: bold;
    line-height: 1.4em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 2px;
    padding-bottom: 2px;
    }

    To fix the Plogger link at the lower right:
    #link-back {
    font-size: 10px;
    text-align: right;
    padding: 0;
    margin: 0 10px 0 0;
    }

    Let me know if you have any other questions or issues. Hope this helps! :)
    • CommentAuthorC4talyst
    • CommentTimeOct 12th 2008
     
    Thanks for all that, I kind of figured I'd have to hack it a little. The gallery index and collections pages don't center this way, but I see how I can get them to once they have some more content. I really appreciate your time spent looking at that.