Knowledge Base

How to add buttons

on Sunday 11 August 2019
comments: 0

 You successfully finished MindFeatures element (Four icons with hover effect and buttons), but you like coloured boxes more.

You need to know -

1. code for your data (in this case mindfeatures - default value, you could change it) (Note: you can create new set of data by copying original element and change code to features)

2. needed template - by default it's template from other element features  (Note: you can create new template key by copying existing features and change key f.e. features_buttons)

Your shortcode then will be

{ELEMENTS: mode=mindfeatures&template=features}

If you change it in the menu manager, at least colour should be changed, but buttons are missing.

Now open template file and find your template. 

Copy button code from mindfeatures template:

<a href="{ITEM_URL}" class="btn btn-success pull-right">{ITEM_BUTTON}</a>

and check result

Full template:

$JMELEMENTS_TEMPLATE['features']['start'] = '
<section>
<div class="container">
<div class="row">';
$JMELEMENTS_TEMPLATE['features']['item'] = '
<div class="col-md-3">
<div class="mind-box animated {ITEM_ANIMATION} {ITEM_CLASS} {ITEM_DELAY} ">
<h4 class="mind-box-title">{ITEM_TITLE}</h4>
<i class="{ITEM_ICON}"></i>
<p>{ITEM_DESC}</p>
<a href="{ITEM_URL}" class="btn btn-success pull-right">{ITEM_BUTTON}</a>
</div>
</div>
';
$JMELEMENTS_TEMPLATE['features']['end'] = ' </div>
</div>
</section>
';

With some other elements, maybe more customization is needed, but boxes are very similar.  

Ca22c2983bb8

Note:  if there would be missing some field (f.e. class), it's enough to add it to element settings (file option_yourselectedsettings.php)

Another way (if you don't want to use existing code for this):

- change setting for "4 Coloured boxes" element (from option_services.php to option_mindfeatures.php). This way you get new fields to fill for this element. But you still need to add them to the template.