New Research and Conferences Template

Posted on by

Over the last few months, we’ve been putting together a new CMS template for Research and Conference websites.

new-template-fw

The template is flexible, mobile responsive and easy to maintain and customise; no technical knowledge is required.

It works in pretty much the same way as the old template and we’ve documented some of the new features on the blog:

To request a site using the new template, simply complete the Research or Conference site registration form.

We hope you’ll enjoy using the features of our new look template. If you currently have a site in the CMS using the previous template and would like to update it to the new one, please email your request to it.servicedesk@ncl.ac.uk with the web address of your existing site.

Custom CSS

Posted on by

The new Research and Conferences template allows you to customise fonts (see the font picker) and change the colour scheme of your site (see the colour scheme picker).

If you have a little more web development technical knowledge you may wish to go even further and customise the CSS of your site; there’s a piece of “Custom CSS” content in the “Section Styles” section to let you do just that.

You should put your CSS inside a <style> tag as show below.

Once you have made your style changes, click “Update and Approve” then preview your site to see the changes.

edited-css-fw

Layout examples: box layouts

Posted on by

The new Research and Conferences template comes with lots of example layouts. Two, three and four column box layouts are some of the most commonly used.

boxes-fw

To create these layouts, add General Purpose content to your Section.

Use the Class field (underneath the General Content box) to tell the content how to appear on the page.

First, type “nosidebar” in the class field (this removes the side menu from your page), then add the word “twocol”, “threecol”, or “fourcol” to specify the layout before clicking “Update and Approve”.

Footer Logos

Posted on by

Using the new Research and Conferences template, you can add a set of logos (from partners or sponsors) to the bottom of your page and make them link to other webpages.

footerlogos-fw

To do this, you need to create a hidden section called “Footer Logo Banner” and add a piece of “Slick Logo Slider” content inside it.

Then,  inside the “Footer Logo Banner” section, add another section called “Image Banner Content” and add your logos inside there using a separate piece of “Gallery Image” content for each logo.

We recommend your images are sized no more than 70px tall by wide 150px with white space around the logo itself (see our post about Basic Image Editing in Photoshop for help with this).

The Name and Description fields are mandatory but won’t be displayed anywhere; the Link field allows you to turn any of your footer logos into a link to a webpage.  You should use the full web address starting with “http://”.  Finally, the Caption field will be used as the alternative text for the logo which will be picked up by screen readers.

Layout examples: a sliding banner and two columns

Posted on by

This post explains how to create a page with a sliding banner header and two columns for content below it.

two-columns-and-a-banner-fw

Firstly, to create the sliding banner, you’ll need to create a hidden section inside the section you want the banner to appear in called “Section Banner” and put some All Purpose Content in it.

Images should be 950px wide by 250px tall and the content needs to have the class “swipe”.  Each image in the sliding banner needs to be in its own piece of All Purpose Content.

“Update and Approve” the content and the banner will appear on your page in Preview and be published at the next scheduled publish.

To add the two columns of content below, create two pieces of All Purpose Content in your section:

and use the class field to give both pieces of content the class “nosidebar twocol”.

“Update and Approve” both pieces of content and they will be visible in Preview and be published at the next scheduled publish.

The first piece of content will apear in the left column, the second will appear in the right column.

Scrollable News

Posted on by

In the new Research and Confernces template, you can collect all the news and events from a Section of your site and put a scrollable set of links to them on any page.

scrollable-news-fw

To do this, you’ll need to have a Section with all your news and events in (this is setup as part of the template site):

On the page you want to drop the sliding news into, add a “News Slider” piece of content.  Give the piece of content a name, then click the Select link on the right hand side to choose the Section to get your news from.

Add the content by clicking “Update and Approve” and then preview the section to see your news items on the page.

Put a map in your contact page banner

Posted on by

In the new Research and Conferences template, you can drop a Google map into a banner on your contacts page, to show your readers where you’re based.

Start by going to the Contact section and modify the “Section Banner”.

Modify the “Header Map” content.

You can set the postcode, this alters where the pin is set on the map, and change the zoom level of the map (increase the number to zoom in further).

And the map will appear on your contact page banner.

contact-map-fw

If you don’t want the map on your page at all, Delete the “Header Map” content from the section.

Font Picker

Posted on by

The new Research and Conferences template has a new Font Picker content type in the Section Styles section of your site.

Click the yellow arrow next to the Section Styles section and “Modify Content”, then click the yellow arrow next to the “Font Picker” content and select “Modify” to edit the fonts used on your site.

By updating this content you can change the font used for your headers and body text, seperately as well as choosing to display headers in block capitals or not.

Site colour scheme picker

Posted on by

The new Research and Conferences template has a “Colour Scheme Picker” in the Section Styles section of your site.

Using the Colour Scheme Picker you can choose from a range of pre-set colour schemes or else choose your own colours for parts of your site (headings, body text, links etc).  You can also choose the style of University logo on your page or remove the logo completely.

Click the yellow arrow next to the Section Styles section and “Modify Content”, then click the yellow arrow next to the “Colour Scheme Picker” content and select “Modify” to edit the colours used on your site.

The default colour scheme for your template is ‘Corporate Clean’ but you can change this by choosing a pre-set colour scheme and logo type from the drop down menus or click on the yellow square next to a title (e.g. “Header 1 colour”) to open the custom colour picker window for those elements.

colour-picker-content-fw

Preview your content by clicking “Update and Approve” from in the Colour Scheme Picker and then clicking the yellow arrow next to your site home section and selecting “Preview”.

If you’ve chosen a custom colour for an element of your site (e.g. “Header 1 colour”) and you wish to revert back to the original colour scheme, simply click on the yellow box next to that element to open the custom colour picker, then select the white box with the red cross in it (bottom right hand corner) to reset.

colour-picker-sample-fw

The site above uses the “Graphite Flood” colour scheme and “White out” logo style.(the white out logo works better on dark backgrounds).  The site below uses the “Berry Clean” colour scheme, without a logo.

colour-picker-sample-2-fw-fw