tdadventure
Posts: 3
Joined: Tue May 11, 2010 7:29 am

Customizing the Index Page Style

Hello--
I'm new here and trying to figure out how to do some customization with photo album webpages generated by Google's Picasa and Highslide. I have been experimenting with the Highslide Editor and a Highslide HTML export template from within Picasa.

Here is a link to my examples, workflows, and thoughts:
http://www.tdadventure.com/ideas/picasa.html

I am trying to figure out a way to merge the best of these two methods. I like the easy workflow and index page style for the Picasa Template, but don't know how to customize the gallery settings like I can with the Highslide Editor.

Thanks,
TD...
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Customizing the Index Page Style

Hi TD,

The Picasa template youÔÇÖve found uses a very old version of Highslide and you canÔÇÖt use the gallery functions from the Editor in old Highslide versions.
IÔÇÖve created a new Highslide JS Gallery template for Picasa: http://www.roadrash.no/highslide-picasa-template/
With this template you can download different settings from the Editor and easily add them to the galleries you creates.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
tdadventure
Posts: 3
Joined: Tue May 11, 2010 7:29 am

Re: Customizing the Index Page Style

RoadRash--
I can't thank you enough. That is exactly the kind of "merger" of the two methods I was looking for. I can organize and export photos in Picasa and then customize how they are displayed in the Editor. A quick copy/paste of the Highslide folder and I'm off to the races.

I do have a couple questions about some further tweaks:
1) In Paul's original Picasa Template, all the thumbnails on the index page were uniform size (75x75 ?) so it made neat rows of 5 pictures. Is there a way to modify this in the template? Maybe 100x100 and rows of 4 thumbs?
2) I updated my example page above to include a test of your new template. I added a link to the matching Picasa Web Album (some of my friends like to see the geotag data and other picture metadata) on the left side in the description. Where do I go in the code and how can I modify the font color and drop the underline for the link?

Most of my web publishing work has been through iWeb, but I've learned about HTML codes and tags. I'm still trying to learn, but style sheets still confuse me.

Thanks again for all your help. The new template is really great!
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Customizing the Index Page Style

1) Heads gets cut off when using the old template with square thumbs, thatÔÇÖs why I didnÔÇÖt use square thumbs.
(I like my niece best with her full head! :))
old template
old template
2010-05-13_0135.png (98.85 KiB) Viewed 4438 times
2) You can add this to style.css (found inside the assets folder):

Code: Select all

#description a {
	color: #ffffff;
	text-decoration: none;
}
This will give white link color with no underline.
IÔÇÖve uploaded the new CSS file to the template page, so you can download the zip again if you donÔÇÖt feel like messing with the CSS file.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
tdadventure
Posts: 3
Joined: Tue May 11, 2010 7:29 am

Re: Customizing the Index Page Style

After reading through your notes here and then looking through the code files, I think I figured out how to tweak the template exactly the way I want. I figured out where to add in the size parameters for the thumbnails on the index page, changed the link color by editing the hex code, and modified the gallery title in the header.

I've updated my example page again to include my "final" version of the template. http://www.tdadventure.com/ideas/picasa.html

RoadRash -- Thanks again for all your help. I wouldn't have been able to get this done without your knowledge and assistance. Paul Van Roekel (the original author of the Picasa template) has a contact page on his website. I'll leave it up to you if you would like to submit your updated template to him to include on his website. His site has a large collection of Picasa templates. A lot of them are Flash based. With companies like Apple and Microsoft both saying they are moving away from Flash in the future, I wanted to find something that was non-flash for my album pages. I think Highslide is great and your update to the template may be of great interest to others looking at Paul's site for a Picasa template.
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Customizing the Index Page Style

YouÔÇÖre welcome. :)
These new Highslide JS Gallery templates for Picasa arenÔÇÖt based on Paul Van RoekelÔÇÖs old template. Picasa provides an info file where all the special Picasa codes are explained. The rest is pure HTML and CSS.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no

Return to “Highslide Editor”