Custom buttons

[Strakks]

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 
https://gyazo.com/28da8329ab0deaa5fbf2e8357fe08043

[Daniel F]

You can use html and use normal links with the proper css class

[Strakks]

10 hours ago, Daniel F said:

You can use html and use normal links with the proper css class

cool! However I can't find the proper html code and how I would insert it into an wysigwy post on one of my pages?

[Strakks]

BUMP!

[opentype]

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?

[Strakks]

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.

[opentype]

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.  

[Strakks]

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?

[Strakks]

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?

[opentype]

No, not required. 

[Strakks]

1 minute ago, opentype said:

No, not required. 

Alright, did you see the first reply? Regarding my issue?

[Strakks]

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?

[Strakks]

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?

[Strakks]

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..

[opentype]

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. 

[Strakks]

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? 

[opentype]

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. 

[Strakks]

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>

[opentype]

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. 

[Strakks]

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? ?