Knowledge Base support case for Likno Web Button Maker, abstracted and stripped of all user’s private info.
Initial Email From: Jonathan
Initial Email Subject: Web Button in Joomla
Support Case Month: February 2013
Hi, I was looking at your Likno Web Button Maker and it says that it works with any CMS. I am sure that it does but, as a person that is starting with cms, I can’t get it to show on my webpage. I am using Joomla and and installed the plugin sourcerer to put some html code in any article so I can paste the html code when I exported my button. I tried installing the exported image in media manager but it didn’t help.
Could you include on you’re website the installing method in popular CMS, I think it could really boost your sales for people like me who are just starting with this. Software that makes it easy to do complicated things that would require lots of code (like your software) is right up the alley to people who are not professionals.
Thank you very much for your help.
Jonathan
Reply From: Likno Customer Support
Dear Jonathan,
I am afraid that we do not have a specific Joomla plugin, but it is very easy to import your new button manually.
The steps you need to take are:
1) Export your Button:

2) I recommend selecting the 32bit PNG format as it has the best quality and supports transparency:

3) Note the path where you exported this button. You can now use it as an image in Joomla or anywhere else.
4) If you want to create a 3-state button, you have two options. To create it as a single “sprite” image and change it through CSS, or to create three separate images and change through JavaScript. If this is what you are trying to do (a 3-state image), please send me details (eg is this for a page button, or for a menu?) so that I can be more specific in my help.
Regards,
Kostas
Best Regards,
Kostas
Likno Customer Support
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!
Reply From: Jonathan
Hi Kostas,
It is for a page button Inside an article an you’re absolutely right, it is easy if I just add the image. The problem is creating a 3-state button easily with this method and this is what i’m trying to do.
If you could lend me a hand how to do this, that would be great.
Thank you for the great support,
Jonathan
Reply From: Likno Customer Support
Dear Jonathan,
This will require some hand-on coding on your part. The problem here is that the Joomla editor will remove any tags that do not have content, including your <style> and <script> tags.
I believe the easiest way is to use the CSS method, as this can have the code embedded into the actual item.
To do this, export as CSS and copy the code:
<html>
<head>
<title>Likno Web Button Maker sample page</title>
<style type="text/css">
.liknobtn {
display:block;
width:120px;
height:40px;
margin:0;
padding:0;
}
.liknobtn1 {
background: url("LiknoWebButtonMaker1.png") 0 0 no-repeat;
}
</style>
</head>
<body>
<div class="liknobtn liknobtn1" id="liknobtn_1" onmouseover="this.style.backgroundPosition='0 -40px';" onmousedown="this.style.backgroundPosition='0 -80px';" onmouseup="this.style.backgroundPosition='0 -40px';" onmouseout="this.style.backgroundPosition='0 0';"></div>
</body>
</html>
Then you need to merge this code into a single button (removing the unneeded parts), and make sure that it has an empty space as content (or it will be deleted by Joomla):
<div style="display: block; width: 120px; height:40px; margin: 0px; padding: 0px; background: url('/images/LiknoWebButtonMaker1.png') 0 0 no-repeat;" onmouseover="this.style.backgroundPosition='0 -40px';" onmousedown="this.style.backgroundPosition='0 -80px';" onmouseup="this.style.backgroundPosition='0 -40px';" onmouseout="this.style.backgroundPosition='0 0';"> </div>
Pay attention to the image URL (where you will upload it) and also to the quotes in there, to not match the “style” quotes.
Let me know if this worked.
Best Regards,
Kostas
Likno Customer Support
www.likno.com
Powerful javascript menus (CSS menus/drop-down menus/sliding menus), web trees, buttons, tabs, modals, tooltips, accordions, scrollers, designs for your websites!