New Template: macstyle v1.0 - for pixelpost v1.6

[tomyeah]

http://tomyeah.com/images/pixelpost_macstyle_small.jpg (http://macstyle.tomyeah.com/index.php?showimage=39)




-- Template: macstyle v1.2 - for pixelpost v1.6 --


Description:

This is a minimalistic template that should mimic the look of iWeb's black template in terms
of simplicity and handling.
It features hover-controls for the prev- and next-image-link
and slideshow function ( Author: jdleung ).
The source code for the reflections on the thumbnailrow is done with Reflection.js v1.6
but with fixed links for IE6/7. ( Author: http://cow.neondragon.net/stuff/reflection/ )


Installation:

o> Admin -> Addons -> Page-By-Page-Archive Addon
The maximum number of thumbnails in each page of the archive page: 15 -> update

o> Admin -> Options -> Thumbnails -> THUMBNAILROW
How many thumbnails to display in the automatically generated row: 22 -> update

o> Admin -> Options -> Thumbnails -> CROP THUMBNAILS? : yes -> update

o> Admin -> Options -> Thumbnails -> THUMBNAILS SIZE
Set thumbnails size, Width x Height: 100 x 100 -> set new sizes (Re-generate thumbs)

o> Copy the file "addons/modified_slideshow.php" into the "addon" folder of your
pixelpost installation ( delete the old slideshow.php if you installed it before )

o> Copy the "macstyle" folder from "templates" into the templates folder of pixelpost

o> Admin -> Options -> Template -> DATE FORMAT: d M Y h:i a -> update

o> Admin -> Options -> Template -> SWITCH TEMPLATE: macstyle -> update


Things to change for your Personal Information:

o> Go to image_template.html Line: 66 (search for "site-title-sub")
and change the "Lorem Ipsum ..." to your own subtitle, like "This Blog rocks !"

o> Go to image_template.html Line: 134 (search for "mailto")
and change the email(blabla@mac.com) in "mailto:blabla@mac.com?subject..." to your
email-adress.

o> Go to about_template.html Line: 41 (search for "mailto")
and change the email(blabla@mac.com) in "mailto:blabla@mac.com?subject..." to your
email-adress.

o> Go to about_template.html Line: 23-49 and fill in your content that describes your
website. ( you can add as many lines as you want to )

Tip:

Optimal picture width and height should be around 600px (can be bigger too).

Don't use too slim images like < 150px;

Have at least 22 images in your pixelpost blog.

Categories are not supported. Just use the default category or modify the template yourself.

The template is not optimized for google yet: h1 h2 and so on. This may be added in further
updates.


For comments, reviews and suggestions just email to macstyle (‰t) tomyeah (dˆt) com


Tested on:

Windows XP: Firefox 2, Opera 9, IE7, IE6 (page extended to the right, no slide animation)
Windows Vista: Firefox 2, IE7
Mac OS X: Firefox 2, Opera 9, Safari, Webkit, IE5.2 (no reflections, no slide animation)


*** Version History: ************************************************** *****************************

1.2 - Now with reflections in IE6, with comments-button in IE6 and IE5.2 (mac).

1.1 - Added more browser detecting and fixing code, photostrip disabled in IE6,
IE5 and older browsers

1.0 - First Version, minor bugs with the photostrip and browser compability




Download: macstyle_v1.2.zip (http://tomyeah.com/images/macstyle_v1.2.zip) (88kb) ( Updated: 22.05.2007 )

[theMezz]

every filename starts with a "."
does not work on my linux hosting

[tomyeah]

@theMezz: just fixed the download link and some other things ... zipped it this time with winrar in vista ...

regards, tom.

[theMezz]

@theMezz: just fixed the download link and some other things ... zipped it this time with winrar in vista ...

regards, tom.


thank you for your time!
what is the URL for the download???/

:-)

[tomyeah]

@theMezz ofcourse its the same as the first one, i simply edited the thread. just redownload the file.

[theMezz]

@theMezz ofcourse its the same as the first one, i simply edited the thread. just redownload the file.


many thanks
downloading it now

[tomyeah]

i fixed now all minor bugs that were left, by adding several browser detections for IE7, Opera, Safari, Firefox. It moves and clips correctly in all my browsers now. if you find any bugs please contact me !

regards, tom.

[andybrock]

gorgeous template tom, i may have to give that one a go soon :)

[Dennis]

Looks really amazing Tom, thanks for sharing.

The only thing holding me back is the fact that it has a max width of 600 px. All my pictures are 750px max.

Also the regeneration of the thumbs is holding me slightly back (my thumbs have
a width of 175 px and height of 115px (always)).

