CS 318: WordPress for the Rest of Semester
Your task for April and May is to extend the style of your blog with some CSS and write six posts about topics of your choosing. By the end of the semester you should have a total of 15 posts. The posts don’t need to be long. Feel free to share poetry, a photo diary, vignettes of your life or someone else’s, baseball commentary, snapshots of your spring break adventures, and so on.
Across your six posts, include a table, images with captions, multiple levels of headings, blockquote environments, and lists. Each post should have some words.
For the style, make your posts look readable by completing the tasks below. Customize the format by entering the Additional CSS menu found on the WordPress administration dashboard.
- Style the tables to look aesthetically pleasing.
- Add sidebars for the Recent Posts, Archives, and Categories. Use floats or some other flexible layout system.
- Hide the Meta section.
- Style the header to add some identity.
- Ensure that each post is visually distinct from the others. They should not slur together.
- Support viewports of different sizes with a media query. When the viewport is small, embed the sidebars into the regular flow of the page.
To what selectors does one write these CSS rules? The Blank theme that we are using makes generating specific selectors easier by adding IDs and classes to the HTML that it generates. Right-click on the content you wish to format and click Inspect. In the panel that opens up, find the element’s class or id attribute. Use these for your selectors.
If the element itself has no class or id, search up the hierarchy. For example, each post is embedded within an article element:
<article class="post">
...
</article>
To apply your rules only to elements in your posts, use a descendent selector. For example, we can style only those p elements that are in posts with this structure:
article.content p {
...
}
You are not given exact specifications of how to style the content. Make it look good. If you don’t know what good means, ask a roommate or friend.