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.
Branding & Header (20 pts)
- Site name: Complaint Dept.
- Site tagline: Let me speak to the manager!
- Site logo ComplaintDept2025-Black.png in header
- Logo height 120px (desktop) and 60px on (tablet and phone).
- Favicon: ComplaintDept2025-Deeppink.png
Cropped to just the head of the figure. - Menu One: Politics, Music, Films, Novels categories.
- Menu One Location: Header and Mobile Menu
- Search icon in header
- Arrange the header items as in the mobile & desktop screenshots.
- Menu Two: just one link (link text in brackets below):
Link href: https://langara-app.ca
Link text: WMDD PROGRAM - Put that menu in the Footer of the site
- When the Logo is hovered over, the following things happen, with a transition over .5 seconds:
– the background changes to Langara Orange (see color section)
– the image rotates 10 degrees counter-clockwise
Colors (5 pts)
- Site Backgrounds: white
- Base text color: #333333
- All headings: black
- Text Selection: White, with light blue-grey background.
- Most hovers: Langara Orange.
Exact hue. And no, I am not telling you what hue that is. - Links, and Read More: light blue-grey.
Typography (5 pts)
- All Fonts: Poppins
- Base font size: 14px.
See screenshots for relative typographic hierarchies.
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: home-banner.jpg
- Home page title does not display
- Banner area minimum height: 250px
- Pagination: Next/Previous
- Number of articles to display before pagination: 6.
Note: there may be a bug in the theme, with the first home page view showing 7, then the remaining pages showing 6. That’s fine.
Articles on home page have:
- Title, Linking to Post. Very small size, All Caps.
- Feature Image, Linking to Post, 16/9 Aspect Ratio
- Author + Published Date (Month Year only) + Category
- Excerpt (26 words)
- Read More, with arrow. Very small size. All Caps.
Archives (20 pts)
- Banner background image: banner-lone-guy.png.
- Each banner area has the category name
- Each banner area has a unique quotation. These quotations are in the quotations.txt file you downloaded.
- Category Main Structure/Layout differs from Home Page. See screenshots.
Single Views (20 pts)
See screenshot.
Feature image has title & meta in bottom left. This area has:
- Feature Image, highly screened, almost washed out.
- Title
- Author / Published Date (Month + Year Only) / Category
The rest of the article has:
- Article Text
- Sharing Buttons with All Your Friends Title
- Next and Previous Posts
- Related Posts area has Light Blue background and up to four posts.
- Related Posts have Feature Image / Title / Updated Date.
Image Treatments (10 pts)
- All images greyscale
- Linked images only, when hovered: original color (ie not greyscale)
Footer (Bonus 5 marks)
Note: this is bonus, but you can’t get over 100% on the test.
See screenshot.
Menu two, with single link
Copyright Notice, 8px font-size with this text
Copyright @ Year – Complaint Dept.
Site Created by YOUR NAME.
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.