How to modify Gartz Classic styles

Everything to do with Templates and Templating for Admiror Gallery.
Post Reply
Message
Author
tomhilton
Posts: 3
Joined: Mon Jul 04, 2011 8:33 pm

How to modify Gartz Classic styles

#1 Post by tomhilton »

hey guys, really nice template

i'm trying to make a few minor changes to the template but don't seem to be getting anywhere - i'm new to this, and haven't worked with css before - apologies!

i thought i might be able to adjust the margins, padding and borders by making changes in template.css and zipping it back up - am i wrong? is there something else i should be doing?

i was trying to remove the borders and reduce the gaps between thumbnails, but maybe i should just leave it to the pro's...!

cheers

tom

Admiror Gallery 5 - Fundraising Campaign

User avatar
Vasiljevski
Developer
Developer
Posts: 1258
Joined: Sat Aug 14, 2010 9:31 pm
Location: Novi Sad, Serbia
Contact:

Re: Gartz Classic

#2 Post by Vasiljevski »

I'm not an expert for CSS and design in general, but changing template.css should do the trick :)

But you have to be aware that some basic CSS styles are taken from the main AdmirorGallery.css file, and you should overide these to.
Also there is pagination.css and albums.css that should be changed in case you want to change the way albums and pagination is displayed.

So take a look at AdmirorGallery.css (located in "[joomplaroot]plugins/content/AdmirorGallery/") and add an override in template.css for the style you want to change.
Keep in mind that classic gallery template is based on TABLE element.
Help Admiror Gallery become even better,
give us a review on JED

tomhilton
Posts: 3
Joined: Mon Jul 04, 2011 8:33 pm

Re: Gartz Classic

#3 Post by tomhilton »

Thanks very much Vasiljevski - I've almost got it how I want it now - my intention was to lose all borders, padding & margins, and just have a solid block of thumbnails.

As you can see I still have a tiny gap between the thumbnails, which seems to be something to do with the tiny white dash that appears at the bottom right of a thumbnail when i hover over it:

http://www.tomhilton.net/people.html

Any idea whats going on here? Any suggestions on how to get rid of it?

Thanks again,

Tom

User avatar
kekeljevic
Developer
Developer
Posts: 445
Joined: Tue Aug 17, 2010 2:38 pm
Location: Novi Sad, Serbia
Contact:

Re: Gartz Classic

#4 Post by kekeljevic »

Edit:
http://www.tomhilton.net/plugins/conten ... mplate.css

Add this code:

Code: Select all

.ag_thumbgartz-classic, .ag_thumbgartz-classic a
{
    display:inline-block;
}

tomhilton
Posts: 3
Joined: Mon Jul 04, 2011 8:33 pm

Re: Gartz Classic

#5 Post by tomhilton »

excellent, thanks so much for the help guys.

one final question - is there a way to fix the width of the block of thumbnails (to stop images jumping around & rearranging to fit the browser window)? to get, say, a 5x5 block of thumbnails at all times. i thought adjusting 'frame_width' might do the trick but it doesn't seem to make any difference.

thanks again,

tom

Admiror Gallery 5 - Fundraising Campaign

User avatar
kekeljevic
Developer
Developer
Posts: 445
Joined: Tue Aug 17, 2010 2:38 pm
Location: Novi Sad, Serbia
Contact:

Re: Gartz Classic

#6 Post by kekeljevic »

Try something like this:

Code: Select all

$itemCount=count($AG->images);
$itemsPerRow=3;
$numOfRows=ceil($itemCount/$itemsPerRow);
for($a=0; $a<$numOfRows; $a++){
    for($b=$itemsPerRow*$a; $b<$itemsPerRow*($a+1); $b++){
        if(!empty($AG->images[$b])){
            echo $AG->images[$b]." | ";
        }
    }
    echo '<div style="display:block; clear:both">&nbsp;</div>';
}

Post Reply