Support Center

Follow

Premiere: Customizing Header Links

With a little bit of HTML the header that displays on the event list and each event page can be customized to have additional links – instead of the header being one huge link (which usually redirects back to the home site).

To get started:

  1. Login to the back-end (/admin)
  2. Select Settings on the bottom-left
  3. Select Appearance
  4. Select Site Template
  5. Scroll down to Header Area
  6. Locate the text field for Custom HTML

Upload the header you wish to apply links to right above this text field and then open the header in any image editing software. You'll need to do this so you can hover your cursor at any given spot and the software will display the XY coordinates of your cursor's location within the image.

HTMLAreaExample.jpg

For the sake of example – here is a stripped down header that one may want to add hyperlinks to. It is an image header and there are seven links and a logo. As of activation the entire header is a link. 

  1. Within the Custom HTML box remove what's there EXCEPT any image source code (i.e. "<img src="/tickets/pics/Header4.png">"). If you have to delete anything it'll be a hypertext reference tag (i.e. everything between <a href> and </a>).

  2. If there is no HTML within this field you'll want to add <img src="/tickets/pics/***your header image's filename***>. The header is typically named Header1 when the site is built so <img src="/tickets/pics/Header1.png"> will usually work. Note: once you add this little bit of code, save and look at the front-end. If the header still displays then you have the correct file name. If the header does not display remove the code, save, and return to the front-end. Right-click the header image and select Open image in new tab or something of the like. On this new page, within the URL, will be /tickets/pics/*your header filename*

  3.  You should have something like <img src="/tickets/pics/Header1.png" />. Between the second " and the following you'll want to add usemap="headerlinks". Your code will now look like: 

    <img src="/tickets/pics/Header1.png" usemap="headerlinks">

    The "usemap" portion of this code applies a coordinate map to the image. Note: we have not made this coordinate map yet. That part begins now. 

  4. Add <map name="headerlinks"> to the code. Note: use line breaks so your code is easier to curate. Your code should now look like this:

    <img src="/tickets/pics/Header1.png" usemap="headerlinks">
    <map name="headerlinks">

    The map does not need to be named "headerlinks" but both names after map name and usemap must be the same.

  5. Now we are ready to start plotting points on the image. Let's do the logo first:

    <img src="/tickets/pics/Header1.png" usemap="headerlinks">
    <map name="headerlinks">
    <area shape="rect" coords="0,0,90,90" title="Return to Our Main Site" href="website.url" alt="logo homepage link" target="_blank" />

    What we're looking at here with this new line of code is a link plotted within the image – which is what the area HTML tag allows us to do. Shape assigns the plotted area its' shape: "rect" signifies a rectangle, but circles are also permitted via "circ." Coords is what plots the area – for "rect" these coordinates are in a x1,y1,x2,y2 format. In other words, the first two coordinates are the x,y of the link area's top left corner whereas the second set of x/y coordinates are the link area's bottom right corner. Title is a textual tooltip that displays on mouse-over. Href is where you place the URL you wish to link to. In this case, since it's the logo, a main website is likely in order. Alt is a required field. Set alt text which will be seen if the header image doesn't load for whatever reason. Target defines how the link opens. Target="_blank" will open a new tab when the link is selected. Target="_self" will open the link within the same tab.

  6. Let's add a couple more links:

    <img src="/tickets/pics/Header1.png" usemap="headerlinks">
    <map name="headerlinks">
    <area shape="rect" coords="0,0,90,90" title="Return to Our Main Site" href="website1.url" alt="logo homepage link" target="_blank" />
    <area shape="rect" coords="515,45,560,60" title="Link 1 Tooltip" href="website2.url" alt="link1" target="_blank" />
    <area shape="rect" coords="570,45,615,60" title="Link 2 Tooltip" href="website3.url" alt="link2" target="_blank" />
    <area shape="rect" coords="625,45,670,60" title="Link 3 Tooltip" href="website4.url" alt="link3" target="_blank" />

    Keep adding area lines in this way to add as many links as you have space for!
     
  7. Finally, close your map tag:

    <img src="/tickets/pics/Header1.png" usemap="headerlinks">
    <map name="headerlinks">
    <area shape="rect" coords="0,0,90,90" title="Return to Our Main Site" href="website1.url" alt="logo homepage link" target="_blank" />
    <area shape="rect" coords="515,45,560,60" title="Link 1 Tooltip" href="website2.url" alt="link1" target="_blank" />
    <area shape="rect" coords="570,45,615,60" title="Link 2 Tooltip" href="website3.url" alt="link2" target="_blank" />
    <area shape="rect" coords="625,45,670,60" title="Link 3 Tooltip" href="website4.url" alt="link3" target="_blank" />
    </map>

    With this simple HTML the header bars in Premiere can be customized quite a bit. 

0 Comments

Please sign in to leave a comment.