Add CSS Style to Drupal Views

drupal-css-views

This week one of our OSTraining members was working with the Views module.

They were able to create views, but weren’t sure how to improve their design.

In this tutorial, we’re going to show you how to apply CSS to your views so you can add both color and width.

#1: Adding CSS color to a column

Here is a very standard Drupal table that I’ve created. I’m going to add color to one of the columns, the Title:

media_1400612860811.png
  • In editing the view, click on the field you want to edit:
media_1400614862458.png
  • Click Style Settings and you’ll see options for adding HTML and CSS to the field:
media_1400613075900.png

We’re now going to customize the field’s CSS.

  • Click “Create a CSS class”.
  • Enter a new CSS class name. In this example, I used “views-title”:
media_1400613106912.png

Now, we’re going to go to our theme’s files to add the CSS.

Many themes use style.css for their main CSS, but your theme maybe different:

media_1400613389402.png

Inside the CSS file, add the CSS. Here we’re going to change the background color to pink:

media_1400613522551.png
  • Save the CSS file.
  • Clear the cache on your Drupal site via Configuration > Performance.
  • Your CSS changes should now apply to the Title column:
media_1400615339320.png

#2: Adding width to Views columns

Let’s customize our table in a different way. Notice that one column, “Type” is very narrow. Let’s even out the width of our columns.

media_1400613573769.png

Inside each field, choose these settings:

  • Click “Customize label HTML”.
  • Click “CSS class”.
  • Enter “views-table-width” into the CSS class box:
media_1400614403315.png

I repeated that process for all four fields in the view.

As before, we can now add the CSS we need to our theme. In this case, we’ll give each column a width of 25%:

media_1400613992021.png

Now all of the tables in our column should have an equal width:

media_1400614529917.png

Note: CSS does not apply to previews

One important thing to note is that your CSS will not apply inside the Views editing screen. This can sometimes make it a little harder to test changes accurately.

If you are working on changes to a live view, it may be worth making a clone of that view or working on a test site.

media_1400614449039.png

Author

  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Article Rating
Subscribe
Notify of
16 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Italiatina
9 years ago

Thanks so much for this tutorial! If I want to add CSS to an entire row, can I list it in the style sheet and then post it under views>advanced settings>CSS class?

Webatelier
Webatelier
9 years ago
Reply to  italiatina

No, that’s for adding a css class to the whole view, inspect your elements, there should be a class for a row already, if not, override the view theme

Adedapo Harjuone Ajuwon
Adedapo Harjuone Ajuwon
9 years ago

hello, thanks for this informative article,i’m having a problem with the field, when i select the check box, it wont bring out the field to add my costume css and field wrapper. please help

jwamer
jwamer
9 years ago

Thanks very much this is very helpful for me.

Kyle P. Heney
Kyle P. Heney
8 years ago

If I want to edit the title of my field based on content type, what extra css would I need? So I’d like different titles to be colored differently, depending on content type. Thanks

Alawode Taiwo
Alawode Taiwo
8 years ago

This is cool “thanks”, This just solve, my long time stress.

sunil verma
sunil verma
8 years ago

Thanks

Matt BK
Matt BK
8 years ago

Thanks!

erata61
erata61
8 years ago

hi, thanks for article. i wonder how to show tables like views preview for real preview. i want to use views preview styles in created table but can not do it yet.

Aldusar IT Problem solutions
Aldusar IT Problem solutions
8 years ago

Hi Sir this cool stuff helps alot

shilpa
shilpa
8 years ago

Thank you very much for this wonderful explanation.

DJ SAJUJA
DJ SAJUJA
7 years ago

How to add css on blogger and theme? help please

Venkatesh Somu
Venkatesh Somu
7 years ago

Thanks for the article..

I have a doubt in views. I created a view of Uploaded files in that i want to add a class “colorbox-load” to the filename field of tag.

I can add to the main field like Filename but i want to add this in ‘a’ tag.

Any help would be appreciated .Thank you.

johnsonic
johnsonic
6 years ago

I don’t see styles.css in core/themes/bartik/css directory, but I notice that the CSS for controlling tables is in core/themes/bartik/css/components/table.css. So I assume that I shall edit table.css for the column ‘s background color and column’s width. Is it?

Drew Norman
Drew Norman
4 years ago

This was so helpful thank you so much.

david
david
3 years ago

Extremely useful! Thanks Steve

16
0
Would love your thoughts, please comment.x
()
x