Gallery help

437 Posts

distant_smile Reply #1, 15 years, 4 months ago

Hi all. I have a page with a gallery but as you can see from the link, image 2 has a 2-line Title so this pushes my other images out of sync. How can I correct this as I am unsure how to affect with css. Also Can I make the title text a link to that specific page?

http://www.pawsforwildlife.co.uk/caterpillar_ids.php

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

437 Posts

distant_smile Reply #2, 15 years, 4 months ago

Can I set padding around the individual images?

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

437 Posts

distant_smile Reply #3, 15 years, 4 months ago

Tried something else. I added the parameter &css linked to a chunk. the chunk code is as follows

.grid3 {
    width: 215px;
display: inline;
height: 350px;
    margin: 10px;
border: 2px solid #000000;
}

it appears better but all the images are lined vertically. What am I missing from the css to make them stretch across, 3 pics per row?

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

863 Posts

Lucas Reply #4, 15 years, 4 months ago

Actually you can almost use the same css as for your other thumbnail page. You need to float them to get them side by side.

.grid3 {
    width: 215px;
    display: block;
    float: left;
    height: 350px;
    margin: 10px;
    border: 2px solid #000000;
}

And here’s a great article if you want to learn how it works:
http://www.alistapart.com/articles/css-floats-101/

437 Posts

distant_smile Reply #5, 15 years, 4 months ago

Thanks Lucas. I have tried the code but I still get a vertical line. The maxigallery call is within this code on my template

<div id="content">
[*content*]
[!MaxiGallery? &display=`embedded`  &embedtype=`slimbox` &pics_per_row=`5` &max_thumb_size=`200` &thumb_use_dropshadow=`1` &min_pic_size=`600` &css=`Idents`!]
</div>

and ’Idents’ contains...

.grid3 {
    width: 215px;
    display: block;
    float: left;
    height: 350px;
    margin: 10px;
    border: 2px solid #000000;
}

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

863 Posts

Lucas Reply #6, 15 years, 4 months ago

This is pure css, nothing to do with modx. It’s not having any result because there is no element with a class of .grid3 on the page.

Having a look, you’ll need to apply it to the <li> elements like this:

.thumb li {
    width: 215px;
    display: block;
    float: left;
    height: 350px;
    margin: 10px;
    border: 2px solid #000000;
}

Note - I think the &css option for MaxiGallery adds the css to your page header, but it would be best to add it to your main stylesheet instead. Then you can apply those styles across your whole site rather than changing them from page to page.

437 Posts

distant_smile Reply #7, 15 years, 4 months ago

Sorry to sound dim, but how do I do that?
huh

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

863 Posts

Lucas Reply #8, 15 years, 4 months ago

I think you’re using a theme that someone else designed here, so if you’re not experienced with css it might be better to put your customisations in a separate stylesheet rather than editing the default one.

So, using a text editor create a new file called ’custom.css’

Paste in

.thumb li {
    width: 215px;
    display: block;
    float: left;
    height: 350px;
    margin: 10px;
    border: 2px solid #000000;
}

and save it in your assets/templates/11_swansong/ folder. What we are doing is applying the above styles to any <li> element inside a parent element with class="thumb". In this case it is <ul class="thumb">.

Now go into your template and add:

<link href="assets/templates/11_swansong/custom.css" rel="stylesheet" type="text/css" />

under this existing line:

<link href="assets/templates/11_swansong/Hunting.css" rel="stylesheet" type="text/css" />

Now you can add all your css changes to custom.css and use them across all pages on your site. Makes maintaining your styles much easier. Oh, you can remove &css=`Ident` from your snippet call too as we won’t be needing that now.

Run yourself through a few css tutorials and you’ll be amazed what you can do. Will save you a few headaches too!

437 Posts

distant_smile Reply #9, 15 years, 4 months ago

My template is a modified version of a much simpler one. I have used tutorials, etc to increase my knowledge but I am still trying to grasp it. That link about floating is excellent, really learnt alot on that one article, thanks! Will give this a go now, and fingers crossed it will all be sorted. Thanks for all the help

www.PawsForWildlife.co.uk
www.Borntobrick.co.uk

863 Posts

Lucas Reply #10, 15 years, 4 months ago

No problem, you have to start somewhere wink

You should really dig into that A List Apart site, it’s one of the best out there. Good luck!