There are also some errors with

Error: syntax error
Source File: http://macstyle.tomyeah.com/templates/macstyle/js/builder.js
Line: 1
Source Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


May I suggest you use this: http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html for the slideshow, comments and contact buttons.

[tomyeah]

@schonhose: about your picture size ... 600 px in height is just a recommendation because the upper part is quite massive already. 750 px should work as well. about the thumbs ... for the thumbstrip the size would be too big ... id need like 2 different sets of thumbs to realize it. id say its although a matter of taste ...

it looks like i just needed to modify an existing line in my template.
<script src="templates/macstyle/js/scriptaculous.js?load=effects" type="text/javascript"></script>

thats all :D Download above is updated now.

regards, tom.

[ellikelli]

Fantastic template! Thanks a bunch! I'm using it on my blog.

[tomyeah]

@ellikelli: :D have fun with it.

regards, tom.

[Dennis]

Tom, can you add support for that addon with dynamic colors? That would be really amazing.

[tomyeah]

@schonhose: im just writing this shopping cart addon (without paypal stuff) ... and i dont think it would fit to that piano black look of the theme :D but ill make another theme soon :D

regards, tom.

[jgrayson]

Fantastic template! Thanks a bunch! I'm using it on my blog.

the thumbnails are not centered in Safari or firefox on the mac, the are left justified, everything else is centered

[tomyeah]

@jgrayson: im on mac ... both, safari and firefox show it correctly on mac ... maybe u got to refresh or redownload or reinstall ... i tested in all like all browsers i got in vista, xp, and mac ... she had a few speed problems on here site, but once u hit the refresh button or switch to another pics, its all correct ...

regards, tom.

[jgrayson]

@jgrayson: im on mac ... both, safari and firefox show it correctly on mac ... maybe u got to refresh or redownload or reinstall ... i tested in all like all browsers i got in vista, xp, and mac ... she had a few speed problems on here site, but once u hit the refresh button or switch to another pics, its all correct ...

regards, tom.

i checked it on 3 different macs. the problem isn't that it's not centered, the problem has to do with the fact your site is not refreshing when the user changes the width of the browser window AFTER a page on your site loads. it's basically loading "x" amount of thubmails along the bottom but if you wait for the page to load and resize the browser window the thumbnail navigation doesn't reset. it's possible that you aren't on a big enough monitor to test it out, i have a two monitor set up with each set to 1920x1200.

also you might want to check it again in IE6 in XP. the template doesn't look good in IE6, you've used transparent PNGs for your comments, slideshow, email and buy buttons and IE6 doesn't support transparent PNGs, so instead they look like grey boxes. also, the entire thumbnail nav is displayed in IE6, which basically means that they is a very long horizontal scroll bar on the browser.

here are some screenshots (since some are very large screenshots, i resized them all to under 800x600 - if you want me to put up the originals i can):

http://www.johngrayson.com/misc/test1.jpg

http://www.johngrayson.com/misc/test2.jpg

http://www.johngrayson.com/misc/test3.jpg

http://www.johngrayson.com/misc/test4.jpg

http://www.johngrayson.com/misc/test5.jpg

[elmaya]

Very nice...but for some reason the view/add comment does not work for me... any ideas?

Thanks.

[elmaya]

Very nice...but for some reason the view/add comment does not work for me... any ideas?

Thanks.

Nevermind .. its working now..

[tomyeah]

@jgrayson now i understand you :D yes i know that the thumbs only center AFTER u refresh or go to a new pic !

you may ask yourself why ... now here comes the reason. the recent thumb changes within the thumbnail row as you move to the very first or very last picture in your thumb, if i didnt caclulate the new position like this , the thumbrow would be cut like on your pics (so there had to be some math to be able to see the current thumb and still have a full photo strip on screen) !

my idea was that almost nobody changes the browser width after every picture ! :D

if you like, i can make you some javascript that repositions the thumbnail row JUST AFTER you resized or even WHILE you resize your browser window. but i never liked these scripts.

about the pngs, i will change em to non transaperent ones, i was just preparing it like this if somebody wanted to change the background colors ...

oh and about the IE6 .. i could write a script that redirects IE6 users to firefox website :D


regards, tom.



Update:

i found a few new hacks. now it looks different in IE7 and IE6 ... the page works now even in IE5 and older browsers ... and its still XHTML valid and CSS valid :D im slowly beginning to understand what kind of stress webdesigners have these days :D by the way, i dont have IE6 anymore, i just got IE5 on mac and IE7 on vista ;) so i can validate anything for IE6

will update the downloads and descriptions soon ...

[BobNL]

Just started out exploring Pixelpost and came across this nice theme. Played a little with it today. Used a few of your other add-ons too :)

Take a look at http://bob.sigma-bits.com Will refine it a little and hopefully use it on another project. I really like it.

Bob

[tomyeah]

@BobNL: looks like the shopping cart doesnt work so well on your server ... maybe i got to refine the php_session stuff on it ... or maybe its something with ur server and the md5() doesnt work so well, but sometimes i got wierd things happening with your cart ;D

[BobNL]

Did not really take too much time for it to see if I implemented it right. Will probably comment it out for now and work on it later. But strange things do happen with it, that is for sure. :) Maybe saw something similar?

Bob

[tomyeah]

ive just read something about easy php session id hijacking in this article (http://www.ilovejackdaniels.com/php/better-sessions/) ... maybe i need to work a lil on it, didnt think of much abuse on such a simple thing hehe.

i checked it in php4 and php5 , somehow i cant recreate your bugs on my server. maybe you've violated the code a little by editing your personal information in it. no clue.

regards, tom.

[Dennis]

Hi there again Tom, I've been playing with the template and the Harmonious Color v1.0 addon.

First I can can change the Harmonious Color v1.0 to a true admin addon if you want, second the use of the images in the template might be better if they are transparant.

[tomyeah]

@schonhose just before jgrayson complained that the images are transparent, and now you want em transparent ... weeee :D

and for the admin addon ... i had too many error messages ... but you can try if you want to ;)

[jgrayson]

@schonhose just before jgrayson complained that the images are transparent, and now you want em transparent ... weeee :D

and for the admin addon ... i had too many error messages ... but you can try if you want to ;)

i didn't complain about anything, i was pointing out a fact that transparent PNGs don't work in IE6. you do realize that you can use transparent GIFs right?

[Dennis]

jgrayson: transparant pngs will work in IE6

http://homepage.ntlworld.com/bobosola/

But gif might be better indeed.

[tomyeah]

jgrayson: just making fun :D relax hehe. i' happy about every feedback. especially from people that have such antique browsers that i don't have access too. thanks :D

regards, tom.

[andybrock]

So how do we get over the IE6 problem with the thumbnail bar jgrayson/tomyeah?

I take it the reason is because IE6 doesn't support the overflow:hidden command? Is there an alternative?

[tomyeah]

So how do we get over the IE6 problem with the thumbnail bar jgrayson/tomyeah?

I take it the reason is because IE6 doesn't support the overflow:hidden command? Is there an alternative?

i could do it with javascript, like limiting the number of displayed thumbs to the recent screen width. but than you simply have like a few thumbs on the bottom.

or i could use the css clip() function, it should work ... IE6 and IE7 have a special bug with that css function that i could use for this special case :D maybe ill setup some virtual machine for windows xp with IE6, so i could craft this feature :D or somebody of you will write that code.

this is the reference (http://www.w3schools.com/htmldom/prop_style_clip.asp) ...
it could be inserted into the Reflection.js Line 207 or 227

document.getElementById('thumbs').style.clip="rect(0px,document.body.offsetWidth +'px', 200px,0px)";

in the image_template.html you would have to delete this from line 40:
* html body #thumbs {
display: none;
}

something like this ... you would have to experiment :D

regards, tom.

[Dennis]

Tom, can you provide the PNG images? I tried to make the JPG's into transparant GIF but the compression on the JPG images makes it hard to do.

[tomyeah]

