DIV Class Movie Meta – Brought to you by the word divide

I write quite a few movie reviews every week here on my blog. I’ve spent several years developing ideas on how to structure them and I am beginning to repeat some traditional stuff that “sticks” long after I’ve posted. One of my reviewing mentors is Roger Ebert. I read every thing he wrote when he was alive and even now, I visit his blog frequently to steal technique and presentation ;)

After seeing “The Witch” a few days ago, I realized I wanted a more professional layout so I checked out Ebert’s site once again. Turns out, he had a really cool effect there with his meta movie info. He was using css shading for some subheadings just under the movie poster. Rather than try to explain it, check it out below:

Notice the title in Ebert's meta data is white font on a black line. I got to thinking these could be achieved by simply adding a little Css to the style sheet and then wrap that text under the poster photo through  short code.
Notice the title in Ebert’s meta data is white font on a black line. I got to thinking these could be achieved by simply adding a little Css to the style sheet and then wrap that text under the poster photo through [caption] short code.

I added the following CSS div classes to try the effect on my theme “twenty fourteen”:

<div class=”movie-meta-title”><b>The Witch (2016)</b></div>
<div class=”movie-meta-subheading”><b>Cast</b></div>
<b>Anya Taylor-Joy</b> as Thomasin
<b>Ralph Ineson</b> as William
<b>Kate Dickie</b> as Katherine
<b>Harvey Scrimshaw</b> as Caleb
<div class=”movie-meta-subheading”><b>Directed by</b></div>
<b>Robert Eggers</b>
<div class=”movie-meta-subheading”><b>Written by</b></div>
<b>Robert Eggers<b>

I was so excited when I achieved an effect I liked even better than Ebert’s. Of course, I thank him and his webmaster for the inspiration! You can see how the DIV style looks on my site below:

Click on this image to see the full review and how the effect fits in.
Click on this image to see the full review and how the effect fits in.

Here’s the writing prompt that inspired me too write this post today. In other words, blame them:

Write a new post in response to today’s one-word prompt. Not sure how to participate? Here are the steps to get started.

Source: Divide | The Daily Post

Author: Damien Riley

I'm an online diarist, blog film critic, & podcaster. My views on films and life are often 'left of center' on, but I have respect for other viewpoints. I married my high-desert princess (now my queen). We have 3 children.

2 thoughts on “DIV Class Movie Meta – Brought to you by the word divide”

  1. You must either be paying WordPress.com or self-hosting, because I can’t do any of the CSS stuff. I’m doing a lot of it with the style= parameter on everything.

    1. I’m self hosted. I use Bluehost.com it’s their $27/mo plan and I love it. I added the css referred to in this post with a plugin. It’s great because you can add style to your theme without altering its actual stylessheet I don’t think I’d have as much fun on a WordPress.com free blog. In addition to writing I like to mess with the look of my blog as well.

Comments are closed.