Drupal Template: 
UQ Base Template
Block grid
Drupal Template: 
UQ Base Template

Block grid lets you display lists, <ul> or <ol>, in columns rather than the standard vertical list. In this example we have six list items which we want to display in three columns.

On the <ul> tag add class="block-grid" and then set the number of columns as class="block-grid three-up"


  • Item 1
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  • Item 2
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  • Item 3
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  • Item 4
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  • Item 5
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  • Item 6
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

So that it displays nicely on a mobile device we will add another class to display in one column on phones.

<ul class="block-grid three-up mobile-one-up">

Number of columns

The UQ Base theme is based on a 12 column grid and this applies to block-grid as well. Column options from one-up through to twelve-up are available, and the same applies for mobile-one-up through to mobile-twelve-up.

Further information: http://foundation.zurb.com/docs/components/block_grid.html

Date and Time

To use central date formats:

  1. Install the UQ Date Format module
  2. Go to Configuration > Regional and language > Date and time
  3. The UQ date formats will display. Click Save Configuration to enable them for use on the site.
Date Format Label​ Output Machine Name

Date and time
Date and time (long)
Date and time (short)
Date and time (numeric)

Time and Date
Time and Date (long)
Time and Date (short)

19 September 2013 11:55am
Thursday 19 September 2013 11:55am
Thu 19 Sep 2013 11:55am
19/09/2013 11:55am

11:55am 19 September 2013
11:55am Thursday 19 September 2013
11:55am Thu 19 Sep 2013

 

Date
Date (long)
Date (short)
Date (numeric)

Day and month
Day and month (short)​
Month and year
Month and year (short)

19 September 2013
Thursday 19 September 2013
19 Sep 2013
19/09/2013

19 September
19 Sep
September 2013
Sep 2013

 

Month
Day of week

September
Thursday

 

Time (12H)
Time (24H)

11:55am
09:55

 

Week number
Day number (Sun:0 - Sat:6)

38
4

 

Date and Time Periods

The formats listed below require development to allow a date field to display depending on the specific contents of one or more date attributes.

Duration (same month)
Duration (different month)
Duration (different year)

Duration (using long date)
Duration (using standard date)
Duration (using short date)

25–27 July 2013
25 July to 1 August 2013
Tuesday 25 December 2013 to Monday 4 January 2014

Monday 25 July to Sunday 1 August 2013
25 July to 1 August 2013
Mon 25 Jul to Sun 1 Aug 2013

 

Duration (time and date)
Duration (time and date)

25 July to 1 August from 9:00am–12pm
9:00am–12pm from 25 July to 1 August

 

Time Periods

11:40am–2:20pm Monday 25 July
11:30am–12pm
1pm–2:30pm
12noon–12midnight

 
Duration (Hours)

2hr 30min
2hr 5min 6sec
08:25:05

 
Relative (descriptive)

Today
Yesterday
Last week
Last month

Tomorrow
Next week
Next month

 

Relative (specific)

5 sec ago
1 min ago
5 days ago
1 month ago

 
Grid
Drupal Template: 
UQ Base Template

<div class="row">
    <div class="six columns">
        <h2>1. Six</h2>

        <div class="row">
            <div class="twelve columns">
                <h4>twelve</h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur, diam sed mollis auctor, leo odio scelerisque dolor, ut hendrerit dui mauris nec libero. Praesent et nisl eu enim condimentum tristique ut id nunc. Vestibulum pretium posuere tincidunt. Nunc eu feugiat risus. Nullam ipsum neque, adipiscing a lacus eget, venenatis luctus nunc. Nulla euismod posuere mauris non aliquam. Duis condimentum erat ac dolor semper, placerat eleifend neque hendrerit.</p>
            </div>
        </div>

        <div class="row">
            <div class="six columns">
                <h4>Six</h4>

                <div class="row">
                    <div class="six columns">
                        <h4>Six</h4>
                    </div>

                    <div class="six columns">
                        <h4>Six</h4>
                    </div>
                </div>
            </div>

            <div class="six columns">
                <h4>Six</h4>

                <div class="row collapse">
                    <div class="four columns">
                        <h4>Four</h4>
                    </div>

                    <div class="four columns">
                        <h4>Four</h4>
                    </div>

                    <div class="four columns">
                        <h4>Four</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="six columns">
        <h2>2. Six</h2>

        <div class="row">
            <div class="twelve columns">
                <h4>twelve</h4>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur, diam sed mollis auctor, leo odio scelerisque dolor, ut hendrerit dui mauris nec libero. Praesent et nisl eu enim condimentum tristique ut id nunc. Vestibulum pretium posuere tincidunt. Nunc eu feugiat risus. Nullam ipsum neque, adipiscing a lacus eget, venenatis luctus nunc. Nulla euismod posuere mauris non aliquam. Duis condimentum erat ac dolor semper, placerat eleifend neque hendrerit.</p>
            </div>
        </div>

        <div class="row collapse">
            <div class="six columns">
                <h4>Six</h4>

                <div class="row">
                    <div class="six columns">
                        <h4>Six</h4>
                    </div>

                    <div class="six columns">
                        <h4>Six</h4>
                    </div>
                </div>
            </div>

            <div class="six columns">
                <h4>Six</h4>

                <div class="row">
                    <div class="six columns">
                        <h4>Six</h4>
                    </div>

                    <div class="six columns">
                        <h4>Six</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<hr />
