Got a Joomla site that needs a button? Planning to use the CoffeeCup Button Builder to create it? Then this article is for you. Just follow these instructions and you'll have your button up and running no time!
Step 1:
First thing to do is to Export your button from the Button Builder. Once you've gotten to the end of the export procedure it will give you the code to place on your website page. Use this exact code in your Joomla page.
Keep the button builder open so you can copy the code in just a few minutes, or if you have a good text editor you prefer you can paste the code into it for use later too, either way. When you paste the markup into the Article page you are planning to add it to just edit those pathways as mentioned above.
Step 2:
Now upload "the contents" of the folder that the Button Builder gave you when you exported your button. Do not upload the folder that ends in the words _exported, only upload what is "inside" that folder.
We would suggest right in your default website directory so that if at some point you decide to remove the Joomla system from your server, you won't lose your button files too. So upload them to the root directory of your website where your main index.html home page resides.
Step 3:
The next thing to do is log in to your Joomla Administration window and go to the Global Configuration setup. To do that go to the menu at the top of the Joomla window and choose “System” then “Global Configuration” and click it.
Step 4:
Once in the Global Configuration area look down the list of settings of the default Site tab till you see the "Default Editor *" setting and choose the "Editor -CodeMirror" choice in the drop down menu and then Save & Close your settings.
Step 5:
Download the Easy Script plugin. Install this plugin and use it to insert your CSS file into your article or page. :)
Step 6:
Now at the top of the page choose the Content menu then choose Article Manager directly and click it.
Create a new article, or edit an article you were planning to put the button on and go into the edit mode to insert your code.
In the article editor you will see that it is fully code based at the moment so if you're comfortable with it being code then you won't need to change it back. (If you're not you can always change that Global Configuration setting for the Default Editor back to the TinyMCE choice once your button is fully working.) Paste your code into the article making your pathway changes here if you haven’t already done so in a different text editor.
Step 7:
Save your Article and check your live article page to see that the button shows up now!
Additional Instuctions:
If you find it's not working, be sure you:
- Changed your Default Editor of the Global Configuration
- Uploaded the files to the right location
