Horizon 1.0 / New in PP 1.6

[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.

Download the template.

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
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