<div class="row nested collapse">
    <div class="six columns">
        <h2>3. Six (.nested .collapse)</h2>

        <div class="row">
            <div class="six columns">
                <h4>3.1 Six</h4>

                <div class="row collapse">
                    <div class="six columns">
                        <h4>Six (coll.)</h4>
                    </div>

                    <div class="six columns">
                        <h4>Six (coll.)</h4>
                    </div>
                </div>
            </div>

            <div class="six columns">
                <h4>3.2 Six</h4>

                <div class="row">
                    <div class="six columns">
                        <h4>Six</h4>
                    </div>

                    <div class="six columns">
                        <h4>Six</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="six columns">
        <h2>4. Six (.nested .collapse)</h2>

        <div class="row">
            <div class="six columns">
                <h4>4.1 Six</h4>

                <div class="row">
                    <div class="six columns">
                        <h4>Six</h4>
                    </div>

                    <div class="six columns">
                        <h4>Six</h4>
                    </div>
                </div>
            </div>

            <div class="six columns">
                <h4>4.2 Six</h4>

                <div class="row">
                    <div class="six columns">
                        <h4>Six</h4>
                    </div>

                    <div class="six columns">
                        <h4>Six</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<hr />
<div class="row">
    <div class="six columns">
        <h2>5. Six</h2>

        <div class="row">
            <div class="six columns">
                <h4>5.1 Six</h4>

                <div class="row collapse">
                    <div class="six columns">
                        <h4>Six (coll.)</h4>
                    </div>

                    <div class="six columns">
                        <h4>Six (coll.)</h4>
                    </div>
                </div>
            </div>

            <div class="six columns">
                <h4>5.2 Six</h4>

                <div class="row">
                    <div class="six columns">
                        <h4>Six</h4>

                        <div class="row">
                            <div class="six columns">
                                <h4>Six</h4>
                            </div>

                            <div class="six columns">
                                <h4>Six</h4>
                            </div>
                        </div>
                    </div>

                    <div class="six columns">
                        <h4>Six</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="six columns">
        <h2>6. Six</h2>

        <div class="row collapse">
            <div class="six columns">
                <h4>6.1 Six (collapse)</h4>

                <div class="row collapse">
                    <div class="six columns">
                        <h4>6.1.1 Six (coll.)</h4>

                        <div class="row collapse">
                            <div class="six columns">
                                <h4>Six (col.)</h4>
                            </div>

                            <div class="six columns">
                                <h4>Six (col.)</h4>
                            </div>
                        </div>
                    </div>

                    <div class="six columns">
                        <h4>6.1.2 Six (col.)</h4>

                        <div class="row">
                            <div class="six columns">
                                <h4>Six</h4>
                            </div>

                            <div class="six columns">
                                <h4>Six</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="six columns">
                <h4>6.2 Six (collapse)</h4>
            </div>
        </div>
    </div>
</div>

<hr />
<style type="text/css">body.section-grid #content-primary .column, body.section-grid #content-primary .columns { background-color: rgba(18, 63, 83, 0.07); border:1px solid rgba(18, 63, 83, 0.07); border-collapse:collapse; }
body.section-grid #content-primary .collapse > .column, body.section-grid #content-primary .collapse > .columns { border:1px solid red; border-collapse:collapse; }
body.section-grid #content-primary h2,body.section-grid #content-primary h4 { background-color: rgba(18, 63, 83, 0.07); }
body.section-grid #content-primary .collapse > .columns > h4, body.section-grid #content-primary .collapse > .columns > h2 { background-color: rgba(213, 9, 9, 0.16); }
</style>

 

Menus

Drupal allows multiple menus to be created but it starts with a default Main Menu. This is the primary menu for the site that all content types can be added to (unless otherwise specified).

Primary navigation

The Main Menu sits in the black Top Menu region and is the primary navigation for the site. It allows a single drop down level.

Example of primary navigation

Secondary navigation

The vertical menu in the Sidebar Second region uses the Main Menu as well but starts at the second menu level down and shows another level of child page under the current on. It is contextual to the section of the site the user is in, showing the current page, its siblings and its children.

Example of secondary navigation

Name space standards

CSS

.uq-core-* prefix is used for any classes that define a UQ Core thing. The .uq-core- prefix is used only on the outermost wrapping element, not applied to every class within a feature.

In this example the uq-core- prefix is only applied to the wrapping div and not the classes inside:

