Jump to content

Custom buttons


Strakks

Recommended Posts

Hey guys! Im tired of my HTML coded landingpage and want to create one within the board instead. I want to have my own custom buttons leading to diffrent areas in the forum. But how  do i do that??

Can I create a page and then just insert the buttons in the wysiwgy editor or what? And also, where can I pins such buttons? I want a similar look to this  28da8329ab0deaa5fbf2e8357fe08043.png
https://gyazo.com/28da8329ab0deaa5fbf2e8357fe08043

Link to comment
Share on other sites

  • 4 weeks later...
2 hours ago, opentype said:

Bumping won’t help you. If you struggle with the guide articles or the implementation, then be specific. What have you tried and where does it fail?

I've tried adding this code 

<div>{
 name:'button1',
 icon:'icon1.png',
 html:'<a href="http://www.google.com">Search something</a>',
 title:'A link to Google'
}</div>

 

From this soruce https://alfonsoml.blogspot.se/2012/05/creating-button-to-insert-some-html-in.html

into the bbcode editor, but all i get up when clicking the Icon in the wysiwyg is the code. Not an option on editing the link and then display the icon iv'e choosed.

Link to comment
Share on other sites

Those instructions are for a special CKeditor plugin. Do you have that installed?

For creating buttons in the editor you can just use the Add Button → Custom function in the ACP.  The HTML could look something like this:

<a href='{option}' class='ipsButton ipsButton_important'>{content}</a>

In that case, the link text would be written first, then you select it, click the button and add the URL as the button option.  

Link to comment
Share on other sites

11 hours ago, opentype said:

Those instructions are for a special CKeditor plugin. Do you have that installed?

For creating buttons in the editor you can just use the Add Button → Custom function in the ACP.  The HTML could look something like this:


<a href='{option}' class='ipsButton ipsButton_important'>{content}</a>

In that case, the link text would be written first, then you select it, click the button and add the URL as the button option.  

Thanks for the help. As I understand it I just instert the HTML code you gave in the Add Button editor. But when I then write a text in the wysiwyg editor and mark it and press the button icon it appears as a button, and I can edit the text. However when I dubbelclick and insert the URL it appears as a Buy Now text instead. Any idea?

Link to comment
Share on other sites

12 hours ago, opentype said:

Those instructions are for a special CKeditor plugin. Do you have that installed?

For creating buttons in the editor you can just use the Add Button → Custom function in the ACP.  The HTML could look something like this:


<a href='{option}' class='ipsButton ipsButton_important'>{content}</a>

In that case, the link text would be written first, then you select it, click the button and add the URL as the button option.  

Another thing, do I have to let members post HTML and HTML allowed in the certain forum?

Link to comment
Share on other sites

On 2016-10-07 at 7:02 PM, opentype said:

No, not required. 

Thanks for the help. As I understand it I just instert the HTML code you gave in the Add Button editor. But when I then write a text in the wysiwyg editor and mark it and press the button icon it appears as a button, and I can edit the text. However when I dubbelclick and insert the URL it appears as a Buy Now text instead. Any idea?

Link to comment
Share on other sites

When i try to insert the 

<a href='{option}' class='ipsButton ipsButton_important'>{content}</a>

customised bbcode button into a  post and put a link into it, it automatically rewrites to a Button text instead of the whole button. nyone got a clue of what the error might be?

Link to comment
Share on other sites

On 2016-10-07 at 7:02 PM, opentype said:

No, not required. 

Well, I managed to figure out how to create a toolbar button with a html code in it. However, what I did find was that this button containing html is useless if my members are disabled to post html. Kind of sucks cause it should be an option where they are allowed to post html made by me/the site. Otherwise it's useless..

Link to comment
Share on other sites

8 hours ago, Strakks said:

… this button containing html is useless if my members are disabled to post html. 

This isn’t true. Everything in the editor is HTML. If your member click the Bold button it creates HTML code, which of course is allowed. You can add more HTML through custom buttons. The option to allow HTML is just about allowing the HTML to be edited directly. 

Link to comment
Share on other sites

2 hours ago, opentype said:

This isn’t true. Everything in the editor is HTML. If your member click the Bold button it creates HTML code, which of course is allowed. You can add more HTML through custom buttons. The option to allow HTML is just about allowing the HTML to be edited directly. 

In the editor, the html works well. However when it's posted all HTML dissappear. I tried to set member > allowed to post HTML and then it worked great. Maybe I experience something different? 

Link to comment
Share on other sites

41 minutes ago, opentype said:

What’s the exact code that is created in the editor and what is it after posting as member? Some stuff gets stripped, e.g. dangerous code or CSS classes or iFrames, which you need to whitelist in the editor settings in the ACP

