Jump to content

Community

How do you add a Clickable HTML hyperlink button ?


Go to solution Solved by Davyc,

Recommended Posts

Posted (edited)
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 by Steve Jabba
Link to comment
Share on other sites

  • Solution
Posted (edited)
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):

image.png.2d0426500beaa3989285a3b926a9ab7b.png

 

Once in there click the 'Add Button' button lol

image.png.4de86e8f58bf5800e2f0ec4ddb42dc5f.png

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

image.png.24c8ee63dc1f122faee5859bb1f00a16.png

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.

like.gif.acca5382fd223710138f70098dee4edd.gif

 

Edited by Davyc
Clarification
Link to comment
Share on other sites

8 hours ago, opentype said:

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

1075052297_Bildschirmfoto2021-05-30um21_00_08.thumb.png.919192c82703981a2b204cce672e3f53.png

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)

132595142_mongedbutton.thumb.jpg.f09e0a6db841973bce2ac61b346c248b.jpg

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.

 

Link to comment
Share on other sites

Posted (edited)
21 hours ago, Steve Jabba said:

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

:rolleyes:

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.

image.png

Edited by Nathan Explosion
Link to comment
Share on other sites

27 minutes ago, Nathan Explosion said:

:rolleyes:

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.

image.png

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.

 

Link to comment
Share on other sites

Posted (edited)
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 by SeNioR-
Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

Posted (edited)

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 by SeNioR-
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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:

image.png.139191c63803b4bea7522ba4d5fe274c.png

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

image.png.bdb32abf0c7687884f8347eeb7709877.png 

And this is a simulation of an iPhone X

image.png.87563e31add9c4f14867a7b3fc5e91a0.png

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 🙂

 

Link to comment
Share on other sites

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:

image.png.139191c63803b4bea7522ba4d5fe274c.png

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

image.png.bdb32abf0c7687884f8347eeb7709877.png 

And this is a simulation of an iPhone X

image.png.87563e31add9c4f14867a7b3fc5e91a0.png

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.

Link to comment
Share on other sites

Posted (edited)

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 by Davyc
Link to comment
Share on other sites

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/

Link to comment
Share on other sites

Posted (edited)
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 by Dean_
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy