Horizon 1.0 / New in PP 1.6

[cancerbox]

Here is my new template for Pixel Post 1.6. It uses valid xHTML/CSS and utilizes some javascript to display image details and comments.

See it here:
http://www.cancerbox.com/photoblog/

Download here:
http://www.cancerbox.com/public/horizon.zip

[tomyeah]

the green area at the bottom bites a bit into my eyes as a contrast to the very big dark area ... just my personal taste.it looks good on the "about" site, maybe because there is not so much black. the slide down is very sexy, i like the font of the "<IMAGE_NOTES>", looks very elegant. but id move the "<IMAGE_COMMENTS_NUMBER>Comments" over to the right side, where the comments are, above the comments directly.

regards, tom.

[studia]

http://photosama.com/

Thanks cancerbox. Works well and I love it.

[blinking8s]

Hey man, great work and thanks so much.

My one suggestion, the comment popup is confusing. I know when you embedded comment you started to get spam, but something like


<a href='index.php?showimage=<IMAGE_ID>' onclick="window.open('index.php?popup=comment&amp;showimage=<IMAGE_ID>','Comments','width=480,height=540,scrollbars=yes, resizable=yes');">Click to leave a comment</a>

might be a more noticeable solution

[sangohan]

Kinda new...looks...well...GREAT!

1) How can I quickly add the title under the image in a big font?
2) Is there a way to make the bottom comment link open a bottom drawer and the top comment link to open a top drawer?

Thanks!

[blinking8s]

2) no, the code is already rendered out on the page, the would require twice the comments and fields...i mean, it IS possible, but its not advised at all

[filmyfeel]

my implementation of your design can be seen here...

http://www.filmyfeel.com/raw

I have a footer I am still working on, but other than that, I love the design.

[cancerbox]

2) Is there a way to make the bottom comment link open a bottom drawer and the top comment link to open a top drawer?


Actually, I intend to create an alternate version of the template in which the slider opens below the image to show the comments But having two sliders is not really very practical.

[GeoS]

@filmyfeel: I dont know why and what for but your site resizes browsers window. Its awful when at each image windows is resized (a specially when you are looking on multiple pages in tabs within the same time).

[jaywilliams]

Very nice filmyfeel. Everything looks great, except for one thing.

The "expand_window.js" script is VERY annoying. I use a large wide screen monitor. I have my browser window resized exactly where I want it. I greatly dislike sites that resize MY browser window.

Hopefully you will remove that, then I'll be happy. :-)

[cancerbox]

Yeah, that is a slight annoyance... but very nice template work there.

[filmyfeel]

well well we have some picky surfers here now don't we? Just kidding... I can see how it can get annoying... so it's been removed.

Other than that, my hat off to cancerbox for the great work and the generousity in making this publicly available. Only other thing I want to do to my version is add a footer to the about page with listed links and credit to cancerbox... something the template had on every page, but I only want to see on the about page.

[witty]

Hi,

I really dig the design. BUT, I'm already knee-deep into a custom template of my own. Therefore, I can't really use your template "as is" at the moment. However, I DO like the that info & comment BLIND trick.

I'm trying to employ that idea for part of my template, but I'm falling just short. When I click on "comments", the hidden comment div does indeed open up... which is good. But it doesn't push the other divs down... it simply overlaps the div just below it... covers it up. How do I code it so that the other divs move down out of the way of the comment div?

Thanks!


-Witty

[cancerbox]

Other than that, my hat off to cancerbox for the great work and the generousity in making this publicly available. Only other thing I want to do to my version is add a footer to the about page with listed links and credit to cancerbox... something the template had on every page, but I only want to see on the about page.

Thanks a bunch. Yeah, some people may not want a footer on their photo page... or a footer at all. no link or credit to me is necessary.. as it is your photoblog. but, of course, it's always nice. thanks again.

[cancerbox]

I really dig the design. BUT, I'm already knee-deep into a custom template of my own. Therefore, I can't really use your template "as is" at the moment. However, I DO like the that info & comment BLIND trick.

I'm trying to employ that idea for part of my template, but I'm falling just short. When I click on "comments", the hidden comment div does indeed open up... which is good. But it doesn't push the other divs down... it simply overlaps the div just below it... covers it up. How do I code it so that the other divs move down out of the way of the comment div?

Do you have a URL to your custom template?

[witty]

Hi,

Yes, I do. The whole thing is still "under construction", so you'll need to ignore certain design aspects... like the color of my comments div and the fact that Archives link pulls from a different template at the moment, etc.

