Jump to: navigation, search

Glowing List CSS

Contents

Introduction

The glowing list CSS set up is a nice way to add some flair to your page. This article will detail the different class options you have and how to use them.

The Classes

  1. list-glow
    • This is the overall div. Any glowing list must start with this.
  2. list-glow-sm
    • This works the same as list-glow expect that it shrinks all the padding on the list-glow-group-item and list-glow-labels.
  3. list-glow-labels
    • This is used when you want your list to have labels. Think of them like the thead in a table.
  4. list-glow-group
    • This is the ul that starts the list. You can add no-header as an extra class to remove the border-top from the first list item.
  5. list-glow-group-item
    • This is the class for the divs inside of the li.
  6. list-glow-group-item-sm
    • This is the same as above, but shrinks the padding down. More on this below.
  7. a.block

The Colors

Colors.png

  1. li.announcement, li.wontFix
    • This is the sites danger/error color
  2. li.sticky, li.inProgress
    • This is the sites warning color
  3. li.application, li.open
    • This is the sites info color
  4. li.resolved, li.online
    • This is the sites success color
  5. li.unread, li.active, li:hover
    • This is the sites primary color

Examples

There are a few ways to use this. I will go over the most basic first.

Standard

Forum Glow.png

The Code
{{{lang}}}
  1. @if (count($board->children) > 0)
  2.         <div class="panel panel-default">
  3.                 <div class="panel-heading">Child Boards</div>
  4.                 <div class="list-glow">
  5.                         <ul class="list-glow-group no-header">
  6.                                 @foreach ($board->children as $board)
  7.                                         <li class="{{ $board->classes }}">
  8.                                                 <div class="list-glow-group-item">
  9.                                                         <div class="col-md-7">
  10.                                                                 {{ $board->link }}
  11.                                                         </div>
  12.                                                         <div class="col-md-2">
  13.                                                                 {{ $board->repliesBlock }}
  14.                                                         </div>
  15.                                                         <div class="col-md-3">
  16.                                                                 {{ $board->lastPostBlock }}
  17.                                                         </div>
  18.                                                 </div>
  19.                                         </li>
  20.                                 @endforeach
  21.                         </ul>
  22.                 </div>
  23.         </div>
  24. @endif
  25. <div class="panel panel-default">
  26.         <div class="panel-heading text-center">
  27.                 @if ($posts->getTotal() > 30)
  28.                         {{ $posts->links() }}
  29.                 @endif
  30.         </div>
  31.         <div class="list-glow">
  32.                 <div class="list-glow-labels">
  33.                         <div class="col-md-7">Subject/Author</div>
  34.                         <div class="col-md-2">Replies/Views</div>
  35.                         <div class="col-md-3">LastPost</div>
  36.                 </div>
  37.                 <ul class="list-glow-group">
  38.                         @if (count($announcements) > 0)
  39.                                 @foreach ($announcements as $announcement)
  40.                                         <li class="{{ $post->classes }}">
  41.                                                 <div class="list-glow-group-item">
  42.                                                         <div class="col-md-7">
  43.                                                                 {{ $post->link }}
  44.                                                                 <br />
  45.                                                                 {{ $post->startedBy }}
  46.                                                         </div>
  47.                                                         <div class="col-md-2">
  48.                                                                 {{ $post->repliesBlock }}
  49.                                                         </div>
  50.                                                         <div class="col-md-3">
  51.                                                                 {{ $post->lastPostBlock }}
  52.                                                         </div>
  53.                                                 </div>
  54.                                         </li>
  55.                                 @endforeach
  56.                         @endif
  57.                         @if (count($posts) > 0)
  58.                                 @foreach ($posts as $post)
  59.                                         <li class="{{ $post->classes }}">
  60.                                                 <div class="list-glow-group-item">
  61.                                                         <div class="col-md-7">
  62.                                                                 {{ $post->link }}
  63.                                                                 <br />
  64.                                                                 {{ $post->startedBy }}
  65.                                                         </div>
  66.                                                         <div class="col-md-2">
  67.                                                                 {{ $post->repliesBlock }}
  68.                                                         </div>
  69.                                                         <div class="col-md-3">
  70.                                                                 {{ $post->lastPostBlock }}
  71.                                                         </div>
  72.                                                 </div>
  73.                                         </li>
  74.                                 @endforeach
  75.                         @endif
  76.                 </ul>
  77.         </div>
  78.         <div class="panel-footer text-center">
  79.                 @if ($posts->getTotal() > 30)
  80.                         {{ $posts->links() }}
  81.                 @endif
  82.         </div>
  83. </div>


Here you can see how we handle each part of the page shown above. There are some very important thing to take away from this.

  1. The list-glow-labels and list-glow-group-item classes behave like rows. You can then use normal col- classes to properly size the content within them.
  2. The first glow list uses the no-header class since it does not use list-glow-labels. This stops the first list-glow-group-item from having a top border.

Smaller Rows

Memberlist Glow.png

Smaller rows
{{{lang}}}
  1. <div class="row">
  2.         <div class="col-md-offset-2 col-md-8">
  3.                 <div class="panel panel-default">
  4.                         <div class="panel-heading">Memberlist</div>
  5.                         <div class="list-glow">
  6.                                 <div class="list-glow-labels">
  7.                                         <div class="col-md-4">Username</div>
  8.                                         <div class="col-md-4" style="width: 33%;">Email</div>
  9.                                         <div class="col-md-4" style="width: 33%;">Last Active</div>
  10.                                 </div>
  11.                                 <ul class="list-glow-group">
  12.                                         @foreach ($users as $user)
  13.                                                 @if ($user->lastActive >= date('Y-m-d H:i:s', strtotime('-15 minutes')))
  14.                                                         <li class="online">
  15.                                                 @else
  16.                                                         <li>
  17.                                                 @endif
  18.                                                         <div class="list-glow-group-item list-glow-group-item-sm">
  19.                                                                 <div class="col-md-4">{{ HTML::link('user/view/'. $user->id, $user->username) }}</div>
  20.                                                                 <div class="col-md-4">{{ $user->emailLink }}</div>
  21.                                                                 <div class="col-md-4">{{ $user->lastActiveReadable }}</div>
  22.                                                         </div>
  23.                                                 </li>
  24.                                         @endforeach
  25.                                 </ul>
  26.                         </div>
  27.                 </div>
  28.         </div>
  29. </div>


In this example, you can see we used list-glow-group-item list-glow-group-item-sm. When these two classes are used together, it creates the slimmer lines for ease of reading.

As Tabs

Admin Glow.png

This is just another quick example to show how you can change these classes to suit your needs.