Not signed in (Sign In)

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

General Support: lame question, how to make collections and albums horizontally on my page

Bottom of Page

1 to 16 of 16

  1.  
    • CommentAuthorimbir
    • CommentTimeJun 2nd 2008
     
    , instead of keeping them vertically how is in default setting v3.0beta
    thanks
    •  
      CommentAuthorsidtheduck
    • CommentTimeJun 3rd 2008
     
    imbir,

    I believe that Plogger already has them set up horizontally by default. Do you have a link to your installation?
    • CommentAuthorimbir
    • CommentTimeJun 3rd 2008
     
    http://imbir.net/ploggerb3/?level=collection&id=1
    •  
      CommentAuthorsidtheduck
    • CommentTimeJun 3rd 2008
     
    Try this. Open your 'gallery.css' in your current theme (it looks like you are using the "air" theme). Change:.collection {
    border:1px solid #BED2D2;
    display:inline;
    float:left;
    margin:0pt 0pt 10px;
    padding:10px 25px;
    text-align:left;
    width:748px;
    }    to:.collection {
    display:block;
    float:left;
    margin:0pt 0pt 10px;
    padding:0px;
    text-align:center;
    width:auto;
    }
    • CommentAuthorimbir
    • CommentTimeJun 3rd 2008 edited
     
    <my mistake>
    • CommentAuthorimbir
    • CommentTimeJun 3rd 2008 edited
     
    <my mistake>
    •  
      CommentAuthorsidtheduck
    • CommentTimeJun 3rd 2008
     
    That is the 'gallery.css' found in 'Plogger/themes/air/' folder?
    • CommentAuthorimbir
    • CommentTimeJun 3rd 2008
     
    My bad. Sorry,

    This is the collections section from gallery.css file of /air/ theme :

    #collections {
    }
    .collection {
    margin: 0 0 10px 0;
    padding: 10px 25px;
    float: left;
    display: inline;
    text-align: left;
    border: 1px solid #bed2d2;
    width: 748px;
    }
    .collection img {
    border: 1px solid #01B4E2;
    float: left;
    margin-right: 15px;
    padding: 3px;
    display: inline;
    background: #fff;
    }
    .collection img:hover {
    background: #eaeae0;
    border: 1px solid #ff6600;
    }
    .collection p {
    margin: 4px 0 0 0;
    line-height: 1.5em;
    }
    .collection h2 {
    margin: 5px 0;
    padding: 0;
    font-size: 1.4em;
    }
    .collection h2 a {
    color: #01B4E2;
    }
    .collection h2 a:hover {
    color: #ff6600;
    }
    •  
      CommentAuthorsidtheduck
    • CommentTimeJun 3rd 2008
     
    Change it to this:
    Posted By: imbir
    #collections {
    }
    .collection {
    display:block;
    float:left;
    margin:0pt 0pt 10px;
    padding:0px;
    text-align:center;
    width:auto;
    }
    .collection img {
    border: 1px solid #01B4E2;
    float: left;
    margin-right: 15px;
    padding: 3px;
    display: inline;
    background: #fff;
    }
    .collection img:hover {
    background: #eaeae0;
    border: 1px solid #ff6600;
    }
    .collection p {
    margin: 4px 0 0 0;
    line-height: 1.5em;
    }
    .collection h2 {
    margin: 5px 0;
    padding: 0;
    font-size: 1.4em;
    }
    .collection h2 a {
    color: #01B4E2;
    }
    .collection h2 a:hover {
    color: #ff6600;
    }
    • CommentAuthorimbir
    • CommentTimeJun 3rd 2008
     
    Do I have to do something more than copy the modified file into /air/ folder because it looks like it dosnt want to work.
    •  
      CommentAuthorsidtheduck
    • CommentTimeJun 3rd 2008 edited
     
    Try this in your 'gallery.css'. I think it should work:
    #collections {
    }
    .collection {
    display:block;
    float:left;
    margin:0pt 0pt 10px;
    padding:0px;
    text-align:center;
    width:auto;
    }
    .collection img {
    border: 1px solid #01B4E2;
    padding: 3px;
    display: block;
    background: #fff;
    }
    .collection img:hover {
    background: #eaeae0;
    border: 1px solid #ff6600;
    }
    .collection p {
    margin: 4px 0 0 0;
    line-height: 1.5em;
    }
    .collection h2 {
    margin: 5px 0;
    padding: 0;
    font-size: 1.4em;
    clear: left;
    }
    .collection h2 a {
    color: #01B4E2;
    }
    .collection h2 a:hover {
    color: #ff6600;
    }
    • CommentAuthorimbir
    • CommentTimeJun 4th 2008
     
    I am afraid it doesnt.
    •  
      CommentAuthorsidtheduck
    • CommentTimeJun 4th 2008
     
    Are you sure? -> My test site

    It still needs a little tweaking, but it works in FF and IE7 (IE6 a little too). You should be able to tweak it a little more to get it to work across all browsers.
    • CommentAuthorimbir
    • CommentTimeJun 4th 2008
     
    You are right. My gallery doesn't work only with my Firefox. Its all right with my Netscape and Opera. Its not a problem for me but I was wandering what could be the reason.
    •  
      CommentAuthorsidtheduck
    • CommentTimeJun 4th 2008
     
    Try clearing your cache on Firefox.
    • CommentAuthorimbir
    • CommentTimeJun 4th 2008
     
    Its all right now. Thanks

1 to 16 of 16

  1.