Styling the HTML-List

Last updated on
30 April 2025

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.

Help improve this page

Page status: Not set

You can: