Addon: Hoverbox

[fadattf]

I've just taken a quick look on your stylesheets!

To re-center your layout please remove the following part from your hoverbox.css file.

body
{
	background: #fff;
	color: #777;
	margin: 0 auto;
	padding: 50px;
	position: relative;
	width: 620px;
}

Note:
Since the Hoverbox-technique is a CSS only technique it comes already with some "defaults" in the hoverbox.css file.
If it doesn't fit perfect with the rest of your css it can be that some modifications are needed.

[BitBox Studio]

NOW we're gettin somewhere! thank you! but there's still 2 and a half more issues (and i'm writing here instead of private messaging you just in case someone else has this problem because horizon is a common theme and your addon is just that damn good)....the first one you probably can help me with easily is to center the thumbnails in their boxes. see how they're left and bottom aligned? the second is that dotted line on the top needs to be taken off and the half problem (not EXTREMELY important but good for nice design) is that the bottom dotted line on the bottom seems too close to the thumbnails. doesn't it? I SINCERELY appreciate all your help.

[fadattf]

So, here is the workaround for the horizon theme.
We have to apply some additional css because the horizon stylesheet has some values effecting the Hoverbox addon.

There are two ways to accomplish this:

Solution A)
Add the following lines to your hoverbox.css file (can be anywhere, but best place would be bevore the "/* =Hoverbox Code"-Line )

#page ul li {
	list-style:none;
	padding: 5px;
	}

#page img {
	background:#FFF;
	padding: 2px;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	}

.thumbnails {
	margin:5px 5px 5px 5px;
	}

Be sure put the codeline where the horizon.css file is included before the lines where the hoverfile.css files are included.



Solution B)
Put the CSS direct into your browse_template.html file.
Open the browse_template.html file and put the following code before the "</head>"-Line

<style type="text/css">
#page ul li {
	list-style:none;
	padding: 5px;
	}

#page img {
	background:#FFF;
	padding: 2px;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	}

.thumbnails {
	margin:5px 5px 5px 5px;
	}

</style>

P.S.: I'll update the addon and include the fixed css file into the hoverbox-addon zipfile so that no manual fixing is necessary.

[BitBox Studio]

damn you're good.....got the pictures centered.....but those dotted lines are still off...there should be no top dotted line. and possibly the bottom dotted line push down a couple (maybe 10 or 20) pixels. any ideas? I'll try to mess around with the margins of the pics so there's not that big border around each picture.......thanks again! i appreciate it. you rock the block.

[fadattf]

No problem. That's an easy fix. Seems as I've left some default css in the hoverbox.css file causing the dotted lines.

Just open your hoverbox.css file and replace the content with the following css-code.

*
{
	border: 0;
	margin: 0;
	padding: 0;
}

/* =Basic HTML, Non-essential
----------------------------------------------------------------------*/

/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
	cursor: default;
	list-style: none;
}

.hoverbox a
{
	cursor: default;
}

.hoverbox a .preview
{
	display: none;
}

.hoverbox a:hover .preview
{
	display: block;
	position: absolute;
	top: -33px;
	left: -45px;
	z-index: 1;
}

.hoverbox img
{
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 100px;
	height: 75px;
}

.hoverbox li
{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	position: relative;
}

.hoverbox .preview
{
	border-color: #000;
	width: 200px;
	height: 150px;
}

PS: I've updated all the css files in the extension repository: http://www.pixelpost.org/extend/addo...for-pixelpost/

[BitBox Studio]

it looks beeeeeautiful....thanks! i just changed the border on each image to the same color as the background instead of them being in those 3d boxes....just a personal choice...thanks a lot for all your help. you're a gem and thanks again for a very important (should be a built in option) addon!

[BitBox Studio]

acutally is there a way i can get rid of those boxes and bring all the pics closer together? center it too? or is that just the way it's setup anyway?

[BitBox Studio]

while you're at it. i have an idea for the peoples. for some unfamiliar viewers of the web they might not make the connection that the hoverboxed image is still a link cause there's no stupid pointing finger thing and just an arrow. what do you think? i don't know....just a thought.

[fadattf]

Hi BitBox Studio!

Thanks for your imput!
All the things you've said are possible. But just because you like it that way not everybody must like it.

Perfect would be if it is customizable via the Admin Tool. Or maybe I'll document the CSS-File so that users can change the values by themself.

For the "hand" as you call it over the links open your hoverbox.css file and replace

.hoverbox a
{
	cursor: default;
}

with

.hoverbox a
{
	cursor: pointer;
}

To get the pics closer to each other change the 5px value to e.g. 1px or 0 in the following css part.

.thumbnails {
	margin:5px 5px 5px 5px;
	}

[BitBox Studio]

i completely agree. i don't like the finger pointer either....but the fact is, not many people know about how pixelpost works. what do you think? maybe i should hit up my mom's house and have her look through and see if she figures it out for a text run. haha. i'll let you know....all this code editing is completely worth it for the effect, but yeah...good idea on if you could make more documentation for customization.

ONE last thing. sorry i'm such a needy guy. Is there a way i can center all the thumbnails? they're all aligned to the left.

maybe i should've learned css instead of using your generous help. hehe. thank you SO much for the time you've put in to help me.