By dbrothenberg on

Hello,

I'm just getting started with the Views 2 module and I've created a simple view to show recent blog posts:

http://www.excellorate.com/breaking-through

Now that I am able to display the basic information I want, how can I apply custom formatting to the individual fields.

For example, if you look at the link above, I would like the "Title" field to be bold and large. I would also like to insert breaks between the lines to add more white space.

What is the best way to accomplish this? Any help would be appreciated.

Thanks,
Dave

⋅ Categories: Drupal 6.x

Comments

mm167’s picture

mm167 commented

if u have paid to themeshark and using their theme "hammerhead" why not ask them to help?

your request is simple but it is not good to hack a commercial theme.

dnewkerk’s picture

dnewkerk commented

If that's all you need to do, I'd suggest using just CSS in your style.css file... you don't need to modify the markup. Everything is surrounded with unique classes, so if you don't "have" to add new markup, then don't.

For instance:

.view-recent-stories .views-field-title {
  font-weight: bold;
  font-size: 1.2em;
}

.view-recent-stories .views-field-body,
.view-recent-stories .views-field-body {
  padding-bottom: 10px;
}

If you do "really" need to change the markup of individual fields, then check the Theming part of Views... also the bottom "The basic fields template" part of this should help: http://views-help.doc.logrus.com/help/views/using-theme

Make sure you also upgrade to Drupal 6.10 immediately, as it's a very important security update. Of course, back up your site files and database first.

Hope this helps.

dbrothenberg’s picture

dbrothenberg commented

Hi Keyz,

Thanks very much for the tip. I had not noticed that the generic views classes like ".views-field-title" and ".views-field-body" were wrapped inside of specific classes named for my custom view (e.g. .view-recent-stories).

That makes it easy to style just the classes specific to one individual view.

Excellent! Thanks for the help!

Best,
Dave

stattler’s picture

stattler commented

Changing the views-field-title via CSS affects all the views' titles. Suppose I have two different views-- one for the main content, and other for the block to show recent contents. In the main content I want the titles to be larger. So if I do this using CSS by making .views-field-title{font-size:20px}, the titles in the block also gets changed, which I don't want to..

Is there a way to control the views-field-title for different blocks and areas. Thanks in advance.

dnewkerk’s picture

dnewkerk commented

This is dealt with using this inheritance aspect of CSS. If something has the same class, but is contained within a div with a different unique class, you can style it without affecting the other instances of the class like so: .view-recent-stories .views-field-title { etc }. Since there is a div surrounding the view or block with this unique "view-recent-stories" class, or in other cases might be an ID like #block-views-myviewname-block_1, when you put them in the CSS in sequence as shown, it will make it specific to only "views-field-title" when it appears as a child of "view-recent-stories" (or whatever the parent class or ID may be). If "views-field-title" appears in some other block/view with a different parent class/ID, then it will not be affected by this style rule.

stattler’s picture

stattler commented

The solution is perfect. It worked!! Thanks a bundle!!!