http://game-cam.everythingwitty.com

image_template.html (http://game-cam.everythingwitty.com/templates/game-cam/image_template.html)

my.css (http://game-cam.everythingwitty.com/templates/game-cam/styles/my.css)

Thanks!


-Witty

[cancerbox]

I can't see what could be causing that. Placing a "clear:both" div at the bottom of your "blind" effect div should have solved that problem.

[witty]

Hi,

I fixed it. In my CSS, I changed the position of the comments div from absolute to relative. Thanks!

I'm still pretty green when it comes to this CSS stuff.


-Witty

[pehansen]

Hi,

Really like the Horizon template, but it seems to have a problem when displaying in IE 7.0.... most things seems OK, but the blog title that is displayed in the top right of the screen is displayed wrong, like the text being cut off in the bottom... and the font/size is different than displaying in Firefox..

The rest of the text, "home, about" etc... is displayed in the same way in both browsers.

As far as I can find there are differences in how IE and FF handles things like padding etc... in the css file... but I am not into this enough to know how to correct it...

Anyone have same issue, and know how to get it fixed?

Paul.

[alberta]

Hi Paul,

I've been noticing that this happens with this template when people use a text logo rather than an image-based one. And it only happens with IE. I checked out the CSS and it seems that the font-size is not defined in this area (and IE goes a little crazy with undefined heading sizes):

#header .inside h1 a

try defining it, by adding, i.e.

font-size: 22px;

or what ever value fits best.

[quindrax]

I really like the horizon template.

I am still having a problem with the title not displaying in IE. (It's fine in Firefox and all other browser's I've tried.)

I added in the font-size line in the CSS and that made it a little better but it's still slightly cut off as you can see:

http://www.hungry-eye.net/

If anyone could help with what I might change in the CSS file or template to remedy this I'd really appreciate it.

Thanks!

[theturninggate]

Scott: I love Horizon. The comment & image info handling especially is something I was glad to get my hands on. I took your name out of my footer, but did mention and hyperlink you in my About section.

Everyone: I spent a few hours yesterday hacking the hell out of Horizon to come up with a modified version for my own use, then thought others might enjoy it as well. Scott, I hope you don't mind my piggybacking on your work.

Changes include:

- A styleswitcher (three choices presently; more later).
- Moved all navigation to the top; cleaned up the footer.
- EXIF data in image info

Anyway, I call it Warm Horizon, and if you'd like to use it, you're all more than welcome.

See it in action. (http://www.projectseoul.com)

Download the template. (http://projectseoul.com/downloads/warmhorizon31.zip)

Cheers,
theturninggate

[alberta]

What a marvelous adaptation, Matthew! Really beautiful colours.

Quindrax: try replacing the pertinent section of the stylesheet with this:

#header .inside h1 a {
float:right;
text-align:right;
font-size: 22px;
color:#666;
padding-top:28px;
padding-bottom:4px;
font-weight:normal;
display:block;
}

Works for me, btw are you on a laptop or something with a higher dpi, like 120 (I am and with this setup IE's flaws seem even more glaring).

Hope this helps.

[theturninggate]

Thanks, Alberta. I wish I could claim credit for the colors, but I can't. The Warm and Sky styles both feature colors borrowed from gallery templates in Adobe Lightroom. The next one will have colors of my own devising, though. ;)

Template Update: I've just added a third stylesheet, Sky. I updated the hyperlink in the post above to download the new template zip archive.

[SierraVisions]

Turninggate,
Love Warm Horizon and plan on using it. But I only want to use the dark style and not the other two. What do i need to edit to make it work with just the dark?
Thanks.

[theturninggate]

SierraVisions: In the head of each file, locate this:

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="templates/warmhorizon/styles/warmhorizon.css" title="warm" />
<link rel="alternate stylesheet" type="text/css" href="templates/warmhorizon/styles/darkhorizon.css" title="dark" />
<link rel="alternate stylesheet" type="text/css" href="templates/warmhorizon/styles/bluesky.css" title="sky" />

You just need to swap the "stylesheet" and "alternate stylesheet" designations in the rel tag. Replace it with this:

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="templates/warmhorizon/styles/darkhorizon.css" title="dark" />
<link rel="alternate stylesheet" type="text/css" href="templates/warmhorizon/styles/warmhorizon.css" title="warm" />
<link rel="alternate stylesheet" type="text/css" href="templates/warmhorizon/styles/bluesky.css" title="sky" />

That should do it. You might need to delete your cookies, then quit and load your browser, but maybe not. If an old cookie already exists for your site, the styleswitcher might have a conflict; easily resolved, however.

Or, if you don't want to offer visitors the choice of styles, just delete the "alternate stylesheet" lines, then delete the ul list from the page footer where the styleswitcher items are located. You'll also want to delete the "title" attribute from the stylesheet link, like this:

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="templates/warmhorizon/styles/darkhorizon.css" />

Also, delete the javascript line that calls the styleswitcher into the page. It's just one line, located beneath the CSS links. You'll see the path to styleswitcher.js in the code. Be careful not to delete the scripts that control the comments and image info. revealing, though.

Hope that helps!

Please pass a link over. I'd love to see the site. :)

Cheers,
theturninggate

[quindrax]

alberta - thanks for that!

turninggate- I like warm horizons so much that I switched over to that and followed your directions for making dark the default. It works beautifully.

Just one question from someone with little CSS skill, what code do I add where to be able to put an image or a tagline under my photoblog title in the place where you have the hangul?

Salutations from Tokyo,

quindrax
http://www.hungry-eye.net/

[theturninggate]

This is the code that sets the graphic in my header:

/* HEADER + NAVIGATION */

#header {
height:50px;
background-color:#9EAFC1;
border-bottom: 5px solid #7890AC;
}

#header .inside {
background: url(../images/projectseoul-sky.gif) top right no-repeat transparent;
margin: 0 auto;
height: 50px;
}

#header .inside h1 a {
float:right;
/*text-align:right;*/
color:#F4F3E0;
font-size: 25px;
font-weight:normal;
/*padding: 20px 0;*/
width: 200px;
height: 50px;
display:block;
text-indent: -9999px;
}


The code is located roughly halfway through the CSS file. You can paste my code over the code for the same items in the template CSS file.

1.
#header .inside {
background: url(../images/projectseoul-sky.gif) top right no-repeat transparent;

Replace the path to my image with the path to yours. Should be okay to leave the rest of it alone.

2.
#header .inside h1 a {
width: 200px;
height: 50px;

Replace the width and height values with the dimensions of your graphic. If you keep the height of your image and header at 50px, then you don't need to make any other changes. If you want to make a taller header and graphic, you'll need to change the 50px value in each of the above items to match the height of your image (i.e. everywhere you see "height: 50px;" above, change the height value).

That should do it. If you have any other questions, let me know.

Cheers,
theturninggate

[SierraVisions]

Thanks Turninggate.
The link is www.visions.sierravisionsstock.com
Don't expect much. I just started the blog last night and only have one image up so far. I plan on posting an image a day once I get going though.
If you'd like to check out some of my photography you can at my other site,
CalNaturePhoto (http://www.sierravisionsstock.com/calnaturephoto/)
Steven

[devious]

I like the theme a lot!
But there is one tiny thing which isn't that nice, from my point of view.
On the bottom, you have the copyright/legal info and the PREVIOUS <> NEXT links.

This 'bar' differs in size everytime, it looks like this is linked to the image.
Is is possible to set a fixed height for this one, just like the top bar?
For what I've found within the .CSS code, it must be some of the following:

#image-info {
text-align:left;
width:100%;
background:#FFF;
}

and:

#photobox {
background-color:#333333;
padding-bottom:30px;
width:100%;
text-align:center;
}


Please help me out :rolleyes:

[andreasholm]

Where do I change the top image?

I feel stupid coz I can't find it.

[cancerbox]

I'm not sure what you're referring to.
if you're referring to the space below each photo, it's not really a "bar" at all. It's simply the space below the photo.
if you want the black area to have a consistent height, you can specify a height as is done in this code:

#photobox {
background-color:#000;
padding-bottom:30px;
width:100%;
height:800px;
text-align:center;
}

