Project Setup
First, please download the following:
- Install the starter content
- Install and activate the Blocksy theme.
- Install and activate the Blocksy Companion plugin.
- Do not install any other plugin.
Note: this site does not use a static front page. Just the default WordPress blog format.
Note: if this is a test, the marks breakdown is listed beside each section title. If this is not a test, the mark for the assignment is, as usual, out of 1.
Site Branding (7 pts)
- Set the site name to Complaint Department
- Set the site tagline to Can I speak to the manager?
- Add the Complaint Department logo to the header
- Set the logo height to 92px on desktop and tablet, and 63px on phone.
- Add the same image as a favicon, but crop it so that it shows just the head of the figure in our logo
Header & Menus (12 pts)
- Create one menu with the Politics, Music, Movies & Food categories.
- Put that menu in the Header and in the Mobile Menu
- Put the search icon in the header
- Arrange the header items as in the mobile & desktop screenshots.
- Make another menu with just one link (link text in brackets below):
– If you go to Langara: https://langara-app.ca (WMDD)
– If you go to Emily Carr: https://ecuad.ca (ECUAD) - Put that menu in the Footer of the site
Colors (5 pts)
- Site Background: white
- Base text color: #333333
- All headings: black
- Text Selection: Black, with light blue background.
- Link hovers: hotpink (of course)
Typography (6 pts)
- h1: Oswald Bold 700 weight
- h2: Oswald, 2.25 rem, 700 weight
- Both Menus: Oswald, Uppercase
All other text: Merriweather - Base font size: 14px.
In single view, post title scales with page width: not too big, not too small.
Note: you can do that in the Customizer. If you can’t find where to do that, you can of course also use CSS.
Home Page (20 pts)
Note: this is not a static front page.
Make the front page of the site look like the screenshot.
- Desktop: Three columns
- Tablet: Two columns
- Phone: One column
- No sidebars at any size
- File used in Banner: banner.jpg
- Banner area minimum height: 380px
- Pagination: Next/Previous/Numbers
- Hotpink background for current number.
Articles on home page have:
- Category
- Title, Linking to Post
- Feature Image, Linking to Post, 16/9 Aspect Ratio
- Excerpt (31 words)
- Author / Updated Date
Archives (20 pts)
Category archives look the same as the Home Page, with two exceptions: the banner area and one difference in the article form.
- Banner background image: archive-banner.jpg
- Each banner area has the category name
- Each banner area has a unique quotation. These quotations are in the quotations.txt file you downloaded.
- Make sure that the text on the image is kept legible
- Archive articles have the same properties as front page articles, except no category
Single Views (20 pts)
See screenshot.
Feature image has title & meta in bottom left. This area has:
- Feature Image
- Title (scaled, see Typography section)
- Author / Category / Updated Date (with icons)
The rest of the article has:
- Article Text
- Related Posts (2). Related by Category.
- Related Posts have Feature Image / Title / Updated Date
- Comments
Image Treatments (10 pts)
- All images greyscale, except feature images in single view.
- Linked images only, when hovered: original color.
Footer
If this is a test, you do not need to style the footer.
If this is not a test, style the footer, including its one-link menu, as is done in the screenshots.
How to Hand In Your Work
When you are done, make a Duplicator package of your work.
This will create two files to download:
- Installer.php
- A zip file with a very long name.
Do not rename the zip file, or your installation will break.
Make a folder named first-name-last-name-complaint.
Put the installer file and the zip file inside that folder.
Now zip that folder.
This means that you will have a zip file inside a zip file. This is not a problem.
Hand in the zip file you have created: first-name-last-name-complaint.zip.