Modifying CSS for collections and single item pages

[joannep]

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

[marvila]

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!

[mateus.m.luna]

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;
}

2. 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;
}