This is how to code looks like, the first picture is in the editor and the second one in the post (when members post). 

The code is following- (sorry I'm on the phone and I couldn't find the Code inserter in the toolbar)

<div style="text-align: center; width: 100%; max-width: 1100px; margin: 5px auto; padding: 0px; border: 3px solid #000000; border-radius: 15px; box-shadow: #585858 4px 4px 4px 1px;"><div style="height: 120px; text-align: center; line-height: 120px; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #000000; border-top-left-radius: 12px; border-top-right-radius: 12px; background: linear-gradient(#d8d8d8, #282828);"><div style="font-size: 65px; color: rgb(255, 255, 255); display: inline-block; text-shadow: rgb(153, 153, 153) 0px 1px 0px, rgb(136, 136, 136) 0px 2px 0px, rgb(119, 119, 119) 0px 3px 0px, rgb(102, 102, 102) 0px 4px 0px, rgb(85, 85, 85) 0px 5px 0px, rgb(68, 68, 68) 0px 6px 0px, rgb(51, 51, 51) 0px 7px 0px, rgb(0, 17, 53) 0px 8px 7px;">Your Title Here</div>

</div>

<div style="padding: 4px; box-shadow: #888888 3px 3px 5px 1px inset; background-color: #f0f0f0;"><div style="display:table; width:100%; border-spacing:8px;"><div style="display: table-cell; width: 60%; text-align: center; vertical-align: middle; padding: 4px; border: 1px solid #202020; border-radius: 12px; box-shadow: #888888 3px 3px 5px 1px; background-color: #ffffff;"><img src="http://sellercore.com/user/images/imagehere.gif" style="width: 220px; height: 213px;"><br>
</div>
<div style="display: table-cell; width: 40%; text-align: left; vertical-align: top; padding: 4px; border: 1px solid #202020; border-radius: 12px; box-shadow: #888888 3px 3px 5px 1px; background-color: #ffffff;"><div style="font-size: 22px; color: #ffffff; text-align: center; font-weight: bold; letter-spacing: 2px; padding-right: 8px; padding-left: 8px; border: 1px solid #000000; border-radius: 8px; background: linear-gradient(#505050, #101010, #505050);">Item Details</div>
<div style="color: #181818; text-align: left; padding: 8px;">Brief item details here. Brief item details here. Brief item details here. Brief item details here. Brief item details here. Brief item details here. Brief item details here. Brief item details here. Brief item details here.</div>

<br>
</div></div>

<div style="margin-right: 8px; margin-bottom: 8px; margin-left: 8px; padding: 4px; border: 1px solid #202020; border-radius: 12px; box-shadow: #888888 3px 3px 5px 1px; background-color: #ffffff;"><div style="color: #181818; text-align: left; padding: 4px;">Expanded item details here or double click this div and select delete div to remove this section. Expanded item details here or double click this div and select delete div to remove this section. Expanded item details here or double click this div and select delete div to remove this section. Expanded item details here or double click this div and select delete div to remove this section. Expanded item details here or double click this div and select delete div to remove this section.</div>

<br>
<br>

<div style="font-size: 22px; color: #ffffff; text-align: center; font-weight: bold; letter-spacing: 2px; padding-right: 8px; padding-left: 8px; border: 1px solid #000000; border-radius: 8px; background: linear-gradient(#505050, #101010, #505050);">Terms Of Sale</div>
<div style="color: #181818; text-align: left; padding: 8px;">Terms of sales text here. Terms of sales text here. Terms of sales text here. Terms of sales text here.</div>

<br>
<br>

<div style="font-size: 22px; color: #ffffff; text-align: center; font-weight: bold; letter-spacing: 2px; padding-right: 8px; padding-left: 8px; border: 1px solid #000000; border-radius: 8px; background: linear-gradient(#505050, #101010, #505050);">Shipping Information</div>
<div style="color: #181818; text-align: left; padding: 8px;">Shipping information text here. Shipping information text here. Shipping information text here. Shipping information text here.</div>

<br>
<br>
</div></div>

<div style="height: 30px; text-align: center; border-top-width: 2px; border-top-style: solid; border-top-color: #000000; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; background: linear-gradient(#d8d8d8, #282828);"></div>

</div><br>

Screenshot_20161013-111634.png

Screenshot_20161013-111206.png

Link to comment
Share on other sites

18 minutes ago, opentype said:

That code looks terrible. You should move all the styling in CSS classes, define them in your custom.css and then whitelist the classes for your editor as already mentioned. 

The code actually work great even though the outcome might look a bit old fashioned. But I'll do as you said and hope for the better. Is there any guide on how to do this? ?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...