OS EDU - How To: Make a Banner with Multiple Hyperlinks (that works, regardless of screen size!) Version 6.1.+ – OnSemble Support Center

(An Adventure in Three Acts – No Server Access Needed)*

This is NOT for the faint of heart! But if I can do it, you can too! Let’s dive in.

(This is an older article. The process is EVEN easier with some of the available defaults in 7.x and higher)

Act One: Wrangle Your Banner Image!

Step One: Make Your Image

Don’t over think it – but you probably want the overall image to be a .png that is somewhere between 100 x 1880 and 150 x 1880. It does not need to be exact! 124 x 1843 is just as fine, really.

Your personal style will come into play here.

The banner will ALWAYS resize to fit and keep its ratio without warping – so it will look “taller” on very wide monitors and “shorter” on very narrow monitors. You may want to change it downstream – just a fair warning.

Because the banner will always fit and not warp, you can do really cool backgrounds. City skyline? Or an awesome sunrise/sunset? Sure! It just has to look good at your final size.

If you do ALL of this, and find you DON’T like the size? You’ll literally have to re-do ALL of it. So maybe… for your first one? You want to skip to the end and read my FAQ before you work too hard!

I made my image in PowerPoint – because I don’t have skills. (Ask for my article on how to make buttons in PowerPoint if you are like me.) If you have an awesome marketing team, or possess wicked Photoshop skills, go for it!

Step Two: Figure Out Where the Hyperlinks Go

Ok – so we are doing this whole banner in percentages. That’s how we make things look nice.

Our first job is to figure out where in our image we need our hyperlink “areas” to be – then we will figure out what percentage of the overall image they need to be at. It sounds overly tricky – but it really isn’t!! Once you do one, you’ll get it fast. 😊

I will need FIVE “hyperlink areas.” I find it helps to think of them as boxes.

So – How in the world will I figure out where these hypers are, or how big they need to be, in PERCENTAGES? Easy. We will use good old Microsoft Paint.

Save your new image somewhere safe, then open it in Paint.

(Paint? Really? Yep. Not even kidding. Paint.)

Paint lets me “hover” my cursor over areas of the image to tell me where on the image I am. I’m going to start with my “checklists” icon. (I’m really sorry… this is hard to do as a Screen Shot!)

The red arrow is showing where I’m hovering my cursor. And If I look WAY down at the bottom corner, I can see that I am 682 px in from the left.

I can also see that where I’d need the end to be is at 810 px in from the left.

I’m not worried about top or bottom for where it goes, as I want my Hyper Area to be there from top to bottom, basically the whole band height.

(If you really want to do LOTS of buttons, and stack them on top of each other, we can do that, too, but not in this How To, haha!)

So, here’s what I know:

For each Hyper Area, I need two numbers – Hyper Start Point % and Hyper Width %

Hyper Pixel Begin / Overall Image Length Pixels = Hyper Start Point %

My image is 1880 px long, I need this Hyper to start at 682 px.

682 / 1880 = 36.2% Sweet! I’ll write that down.

Hyper Pixel Width / Overall Image Length Pixels = Hyper Width %

My image is 1880 px long. I need my Hyper Area to start at 682 px and end at 810 px (so I need it to be 128 px wide)

But – since we are doing this in percentages, 128 px divided by 1880 px = 6.8% I will write that down, too.

I started a spreadsheet to keep my info in order.

You also need to decide two things (we will add the code later):

Do I want any of these to “open in a new tab”? If so which ones?
Do I want a Hover Title (like, a tooltip) when any of these are hovered over? If so, which ones, and what should it say?

Have a piece of candy – you have finished Act One.

Act Two: Customize Your Code!

(If you’ve done Sidebars, Layouts, etc this will be very familiar!)

Step One: Export an original Layout

Go to Portal Tools -> Manage Portal Framework -> Layouts Manager
Click the Import and Export Layouts tab
Lok for the “PortalBanner” section
Download ‘PortalBanner: Default Portal Banner’

Step Two: Extract the files and begin to customize

Create a folder (on your desktop is fine) – Name it something other than Default Portal Banner – YOU WILL NEED THIS FOLDER NAME IN STEP FOUR (when you deal with the ‘path’)
Right click the zipped Default Portal Banner folder (it’s probably in your downloads) and choose “Extract All”
Choose a destination to extract to (the folder you just created) by pressing Browse
Click Extract

Step Three: Rename the .ascx file (aka zzz in the instructions below)

Open that new folder – there are three files (Images, Layout and Portal Toolbar)

images – Leave this one alone for now; this is where we will put your banner image you made
config – We will handle this .config file in the next step, leave it alone for now
ascx – Right click and rename this .ascx file, something similar to what you will be calling this dropdown – YOU WILL NEED THIS NAME TWICE IN STEP FOUR (once when you deal with the ‘id’ and once when you deal with the ‘path’)

Step Four: Customize the Layout

Open the layout.config – Be sure to Right click, Open with Notepad*

There are six lines of code in here. I’ve highlighted them in BOLD. You’re only changing three things, and leaving three things alone.

