Creating Custom Buttons

When you need a button that is not already located on your site, we suggest a free, easy-to-use online application called Pixlr.
https://pixlr.com

While pixlr is free to use, it does require you to create a free account with them, so...

Create a free account with Pixlr.

By clicking the login button you will be taken to the login screen where you can sign up for a free membership.

After creating your account, you will now be able to edit pictures (i.e. JPEG, PNG, and other) files to create ADA compliant buttons.  You can search with Google, use a button service like Streamline icons, or use their files from the stock library.

Now lets' create a button to use on our site, I will be using the File icon that I downloaded from Streamline Icons in my History.

When creating buttons it is highly recommended that you use image files that do not have a background image attached, so that the button can be compatible with different pages of color variations. This helps to maintain ADA Compliance.

 

This is our work station for pixlr.

Now we are going to create this button as a Homework button.

 To overlay text, we will want to use the T. or text button 

 

This adds a new text field.

 

After the new text field is added, some pre-filled example text will be added so, don't panic and keep your towel handy.

 

Scroll down the text box options and adjust as needed.  The example text is added at 80 size font.

 

Now that we have a button laid out correctly, we need to save.

 

This opens our download menu where we can adjust the size and type of the photo.  Click download and this will download the file into your personal files on your PC.  We have now completed all the necessary steps on pixlr.  Now you'll go to your website.

After logging in, navigate to your Photo Drawer located in your File Cabinet in Site Administration.

 

Upload the image file into your photo drawer.

Once your file has been uploaded, navigate to the page that needs your button and in the text editor, use the insert image function.

This will open the image insertion menu, select the folder you uploaded your image to, select your desired alignment type, select your picture, 

ENTER IN A BRIEF DESCRIPTION OF THE BUTTON FOR ADA COMPLIANCE, LIST ALL TEXT ON THE BUTTON.

When the Insert Button turns Bright Green, You can insert the image.

 

Your button has now been inserted but currently is still just a picture on the site.

 

Highlight the newly inserted button and click the link button in the text editor.

 

This will open up the link properties menu, depending on the location of your site, use the URL field to link to a website outside of your website, or if your page is located on the website choose your page from the Link to a Page Within Your Site drop-down menu.
Click ok. Update the page and you are finished.  Great job.

• Related Articles

• Add and Create Pages

  1. Log in and go to the section you wish to add a page too. Do this by selecting the section from the pages drop-down or by searching for for the page in the SEARCH bar above the "Main Link" option under Pages: 2. Click "Add a Page" 3. You will now ...

• Creating a Hyperlink

  Creating a text link or 'hyperlink' allows you select a word, phrase or image that, once clicked, will take the viewers to another page within your site or to an external site. A text link can be used in any text editor on your website. This feature ...

• Creating News Articles

  To create a News Article on an existing News Articles Page: 1. Login to Site Administration and go to Pages. Locate your News Articles Page and select it by clicking on the Name of the page. 2. Title your Article and give the article a specific start ...

• Creating a News Article page

  To create a News Article Page: 1. Login to Site Administration and go to Pages > Click on Main Links and select the section you would like to add a new page to. 2. Add a Page to this Section 4. Select News Articles 5. Click NEXT and Title your News ...

• Adding a News Feed Stack

  When adding a News Feed is important to remember that this is just where the news will be displayed. In order to display articles in a News Feed, you will first need to create a news article page and news articles. To learn how to create an article ...