How do you add a Clickable HTML hyperlink button ?

[Steve Jabba]

I'd like to add a customisable HTML button using the invision community forum software.

I have googled it, but there are no simple instructions on how to do it. 

Can you tell me please?

Thanks.

[Davyc]

Just download this:

https://ckeditor.com/cke4/addon/simplebutton

And add it to your editor in the ACP - don't unzip it, just upload as is and add it to your editor:

Gives you this:

[Nathan Explosion]

1 hour ago, Steve Jabba said:

I'd like to add a customisable HTML button using the invision community forum software.

Add it where exactly? And what is it going to do?

[Steve Jabba]

1 hour ago, Nathan Explosion said:

Add it where exactly? And what is it going to do?

In a post of my choice .  It will be a button and do what a button does.   

1 hour ago, Davyc said:

And add it to your editor in the ACP - don't unzip it, just upload as is and add it to your editor:

How? I see these instructions but they are as clear as mud. 😄

Edited May 30, 2021 by Steve Jabba

[Davyc]

14 minutes ago, Steve Jabba said:

How?

Ignore those instructions just download the zip file (scroll to the bottom of the page), but don't unpack it.  Go to the ACP and head for Customisation/Editor/Toolbars (see below):

 

Once in there click the 'Add Button' button lol

Now you will see that you can upload the zip file you downloaded.

It will only take a couple of seconds to upload.

The button will appear in the tray at the bottom of the screen - just drag it onto the editor toolbar where you want it.  Clicking on the button whilst in the editor toolbars section will allow you to set permissions as to where you want it to be used and who can use it.

You're done - next time you access the editor around the site the button will appear and you can add as many as you want to a page or topic.

 

Edited May 30, 2021 by Davyc
Clarification

[opentype]

I would just create a custom button and call IPS’ button styling: 

[Steve Jabba]

8 hours ago, opentype said:

I would just create a custom button and call IPS’ button styling: 

Again, how? How do you access this menu?  Need to explain the antecedent step(s) - I cannot just guess it.

[Steve Jabba]

10 hours ago, Davyc said:

You're done - next time you access the editor around the site the button will appear and you can add as many as you want to a page or topic.

Very helpful indeed @Davyc, thankyou so much.  

[opentype]

1 hour ago, Steve Jabba said:

Again, how? How do you access this menu?  

It was already shown here. 

[Steve Jabba]

5 hours ago, opentype said:

It was already shown here. 

It doesn't work. It asks what file I want to upload.   Is the code even correct?

It would be great if you could actually describe what needs to be done instead of assuming prior knowledge.

Thanks.

[Steve Jabba]

Uh oh.  I just looked at the page with the buttons on using my mobile..It is literally the worlds most ridiculous looking button!  Not responsive at all.  Look at this mess (bottom of the image for the unobservant)

Does anyone know how to fix this? It looks ridiculous..

Yes, I know I can make the button smaller, but then it looks absurd on desktop, lost and alone amongst the text and the rest of the post.  The whole point of a button is it's supposed to stand out.

 

[Nathan Explosion]

21 hours ago, Steve Jabba said:

In a post of my choice .  It will be a button and do what a button does. 

Click 'Source' when posting, add the following to the link's <a> tag:

class="ipsButton ipsButton_primary"

 

Don't have a 'Source' button? Search the ACP for 'HTML' and give yourself the ability to post HTML.

Edited May 31, 2021 by Nathan Explosion

[Steve Jabba]

27 minutes ago, Nathan Explosion said:

Click 'Source' when posting, add the following to the link's <a> tag:

class="ipsButton ipsButton_primary"

 

Don't have a 'Source' button? Search the ACP for 'HTML' and give yourself the ability to post HTML.

I have enabled "source"

Can you please just write out in plain text what I need to insert into a post in order to add a button which is clickable.  Is there any way I can change the colour and make it larger?

I am not a coder and you guys seem to assume prior knowledge.  I have a rough idea what an <a> tag is but not sure how to construct it properly to incorporate this code.

Please actually type it so I don't need to copy from an image - hope this is OK and should be simpler for you.

 

[Nathan Explosion]

Wow...good luck!!

 

 

[Steve Jabba]

Just now, Nathan Explosion said:

Wow...good luck!!

 

 

You don't want to help, you just want to lord it over others on a forum.  Stupid.

[SeNioR-]

18 minutes ago, Steve Jabba said:

You don't want to help, you just want to lord it over others on a forum.  Stupid.

But Nathan wrote what to do and how. What else do you not understand?

Check CSS Framework Buttons.

<a href="YOUR_URL" class="ipsButton ipsButton_primary ipsButton_medium">YOUR TEXT</a>

 

Edited May 31, 2021 by SeNioR-

[Steve Jabba]

6 minutes ago, SeNioR- said:

But Nathan wrote what to do and how. What else do you not understand?

Check CSS Framework Buttons.

<a href="YOUR_URL" class="ipsButton ipsButton_primary ipsButton_medium">YOUR TEXT</a>

 

No he didn't, but you just did.  Thanks so much.

Is there any way to adjust the colour and font size with a bit of code? That is really helpful - much appreciated.

 

[SeNioR-]

You can use the built-in classes to change the background color

1. ipsButton_link
2. ipsButton_veryLight
3. ipsButton_light 
4. ipsButton_negative (red)
5. ipsButton_positive (green)
6. ipsButton_intermediate (orange)

example

