MyBB Community Forums

Full Version: Rollover Buttons
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi all

First off: can anybody please tell me where
{$post_extra_style}
is defined? I searched for ages and couldn't find it. It's used in the templates "postbit" and "postbit_classic" and I want to change it.

I just can't stop working on the layout of my forum Big Grin so I came up with the idea to create nice lookin rollover buttons for the postbit-, newthread-, reply- and closed- buttons.
I managed to do so for every button available except for the "multiquote" button because of the javascript involved.

Here's what I did to the other buttons:
First I created new buttons in Photoshop with double height for the rollover effect.
Then in global.css of my theme I created new classes e.g.
.rolloverbuttonlarge{
	display: block;
	width: 132px;
	height: 31px;
	margin: 2px;
	}
.rolloverbuttonlarge:hover{
	background-position: 0 -31px !important;
	}
.rolloverbuttonlarge span{
	position: absolute;
	top: -999em;
	}

I also added multiple IDs for the different buttons e.g.
#replybutton{
	background: url(http://www.dunklerorden.de/images/do/deutsch_du/newreply.png) no-repeat 0 0;
	}

Then in e.g. the template "showthread_newreply" I changed the existing code to
<a class="rolloverbuttonlarge" id="replybutton" href="newreply.php?tid={$tid}" title="{$lang->post_reply_img}"><span>{$lang->post_reply_img}</span></a>

This ends up in a really nice rollover effect. For the postbit buttons I also had to add
style="float: right;"
or left to avoid the new lines caused by blockdisplay but it all works well.

The hard part is that the multiquote button has the Javascript which replaces the image so
a) I don't really know how to correctly write the code for my rollover image (I have no clue of Javascript)
and
b) the image names "postbit_multiquote.gif" and "postbit_multiquote_on.gif" are hardcoded in the javascript and I don't like changing the corefiles.

That would also be a big wish of mine for 2.0:
please don't ever hardcode any design elements or image names in the core files like in this Javascript and some other places I don't remember at this moment but I am sure I have seen (spinner.gif would be another example). Design should be 100% in the theme / templates or defined in the theme options. The filename of the spinner graphic could be a theme option for example.

So if anybody has an idea for me to get that multiquote button to rollover that would be very nice.

Greetings
atnun
Too bad nobody has an idea.

If someone could at least tell me where {$post_extra_style} comes from?
^ it is from .inc/functions_post.php file
(2011-07-30, 12:54 PM)ranjani Wrote: [ -> ]^ it is from .inc/functions_post.php file

Aaahh that's why I didn't find it in the templates. The 5px margin-top is hardcoded.
Thanks.