The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

[Invision] Replace image buttons with... <buttons>?

View previous topic View next topic Go down

Solved [Invision] Replace image buttons with... <buttons>?

Post by Klemen on August 21st 2015, 7:48 pm

I have a css code for customizing the buttons and they pretty much look exactly how I want all the buttons on my forum to look like. It would be kind of redundant and less convenient to make images for buttons if I could just replace them with <button></button>, I think.

The buttons I would like to replace are:
- new topic
- add reply
- the rest of buttons you can find under a post (quote, edit, delete...)

So the question is, how to replace them?

Website link: http://8ball.8forum.net/
Forum version: Invison


Thank you


Last edited by Klemen on August 21st 2015, 10:00 pm; edited 2 times in total

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: [Invision] Replace image buttons with... <buttons>?

Post by YoshiGM on August 21st 2015, 7:53 pm

Hello @Klemen,
Could you open a forum for guests? I need permission to open a topic and reply.

Thanks. Wink

YoshiGM
Forumember

Male Posts : 533
Reputation : 80
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: [Invision] Replace image buttons with... <buttons>?

Post by Klemen on August 21st 2015, 7:58 pm

@YoshiGM wrote:Hello @Klemen,
Could you open a forum for guests? I need permission to open a topic and reply.

Thanks. Wink
Sorry about that, didn't realize guests can't see these buttons.

You can now reply and open threads here: http://8ball.8forum.net/f1-your-first-forum

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: [Invision] Replace image buttons with... <buttons>?

Post by YoshiGM on August 21st 2015, 8:41 pm

Ok, Let's See..

You can edit that buttons with CSS

- Create New Topic -
Code:
img.i_post {
background-image: url("YOU NEW BUTTON URL") !important;
background-repeat: no-repeat;
}

- Reply -

Code:
img.i_reply {
background-image: url("YOUR NEW BUTTON URL") !important;
background-repeat: no-repeat;
}

You should remove the default button in your ACP to work the CSS:

ACP(Admin Control Panel) > Display > Pictures and Colors > Pics management > Buttons

If you want to have more buttons with CSS, use the tool "inspect element" in chrome/firefox to see the id of the buttons that you want to edit.


YoshiGM
Forumember

Male Posts : 533
Reputation : 80
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: [Invision] Replace image buttons with... <buttons>?

Post by Klemen on August 21st 2015, 8:50 pm

@YoshiGM wrote:Ok, Let's See..

You can edit that buttons with CSS

- Create New Topic -
Code:
img.i_post {
background-image: url("YOU NEW BUTTON URL") !important;
background-repeat: no-repeat;
}

- Reply -

Code:
img.i_reply {
background-image: url("YOUR NEW BUTTON URL") !important;
background-repeat: no-repeat;
}

You should remove the default button in your ACP to work the CSS:

ACP(Admin Control Panel) > Display > Pictures and Colors > Pics management > Buttons

If you want to have more buttons with CSS, use the tool "inspect element" in chrome/firefox to see the id of the buttons that you want to edit.


That's not exactly what I was asking :/

I want to replace those images with html codes for buttons (<button></button>). I managed to do that on this page:http://8ball.8forum.net/f1-your-first-forum

The "new topic" image is now replaced by an actual button. Though, I haven't positioned it yet properly.

I did that through editing the templates. I still have to find the location of edit/quote/delete buttons though, and figure out how to position them properly.

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: [Invision] Replace image buttons with... <buttons>?

Post by SLGray on August 21st 2015, 9:01 pm

They should be in the templates that deal with messages/posts.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: [Invision] Replace image buttons with... <buttons>?

Post by Klemen on August 21st 2015, 10:03 pm

@SLGray wrote:They should be in the templates that deal with messages/posts.
Finally found it under Templates > General > viewtopic_body

The problem was that I was searching for the buttons' class names that I have found through inspecting the elements in the browser, but there were no class names in the template.

Solved.

Klemen
Forumember

Male Posts : 292
Reputation : 32
Language : English, German, Slovene

http://www.bannedbrotherhood.com

Back to top Go down

Solved Re: [Invision] Replace image buttons with... <buttons>?

Post by SLGray on August 21st 2015, 11:00 pm

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36639
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum