- 3.1 Body Copy and Headlines
- 3.2 Lists
- 3.3 Links
- 3.4 Question Formatted Posts
- 3.5 “Notable Quotes” Section
- 3.6 “Learn More” Section
- 3.7 Note
- 3.8 Alert Message
- 3.9 Illustration and Photo credits
- 3.10 Story Byline
- 4.1 Using appropriate file size
- 4.2 Feature Image
- 4.3 Inserting images into posts (specific code to use)
- 4.4 Photo Captions
- 4.5 Placement of images in new posts
- 4.6 Graphs and Charts
- 4.7 Categories Media Gallery
- 4.8 Generic Image Gallery
5. Creative Commons Licensed Work
Styling of Page Heading [H1]
Styling of a Section Heading [h3]
Styling of Body Copy Heading [h4]
Avoid using ALL CAPS in headings and body copy.
back to top
All content will have a feature paragraph. Which is the first paragraph of the content, it will appear in a larger font and lighter font weight. The paragraphs following the feature will all appear in regular body copy styling (see paragraph below). This is a default of the theme, so no work required to make it appear like this, unless for some reason we want to override this styling.
Most body content throughout the site will appear like this [paragraph], there may be content that requires unique styling but the majority of the body copy text will look like this. The first paragraph of any post/page will be a ‘Feature’ paragraph and appear with the styling as seen above.
Avoid using ALL CAPS in headings and body copy.
This is styling of the Page Header [H1]
All content will have a feature paragraph. Which is the first paragraph of the content, it will appear in a larger font and lighter font weight. The paragraphs following the feature will all appear in regular body copy styling (see paragraph below). This is a default of the theme, so no work required to make it appear like this, unless for some reason we want to override this styling.
Most body content throughout the site will appear like this [paragraph], there may be content that requires unique styling but the majority of the body copy text will look like this. The first paragraph of any post/page will be a ‘Feature’ paragraph and appear with the styling as seen above.
This is styling of a Section Heading [H3]
Most body content throughout the site will appear like this [paragraph], there may be content that requires unique styling but the majority of the body copy text will look like this. The first paragraph of any post/page will be a ‘Feature’ paragraph and appear with the styling as seen above.
This is styling of a Body Copy Heading [H4]
Most body content throughout the site will appear like this [paragraph], there may be content that requires unique styling but the majority of the body copy text will look like this. The first paragraph of any post/page will be a ‘Feature’ paragraph and appear with the styling as seen above.
++Note: H3 and H4 are being adjusted and a new style will be added for question formatted posts (number 3.4). Update explanation of heading useage.
This is the styling of a bulleted list:
- List item 1
- List item 2
- List item 3
This is the styling of a numbered list:
- List item 1
- List item 2
- List item 1
This is what an external link looks like and how it would appear if we have a link at at the end of a block lengthy block of text [visit this external link]
1. Styling of question formatted blog post [paragraph] bold
Styling of content for question fromatted blog post. dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec blandit dapibus leo, vel molestie purus accumsan id. Donec tristique, lorem vitae vehicula molestie, risus tellus tincidunt metus, ut lobortis magna erat vel nisl. Vivamus scelerist.
2. Styling of question formatted blog post [paragraph] bold
Styling of content for question fromatted blog post. dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec blandit dapibus leo, vel molestie purus accumsan id. Donec tristique, lorem vitae vehicula molestie, risus tellus tincidunt metus, ut lobortis magna erat vel nisl. Vivamus scelerist.
3. Styling of question formatted blog post [paragraph] bold
Styling of content for question fromatted blog post. dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec blandit dapibus leo, vel molestie purus accumsan id. Donec tristique, lorem vitae vehicula molestie, risus tellus tincidunt metus, ut lobortis magna erat vel nisl. Vivamus scelerist.
More than one pull quote can appear in a story, as separate quote boxes, at the end of the news story. Each quote should include the name of the author of the quote (as seen in the example below)
Notable Quotes: [H3]
Styling of pull quote to highlight a quote from the author. – Name of Author of Quote
If a ‘Learn More’ section appears in a news post, it is to follow ‘Notable Quotes’, at the end of the post. ‘Learn More’ is the heading that should be used for this section. List of “Learn More” items should be in the bullet format.
Learn more [H3]:
Code used for an alert
<div class="alert alert-success">
...
</div>
The styling for a photo or illustration credit is the same as body copy, italicized. It should appear at the end of the story/post, flushed left (as it appears below).
Image credit: “Groovie Tula” © 2010, by Dee Horvath, available through a Creative Commons Attribution license.
Occasionally a Posts/stories may require a special byline, when written by someone other than BCcampus editorial staff.
<ul><li>By <b>Tori Klassen</b>, BCcampus Communications Director, Date Italic and grey as it is now in the posts<li></ul>
Note: Guidelines for using images in stories. Don’t use super large ones that rely on the browser to squish it (resource hog (esp for phones). You can choose different sizes of images that WP has already re-sized.
The Feature Image is the the image appearing in the feature slider boxes on the home page (pictured left). When indicating a feature image, the image must meet minimum dimensions at full size in order to fill the width of the feature box. At 100% a feature image must be a minimum: 339px wide x 191px high
Note: A post that is *not* slated for the ‘feature image slider on the home page’ and just a plain ol’ story, the feature image set in that post will display in the latest news blog roll.
back to top
Following is the code we have to use for all images we insert into posts. We have to enter it manually (in text mode in WP) as it contains an HTML5 tag and that is the only way to do it in wordpress for now. We are using this particular bit of code because we want to be able to use a caption with some images (which is the element that is HTML5). We’ll have to use this bit of code with all images if we want consistency with padding etc around images for all the posts.
Code used for a caption
<figure class="pull-left">
<a href="insert image URL">
<img alt="insert alt text" src="insert image" width="insert width 00px" height="insert height 00px" /></a>
<figcaption>insert caption</figcaption>
</figure>
Photo captions are to be used to identify a person in an image. Otherwise we should include an explanation in the copy, or it should be obvious. See code below for a caption. NOTE: to float an element left or right, use the class ‘pull-left’ or ‘pull-right’
Example of a caption in a post:
In 2007, the B.C. government launched a plan that would radically change post-secondary education in the province.
While some of the 52 recommendations from its Campus 2020 report were implemented—for example, granting university status to five B.C. colleges—the recommendations near and dear to BCcampus Executive Director David Porter’s heart weren’t.
Porter wants the B.C. post-secondary system to look and act more like a system rather than a set of 25 institutions – a tapestry, rather than a collection of threads.
BCcampus produced the BC Learning Gateway concept paper, calling for a “federated approach to service provision” in 2008, one place where students and parents could access current information from academic and training institutions, as well as government and provincial partner agencies that provide library services, financial aid, application services, and course transfer information.
Porter says that students aren’t that concerned about the mechanics behind the learning gateway concept; they just need to know that there is a unified, authentic, B.C.-branded and trusted set of services they can use.
Like many new ideas, it takes a while and multiple retellings of a concept for it to get legs,. Meanwhile students still have to spend a lot of time and energy searching for the information they need from multiple sources.
The barrier, according to Porter, is partly about branding. But he believes that there “remains room for all institutions and academic agencies to work together to take a federated approach to service delivery and present a British Columbia post secondary brand.”
End of Example
4.5.1 Placement of Images – All images should be placed below the feature paragraph (the first paragraph with the larger font) and aligned LEFT. The feature paragraph should always appear WITHOUT an image within it. Images can appear anywhere in the content, as long as it’s below the feature paragraph and aligned LEFT. Sometimes there may be exceptions to the alignment rule, depending on the content. In cases like that align the content and image so it’s easy to read.
Example of an image placed in a post:
They’re not just talking “open” at Royal Roads University – they’re doing it in a very visible way. Open.royalroads.ca is a one‑stop platform featuring a collection of open resources developed by and for faculty, a software code repository, and space for other shared opportunities.
The idea originated with Emma Irwin, a senior systems analyst and web developer at Royal Roads University. But its roots go back to a project started in 2007 by Mary Burgess before she joined BCcampus.
Drawing on her Master of Educational Technology studies at UBC, Burgess advocated open practices to instructors and other stakeholders at Royal Roads, then used a grant from BCcampus to pioneer the university’s first collection of open educational resources. These early resources “put a face on the whole aspect of sharing for the university,” says Irwin.
End of Example
4.5.2 More Than One Image Used in Story/Post – If more than one image appears in a story/post, distribute throughout the content after the Feature Paragraph (the first paragraph of every story/post that appears in a larger font). First try aligning all the image left. If that produces odd results visually, use your discretion to distribute the image through out the content making it easy to read.
Example of more than one image placed in a post:
They’re not just talking “open” at Royal Roads University – they’re doing it in a very visible way. Open.royalroads.ca is a one‑stop platform featuring a collection of open resources developed by and for faculty, a software code repository, and space for other shared opportunities.
The idea originated with Emma Irwin, a senior systems analyst and web developer at Royal Roads University. But its roots go back to a project started in 2007 by Mary Burgess before she joined BCcampus.
Drawing on her Master of Educational Technology studies at UBC, Burgess advocated open practices to instructors and other stakeholders at Royal Roads, then used a grant from BCcampus to pioneer the university’s first collection of open educational resources. These early resources “put a face on the whole aspect of sharing for the university,” says Irwin.
Expanding the vision
A self-avowed “big open advocate,” Irwin took the project to another level after attending a Drupal conference last year and learning about the work of Open.Michigan. Galvanized by the extent of research, code, and resources being shared, she developed a bigger picture vision of open that ultimately led Royal Roads to create a GitHub repository for Moodle and Drupal code sharing.
By sharing code, the university is giving back to the open source community in return for adopting open software to support its operations.
Open by doing, not by talking
“The launch opened it up as a whole bucket of resources that includes OER, code, and other things from faculty,” Irwin told BCcampus. “It got people thinking about how universities can better participate in higher education and about the role of open in their practices.” About 
Moodle, she says: “We can make better software this way because universities are sharing their work and helping improve it.”
From tweets of recognition and support to requests for resources, reaction to the launch was immediate. Within the university, there is a sense of excitement that they are on the right track in sharing ideas and collaborating with other universities. Outside the university, Irwin sees interest building and adoption rates climbing.
Reaping the benefits
Open RRU is benefiting not only code developers in the open source community, but higher education in general. Licensing is an important piece of the puzzle. All materials are shared with a Creative Commons license, which means educators can tweak them and ensure they are contextually relevant.
Above all, open resources benefit “the person we’re all working for, the learner,” says Irwin. This includes not only current students, but also prospective students and autonomous learners around the world.
End of Example
4.6 Graphs and charts – when inserting a graph or chart image within content of a story/post you have two options:
1. Place the graph or chart full size, within the content, at the end of the story/post
2. Place a thumbnail version of the graph or chart, within the content, when clicked it expanded to view at 100%. Include a caption that indicates “Click for full size”.
4.7 Categories Media Gallery – when uploading media to the media gallery indicate a category: blogs posts, generic images, graphs, logos, PDF, staff and word docs. This will result in quicker searches when inserting media from the gallery, instead of having to search through the entire media gallery.
The media library contains a gallery of generic BCcampus images, labelled ‘Generic Images’. These can be used for posts that require an image but none was provided. Images include online learning, e-learning, books, students, abstract, mobile devices in use.
5.1 How to Attribute a Creative Commons Licensed Work
How to attribute a CC licensed work styling and editorial guidelines.
-
How to attribute an Ideal Attribution (Name the work):
- This video features the song “Play Your Part (Pt.1)” by Girl Talk ( link to the creator web site), available under a Creative Commons Attribution-Noncommercial license ( link to the license). © 2008, Greg Gillis.
How to attribute a Realistic Attribution (where creator’s real name or web site may not be available):
link to the work Photo by mollyali , available under a Creative Commons Attribution-Noncommercial license (link to the license).
How to attribute an A Derivative Work Attribution (we remix works sometimes, but not generally):
This is a video adaptation of the novel Down and Out in the Magic Kingdom by Cory Doctorow, available under a Creative Commons Attribution-Noncommercial-Share Alike license. Copyright © 2003 Cory Doctorow.
Note: We have been linking back to the work, but not usually the terms of the license under which it’s published, and we’ll need to start doing that – so please check the kind of CC-license a photo has when you find one. When submitting stories please use the appropriate attribution, and include it in the copy of the post so it gets published along with the story.
This information is from a post at mollykleinman.com.
6.1 Styling for the Events Calendar
Copy to follow