I designed a grid of 3 columns in Drupal 7 using view. Below is the default outcome-

enter image description here

It doesn't look beautiful. Hence I want to change the css for each row and column, something like following-

enter image description here

I already have awards and award-list class defined inside style file. But I don't know how to configure the view, so that it uses these class instead of default classes.

Notice carefully the first image, in which I am able to add the css class awards (in the first line div). Also I am able to add css to each td element. This is perfectly fine. The problem is that td has some more parameters defined such as background, color, text-align, border etc, which I don't need for this view. Also there are few more unwanted attributes defined for table class view-view-grid cols-3. These elements are background and border, which I don't want for this view.

I found out a workaround, in which I redefine all these attributes inside style.css and I changed the border from 1px to 0px etc. See below the css, which I appended in style.css-

.awards table{
  background: #BAF5D9;
  border: 0px;

.awards td{
  background: #BAF5D9;
  color: #333;
  text-align: center;
  padding: 0px;
  border: 0px;

Here #BAF5D9 is background color of the theme. You can notice that it not a proper way to redefine. as the css is getting bigger.

I want to configure this view, in such a way, so that these attributes don't be generated.

Please have a look. I really appreciate your help.

  • 1
    Try drupal.org/project/semanticviews for more control.. Although to be honest, overwriting those auto-generated attributes is perfectly ok. Just use !important and forget about it. – Niall Murphy Dec 13 '16 at 11:23
  • @NiallMurphy: Thank you for your suggestion. Can you please tell me how to use !important? do I need to write it for each attributes mentioned above in style.css file? – Ravi Joshi Dec 13 '16 at 12:35
  • 1
    You can add an extra css file in your theme's .info file so your modifications go there. Then, using Firefox or Chrome's developer tools, write your css. The !important thing is a css thing to make sure your changes will take effect. It's usually unnecessary but useful when writing css in this way so you know you're actually targeting elements correctly. I write with it and then delete as many !important as possible. – Niall Murphy Dec 13 '16 at 14:20
  • @NiallMurphy: excellent. I got it. It is better to make a new css instead of editing the existing css file. I have another doubt related to css, if you have time, please have a look here – Ravi Joshi Dec 13 '16 at 14:24

You can add classes to view https://www.ostraining.com/blog/drupal/css-views/

Also see: How to add CSS classes to a Views-generated block? (NOT to its generated content, the block itself!)

  • Thanks a lot for the links. I am looking into it. I updated my question and added more explanation. Can you please have a look again? – Ravi Joshi Dec 13 '16 at 8:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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