Continuing with the CSS editing for the new Joomla template, we have the option to display a category list.

Category list could be very handy, in the way that it displays in an organize way (table) all the articles within the category selected. Also it displays a list of any existing article in any subcategories.

The main html code for the category list is the following:

<div class="category-list">
        <div class="cat-items">
          <form action="http://fabianmanzano.info/index.php/en/tutorials" method="post" name="adminForm" id="adminForm">
            <fieldset class="filters">
              <div class="display-limit"> Display #&nbsp;
                <select id="limit" name="limit" class="inputbox" size="1" onchange="this.form.submit()">
                  <option value="5">5</option>
                  <option value="10" selected="selected">10</option>
                  <option value="15">15</option>
                  <option value="20">20</option>
                  <option value="25">25</option>
                  <option value="30">30</option>
                  <option value="50">50</option>
                  <option value="100">100</option>
                  <option value="0">All</option>
                </select>

              </div>
              
              <!-- @TODO add hidden inputs -->
              <input type="hidden" name="filter_order" value="">
              <input type="hidden" name="filter_order_Dir" value="">
              <input type="hidden" name="limitstart" value="">
            </fieldset>
            <table class="category">
              <thead>
                <tr>
                  <th class="list-title" id="tableOrdering"> <a href="#" onclick="Joomla.tableOrdering('a.title','asc','');" title="Click to sort by this column">Title</a> </th>
                  <th class="list-author" id="tableOrdering3"> <a href="#" onclick="Joomla.tableOrdering('author','asc','');" title="Click to sort by this column">Author</a> </th>
                  <th class="list-hits" id="tableOrdering4"> <a href="#" onclick="Joomla.tableOrdering('a.hits','asc','');" title="Click to sort by this column">Hits</a> </th>
                </tr>
              </thead>
              <tbody>
                <tr class="cat-list-row0">
                  <td class="list-title"><a href="/index.php/en/tutorials/12-test-3"> test (3)</a></td>
                  <td class="list-author"> Written by Super User </td>
                  <td class="list-hits"> 0 </td>
                </tr>
              </tbody>
            </table>
          </form>
        </div>
        <div class="cat-children">
          <h3> Subcategories </h3>
          <ul>
            <li class="first"> <span class="item-title"><a href="/index.php/en/tutorials/9-programming"> Programming</a> </span> </li>
            <li class="last"> <span class="item-title"><a href="/index.php/en/tutorials/10-web-design"> Web design</a> </span> </li>
          </ul>
        </div>
      </div>

The main ID’s and classes to modify are:

 

.category-list .cat-items #adminForm .filters {
	float: right;
	margin: 1em;
	padding: 1em;
}
.category-list .cat-items .category {
	margin: 1em;
	padding: 1em;
}
.category-list .cat-items #adminForm .category thead {
	background: #8C4600;
}
.category-list .cat-items #adminForm .category thead a {
	color: white;
}
.category-list .cat-items #adminForm .category thead th {
	margin: 1em;
	width: 90%;
	padding: 1em;
	border: solid 1px black;
}
.category-list .cat-items #adminForm .category .list-title {
	width: 60%;
}
.category-list .cat-items #adminForm .category .list-author {
	width: 30%;
	text-align: center;
}
.category-list .cat-items #adminForm .category .list-hits {
	width: 10%;
	text-align: center;
}
.category-list .cat-items #adminForm .category td {
	border: solid 1px black;
	padding: 0.6em;
}
.category-list .cat-children h3 {
	padding-left: 1em;
	color: #0b216c;
}
.category-list .cat-children ul li {
	list-style: none;
	padding-top: 0.4em;
}