2

I have been searching for help with this and I am stumped.

I am trying to create an attractive, styled table with categories of Web Resources and associated icons for each category.

I currently have the following:

What I would like to do:

  • Show the Taxonomy icons next to the technology category names in the Views table
  • Style each Views generated table with a different css (e.g. border color, bg color)

But I can't find where I can create/generate specific CSS classes for each of the tables. They are all showing up in the output HTML as:

<table class="views-table cols-0">...</table>

And I don't even know where to start to display the Taxonomy icons next to the Taxonomy.

Do I need to work in Templates? If so, how do I add the appropriate icon to the table captions without hardcoding (e.g. switch / case), because that won't be flexible in the long run. I want site maintainers (not me) to be able to simply add a new category to the Taxonomy and upload an icon to go with it and have it show up in the View as a header for that category.

Thanks to anyone who can help.

Improve this question

1 Answer 1

Reset to default
2

First, to have the associated icon show up with the taxonomy term, do the following:

  • add field: image field from taxonomy
  • add field: Global: custom text, set it to [name] [field_your_image_field]
  • exclude label from display
  • exclude these two fields from display
  • change your table grouping from taxonomy name to Custom text ( or whatever you named it )

To style the output, you'll use two settings:

under Format: table | settings, set the row class here

to style individual fields, click on the field in the fields list, click on style settings, and customize field HTML / create a CSS class

There are lots of options here for setting field and label classes, and html elements

Good luck

Improve this answer
7
  • Thank you, Dom Day. This worked really well for adding the icon next to the taxonomy term.\
    – Christopher Dunning
    Jun 29, 2013 at 11:27
  • I was not able to find a way to style the tables themselves, but I could style each row by adding the "[name]" field token to the Row class, and then adding a separate line for each Taxonomy name to my CSS. For example: Taxonomy term = Geothermal stylesheet.css: tr.Geothermal { background-color: #faeeee; }
    – Christopher Dunning
    Jul 1, 2013 at 3:49
  • Can't figure out how to put linebreaks in comment... Help says add two spaces, but this doesn't work for me...
    – Christopher Dunning
    Jul 1, 2013 at 3:55
  • You can add a class to the view under the view's advanced settings area, and use it in your css selectors ... doing something like this in the css: .myview-class table { }
    – Dom Day
    Jul 1, 2013 at 21:25
  • Thank you again, Don, but I'm afraid that doesn't affect the code I want to style. The View outputs a series of tables, one for each Taxonomy term. The <tr>s (which I can style) are for each item with that term. But I want to style the caption for each table differently (i.e. different background color). If I add a class to the whole view, then .myview-class table {} or .myview-class table caption {} will style all captions the same. What I want to do is table.techA caption {background-color: #faeeee;}, table.techB caption {background-color: #eef2fa;}. Any way to do that you know of?
    – Christopher Dunning
    Jul 2, 2013 at 21:03

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.