Create a NEW Sidebar in 45 Minutes or Less!

(In just a few easy steps with NO Server Access Needed)

Step One: Figure out the right "look"

• You'll need two icons for every "button" in the sidebar. One for the DEFAULT and one for the HOVER. We suggest using .svg or .png.
• Sidebars really look best with 3 - 7 icons. You can do more, but remember that they don't 'resize' - so if you have too many, the bottom ones may get cut off on some screen resolutions.

• If using .png, a max height/width of 75 px is suggested.
• Whatever you decide - they all need to be the same size to look nice.
• Name them each something you will recognize; for default and hover. (See the example below)

Step Two: Decide what you'll call them, and where they need to go. 

• Each button will have a unique name.
• You'll also need to know the URL of where each button should go, as well as whether or not you'd like it to open in a new window.

• At this point, you're assembling a LOT of info! You might want to get it into a spreadsheet. :) 

Step Three: Export/Rename the OnSemble Image Sidebar Layout

If you've never done this before, follow this article!

Step Four: Add the new images to the folder.

To reduce confusion later, I usually delete the old images. All those .svg can be deleted.

Add your new images to the folder.

In the example below, you can see I've already renamed the master folder, renamed the .ascx, removed the old images, and added the new images.

Step Five: Add the images to the .ascx.

This is the most challenging part - but it isn't hard! Take a deep breath and just go slow.

Open the .ascx file and scroll ALL the way down. You're looking for this section. This is the "guts" for the five default buttons that are in there.

You will do the following process for EACH BUTTON:

• Change the name (blue)
• Change the folder (yellow)
• Change the icon (green)

Example Old:

Example New:

The original file is five buttons. If you want fewer than five, delete the extras. If you want more than five, copy and paste a few more in.

Step Six: Change the URL for the .ascx.

Scroll just a little more. Look for this part:

The slash is where you will put your hyperlinks. You also need to change your names to match the names above.

Repeat for each of your buttons.

Step Seven: Zip it up and Upload!

Send it back to the portal using the same process outlined in Step Three!

Woo! That’s it!!! You’re done! Do a little dance and have a piece of candy. You earned it!