Mike Cho Development

Styling a Drupal Article View

In my Drupal site, I had a page that collected recent articles and displayed shortened versions (called “teasers”), one after another.

It was embarrassingly ugly. As I am new to Drupal, it took a good deal of experimenting, searching, and reading to get the desired results. Here are some of the problems and solutions I came up with.

Crowded Article Title

I didn’t like how the title was jammed right up against the featured image in the teaser. Initial attempts to put a margin or padding on the title didn’t work.

Animal Electricity and Electrophysiology

The reason, as I soon realized, is that the title was in a <span> element and thus the margin and padding didn’t do anything. Getting the bottom space was accomplished by:

.node-title {
  margin-bottom: 32px;
  display: block;
}

Animal Electricity and Electrophysiology

I also added padding-bottom to several other elements, giving the teaser space to breathe, in general.

Plain Date Label

The “Publish Date” label was displaying without the bold style, which gave it a drab look. Something like:

Publish Date
2021-03-28, 12:00:00

The solution was easy, although it took me awhile and several alternative methods before I stumbled upon it. Just use CSS.

.field__label {
  font-weight: bold;
}

This makes every label bold–which, as it turns out, is the desired behavior. The result is something like:

Publish Date
2021-03-28, 12:00:00

However, it does nothing about the weird date formatting. For that, go to Structure/Content types/Article/Manage Display/Teaser (note that the Teaser label is located in a second set of tabs beneath the main set of tabs.

By selecting Custom under Format and then clicking on the gear associated with Publish Date, you will then have control over the date display using the Date/time format field. This is a PHP date format. I chose:

m-d-Y

and the result is:

Publish Date
03-28-2021

Good enough!

Weird Tags Section

The default output for the tags was decidedly ugly, something resembling this:

Tags
biology
electricity
psychology

That totally doesn’t work!

The .field__label class above bolded Tags nicely.

The next fix was to use display: inline on the tags themselves. They each occupy their own div, and the inline property caused them to all occupy the same line.

Now we had:

Tags
biology electricity psychology

It wasn’t bad, but I wanted a bit more. I wanted a comma. But not a comma on the last tag. Could you do this with css? It sounded kind of complicated.

Turns out, yes you can do this with css.

The first thing to know is that you can add content in an :after selector, that will insert the desired content after the thing selected.

:after {
  content: ', ';
}

This will add the comma after the targeted node!

.field--name-field-tags .field__item:after {
  content: ', ';
}

The result is something like this:

Tags
biology, electricity, psychology,

The last comma is a dealbreaker! How to get rid of that?

Again, css to the rescue. We just have to use two more elements, one, :last-of-type, two, :not. The logical condition is we want to select for all things that are not last of the selected type.

.field--name-field-tags .field__item:not(:last-of-type):after {
c  content: ', ';
}}

And voila!

Tags
biology, electricity, psychology

Sometimes these exotic little selectors come in handy! I was just as surprised that it worked as you are.