I just want to change the background color of a block on the “Sidebar First” region in Drupal 8.

How can I do that?

New contributor
Michael Angelo Samson is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

put on hold as off-topic by Kevin, Clive Dec 6 at 16:17

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on programming, PHP, SQL, etc. that do not relate directly to Drupal are off-topic here, but can be asked on Stack Overflow." – Kevin, Clive
If this question can be reworded to fit the rules in the help center, please edit the question.

  • This is basically a CSS question. – Kevin Dec 6 at 14:13

If you are doing this from your own theme or modifying an existing theme and you will have to understand how to find the relevant block id or class using the browser inspector

Lets assume you are changing the search block you could do something like this in the stylesheet of your theme

#block-bartik-search { 
  background-color: red 
}

Try the Block Class module:

https://www.drupal.org/project/block_class

This will allow you to add classes to any block through the block's configuration interface. Then, you can use CSS to style that class.

To add CSS to your theme, follow the documentation here:

https://www.drupal.org/docs/8/theming/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme

There's one catch, though.

This supposes that you are editing your own theme. If you are using a theme from Drupal core (like Bartik) then you should make a sub-theme first and modify that:

https://www.drupal.org/docs/8/theming-drupal-8/creating-a-drupal-8-sub-theme-or-sub-theme-of-sub-theme

Since it sounds like you are very new to website design in general, and not merely a newcomer to Drupal, I sympathize if this seems like overkill to make a small change.

However, it's very important to use a sub-theme so that your changes aren't wiped out the next time you upgrade. Gradually, you'll make more and more changes, until the theme is truly yours.

  • Thanks for all your answer. Where can I edit the css to add the block class styles? Thank you so much for your help. – Michael Angelo Samson yesterday
  • I added links to the relevant documentation. Good luck! – hotwebmatter 11 hours ago

Not the answer you're looking for? Browse other questions tagged or ask your own question.