However, the problem with that is, if you have a photo that is taller than this space, you'll have some overflow problems.

This template is designed to accomodate a variety of image sizes and proportions, and setting a specific height would decrease this flexibility.

[cancerbox]

Where do I change the top image?

I feel stupid coz I can't find it.

The top image, as in a logo at the header of your site?

[aptass]

I just wish to thank you for a great theme.

I'm using it right now with some modifications I've done
(moved comments to own window and some other things)

with regards
aptass

[andreasholm]

The top image, as in a logo at the header of your site?

Yes, that's what I mean!

[cancerbox]

Yes, that's what I mean!

"Regarding the template, I'm sure you notice that by default, the header contains the title of your site. If you'd like to use an image logo instead, you can simply edit the style sheet (horizon.css) and replace the following:

#header .inside {
background:#000;
height:100px;

}

#header .inside h1 a {
float:right;
text-align:right;
color:#666;
padding-top:30px;
font-weight:normal;
display:block;
}

with this - where "logo.gif" is your logo. (be sure to place it in the images folder contained in your template directory)

#header .inside {
background:url(../images/logo.gif) top right no-repeat #000;
height:100px;

}

#header .inside h1 a {
float:right;
color:#666;
padding-top:30px;
font-weight:normal;
width:300px;
height:60px;
display:block;
text-indent:-9999px;
}

