Most of the tasks in this exercise can be accomplished completely in the Customizer. However, some Custom CSS will also be required.
ECUAD Students: if you don’t know CSS, don’t worry at all! Do as much as you can in the Customizer.
If this is a test, there is one section you will not need to do.
If this is a test, the marks breakdown is listed with each section title below.
Do not install any plugins, except for the one specified in the exercise.
Starter Content & Theme Installation
For this exercise, first please download the following Duplicator package.
I’ve included two versions of the package (made while running different php versions).
First try version 8. If that doesn’t work, install version 7.
Make sure that your MAMP PHP version is matching the package you are installing. You can do that from the main MAMP application window (Mac) or from the Settings area (Windows).
When you unzip the package, rename the folder to neve-petulant.
Then install the site in your development environment.
Go to Appearance > Themes. If the Neve theme is not installed in the package I’ve given you, please install it. Make sure that you install Neve, not Neve FSE.
Update WordPress and any Plugins. To do that go to the Dashboard, then Dashboard > Updates.
Screenshots & Graphics
Please download the screenshots and the additional graphic files required for the exercise:
Loom Video
Site Identity & Basic Structure (5 marks)
Set the logo of the site to use the file petulant-logo.png.
Set the favicon to the site to use the file problem-child.png.
Set the site name to petulant and the site tagline to music & politics.
Set the Site Icon (favicon) to the problem-child.png file. When importing it, crop it tightly.
Set the site to have a static home page.
Set the site’s posts to appear on a page called posts.
Typography (5 marks)
The font used throughout the site is Poppins.
Pay attention to the sizes, colors, and weights of individual type elements on all pages—particularly archives and single views if this is a test, and also the home page, if this is not a test.
Colors (5 marks)
Look at articles in one of the archive screenshots, then look at the dark and light mode search screenshots.
Configure the theme to use these colors in their respective modes.
Menu (5 marks)
Make a menu with links to home, politics, music, movies, food, and posts. Politics, music, movies, and food are categories.
Site Header (15 marks)
Configure the site header as in the screenshots. It will have the following elements:
- logo (linked to home)
- main menu
- dark – light mode switch
- search
As shown in the screenshots, the menu will be replaced by a hamburger at medium and small sizes.
The Logo (10 marks)
Neve will allow us to use a different logo for dark and light modes, but we only have one logo.
You have two solutions.
If you know CSS, use CSS to create that color change for dark mode.
If you don’t know CSS, download the logo image and invert it in an image editing program or website: Neve will allow you to specify a different image for dark mode.
Just for fun, make the logo pure white (not yellow) and with a white border, like this:
This dark-mode icon treatment is a little different than how it appears in the screenshot. Make it like this.
Site Archives (10 marks)
Set up the archives layouts as they appear in the screenshots.
Archives Article Form (10 marks)
Look at the form of articles in the archive screenshots. As precisely as possible, make your articles match them.
Posts/Blog Page (15 marks)
Make the following two articles show up at the top of the blog listing, formatted as in the blog screenshots:
- Et nihil pariatur
- Recusandae quis nam
Note that the posts page has pagination. See the screenshot.
Single Views of Posts (15 marks)
Configure the Single Views of posts to be as close as possible to the screenshots.
Try to ensure that the posts titles and meta information are readable, while making sure the images remain vivid.
It is OK if that text isn’t perfectly readable on a few posts.
Search Form (5 marks)
This first two parts of the Search Form task will require CSS: skip them if you don’t know CSS.
Make the modal search box (the search box we see when we’ve clicked the search icon) no wider than 600px.
Make it centered.
Observe the focus colors in both light and dark mode.
Home Page, if Test
If this is an in-class test, the only thing you need to do with the home page is put a heading with the words “home page” on it, and make sure that the link in the menu goes to this page.
You do not need to do the next section if this is a test. Skip down to What to Hand In.
Home Page, if Not a Test
For use in this part of the exercise, install the Stackable – Gutenberg Blocks plugin.
If this is an exercise, rather than a test, you must make the entire home page (as in the screenshots).
The individual components of the Home Page (non-test) are described below.
- Page Title:
Figure out how to make the page name not appear in the front end (when the user views the site). Don’t delete the name, though. The theme will allow you to hide: you just have to find out where/how.
- Banner Area:
Background Image: blurred-windows-reflection.webp
Title: The Home of Alternative Music
Note: this goes over two lines, but is one heading.
Text: Twenty words of lorem ipsum
This Banner area does not require a Stackable block: one of the native WordPress blocks will work: one that allows you put text or other elements on top of an image.
- Heading Area
Text: Just Released: New Anna Calvi Single: Wish
Note: this goes over two lines, but is one heading.
- Live Performer Video
Use the Video Popup block from Stackable to insert the image anna-calvi-live.webp into the page.
Make sure that the image has a play icon in the center.
Enure that when the image is clicked, a video popup window plays this video:
- Home Page Sections
Use an appropriate block to create the alternating image-title-list-button content areas.
The buttons must link to their respective category archives.
Make each list item text link to a different post.
Make sure that the image corners that “touch” do not separate at any size before the single-column phone view.
What to Hand In
When you are done, please make a Duplicator archive of your project. In doing so, please follow these guidelines:
- Do not rename the zip or daf file that Duplicator makes, or you will break the package.
- The installer.php file must be the one that was created at the same time as the zip, or the package will not install. Installers cannot be reused, in other words.
- Make sure that your installer and archives are not aliases or shortcuts. Check that neither has an arrow in the icon, and make sure that the zip file is a reasonable size (with this project, it will likely be between 50 & 100 megabytes).
- Put the installer and Zip or Daf archive in a folder with your name on it.
- ZIP that folder.
- Hand in that ZIP.