sure macstyle-icons-png-transparent.zip (http://tomyeah.com/images/macstyle-icons-png-transparent.zip)(24KB) ...

but making gifs out of anti-aliased fonts its kinda difficult. ive tried it with 75% diffusion but looks nasty :D

[antoclau]

i've problems with... guess what? yep, IE6. I can't see the button to add/view comment. And i've problems with the thumbnail strip too (oversized to the right) but i can live with this... the dramatic problem is that all the IE6 users can't post :confused:

i have the macstyle v1.1

(i made changes in reflection.js on line 227 and i deleted the line 40 on image_template.html, cause before i couldn't see the thumbnail strip with IE6...)

thanks for your help

[tomyeah]

@antoclau: maybe you could post some details of the code modifications and some screenshots ?

i don't have IE6, so i can't see whats wrong there.

regards, tom.

[tomyeah]

good news, i got myself a virtual machine with IE6. now the thumbstrip works with reflections. the "add/view comments" button is back. the slide effect is disabled on the IE6 because it made the browser crash to desktop.

the page is extended to the right side on the IE6 , maybe i can fix that one day. but i think people with such old browsers are used to suffer anyways :D

updated to version 1.2 now.

oh and i disabled the logo "made on a mac" for IE6, since i dont want to make these people more sad about their old browser :P

regards, tom.

[jaywilliams]

tomyeah, you might want to check this out:
http://tredosoft.com/Multiple_IE

You can even install IE7 in "standalone" mode:
http://tredosoft.com/IE7_standalone

[tomyeah]

jaywilliams: sweet :D id rather like IE7 and IE6 on mac ... need to play with these virtual machine there. so i could delete my windows :)

[jaywilliams]

I have IE 4-7, FF, & Opera on a Parallels virtual machine.
It's a necessity to check IE if you do any website design work.

Something else that you might find useful for working with IE:
http://www.quirksmode.org/css/condcom.html
I use this method for applying IE only css rules.

And for debugging check out:
http://getfirebug.com/
http://www.microsoft.com/downloads/details.aspx?FamilyID=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

[jgrayson]

I have IE 4-7, FF, & Opera on a Parallels virtual machine.
It's a necessity to check IE if you do any website design work.

Something else that you might find useful for working with IE:
http://www.quirksmode.org/css/condcom.html
I use this method for applying IE only css rules.

And for debugging check out:
http://getfirebug.com/
http://www.microsoft.com/downloads/details.aspx?FamilyID=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en

here's another tip for you to get stuff working differently in IE vs good browsers (firefox, safari, etc):

html>body .blah { }
.blah { }

IE doesn't recognize the html>body css label and complete skips over it so whatever styles you add to it will only be displayed on non IE browsers. then just add a regular line without the html>body and IE will display those styles.

[Puffin]

After finally upgrading to PP 1.6 I decided to choose this template after modifieing it a little bit...:) I like it a lot but I also had some trouble with the row of thumbnails on the image page. Always there were only 5 TN diplayed which were not centered. I "solved" the problem by edding a <center> tag in the sourcecode ... but I hope there will be anonther and better solution...:??

Anyway...thx a lot!! :)

Jens

[tomyeah]

just follow the instructions :D

- have more than 22 pics in your blog
- set number of thumbnails in a row to 22
- set correct thumbnail size 100x100

if it still doesnt work, just give me a personal message.

but from what i see now on your pixelpost, you did several things wrong :D

if you dont follow the instructions, i cant promis that it will work...

regards, tom.

[Puffin]

just follow the instructions :D

- have more than 22 pics in your blog
- set number of thumbnails in a row to 22
- set correct thumbnail size 100x100

if it still doesnt work, just give me a personal message.

but from what i see now on your pixelpost, you did several things wrong :D

if you dont follow the instructions, i cant promis that it will work...

regards, tom.

Hehe...I am not surprised that I did several things wrong...:D

In the end I did all you recommended....but not the thumbnailsize which is not possible at the moment because recreating tnumbnails from the adminsection does not work for about 400 photos and to be honest I am not going to do this manually :D....do you think that´s the major problem?
But I like it the way it is now....and hope there are no critical faults I´ve implemented...:confused:

If you have additional tips....:)

[tomyeah]

@Puffin: well you can try to work around ... if all your thumbs have at least the same width you can edit it yourself.

do like: 22 x youthumbwidth = result (the default is 22 x 100 = 2200)
now go to reflection.js and macstyle.css: replace the value "2200" with your result here.

maybe in the next versions of this template it will support different thumb sizes ...

[Puffin]

Thank you again :)

I had some trouble in the past with the TN so they are "wild" in size...:rolleyes:

Maybe I will find a solution to change the size of all to 100x100....maybe with Irfanview or something like this...:)

The template remains a wonderful thing....and I am glad you share this with us!!

[tomyeah]

hehe, you did really too much customization with the template :D its an overkill for such a minimalistic template ...

[Puffin]

Hey....I am using old cameras....so I need a big template...:D

I am not finsihed yet....but I think it will rather be less than more in future...

If you want me to remove the credits finally let me know :D (just kidding)

[Personne]

hi Tomyeah !

I try to put the reflection script like you on my blog but I prefer to show the most commented thumbs and not all the thumbs on the imagetemplate.

Then I modify the addon

$thumb_output .= "<tr><td><a href='$PHP_SELF?showimage=$id'><img src='$thumbnail' alt='$title' title='$title' class='thumbsnail'></a></td></tr>";