[theturninggate]

I've updated my Warm Horizon modification of this template and have begun a new thread for it here (http://forum.pixelpost.org/showthread.php?p=45446) for all future updates.

[carbon8]

Thanks for the skin!
I've modified it slightly and can be viewed here: http://www.gregnewman.us

[apoc]

what would i have to do if i wanted it to slide from the side?

edit: nevermind, i figured it out. I made a table.

[tdwesten]

Thanks for share Cancerbox! I use it to: www.tdwesten.nl

[Acronyc]

This is really a great template! Very clean and nice feel with the way comments are handled.

I implemented it into my new site (changed from Drupal to Pixelpost) but made a few changes to it. The biggest difference is that I moved the comments to open in the bottom (personal preference of mine). I also changed the colors and layout a bit, adding a paged archive and the recent photos thumbnail strip.

You can see it here (http://www.acronyc.net) (acronyc.net). Thanks again for the nice template!

[cancerbox]

Thanks! Yes, I did try a version of the template with the comments at the bottom, but it was a bit annoying this way, as the user had to scroll to see the comments/info. So, I placed the info above the photo and have a url beneath the info to close the infobox... this way, scrolling isn't necessary. Though, it's all about personal preference, like you said. hehe

[pehansen]

Very nice modification you have done!... if you ever think of making it public, let me know

[digital-alchemy]

scott,
great template. one question, how to make the archive (browse) page to several pages?

thanks

AJ
http://photo.digitha.net/

[jaywilliams]

View the pixelpost manual for the template tags:
http://public.dwilkinsjr.com/pixelpost/docs/1.6.0/tags.html#pagedarchive

[andreasholm]

How do I delete the EXIF information for the photos on Warm Horizon.
I don't want it.

Thanks for great template!

www.adogslife.es

[GeoS]

Probably its enough to strip proper tags from template file.

[modivin_]

I just started my photoblog using Horizon plus the following modifications:


image fader by clagnut.com (http://clagnut.com/sandbox/imagefades/) boxover by swazz.org (http://boxover.swazz.org) switchable styles (modified for 3 colours) by simplestudio.org (http://simplestudio.org/visions)
comment form, comment spam protection and EXIF data in comments taken from Warm Horizon (http://forum.pixelpost.org/showthread.php?t=6521)

You can see it in action here (http://www.modivin.com)

Thank you

[cancerbox]

nice modification. I like seeing people use "Horizon" as a base template and pushing it a bit. nice work.

[fureddo]

Modivin,

I am also trying to get the "comment form, comment spam protection and EXIF data in comments taken from Warm Horizon."

How would I implement this? I'm not very good with the design stuff.

Or Cancerbox, if you could chime in?

Any help would be greatly appreciated.

[cancerbox]

Did you get the version of Horizon from the Pixelpost version 6 archive? if so, the comment form should be in there, displayed in the page. As for Exif data, you should be able to grab that tags from the pixelpost/doc/tags.html file.

here they are:

EXIF Related tags
<EXIF_EXPOSURE_TIME> shows only exposure data
<EXIF_APERTURE> shows only aperture data
<EXIF_CAPTURE_DATE> shows only time data
<EXIF_FLASH> shows only flash data
<EXIF_FOCAL_LENGTH> shows only focal length data
<EXIF_CAMERA_MAKE> shows only camera brand data
<EXIF_CAMERA_MODEL> shows only camera model data
<EXIF_ISO> shows only ISO data

[fureddo]

Thanks for the speedy reply Scott. Much appreciated.

I've got three more small questions you may be able to help me with.

This is my site, fureddodotcom (http://www.fureddo.com)

In the comments area, anything that's a hyperlink is invisible until you roll over it. For example, where it says (close) under the exif information. And where I have a test comment, my name linked to my website to the left of the '@' is also invisible until rolled over. Where can I change this in the css file? I played with it for about an hour last night and couldn't figure it out. :/

The other question is how do I change the font color on the about page. The headers are all the same colors, about, info, gear, links, which is how I want it. But I want the text in the 3 columns to be the same color as the text that says "Whenever we take a picture...." Again, I couldn't find it in the css file.

Lastly, on the browse page, in the category dropdown. How can I change that so that it doesn't say 'Select Category'. I want 'All' to come up there by default instead.

Sorry if this is a pain in the ass. The few small mods I've made to your template have taken me days. But I'm learning!

Thank you.

[cancerbox]

The problem with your link color is that you've set the default link color to white (#FFFFFF). This applies to all link that pull the default link color, the image info area included. So, what you must do is add a specific declaration for image-info links by adding the following in the "#image-info" area of the css file (where #000 is black - use whatever color you like):

#image-info a {
color:#000;
}

In the "About" area... again, you'll need to specify a color for your links... since this is in the "Page" area, use the following code:

#page a {
color:#000;
}

The "Browse" thing will require that you edit the "Browse Template"...
Find where it says this: "<option value=''>Select Category</option>" and change "Select Category" to "All". That should do it.

[cancerbox]

I am going to begin working on an updated version of the template, incorporating some of the suggestions and fixes mentioned in this thread.

Anyone have any additional suggestions?

[zanskar]

I love the Horizon template and tried to implement it in my blog still running on Pixelpost 1.5, but I failed completely.
Just made some changes to the .css file and uploaded it to my blog, selected the horizon template in the admin panel but nothing happens....

Can someone help?

Thanks a lot, Andreas.

[Dennis]

Horizon if foremost a 1.6 template.

[derrymaine]

I am going to begin working on an updated version of the template, incorporating some of the suggestions and fixes mentioned in this thread.

Anyone have any additional suggestions?

Oh, that's a great new!! An uptaded version, i'm waiting, your template is so good!!
Thanks in advance!

[genewell]

Can you take a look at www.rememberpics.com. I'm using the horizon template and in IE7, the bottom half of the title text is cut off. It looks fine in firefox and IE6.

[cancerbox]

yeah, that's a padding issue that will hopefully be resolved in the updated version of the template.

[Fieke]

Can you take a look at www.rememberpics.com. I'm using the horizon template and in IE7, the bottom half of the title text is cut off. It looks fine in firefox and IE6.


Just change some stuff in the CSS:

Replace this:


#header .inside h1 a {
float:right;
text-align:right;
color:#fff;
padding-top:30px;
font-weight:normal;
display:block;
}


With this:

#header .inside h1 a {
float:right;
text-align:right;
color:#fff;
padding-top:30px;
padding-bottom:30px;
font-weight:normal;
display:block;
}

[kuntardo]

Is it just me or is Horizon not using date format filed under options - template for displaying dateformat for images and comments display?
I tried to change it to "d.m.Y H:i" but it doesn't work. The same format works in simple template.

[Clemens]

Jul 2008 Fieke said: "Just change some stuff in the CSS: ..."
Replace this: ...
With this:#header .inside h1 a {
float:right;
text-align:right;
color:#fff;
padding-top:30px;
padding-bottom:30px;
font-weight:normal;
display:block;
}


