Just to show you the capabilities of our templates and CSS.. Here are some examples for styling the board index.
1) changing a single category's color, im my example it's the category with ID 6.
#category_6 h2 {
color: white;
background-color: #666;
text-shadow: none;
}
#category_6 h2 a {
color: white;
background-color: #666;
text-shadow: none;
}
2) making the boards inside the category zebra striping
#category_6 .board_row:nth-child(odd) {
background-color: #f8f8f8;
}
#category_6 .board_row:nth-child(even) {
background-color: #f1f1f1;
}
3) adding some fancy board icons,
We need to hide the old ones first, I've used my boards with ID 29, 19 and 111.
#board_23 .board_icon, #board_29 .board_icon, #board_19 .board_icon, #board_111 .board_icon {
background-image: none;
}
Now the original Icons are hidden, let's add some new ones.. I've used the internal font awesome but you can do that with images, too.
The complete icon list from FontAwesone is here: http://fortawesome.github.io/Font-Awesome/cheatsheet/
#board_29 .board_icon:before {
font-family: "FontAwesome";
content: '\f0a5';
position: relative;
top: 5px;
font-size: 2.7em;
color: #666;
text-shadow: 1px 1px 2px #555;
}
#board_19 .board_icon:before {
font-family: "FontAwesome";
content: '\f108';
position: relative;
top: 5px;
font-size: 2.7em;
opacity: 0.8;
color: green;
text-shadow: 1px 1px 2px #555;
}
#board_111 .board_icon:before {
font-family: "FontAwesome";
content: '\f001';
position: relative;
top: 5px;
font-size: 2.7em;
opacity: 0.8;
color: darkred;
text-shadow: 1px 1px 2px #555;
}
4) Now we give the related boards another link color:
#board_111 a {
color: darkred;
}
#board_23 a {
color: GoldenRod;
}
#board_19 a {
color: green;
}
This is our result
Quite simple, right?