IN (insert the "reflect" in the class

$thumb_output .= "<tr><td><a href='$PHP_SELF?showimage=$id'><img src='$thumbnail' alt='$title' title='$title' class='reflect'></a></td></tr>";

But I loose the links to the photos.
Can you tell me how you did ?

[SnowScan]

Hi tomyeah

I absolutely love this template - thanks for the contribution
I have implemented it on my site

[cushmok]

I really want to use this template I find very good, because simple...

But I'm a nut with code... So I would ask you for help. Those who use this template.
Could you explain me how to insert a jpg, my logo, in the "Home Browse" menu... Because I just want not to use the big Title...
Second question, I would like to insert a link in this "Home Browse' (!) menu toward my personnal blog.... a new time I did not succeed.
I know, I know.... I am a zero !

but,
It will be nice to you to help me ;-)

[SnowScan]

Hi Tomyeah,

Have you any solution for the IE 6 "error"?
I am using macstyle 1.2 and as the overflow command is not working, the thumbnail row is 2200 pixels wide (making the site a bit difficult to navigate)

Furthermore the comment area is expanded on load in IE6

I hope you can help on this one as I want to keep using the template.

[tomyeah]

@snowscan: when i look at your site with IE6 i do see "your bug" too. but when i look at my site. i dont see "your bug".

http://tomyeah.com/images/macstyle_IE6.jpg

i guess its some other error in your css or somewhere else.

[Personne]

hi Tomyeah !

I try to put the reflection script like you on my blog but I prefer to show the most commented thumbs and not all the thumbs on the imagetemplate.

Then I modify the addon

$thumb_output .= "<tr><td><a href='$PHP_SELF?showimage=$id'><img src='$thumbnail' alt='$title' title='$title' class='thumbsnail'></a></td></tr>";

IN (insert the "reflect" in the class

$thumb_output .= "<tr><td><a href='$PHP_SELF?showimage=$id'><img src='$thumbnail' alt='$title' title='$title' class='reflect'></a></td></tr>";

But I loose the links to the photos.
Can you tell me how you did ?


Any idea ?

[SnowScan]

Hi tomyeah,

Thanks for the reply. I tried to switch to an unmodified version of the template, this fixed some errors but left some of them (like the comments filed being folded out)

I will have a further look, thanks for giving this a shot.

[cushmok]

Ok, I use it... Thanks for all...

[DMalty]

I tried to remove the email me (my thought being that it would bring a LOT of spam, any thoughts on that are welcome). Problem is, when I take out lines 129 through 132 in image_template.html (your email comes here to < / a >) the reflection of the thubms disapears.

Major NEWB confusion!!!

[shawnkristofer]

Thanks very much, this is a great template.

[shawnkristofer]

How hard would it be for a complete novice to change the comment link? Rather than having the button between the main photo and the thumbnail bar, I was hoping to add a link to the top menu, like in the horizon template. Any help would very much be appreciated.

[RiCkY]

thanks, this template rocks!

[pandaxo]

hey, i tried editing the header of the template to give my images a 'loading' fade in effect, but i got this message: Warning: Cannot modify header information - headers already sent by (output started at /home/secti0no/public_html/captured/index.php:1) in /home/secti0no/public_html/captured/index.php on line 43..

and now I can't take it off!

Refer to http://captured.secti0n.org

+ How do we add navigation links below the image? As in previous, next

Thanks!

[fulltiltgonzales]

I can't thank you enough, tomyeah. I just read through this entire thread and at least for me, I believe you may have fixed whatever problems you were working out with the other Pixelpost gurus.

I want to take a moment to thank you and the folks here at Pixelpost who support this forum for all that you do and for even making this software available at all. The quality is beyond my wildest dreams.

In my opinion, you are all GODS. Furthermore, you have no idea how many brownie points I'm already racking up with both my wife and in-laws who are just now seeing the site for the first time:

http://xan-der.com/photoclog/index.php

[GeoS]

I must to add only one "bad word" to this template. JS creating this "mirror" layer at the bottom is starting to work just after image loads. At slower connections it doesnt look nice. It would be better to execute mirror creating before image is loaded.

[Dennis]

Uhm.. mirror creating before image is loaded. What would be in the mirror then? (Or is this just me being stupid).

[GeoS]

Dennis: Mirror should start to work after loading thumbs not after loading image (main image) which in many situations is much bigger then few thumbs.

[dshatha]

hello

I would like to add a few more menus ie. blog to include wordpress (iframe?) and a flat file like about template to add more info and links. With in the new "templates" i would like to see the same menu as on other pages. Can this be done?

d

[darky]

hello there, i really like this gorgeous template and would gladly use it on my personal photoblog, but...

it does not seem to render the cyrillic characters properly - they are displayed as "?" instead.

please excuse me, if this is a common pixelpost issue, but i couldn't find comments on it in the other categories.

is there a way to fix this problem? tried to switch the encoding of the image page to windows-1251, which works, but not in this case.

thanks in advance!