Community Documentation

Styling the HTML-List

Last updated April 30, 2009. Created by wbue on April 30, 2009.
Log in to edit this page.

We want to format the list of thumbnails to float horizontally and not vertically, no leading discs and more. With css we can achieve this:

  .book-navigation
  {
    clear: both;                   /* new line for menu */
  }
  /* view gallery */
  .view-gallery .item-list ul li
  {
    display: inline;               /* enable floating */
    list-style-type: none;         /* no leading disc */
    line-height: 50px;              /* to have enough space between rows */
    padding: 0;
  }
  .view-gallery .views-field-field-image-fid
  {
    background:transparent url(film.png) repeat-x scroll 0 0;
    float: left;
    margin: 0;
    padding: 16px 6px 16px;
  }
  .view-gallery .imagecache-small_quadrat img
  {
    border: 4px solid black;
  }
  .view-gallery a.imagecache-small_quadrat.active img
  {
    border: 4px solid red;
  }

Perhaps you have to adjust the class names. They correspond to the system names of the node types and views we use.

You can find a sample theme with this css in #329868: node translation vs attribute translation. Unpack it in sites/all/themes and activate it.

Page status

No known problems

Log in to edit this page

About this page

Drupal version
Drupal 6.x
Audience
Site administrators

Site Building Guide

Drupal’s online documentation is © 2000-2012 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution-ShareAlike 2.0. PHP code is distributed under the GNU General Public License.