<div class="uq-core-banner-slider">
    <div class="image banner-1">
        <a href="#"><img src="image.jpg" alt="description" /></a>
    </div>
    <div class="image banner-2">
        <a href="#"><img src="image.jpg" alt="description" /></a>
    </div>
</div>

Machine names

uq_core_* prefix is used for all machine names of UQ Core things. This should not be used on any non-core things.

Theme settings

Customise layout

These settings allow customisation of widths and container styles for all regions in the theme. By default the Global maximum width should be used to define width and all other regions should be set to - None - so that they use the widths applied by column number classes.

In most cases the Header + footer max width should be Match global max width so that it lines up vertically with the rest of the page. The defaults for these settings come from the theme .info file.

Region container grid width

For each region you can set the column width, which over-rides the defaults.

columns
Adds .columns class and works inconjunction with the column number classes in the drop down list.
parent row
Adds .row to the parent div. Used to clear a region against the others around it.
collapse (parent row)
Removes left and right margins from column and row elements inside the parent div which .collapse is applied to.
centre column
Adds margin:0 auto so the region is centred on the page. Has no effect if .columns.twelve is in place. Sidebar Second and Content Primary may override this if they are the last column in the row.

Region container styles

white container
Addes a white background colour to that region.
drop-shadow
Adds a drop shadow on all sides of the region div.
top/bottom margin (10px)
Adds 10px of margin to the top and bottom of the region div. Margin is applied outside the div.
top/bottom padding (10px)
Adds 10px of padding to the top and bottom of the region div. Padding is applied inside the div.
reset margins (0px)
Sets the region div to have zero margin, overriding any margins applied previously.
reset padding (0px)
Sets the region div to have zero padding, overriding any padding applied previously.
rounded top edges (8px)
Adds a border radius of 8px to the top left and right corners of the region div.
rounded edges (8px)
Adds a border radius of 8px to all four corners of the region div.

CSS/JS includes

This allows a single .css and .js file to be uploaded for the purpose of site specific custom styling and fuctionality. This allows a site to have its own specific styling on to of the UQ Base theme without requiring a whole sub-theme. These files are stored in the site database and are not included in SVN. Once uploaded, these files can be downloaded from this location in order to make changes and then re-uploaded.

Both files are loaded after all other CSS and JS respectively.

To ensure that your code works properly with everything else on the site please use the following JS template:

;(function ($, window, document, undefined) {
	'use strict';
	$(document).ready(function () {
		// your code
	});

}(jQuery, this, document));

// Closure to map jQuery to $
// Essential JavaScript/jQuery/Drupal Behaviours - https://drupal.org/node/171213
// Drupal JavaScript API - https://drupal.org/node/304258#drupal-settings

Custom background

This allows sites to manage their background colour and/or image without requiring code changes.

Use uploaded image as background replacement
Enables/disables the custom background. When disabled it will use the default UQ Base background.
Colour  
Sets the background-colour attribute on the <body>
Image Path  
Specifies the file path for the image to be used as the background-image attribute. Should reference an image that has been uploaded to the sites Image Browser.
Repeat  
Specifies if and how the background-image will repeat on the page. Theme default does not repeat.
Position  
Specifies the background-position attribute for the background-image. Defaults to "top left" if not set.
Size  
Specifies the background-size attribute for the background-image. This is a CSS3 property which is not supported in older browers.

Show/hide common elements

Enables or disables certain theme elements. These are core Drupal settings and should not be changed on sites using UQ Base.

Logo
Not used, has on effect.
Site name
Enables / disables the site title in the purple header. Title set in the Site Information section.
Site slogan
Not used, has no effect.
User verification status in comments
TBC
Shortcut icon
Enables or disables the favicon from showing. If you use a custom favicon you have to enable this again for it to display.
Main menu
Not used, has no effect.
Secondary menu
Not used, has no effect.

Logo

Not used, has no effect. This setting is included as part of the Drupal core.


Favicon

Includes the UQ favicon or allows a custom one to be used. Should not be changed.

URL patterns

URL patterns define the format for auto-generated urls for each content type and taxonomy node. All central content types and taxonomies have set url patterns that must be used across all sites.

Content Types

Content type Pattern Example
Default [node:title] about
Page [node:title] about
Secure Page secure/[node:title] secure/staff-forms
Webform form/[node:title] form/registration
News article/[node:created:custom:Y]/[node:created:custom:m]/[node:title] article/2013/10/uq-celebrates-outstanding-alumni-achievers
Events event/[node:nid]/[node:title] event/3129/international-orientation-session
Publications publication/[node:title] publication/uq-undergraduate-study-guide
Person profile/[node:display_name] profile/professor-jason-jacobs

Taxonomy Terms

Taxonomy Term Pattern Example
Default [term:vocabulary]/[term:name] /study-area/science
UQ News Topic t/[term:name] /t/arts-society