By ibexy on

I have created a table view grouped by a cck field. All is ok except the "group by" caption is not bold and large enough. I used firebug to locate this item but when I apply any css changes, it affects every other place. How can I isolate and apply the css changes only to the caption in the view?

⋅ Categories: Drupal 6.x

Comments

Brian Tastic’s picture

Brian Tastic commented

I think there is a module that makes it easier to add/alter the CSS for VIEWS.... sorry can't remember the name of it.

Brian Tastic’s picture

Brian Tastic commented

A module called 'content templates' allows you to style CCK fields

ibexy’s picture

ibexy commented

does this module affect views as well or just node display? I want to affect only views display.

Brian Tastic’s picture

Brian Tastic commented

the name of the module might be contemplate, and I think it is for CCK, and Views 2 interacts with CCK

lilon’s picture

lilon commented

I also created a Table View and I also want to bolden the caption of the 'group by' (as well as align the caption to the left and create a bigger spacing above it - none of which I currently know how to write. I am a novice in CSS).

But why didn't you use the option in the 'Basic Setting' of the Page (edit view) where you can attach a CSS Class which is supposedly meant to only affect this page. This is what I want to do but I am still trying to work out how to write the CSS instructions, as well as how to make the page see the css.

I've placed an almost empty css file in my 'sites/all/theme' folder, typed in the css file name in the Basic Setting as instructed, flushed the theming cache, but when I look at the page source code, it does not call the customised css at all, let alone affected by it.

Looking forward to some help as well.

Thanks

lilon’s picture

lilon commented

Could you please specify what css you entered, and into which css file?
thanks

Alexander Matveev’s picture

Alexander Matveev commented

You should set css class of the view to anything, `wide-data` for example. And type in your css file something like:

.wide-data table caption {
    font-size: 0.85em;
    text-align: left;
/* etc */
}
eddin’s picture

eddin commented

I faced the same issue on D7, I used the CSS Injector module http://drupal.org/project/css_injector and changed the text style of the caption.

ChrisValentine’s picture

ChrisValentine commented

I edited custom.css in my template and added the following to bold my group titles:

.views-table caption { font-weight: bold; }

Web application developer
http://kmi.open.ac.uk/

maxkoenig1972’s picture

maxkoenig1972 commented

I realized that the displayu of the group name is defined in the field setting of the group name. Let's say you group by "intranet_category" then you choose this field in your view, in the settings chose "rewrite results" and if I there add
<header><h1><b>{{ field_intranet_category }} </b></h1></header>
then the group by caption is bold and large

qpro’s picture

qpro
Primary language Spanish
Location Spain
commented

You totally find the solution for me too, thanks!

bas123’s picture

bas123 commented

@maxkoenig1972,  I had been posting all over the place looking for this answer because I was rendering Grouped tables via a view of members and had developed some quite wonderful Rewrite Results within the table!

However while the Group Field Label showed up as a Table Header in the View's Preview Pane ABOVE the table (as I had hoped for), it was showing up beneath the table as a caption!

By checking "Override the output of this field with custom text"

then locating the following Replacement Pattern for the Group: {{ field_primary_department }}

And then using the rewrite results for the "Hidden" field which was serving as the Group field in the table settings, I found an allowable tag called <colgroup>

I was able to enter this rewrite result

<colgroup><h4 class="text-align-left">&nbsp;{{ field_primary_department }}</h4></colgroup>

And thus move the Group's Label above the table while adding the H4 element

It did require playing around in the Table | Settings to get this to allow the markup, but the results were what I have been struggling with for a while.

Too bad the rewrite filed format does not allow for inline-css or I would have done a bit more like adding a color to the Label!