<a href="YOUR_URL" class="ipsButton ipsButton_negative ipsButton_medium">YOUR TEXT</a>

or customize the button using inline CSS styles

<a href="YOUR_URL" style="background:blue; color:yellow; font-size:30px;" class="ipsButton ipsButton_primary ipsButton_medium">YOUR TEXT</a>

 

Edited May 31, 2021 by SeNioR-

[Steve Jabba]

49 minutes ago, SeNioR- said:

You can use the built-in classes to change the background color

1. ipsButton_link
2. ipsButton_veryLight
3. ipsButton_light 
4. ipsButton_negative (red)
5. ipsButton_positive (green)
6. ipsButton_intermediate (orange)

example

<a href="YOUR_URL" class="ipsButton ipsButton_negative ipsButton_medium">YOUR TEXT</a>

or customize the button using inline CSS styles

<a href="YOUR_URL" style="background:blue; color:yellow; font-size:30px;" class="ipsButton ipsButton_primary ipsButton_medium">YOUR TEXT</a>

 

Thanks man this is absolutely perfect.  I have bookmarked it for future reference!

[Davyc]

7 minutes ago, Steve Jabba said:

Thanks man this is absolutely perfect.  I have bookmarked it for future reference!

Just be conscious of your font size and the length of your text line otherwise when using the IPS Button it will truncate your text if it doesn't fit the screen.

Example below is a live example I posted on my own forum using the code line from the post above:

And on browser console simulated mobile screen - the arrows point towards the edge of the screen. This simulation is for a Moto G4

 

And this is a simulation of an iPhone X

The bigger the screen the more can be seen - so be aware of those font sizes and text line lengths.

If you want to learn more about CSS then this is a good place to start >>> https://www.w3schools.com/css/

Happy hunting 🙂

 

[Steve Jabba]

11 hours ago, Davyc said:

Just be conscious of your font size and the length of your text line otherwise when using the IPS Button it will truncate your text if it doesn't fit the screen.

Example below is a live example I posted on my own forum using the code line from the post above:

And on browser console simulated mobile screen - the arrows point towards the edge of the screen. This simulation is for a Moto G4

 

And this is a simulation of an iPhone X

The bigger the screen the more can be seen - so be aware of those font sizes and text line lengths.

If you want to learn more about CSS then this is a good place to start >>> https://www.w3schools.com/css/

Happy hunting 🙂

 

I have to say this is pretty crap.  The fourm should automatically resize ; since it doesn't appear to, it's not mobile compatible.   This is ancient technology ; we've had responsive websites for years. I shouldn't have to bugger about trying to get the EXACT dimensions for every possible permutation.  

Very poor indeed.

[Davyc]

Responsiveness isn't automatic - it needs to be told how to and that's done in the CSS files of which there are many used by the system.  Buttons aren't meant to be huge, but that doesn't mean they can't be, but you need to understand the principles of responsiveness.  This is where your custom CSS file comes into play and there are @media commands that instruct the system on what size something should be when viewed on different screen sizes (of which there are many).

The only other way for you to achieve 'automatic' responsiveness within the system is to create your button as an image, but be warned about this too as the system will shrink your image to fit, but it will do so by reducing the overall size. It's the way the system works - it will only do what you tell it to do, it's not AI 🙂

Edited June 1, 2021 by Davyc

[Steve Jabba]

2 hours ago, Davyc said:

Responsiveness isn't automatic - it needs to be told how to and that's done in the CSS files of which there are many used by the system.  Buttons aren't meant to be huge, but that doesn't mean they can't be, but you need to understand the principles of responsiveness.  This is where your custom CSS file comes into play and there are @media commands that instruct the system on what size something should be when viewed on different screen sizes (of which there are many).

The only other way for you to achieve 'automatic' responsiveness within the system is to create your button as an image, but be warned about this too as the system will shrink your image to fit, but it will do so by reducing the overall size. It's the way the system works - it will only do what you tell it to do, it's not AI 🙂

Whatever.  I don't need to know the technicalities, and I would rather remove my testicles with a rusty spoon than learn about CSS.  The point is modern websites should have responsive buttons, images ; this isn't even a debate.

Here's an example of a website I own with large buttons. 

https://sugardaddyguru.com/seeking-arrangement-fake-profiles-are-they-really-an-issue/

[Dean_]

1 hour ago, Steve Jabba said:

Whatever.  I don't need to know the technicalities, and I would rather remove my testicles with a rusty spoon than learn about CSS.  The point is modern websites should have responsive buttons, images ; this isn't even a debate.

Here's an example of a website I own with large buttons. 

https://sugardaddyguru.com/seeking-arrangement-fake-profiles-are-they-really-an-issue/

I’d get that bloody spoon ready mate… 🤨

Edited June 1, 2021 by Dean_

[Davyc]

1 hour ago, Steve Jabba said:

The point is modern websites should have responsive buttons, images ; this isn't even a debate.

Unfortunately what you 'think' it should be isn't what it is.  If you don't want to work within the system then you are going to run into all kinds of different problems. And whilst this may not be a debate in your view, it has turned into one because you are unwilling to accept that this is the way the system works. There are thousands of lines of CSS code used by the IPS system and they attempt to cover the most important areas, they are not designed to cater for something that only a few people may use. So you can argue that the system 'should' do this or that, but it doesn't and it won't, so you need to bite the bullet and learn a little bit of CSS so you can make the changes you want, or live with it the way it is.

I'm sorry if you don't find this helpful, but that's the way it is and it's unlikely to change.