theme-css.html plus a couple of minor fixes I found
authorEarl Miles
Tue, 1 Jul 2008 22:34:26 +0000 (22:34 +0000)
committerEarl Miles
Tue, 1 Jul 2008 22:34:26 +0000 (22:34 +0000)
help/theme-css.html
help/using-theme.html
includes/plugins.inc

index bdc4b85..ba824c7 100644 (file)
@@ -1,2 +1,76 @@
 <!-- $Id$ -->
-TODO
\ No newline at end of file
+Views uses a wide array of CSS classes on all of its content to ensure that you can easily and accurately select exactly the content you need in order to manipulate it with CSS. 
+
+Typically, every view is wrapped in a div with the name of the view as part of its class (for all these examples, we will assume the name of the view is <strong>myview</strong>), as well as the generic class 'view':
+
+<pre>
+&lt;div class="view view-myview"&gt;
+...
+&lt;/div&gt;
+</pre>
+
+In your CSS, you can modify all views:
+
+<pre>
+div.view {
+  border: 1px solid black;
+}
+</pre>
+
+Or just your view:
+
+<pre>
+div.view-myview {
+  background: yellow;
+}
+</pre>
+
+By default, the general view template also provides the following classes to easily style other areas of the view:
+<ul>
+<li> .view-header </li>
+<li> .view-filters </li>
+<li> .view-content </li>
+<li> .view-empty (if an "empty" text is used when the view has no results) </li>
+<li> .view-footer </li>
+<li> .feed-icon </li>
+<li> .attachment-before (if using an "attachment" display)</li>
+<li> .attachment-after (if using an "attachment" display)</li>
+</ul>
+
+So for example:
+<pre>
+div.view-myview div.view-header {
+  /* make the header stand out */
+  font-size: 120%;
+  font-weight: bold;
+}
+
+div.view-myview div.view-footer {
+  /* Make the footer less important */
+  font-size: 80%;
+  font-style: italic;
+  color: #CCC;
+}
+</pre>
+
+In the above example, we whimsically made the header bold and in a bigger font, and the footer smaller, italicized, and greyish.
+
+<h3>Views with fields</h3>
+If your view has fields, each field is uniquely tagged with its ID. A field's ID may be gleaned from the Theme: Information page. Note that due to CSS rules, any _ in the id will be converted to - automatically, so if you have a field whose id is 'edit_node' (this is the field used to provide an "edit" link to a node), it will be 'edit-node'. Additionally, to make sure that the view IDs don't conflict with other css classes in the system, they will be pretended with 'views-field-'; thus, the final CSS class for the field with the id 'edit_node' will be <strong>views-field-edit-node</strong>.
+
+Exactly how this appears is going to depend upon the style you're using. For example, the 'unformatted' style uses <strong>div.views-field-edit-node</strong> and <strong>div.views-label-edit-node</strong> to access that particular field, but a table would use <strong>td.views-field-edit-node</strong> and <strong>th.views-field-edit-node</strong> to access the table header; or just <strong>.views-field-edit-node</strong> to affect both.
+
+<pre>
+.view-myview th {
+  color: red; /* make all headers red */
+}
+
+.view-myview .views-field-title {
+  font-weight: bold; /* Make the 'title' field bold */
+}
+
+.view-myview td.views-field-body {
+  font-size: 60%; /* Make the text in the body field small */
+}
+</pre>
+
index 5f9a7f9..2ed2804 100644 (file)
@@ -34,4 +34,6 @@ The contents of the $row variable included these fields, in precisely the order
 
 Would print just the title for that row. Please remember that I'm doing this inside the loop, so this will get repeated for every row of the view.
 
+The IDs used to fetch items from the array, id <strong>$row['title']</strong> can be quickly and easily looked up on the Theme: Information page. Once a field has been added to the view, its ID will not change, but note that if there are two "title" fields in a view, one will be 'title' and the other will be 'title1', in order to prevent namespace collisions.
+
 The important thing here is that Views does provide IDs. Views doesn't tell you what these IDs are, but it's easy to get them by dumping the row data and doing a simple visual inspection. Views does guarantee that these IDs will not change, unless you actually add a new field and remove the existing one (in which case 'title', above, would become 'title1').
index de37f5e..3d517f7 100644 (file)
@@ -1327,8 +1327,8 @@ class views_plugin_display extends views_plugin {
           }
 
           if ($plugin->uses_fields()) {
-            foreach ($this->get_handlers('field') as $handler) {
-              $funcs[] = $this->option_link(t('Field @field', array('@field' => $handler->ui_name())), 'analyze-theme-field') . ': ' . $this->format_themes($handler->theme_functions());
+            foreach ($this->get_handlers('field') as $id => $handler) {
+              $funcs[] = $this->option_link(t('Field @field (ID: @id)', array('@field' => $handler->ui_name(), '@id' => $id)), 'analyze-theme-field') . ': ' . $this->format_themes($handler->theme_functions());
             }
           }
         }
@@ -2389,6 +2389,7 @@ class views_plugin_display_block extends views_plugin_display {
       'value' => $block_description,
     );
 
+/* -- removed until core fixes this.
     $cache_type = $this->get_option('block_caching');
     if (empty($cache_type)) {
       $cache_type = BLOCK_NO_CACHE;
@@ -2400,6 +2401,7 @@ class views_plugin_display_block extends views_plugin_display {
       'title' => t('Caching'),
       'value' => $types[$this->get_cache_type()],
     );
+*/
   }
 
   /**
@@ -3049,10 +3051,13 @@ class views_plugin_style extends views_plugin {
     $sets = array();
     if ($grouping_field) {
       foreach ($records as $row) {
+        $grouping = '';
         // Group on the rendered version of the field, not the raw.  That way,
         // we can control any special formatting of the grouping field through
         // the admin or theme layer or anywhere else we'd like.
-        $grouping = $this->view->field[$grouping_field]->theme($row);
+        if (isset($this->view->field[$grouping_field])) {
+          $grouping = $this->view->field[$grouping_field]->theme($row);
+        }
         $sets[$grouping][] = $row;
       }
     }