Spring-clean your VITA site with these design resources

It’s spring, and that means spring-cleaning time. If you’re thinking about refresing the look and feel of your VITA Digital Toolkit site, we can help!

Our helpsite has tons of useful resources we’ve written about how to navigate and customize the front-end of VITA. We’ve also added some example resources from other VITA members who have graciously shared templates, posters, event plans, and other documents you can learn from.

The first and best place to look is the guide to Managing & Customizing Your Site. If you want to follow along with a video, we also have a recorded webinar that walks you through the data-management screens you’ll need to use.

There’s another great video that helps you change the front page of your site. We offer the ability to change the default subheadings, labels on the search boxes, page titles, and links, and highlight new exhibits, collections, and external sites. You can change the items that appear in the slideshow, add in images and HTML-formatted text in several spots, and include more links in the sidebars.

Capture2


If you want to modify more than just your search page, Managing & Customizing Your Site is your best bet. You’ll find screenshots and step-by-step instructions on changing your site banner, your header and footer, and picking a theme from the presets. You can also direct your site to pull a new theme from our other templates, or modify an existing template in CSS and upload it. This can be as easy as replacing all the default colours with your organization’s branding colours!

We’re particularly partial to this bubbly beige theme designed by our former iSchool practicum student Kevin Steele. Download the CSS file from the helpsite and upload it right to your VITA account – or upload it elsewhere and link to it in the “From your server” field. That’s all you have to do!

Capture


If you want to take the pre-existing VITA themes and simply switch in your own colours, it’s easy to get the hang of.

Download the CSS file you’re currently using, by going to your site and using the Inspect or other code-viewing utility in your browser. You’ll be able to open and save a copy of the CSS currently generating the elements you see on your screen. Here’s what it looks like with the helpsite – you can find the CSS that’s being included in the site’s header code, or just click on the “ODW_s_301.css” link in the right hand side:

Capture3

Open the CSS file in any text editor (I use notepad for this all the time). Use the “find/replace” to pick out the current colours you want to switch out. Want to take all of the blues from the helpsite theme and make them greens? Search for the HTML colour codes you can see in the screenshot above – a six-digit number-and-letter combo preceded by a # symbol. We’ll find #345C88 and change it to a dark green, and find #6680E1 and change it to a light green.

(Here’s a neat trick: if you don’t have existing colours to work with, pick some new ones simply by searching “colour picker” in Google – a spectrum box will appear with an eyedropper, and it’ll generate HTML colour codes for you!)

I’m going to pop in the dark #0D511A and the light #20D843. #345C88 appears in the CSS file about 15 times, so we’ll do 15 find/replaces to insert our new colour. #6680E1 appears another 12 times.

Capture4.PNG

Save the file and upload it to VITA. With these simple edits, we can see our VITA site start to change colours!

Capture5

If you want to learn more CSS, such as changing the fonts, underlines and bolds, sizes and whitespace, or anything else, you can’t go wrong working through the W3 CSS Tutorial. We also like searching through css-tricks.com for some of our trickier questions, but they have great beginner lessons too.


Capture6Once you’ve got a newly refreshed VITA site, it’s time to show it off. Take a look at some of the events and campaigns organized by our other VITA members, from digitization days to local history clubs. We’ve also compiled some videos from our partners, including how-to-use-VITA videos, Oakville’s wonderful Heritage Moments project, and some slideshows of historical images.

Leave a Reply

Your email address will not be published. Required fields are marked *