Modifying CSS for collections and single item pages

Hello all!

I’m using the Tainacan plugin with a custom child theme. I’m trying to change some of the CSS for the collections page and single items pages. For instance, I want to increase the font size for the items on the collection page:

I know the selector I need to modify is .tainacan-cards-container .tainacan-card .metadata-title. Normally I would make the change in my child theme’s CSS file, but it isn’t working. Is it because the stylesheets for this are contained in the plugin folders rather than a theme? And if so, how do I reference that?

Here’s a link to the page for reference: William H. Roberts Collection -

Thanks! Joanne

Hi Joanne.

It may be the case that your CSS is not being added after Tainacan’s and thus Tainacan’s take precedence.

The selector you mentioned is not the complete one. it lacks p[data…

So, if your css can’t be added lower than Tainacan’s, I’d suggest you add someting else on the selector so that it has higher specificity. E.g.: .archive .tainacan-cards-container .tainacan-card .metadata-title p[data-v-c20b4860]

Haven’t tried it, tough. It is just how I’d try to make it work. And, if nothing works, you can also try adding “!important” to the css. It is not really a good practice, but sometimes there is no other option.

I hope this helps!

Hey @joannep,

What @marvila said is correct.

The [data-v-c20b4860] however should not be a reliable target since it is generated by Vue scoped CSS and that may change after compiling changes. So the !important is safer, while ugly. I would add that you could also increase the font size there in two other ways if you want to avoid !important:

  1. Increasing the font size of the whole items list component using its parent css variable:
.theme-items-list {
   --tainacan-base-font-size: 18px;
}
  1. Increasing the font size of any parent element that has lesser priority. As the font size there is being defined by a relative unit (em), any changes to an anscestor element will reflect on it. For example:
.tainacan-cards-container {
  font-size: 1.25em;
}