« A News Years resolution | Blog home | Flash in the new world »

This post is really just for Sydney Uni webmasters. If you're not one then feel free to tune out now.

You may have noticed that the University recently launched its new brand. One of the most prominent aspects of the brand's launch was the transition of the University's website into the new template.

An important feature of the new template is the addition of a new style of "banner". We call them "featured links" (see Figure 2).

Diagram explaining the different banner styles

Featured links are designed to replace Banners (see Figure 1) and have several advantages over the old style banners:

  • They conform to our new brand
  • They don't use a custom font
  • They don't use gradients
  • Allow more than 2 lines of text
  • Less reliance on using photoshop to create them
  • You can build them yourself! Don't need to ask DPM to make them for you.

Creating a featured link is very simple. All you have to do is make a link with a specific "class" and give it an appropriate "id". Check out the code below.

<a href="http://sydney.edu.au" class="featured-link" id="my_unique_id">My featured link</a>

Then in your featured-links.css CSS file found in your sites "styles" folder simply add a CSS reference for your new featured link. e.g.

a#my_unique_id.featured-link { background-image: url(../../images/content/featured_links/my_unique_id.gif); }

The image you link to in the CSS needs to be 40x40 pixels in size.

Now all you have to do is add the HTML anchor link to a text field in an unbordered feature pane in the CMS. Simple isn't it? Ok, maybe the process could be easier. We're working on it so watch this space.

You might be thinking "Oh what! I have to replace all my banners with featured links?". The short answer is yes. The longer answer is yes because style of banners doesn't conform to the University's new brand. But don't worry too much - we don't expect you have all the banner replaced overnight. These things take time, so what we have done is used CSS to make banners render in a similar way to featured links (see Figure 3). They don't look 100% like featured links but they are close and a good temporary fix.

Comments

Now we know who the senislbe one is here. Great post!

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)

Enter the code shown below before pressing post

About the Blog

Know and love the templatedata
More