Adding an Artisteer Styled Template Button to the Content of Your Joomla Website

Artisteer is a very easy to use and professional template creator.  The software can create custom designed templates/themes/layouts for popular CMS systems like Joomla! and Wordress.  Within the template creator, you can customize your buttons that will used to display on forms, widgets, and the “Read More” link in Joomla!

This tutorial shows how a button can be added within a post/page/article wherever you want it to be.  The only choices that need to be made, is whether the Artisteer template was created in version 3.x or 2.x, and whether the link opens in the same window or in a new one.

Artisteer 3.X

To Open in the Same Window

<p style=”text-align:center;”><span class=”art-button-wrapper”>
<span class=”art-button-l”> </span>
<span class=”art-button-r”> </span>
<input type=”submit” name=”my_button” value=”My Button” onClick=”window.location=’http://www.yoursite.com’” />
</span></p>

To Open in a New Window

<p style=”text-align:center;”><span class=”art-button-wrapper”>
<span class=”art-button-l”> </span>
<span class=”art-button-r”> </span>
<input type=”submit” name=”my_button” class=”art-button” value=”My Button” onClick=”window.open(‘http://www.yoursite.com’);” />
</span></p>

Artisteer 2.X

To Open in the Same Window

<p style=”text-align:center;”><span class=”art-button-wrapper”>
<span class=”l”> </span>
<span class=”r”>  </span>
<input type=”submit” name=”my_button” class=”art-button” value=”My Button” onClick=”window.location=’http://www.yoursite.com'” />
</span></p>

To Open in a New Window

<p style=”text-align:center;”><span>
<span class=”l”> </span>
<span class=”r”>  </span>
<input type=”submit” name=”my_button” value=”My Button” onClick=”window.open(‘http://www.yoursite.com’);” />
</span></p>

The only difference between the 3.x and the 2.x code is the left and right span classes.  Other than that, the javascript changes a little for the new window option.