Version : DO NOT CHANGE
CompatibleShellID : DO NOT CHANGE
Type : DO NOT CHANGE

Name : Must change. This needs to be unique (no other Banner anywhere in your Portal can use this name) - It will display in your Portal.

id : Must change ONE item here – just the fourth one
- "Passageways.Layouts.Banner.Default"
- Needs to be "Passageways.Layouts.Banner.zzz” Where zzz is the Name you created for the .ascx file in Step Three
Path : Must change two items here, the third and fourth

"~/Layouts/Banner Layouts/Default/Layout.ascx"
Needs to be "~/Layouts/Banner Layouts/xxx/zzz.ascx"

Note: This looks tricky, but it isn’t. Change “Default” to the FOLDER name from Step Two, change “Layout” to whatever you named the ascx file in Step Three.

Save this file.

Step Five: Add your Banner Image to the images Folder

Save the banner image you made into that folder. You can delete anything else in there.

Step Six: Make the .ascx File Work for You

Open the Banner.ascx – Be sure to Right click, Open with Notepad*

Delete everything

Cut and paste the code below:

<%@ Control Language="C#" Inherits="System.Web.UI.UserControl" %>

<%@ OutputCache Duration="6000" Shared="true" VaryByParam="none" %>

 

<style>

.bannerimagemap{

position: relative;

}

.bannerimagemap a{

display: block;

position: absolute;

}

</style>

 

<!-- Banner Content -->

 

<div class="bannerimagemap">

 

<img alt="" width="100%" src="/Layouts/Banner Layouts/YOURFOLDERNAME/images/YOURIMAGE.png" style="border-width: 0px; border-style: solid;" /><br />

 

<a href="https://nameofURLlink.com" title="Home Page" style="top: 0%; left: 0%; width: 18%; height: 100%;"></a>

 

<a href="https://nameofURLlink.com" style="top: 0%; left: 36.2%; width: 6.8%; height: 100%;"></a>

 

<a href="https://nameofURLlink.com" style="top: 0%; left: 46.8%; width: 7.1%; height: 100%;"></a>

 

<a href="https://nameofURLlink.com" style="top: 0%; left: 57.5%; width: 8.2%; height: 100%;"></a>

 

<a href="https://nameofURLlink.com" style="top: 0%; left: 67.9%; width: 9.8%; height: 100%;"></a>

 

</div>

Now for the fun stuff!

Step Seven: Add your banner image

Add the image underneath <div class=”bannerimagemap”>.

Step Eight: Add your hyperlinks and hyper areas

You’ll now add a line for each of your Hyper Areas.

Here’s my example:

Basically, a basic Hyper Map looks like this:

Remember when I asked you if you wanted to add special things?

Do I want any of these to “open in a new tab”? If so which ones?
Do I want a Hover Title (like, a tooltip) when any of these are hovered over? If so, which ones, and what should it say?

We handle that here, too.

Any Hyper Area that needs to open in a new tab needs one piece of code added :

target=”_blank”

Example:

Any Hyper Area that you want to have a Title on Hover needs one piece added (change what you want to whatever you want it to say) :

title=”What you Want”

Example:

And yes, that means you CAN do both! 😊

Example:

Step Nine: Save this file.

Whew! Almost Done!! Let’s Load it up!

Act Three: Grand Finale (and take a bow!!)

Step One: Zip it up

You need to zip up your new folder. Do this by right-clicking the new folder and choosing “Send To” and “Compressed (zipped) Folder”

Step Two: Send it to your portal

Go back to your portal. Portal Tools -> Manage Portal Framework -> Layouts Manager
Choose the Import and Export Layout Tab
Click Import Layout and choose your newly zipped folder (please do not choose Overwrite)

Step Three: Assign it to your users

Choose the “Assign Layouts” tab – and assign your new layout to yourself to test it out. You’ll need to refresh your portal for it to take effect – going to your Start Page ought to do it.

Once you’re sure it is working well, assign it to the appropriate User or Role. If you want to Assign to everyone, just Add All. You can also make it “Public” so that your Users can choose it for themselves under “My Preferences” (if your organization allows this)

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

FAQ:

Where can I get icons and stuff?

Ask your marketing team to help you.

How can I test out sizes before I do all this work?

Smart idea. Make a plain rectangle image and note the size. Maybe put one icon on there as a “test” for size.”

Don’t worry about adding hyperlinks or anything.

Do Act Two, Steps 1- 7.

Skip Step 8

Do Step Nine.

Do Act Three as well.

Look at it on your screen. Too tall? Too short? Look at it on other screens. Take it out to Screenfly and look at it there.

What’s the deal with Public vs not Public Layouts?

Anything that is a Public Layout can be “chosen” by staff if they go to their preferences. If you want everyone to have a specific layout, you’ll want to ensure you “Assign to All and DO NOT make anything else Public.

See the Dear CSM Article for details!

Articles in this section

OS EDU - How To: Make a Banner with Multiple Hyperlinks (that works, regardless of screen size!) Version 6.1.+

Comments

Articles in this section

Related articles