MyBB Community Forums

Hello,

i would like to put a button on the top right corner.

I demonstrated it on a picture i made(see attachments). Does anyone know how to place it there?

Thanks & Regards,
k1R@

is it "Register Now" button ? if it is for registration for your forum then that should be visible to guests only.

you can add below code in header_welcomeblock_guest template (at the bottom) and adjust position with css

<div id="registernow">
<a href="{$mybb->settings['bburl']}/member.php?action=register"><button>Register Now</button></a>
</div>

below example css style can be added to global.css of the active theme

#registernow {position: fixed;
top: 12px;
right: 12px;
}

Yes it is the register button, but thats not how i wanted it.

It should be on the top right corner.
It should be a button i upload by myself, just as the first attachment above.

Check the following attachment, thats how it is now.

<div id="registernow">
<a href="{$mybb->settings['bburl']}/member.php?action=register"><button>/images/registerbutton.png</button></a>
</div>

change the code to

<div id="registernow">
<a href="{$mybb->settings['bburl']}/member.php?action=register"><img src="path/to/image" /></a>
</div>

and add the css code in the theme's global.css

#registernow {position: fixed;
top: 12px;
right: 12px;
}

The button appeared but the position is still false.
Probably header_welcomeblock is wrong?

And another question, how can i make it so there is a mouseover/mouseout effect on the button? I thought about the same button just with abit more light, made in any photo program and thats the mouseover picture.

I can see the button at the top right corner (fixed position) - check it by hard refreshing your browser (CTRL + F5)

can you use two images - second one with required variation
with two images, you can change the code to

<div id="registernow">
<a href="{$mybb->settings['bburl']}/member.php?action=register"><img src="path/to/firstimage" onmouseover="this.src='path/to/secondimage'" onmouseout="this.src='path/to/firstimage'" /></a>
</div>

Ago 5 min the button moved to the top right corner. Its a bit overlapping, so i changed it to right 11xp and position absolute. I guess it needs 10-30min to update for me.

The mouseover(out) effect does not work properly. If i move over the button, the mouseover button appears but it stucks. So if you move out there is no button1, no mouseout.

<div id="registernow">
<a href="{$mybb->settings['bburl']}/member.php?action=register"><img src="images/registerbutton1.png" onmouseover="this.src='images/registerbutton2.png'" onmouseout="images/registerbutton1.png'" /></a>
</div>

You missed this.src JS in your onmouseout. Should be:

<div id="registernow">
<a href="{$mybb->settings['bburl']}/member.php?action=register"><img src="images/registerbutton1.png" onmouseover="this.src='images/registerbutton2.png'" onmouseout="this.src='images/registerbutton1.png'" /></a>
</div>

Anyways, what do you exactly want to do with the button on mouse over? Just have lighter color? I see no reason to use image then, just add simple CSS class.

<div id="registernow">
<a href="{$mybb->settings['bburl']}/member.php?action=register"><img src="images/registerbutton1.png" class="myawesomeregister" /></a>
</div>

To global.css:

.myawesomeregister {
    background: red;
}

.myawesomeregister:hover {
    background: darkred;
}

Change the colors to suit your needs, also you can add more things like shadows, text colors etc. More efficient than JS.

Error