paul3x
04-05-2011, 18:16
Trochę pobawiłem się css K2 dzięki wspaniałemu dodatkowi Firebug. Zrobiłem tak jak prawie chciałem prócz tego, ze chciałbym mieć te kategorie poziomo jak np menu nawigacji. lista kategorii w K2 nie ma stylów css, jest tylko w formie ul li, więc dodałem display: inline; ale to na nic, tutaj kod:
/* --- Category List/Menu --- */
div.k2CategoriesListBlock {}
div.k2CategoriesListBlock ul {}
div.k2CategoriesListBlock ul li {}
div.k2CategoriesListBlock ul li a {}
div.k2CategoriesListBlock ul li a:hover {}
div.k2CategoriesListBlock ul li a span {}
div.k2CategoriesListBlock ul li a:hover span {}
div.k2CategoriesListBlock ul li.activeCategory {}
div.k2CategoriesListBlock ul li.activeCategory a {font-weight:bold;}
/* Root level (0) */
ul.level0 {}
ul.level0 li {}
ul.level0 li a {}
ul.level0 li a:hover {}
ul.level0 li a span {}
ul.level0 li a:hover span {}
/* First level (1) */
ul.level1 {}
ul.level1 li {}
ul.level1 li a {}
ul.level1 li a:hover {}
ul.level1 li a span {}
ul.level1 li a:hover span {}
/* n level (n) - like the above... */
a to po mojej zmianie:
/* --- Category List/Menu --- */
div.k2CategoriesListBlock {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
div.k2CategoriesListBlock ul {}
div.k2CategoriesListBlock ul li {
width: 170px;
padding-left: 0px;
background: #ccc url("obraz1.JPG") no-repeat left top;
border-style: solid;
}
div.k2CategoriesListBlock ul li a {
display: block;
width: 169px;
text-decoration: none;
padding: 15px 10px;
font-weight: bold;
background: url ("obraz1.JPG") repeat-x top;
color: green;
}
div.k2CategoriesListBlock ul li a:hover {
background-color: #797;
background-image: url("obraz2.JPG");
color: white;
}
div.k2CategoriesListBlock ul li a span {}
div.k2CategoriesListBlock ul li a:hover span {}
div.k2CategoriesListBlock ul li.activeCategory {}
div.k2CategoriesListBlock ul li.activeCategory a {font-weight:bold;}
/* Root level (0) */
ul.level0 {}
ul.level0 li {}
ul.level0 li a {}
ul.level0 li a:hover {}
ul.level0 li a span {}
ul.level0 li a:hover span {}
/* First level (1) */
ul.level1 {}
ul.level1 li {}
ul.level1 li a {}
ul.level1 li a:hover {}
ul.level1 li a span {}
ul.level1 li a:hover span {}
/* n level (n) - like the above... */
/* --- Category List/Menu --- */
div.k2CategoriesListBlock {}
div.k2CategoriesListBlock ul {}
div.k2CategoriesListBlock ul li {}
div.k2CategoriesListBlock ul li a {}
div.k2CategoriesListBlock ul li a:hover {}
div.k2CategoriesListBlock ul li a span {}
div.k2CategoriesListBlock ul li a:hover span {}
div.k2CategoriesListBlock ul li.activeCategory {}
div.k2CategoriesListBlock ul li.activeCategory a {font-weight:bold;}
/* Root level (0) */
ul.level0 {}
ul.level0 li {}
ul.level0 li a {}
ul.level0 li a:hover {}
ul.level0 li a span {}
ul.level0 li a:hover span {}
/* First level (1) */
ul.level1 {}
ul.level1 li {}
ul.level1 li a {}
ul.level1 li a:hover {}
ul.level1 li a span {}
ul.level1 li a:hover span {}
/* n level (n) - like the above... */
a to po mojej zmianie:
/* --- Category List/Menu --- */
div.k2CategoriesListBlock {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
div.k2CategoriesListBlock ul {}
div.k2CategoriesListBlock ul li {
width: 170px;
padding-left: 0px;
background: #ccc url("obraz1.JPG") no-repeat left top;
border-style: solid;
}
div.k2CategoriesListBlock ul li a {
display: block;
width: 169px;
text-decoration: none;
padding: 15px 10px;
font-weight: bold;
background: url ("obraz1.JPG") repeat-x top;
color: green;
}
div.k2CategoriesListBlock ul li a:hover {
background-color: #797;
background-image: url("obraz2.JPG");
color: white;
}
div.k2CategoriesListBlock ul li a span {}
div.k2CategoriesListBlock ul li a:hover span {}
div.k2CategoriesListBlock ul li.activeCategory {}
div.k2CategoriesListBlock ul li.activeCategory a {font-weight:bold;}
/* Root level (0) */
ul.level0 {}
ul.level0 li {}
ul.level0 li a {}
ul.level0 li a:hover {}
ul.level0 li a span {}
ul.level0 li a:hover span {}
/* First level (1) */
ul.level1 {}
ul.level1 li {}
ul.level1 li a {}
ul.level1 li a:hover {}
ul.level1 li a span {}
ul.level1 li a:hover span {}
/* n level (n) - like the above... */