Hover buttons

You know how theres a way to add hover pics to the navigation bar.. like it look normal, but then on hover the image changes to add an effect?
is there a way to do this with other buttons such as " Reply " " create new topic " ?

yes you could do it

but please be more specific about the result you want to succeed in or add a screenshot

example - dragonforum.com
Notice how when u hover over the navigation bar, it changes colors.. for the " Reply " & " new topic " i would like the same effect

Your navbar is made with a image's so when you hover over the image it will change to a new image.

so you would have to have your buttons you already have remade to look a little different so when you hover over then it would change just a little.

On my forum I have text on a transparent background then i use colour backgrounds to change on hover.

Hello @SpyroDragon

Try add this to your CSS

Code:

.nav a img:hover {
    opacity: 0.6;
    transition: .1s all ease;
}

@SarkZKalie he doesn't want it for the nav bar, he wants it for the main forum buttons

Coucou @SpyroDragon

that for sure is possible
the fact is that the navbar images are two, one for the regular version and one for the :hover version - do you have the new topic/reply normal/hover images already available?

Hello,

I can offer a variant with "double" buttons:

AP - Display - Templates - General - viewtopic_body

Find

Code:

<!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>&nbsp;&nbsp;&nbsp;
         <!-- END switch_user_authpost -->
         <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
         <!-- END switch_user_authreply -->

P.S. In this template, this code fragment occurs twice (displaying buttons at the top and bottom of the page).

Replace by this

Code:

<!-- BEGIN switch_user_authpost -->
         <div class="newtopic"><a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src='https://webcodius.ru/wp-content/uploads/2015/05/button.png' /></a></div>&nbsp;&nbsp;&nbsp;
         <!-- END switch_user_authpost -->
         <!-- BEGIN switch_user_authreply -->
                          <div class="replytopic"><a href="{U_POST_REPLY_TOPIC}"><img src='https://webcodius.ru/wp-content/uploads/2015/05/button.png' /></a></div>
         <!-- END switch_user_authreply -->

Save - Publish.

This is the display of buttons in the theme itself.

AP - Display - Templates - General - viewforum_body

Find

Code:

<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}" alt="{L_POST_NEW_TOPIC}" border="0" /></a>
<!-- END switch_user_authpost -->

P.S. In this template, this code fragment occurs twice (displaying buttons at the top and bottom of the page).

Replace by this

Code:

<!-- BEGIN switch_user_authpost -->
         <div class="newtopic"><a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src='https://webcodius.ru/wp-content/uploads/2015/05/button.png' /></a>
         <!-- END switch_user_authpost -->

Save - Publish.

AP - Display - Colors & CSS - CSS Stylesheet

Insert this code:

Code:

.newtopic, .replytopic {
display:inline-block;
height:29px;
overflow:hidden;
vertical-align: top;
display:-moz-inline-stack;
zoom:1;
*display:inline;
_overflow:hidden;
}

.newtopic img {
margin-top:-29px;
}

.newtopic img:hover{
margin-top: 0px;
}

.replytopic img {
margin-top:-29px;
}

.replytopic img:hover{
margin-top: 0px;
}

Save.

height:29px;
margin-top:-29px;

You will need to set these parameters for your buttons. I used one:



-----------------------------

I made two buttons quickly:





You can see it in person on the forum: https://testtesttest.forumotion.me/f1-forum

Login: Test User
Pass: Qwerty123

When your request is complete, please mark it as Solved.