[Resolved] How to use Avada Theme buttons for CRED delete post link

[Author]

Posts

[patrickM-3]

The Fusion builder in the Avada theme has nice looking buttons that allow FontAwesome icons along with many other features. The code that one of these buttons produces is:

<div class="fusion-button-wrapper">
<style type="text/css" scoped="scoped">
.fusion-button.button-2 .fusion-button-text, .fusion-button.button-2 i {color:#2a6ebb;}
.fusion-button.button-2 {border-width:2px;border-color:#2a6ebb;}
.fusion-button.button-2 .fusion-button-icon-divider{border-color:#2a6ebb;}
.fusion-button.button-2:hover .fusion-button-text, .fusion-button.button-2:hover i,
  .fusion-button.button-2:focus .fusion-button-text, .fusion-button.button-2:focus i,
  .fusion-button.button-2:active .fusion-button-text, .fusion-button.button-2:active{color:#5b8f22;}
.fusion-button.button-2:hover, .fusion-button.button-2:focus
  .fusion-button.button-2:active{border-width:2px;border-color:#5b8f22;}
.fusion-button.button-2:hover .fusion-button-icon-divider, 
  .fusion-button.button-2:hover .fusion-button-icon-divider, 
  .fusion-button.button-2:active .fusion-button-icon-divider{border-color:#5b8f22;}
.fusion-button.button-2{background: #ffffff;}
.fusion-button.button-2:hover,.button-2:focus,.fusion-button.button-2:active{background: #ffffff;}
.fusion-button.button-2{width:100%;}
</style>
<a class="fusion-button button-flat button-pill button-small button-default button-2 dispensary-del-button" target="_self" href="#">
  <i class="fa fa-trash-o button-icon-left"></i>
  <span class="fusion-button-text">Delete</span>
</a>
</div>

I have been able to add the proper HREF to these theme buttons for accessing a CRED edit form. I want to also provide a CRED delete post link using the same style of button but I don't know how to do that. The CRED delete post link uses AJAX and has callback functions, so it's more than just adding an HREF.

Also, because of the way that the Avada theme builds buttons, I can't just add class(es) to the CRED delete post link to get the button to include an icon and be a well formatted as those that come with the theme.

Has anyone done this? Maybe it's easier than I'm thinking.

[Beda]

You should be able to add the Class for this Button within the CRED Delete Post ShortCode, and eventually some inline style if needed.

Below is a example:

[cred_delete_post_link class='your-classes-here cred-refresh-after-delete' style='your-custom-style-here' text='Delete %TITLE%' action='trash' message='Are you sure you want to delete this post?' message_show='1']

You can also wrap this ShortCode in any HTML you need.

This is how you would produce a Bootstrap Button as example, adding the Class to the CRED ShortCode:

[cred_delete_post_link class='btn btn-danger btn-xs cred-refresh-after-delete' style='your-custom-style-here' text='Delete %TITLE%' action='trash' message='Are you sure you want to delete this post?' message_show='1']

And a FontAwesome added:

[cred_delete_post_link class='fa fa-trash-o d-refresh-after-delete' style='style' text='' action='trash' message='Are you sure you want to delete this post?' message_show='1']

Please let me know if the above solution works for you, I look forward to your reply!

Thank you for your patience.

[patrickM-3]

It's working but it still acts quirky. The Avada theme seems to replace the single submit input with a wholse nested structure. I think it builds all of that stuff using jQuery, if it finds those classes there. I've gotten one working and copied the classes to other pages. Sometimes it has 2 borders and sometimes no border at all.

After a bit of fiddling, I've been able to get them to look consistent.

Thanks Beda!