By mattwmc on

Boy! What a pain in the keister having to style a views block!

I have a few different views blocks on my front page and its quite difficult to get them to look different. Suppose I just haven't figured it out yet.

They seem to use the same class on the inside with one different css class on the outside that you can set in views.

So how do you style the inside elements?

outside - view view-Main-Feature view-id-Main_Feature view-display-id-default mainfeature view-dom-id-1

inside - view-content

further inside- views-row views-row-1 views-row-odd views-row-first

So how do you style views-row views-row-1 views-row-odd views-row-first? And not just .views-row-first because its used in other blocks on the same page.

Frustrated.

⋅ Categories: Drupal 6.x

Comments

ryivhnn’s picture

ryivhnn commented

CSS specificity!

You can usually get away with just overriding one of the classes for most things.

.view-Main-Feature .views-row { stuff in here } styles all .views-row only if they come under .views-Main-Feature (as opposed to everything using .views-row).

views-row-1, -odd and -even should default to -row unless y ou specifically style them.

works at bekandloz | plays at technonaturalist

mattwmc’s picture

mattwmc commented

.view-Main-Feature .views-row did the trick! I think I didn't include the spacing.

Great! Thanks for all the replies.

wizzly’s picture

wizzly commented

mattwmc,

Agree. Theming views can be a pain.

Have you looked at Semantic Views?

This is from the module page:

This Views plugin makes unformatted styles, field row styles and other output more readily configurable without needing to override template files. Instead of overriding row style templates for views where you want to specify different HTML elements (tags) and class attributes, you can specify these inside the Views UI and avoid overriding templates for each view.

HTH.

arh1’s picture

arh1 commented

styling views is indeed tricky -- it has a learning curve like the rest of Drupal. it's really really hard to provide a tool as powerful and flexible as Views, and keep it squeaky clean and semantic on the front end.

you can just style the existing markup or check out the Semantic Views module as mentioned above. but also be sure you understand the templating system. you can use simple template overrides to control the markup used by a given view to whatever degree you'd like.

when editing a view, click the "Information" link next to "Theme" at the bottom of "Basic Settings". this will show you all of the template files used for the view from the outside in, and list options for overriding each template.

to override a template:
1) copy the currently used template file to your theme directory from the "theme" directory within your views module directory
2) rename the template file to one of the names views lists as a potential override. these names can be more or less specific depending on how widely you want the template to be used (for all of your views, for all of your views with the "table" style, for this view only, etc)
3) click the 'Rescan template files' button on the views editing page
4) save the view
5) edit the template file and check the results

and of course, check out merlinofchaos's documentation at http://views-help.doc.logrus.com/help/views/analyze-theme

hth

glennr’s picture

glennr commented

Check out Views' help (you'll need to install Advanced Help first) but there's a helpful guide on theming Views. Anyway, you can use all those classes to your advantage, allowing you to be as specific as you like when styling a view page, block or element - simply by using CSS. They're quite logically named: .view-Main-Feature is the name of your custom view (Main Feature), .view-display-id-default is the default display (as opposed to a page or block display), .view-row are the rows of the view, and you can even style an individual row, eg .views-row-1.

You can string as many of the classes together as you like to style the specific element that you're aiming for. For example, as ryivhnn says, .view-Main-Feature .views-row will allow you to style all the rows in your Main Feature view, but no rows in any other view. Good luck!

dropletCUCC’s picture

dropletCUCC commented

I understand about the tpl.php and css class names but where do I put the css file and what do I name it?

Codeblind’s picture

Codeblind commented

It's normal to add the styles directly into your theme's default stylesheet (typically /sites/all/themes/yourtheme/styles.css or /sites/all/themes/yourtheme/yourtheme.css). If you are compiling and caching your css files in the Performance settings (which you should) you'll have to refresh this cache to see your changes. You might even want to disable caching on your development server while you work so you don't have to keep flushing the stylesheet cache.

You can also create a new stylesheet in your theme with a name like views-styles.css and then link this stylesheet by editing your theme's .info file and adding the new file to the stylesheets array like so stylesheets[all][] = views-styles.css . If you're going to make a habit of this technique you definitely want to enable stylesheet caching. Splitting the stylesheets up can make things easier to manage, but if you start to get a lot of them and they are not meticulously organized they can become a big hassle to work with.

wer0ckz’s picture

wer0ckz commented

how to color the font of "node: post-date" using view"

i have this site http://jcausing.webfreehosting.net/clclax.org.au/content/doug-fox-awarde...
on the left , you'll see a date . how can i color it?

therobyouknow’s picture

therobyouknow commented

I share your pain - but here is a project that aims to provide cleaner markup
http://drupal.org/project/fences

See also:
http://drupal.stackexchange.com/questions/14936/which-html-div-classes-a...

Anonymous’s picture

Anonymous (not verified) commented

I'm still pretty new to Drupal, and I have been sifting through documentation and other info on this site to figure out WHERE to put new or custom stylesheets. I found all kinds of info about how to update the .info file, how to actually write styles, but this was really hard to find. It shouldn't just be burried in the comments here... I wish someone would add this to a more official document about styling.

spovlot’s picture

spovlot commented

The documentation on drupal.org is created by the community (see http://drupal.org/contribute/documentation). So, that "someone" can be you.

What exactly was the information that helped you in this case?

craigperks’s picture

craigperks commented

Checkout the module Block Class http://drupal.org/project/block_class This will allow you to add a class to the block output of each view block so you can style them anyway you want.

nazirhussain’s picture

nazirhussain commented

Styling views in Drupal :

1. Add field(which to display) and check the option "Exclude from display".

2. Now go to "Rewrite Results" and check the option "Rewrite the output of this field"
and below there is a section called "Replacement patterns" where all the added
fields appear as a variable(saying variable just for easy understanding)
Like : 

[title] == Content: Title
[field_event_date] == Content: Event Date
[body] == Content: Body
[body-value] == Raw value

3. Above there is a text ares called "Text" where you can customise your style
for this field(Not good practice follow step 4 for better)and clicl "Apply All".

4. Now add one more field(this is an extra field) called "Global: Custom text"
DO NOT check "Exclude from display" and below text area called "TEXT"is
the area where we will be writing our HTML codes for styling the views
using all the fields which are avalable as token here under the option
"Replacement patterns".

5. Click on the "Apply All", And YES its done.So simple and cool na??