... only just 1 years ago - and i found it now. This was the one thing i did forgot anytime again to fix ... and actually my PP-Blog is running proudly 2 years on "Horizon" So it does look fine finally! thx. ;-)

[muerte1781]

hi i have some problems in my info&comments page
comments show like this:
"
PAI VEZI COLEGU CA SE POATE? RSS 2009
IONUT CIUCANU @ 2009-05-18 07:13:59CE SA-I FACI ... DACA SE GRABESTE "INFORMATA" K MIREASA LA PAT
ANGEL @ 2009-05-18 13:12:48FRUMOS MACRO. PAPADIILE ASTEA ARATA SUPERB.
BOGDAN @ 2009-05-18 15:20:12
"
and i want to look like this:
"
PAI VEZI COLEGU CA SE POATE? RSS 2009
IONUT CIUCANU @ 2009-05-18 07:13:59

CE SA-I FACI ... DACA SE GRABESTE "INFORMATA" K MIREASA LA PAT
ANGEL @ 2009-05-18 13:12:48

FRUMOS MACRO. PAPADIILE ASTEA ARATA SUPERB.
BOGDAN @ 2009-05-18 15:20:12
"


pls help
site is here: http://pozar.ro

[Scarabaeus]

Try editing the image_comments id in the css file adding padding or a margin between each comment, that could help.