Our default buttons for the Unique URL have been designed to work well with almost any design you throw at it, but we know that some users like to make things a little more custom. With this in mind this tutorial will show you how you can edit the default buttons to your own color scheme or images when using custom HTML.

You should have some knowledge about HTML before you attempt to edit the buttons and have read the article HERE on using custom HTML for Unique URLs.

Pre-Steps…

We will show three methods for changing the buttons using the default Unique URL HTML template as guide (which can be found HERE).

In normal operation when default buttons are enabled in Event Manager the [[CUSTOM_SHARE_BUTTONS]] tag is replaced with the full button code (which can be found HERE). In order to edit the buttons in your custom HTML you will need to add the button HTML to the main URL HTML template.

Using an HTML editor such as Dreamweaver or CoffeeCup copy the entire code from the button HTML and replace the [[CUSTOM_SHARE_BUTTONS]] tag with it and delete the addthis tag:

We recommend that you move the styles from the button code into the style section for the page to keep them all together.

Method 1 — Changing the default button background colors

So we have made it easy for you by already combining the two HTMLs linked above into a single HTML file which can be found HERE. We have kept the styles all together in the one style block as recommended above with the rest of the page styles in the head section of the HTML.

This is the easiest option as it doesn't involve uploading any images and is just a matter of editing the colors of the buttons to your liking. 

Note: The method below will keep the buttons with the white icons and white text.

1.

Open the above linked HTML in your HTML editor of choice and find the styles section for the buttons:

2.

We will just be editing the actual colors of the buttons from them all being different colors to just a single color:

Such as this for all blue buttons:

This will give you buttons as per below:

Note: If you did want to change the color of the social icons to another color other than the default white, you will need to add the following to the styles section:

/*icons*/
  .fa
    {
      color: #FFFFFF; /*change this colour for icon*/
    }

The color for the actual text in the buttons is the color property in .custom-share-button within the styles, again if you wanted to change that too (this will also change the text color for the buttons in all dialogue boxes).

3.

The email buttons in the dialogue boxes which are green as default as per below, can also be changed:

You will just need to edit the emailform button's color here:

4.

Once you have made your edits, copy the new code and paste it into the custom HTML box on the Unique URL tab in Event Manager. The buttons can still be turned on and off using the check boxes on that tab too.

Method 2 — Round Icon CSS Buttons

We have created a set of alternative buttons that are just icon based, and with just use a few tweaks they can be styled to match your theme. Again this is available for download from HERE

These will give you buttons that look like the below and are easy to adjust the colors based on your design:

1.

Open the round icon button template in your HTML editor of choice and find the styles section as before:

You will noticed that there are a few more styles added and some changes have been made to the .custom-share-button style. 

Most of the added extras should remain untouched as they control the alignment, shape and size of the buttons and icons.

2.

By default the icons are white with colored circles. You can change the white icon to any color, such as the same as your background, by editing the hex color here:

3.

To change the circle color, this is the same as the first method and is simply a matter of changing the hex color of each of the six buttons:

In the sample above this will give you all black circles:

4.

As we have changed the style of the buttons to be round, we have had to create an extra style for the custom buttons for the dialogue buttons to keep them rectangular. The only thing that you will need to change on this style is the color if you wanted to change it from white. You can use a defined color or a hex color:

It is worth noting due to the above the class for the buttons in the dialogue boxes is now set as custom-share-button2:

5.

As we are using just the icons, we have removed the text after the icon (i.e. between the </i> and </div>):

For the icons themselves we are using fontawesome, their entire collection of icons can be found HERE, this means that if you wanted to swap out an icon you can do so. For example if you wanted to use the cloud download icon you would change the button download line to the below:

[[BUTTON_DOWNLOAD]]<div class="button-download custom-share-button pure-button" ><i class="fa fa-cloud-download"></i></div>[[/BUTTON_DOWNLOAD]]

6.

Once you have made your edits, copy the new code and paste it into the custom HTML box on the Unique URL tab in Event Manager. As before the buttons can still be turned on and off using the check boxes on that tab too.

Method 3 — Custom Image Buttons

Sometimes to match a brand it is necessary to use actual images for the buttons rather than the CSS ones. In this final method we will use images for the buttons such as these:

By now it comes as no surprise we have created a version of the default HTML template with images for buttons HERE for you to use as guide.

1.

Using our template for this method there is very little that you need to amend with the styles. The only buttons that are not image based buttons are the email/submit buttons in the dialogue boxes. The styles for these can be edited as before for both the button colour and the button text:

2.

The code for the actual buttons is a little different to using just CSS, and are along the lines of the following:

[[BUTTON_DOWNLOAD]]<div class="button-download custom-buttons" ><img src="LINK TO YOUR IMAGE" border="0" alt="Download" style="width: 52px;"/></div>[[/BUTTON_DOWNLOAD]]

For the image for the button where we have LINK TO YOUR IMAGE above you will need to host your image online using a site such as tinypic, or on your own webserver and have the URL for each image to hand. 

We would recommend using SVG images wherever possible as they look good on all screen resolutions due to being vector based. If using PNGs or JPGs, you should make them twice as big as they need to be i.e. if you are having the buttons display at 52px wide, then make them 104px, this is so they still look good on retina and other high resolution screens.

3.

Edit the HTML to include your image URL for each of the buttons. 

You can also set a width for the buttons to control how wide they will appear. We find that 52px is a good width that works well on all devices:

As we are using images, we have also set the alt for each image too.

Note: you only need to add the images for the buttons you are using, so if you aren't using G+, there is no need to upload an image and include the code for that button in the above section.

4.

That is all that is needed for image based buttons, and as before copy your code then paste it to the custom HTML box in event manager and test.