Not signed in (Sign In)

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

Themes: How to adapt default theme use colletion overview from Lucid theme

Bottom of Page

1 to 9 of 9

  1.  
  1.  
    I've started to integrate Plogger v3 (trunk 459) with Wordpress 2.5.1 and all is working fine except for a strange charset problem (see another topic). I'm using the default theme with some minor changes to remove the search and jump box from the header and each mid-sized photo uses Lightbox to display the fullsize one.

    One thing that irritates me is that the thumbnails in the collections and albums views are not properly lining up (because of the length of the collection/album names) and I would like to change this to a single list as in the Lucid theme (or even two columns). However, my CSS knowledge is not that good so any hints are appreciated. Trying to copy some stuff from the Lucid theme resulted in some weird effects.

    Regards,

    Kees.
    •  
      CommentAuthorkimparsell
    • CommentTimeJun 25th 2008
     
    If you'd like to keep using the default theme, you can edit your gallery.css file to have the long titles wrap around to the next line:

    .tag {
    text-align: center;
    width: 125px;
    }

    That should ensure that your thumbnails in each row line up properly.

    I will take a look at how the Lucid theme implements the collection page as well and see if I can help you implement the collections list in either one or two columns on your theme if you'd still like to try that as well.
  3.  
    I've added the fixed width to the default gallery.css file and this works. The thumbnails are now lined-up correctly but every other row contains only a single thumbnail. See http://www.halfje-bruin.nl/foto-album/?level=collection&id=6 for an example.

    I will look at the Lucid theme (collections.php, collection.php and album.php) and figure out what is done there so I can create a single list in the future.

    Thanks for your help.
    •  
      CommentAuthorkimparsell
    • CommentTimeJun 25th 2008
     
    There are a few other changes that you can make to your gallery.css file to resolve the issue of the orphaned thumbnail:

    Find .thumbnail img and .thumbnail a:hover img and replace with the following code:

    .thumbnail img {
    padding: 5px;
    text-align: center;
    margin: 10px 3px;
    background: #fff;
    border-width: 1px;
    border-color: #789;
    }


    .thumbnail a:hover img {
    border-width: 1px;
    border-color: #38c;
    margin: 10px 3px;
    }


    Then find ul.slides and .slides li and replace with the code below:


    ul.slides {
    margin: 0 auto;
    margin-top: 15px;
    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: 200px;
    }

    That should resolve the issues with the orphaned thumbnails and your thumbs should still line up correctly.

    The key was changing the margin and padding in a few places, and declaring a set width and height on .slides li instead of auto.
  5.  
    Thanks. This works like a charm.
    •  
      CommentAuthorkimparsell
    • CommentTimeJun 26th 2008
     
    You're welcome - I'm glad we got it sorted out for you. It looks very nice! :)
  7.  
    I've tried using CSS to get the same layout for collections and albums as with the Lucid theme but I kind of failed in this. Now I'm using tables (I know, sooo not Web 2.0) and have the result I wanted.

    Thanks for the help.
    • CommentAuthorclairev
    • CommentTimeJun 30th 2009
     
    Hi

    Im trying to do the same thing as Kees, Ive tried adding a width to the .slides li and this does center the thumbs but in one single line? Please can you help me? http://www.paulvickers.co.uk/ploggerb3/index.php

    Also please can you explain why there are 2 gallery.css files in my plogger folder? There is the gallery.css file in the default theme (which is the one I have been editing to make changes), but there is also one in a folder called css along with admin.caa, lightbox.css, greybox.css and tabs.css - what do these files do?

    Thank you :o)
    •  
      CommentAuthorkimparsell
    • CommentTimeJul 4th 2009
     
    Posted By: clairevAlso please can you explain why there are 2 gallery.css files in my plogger folder? There is the gallery.css file in the default theme (which is the one I have been editing to make changes), but there is also one in a folder called css along with admin.css, lightbox.css, greybox.css and tabs.css - what do these files do?

    Those files are used by the Plogger admin section, and have nothing to do with the display of the front-end gallery.

    Any changes you make to the gallery.css file located within your theme folder is what impacts the appearance of your gallery.

    It appears that you have sorted out your issue by switching to/modifying the default theme.

1 to 9 of 9

  1.