Klikkbare knapper i menyen for produktkategorier

Standardmeny Zpider

For at det skal være mulig å klikke på bildene foran produktkategoriene, må det gjøres noen enkle endringer i en fil på webserveren. Finn filen jquery.treeview.css i mappen “Themes\NordicCool\”. Naviger deg ned til du finner følgende kode:

/* Expand the anchor to include the + or > */
/* .treeview span { background-position: left center; background-repeat: no-repeat; vertical-align: middle; display: block } */
.treeview span { background-position: left center; background-repeat: no-repeat; vertical-align: middle; padding: 0 0 0 20px; display: block }
.treeview span.custom { padding-left: 3px; }
.treeview span.custom a { display: inline; }
.treeview span.file { background-image: url(images/listItemArrow.png); }
.treeview li span.folder { background-image: url(images/listCollapsed.png) }
.treeview li.collapsable > span.folder { background-image: url(images/listExpanded.png) }

/* Expand the anchor to include the + or > */
/*.treeview span a { color: #787878; display: block; width: 100%; padding: 3px 0 3px 20px } */
.treeview span a { color: #787878; display: block; width: 100%; padding: 3px 0 3px 0 }
.treeview li.expandable span.toplevel { /*background-color: #cfdeed;*/ }
.treeview li span:hover { background-color: #e0e0e0; }
.treeview li.collapsable span.toplevel { background-color: #7697b8; }
.treeview li.collapsable span.toplevel a { color: white; }
.treeview span.toplevel { border-bottom: dotted 1px #ccc; }
.treeview span.toplevel img { padding-right: 3px; }

De linjene som er interessante her, er de som er kommentert ut (fet skrift). Her fjernes kommenteringen (/* */), og vi kommenterer samtidig ut den samsvarende linjen under.

/* Expand the anchor to include the + or > */
.filetree span { background-position: left center; background-repeat: no-repeat; vertical-align: middle; display: block } */
/*.treeview span { background-position: left center; background-repeat: no-repeat; vertical-align: middle; padding: 0 0 0 20px; display: block }*/
.filetree span.custom { padding-left: 3px; }
.filetree span.custom  { display: inline; }
.filetree span.file  { background-image: url(images/listItemArrow.png); }
.filetree li span.folder  { background-image: url(images/listCollapsed.png) }
.filetree li.collapsable > span.folder  { background-image: url(images/listExpanded.png) }

/* Expand the anchor to include the + or > */
.treeview span a { color: #787878; display: block; width: 100%; padding: 3px 0 3px 20px }
/*.treeview span a { color: #787878; display: block; width: 100%; padding: 3px 0 3px 0 }*/
.treeview li.expandable span.toplevel { /*background-color: #cfdeed;*/ }
.treeview li span:hover { background-color: #e0e0e0; }
.treeview li.collapsable span.toplevel { background-color: #ff8557; }
.treeview li.collapsable span.toplevel a { color: white; }
.treeview span.toplevel { border-bottom: dotted 1px #ccc; }
.treeview span.toplevel img { padding-right: 3px; }

Nå kan du lagre, og vips skal ikonene være klikkbare. Om du ønsker å ta bort den stiplede linjen under kategoriene, kan du bytte ut

.treeview span.toplevel { border-bottom: dotted 1px #ccc; }

fra den neste nederste linjen, med

.treeview span.toplevel { border-bottom: 0px; }

Jeg er ikke ansvarlig for tap, verken økonomiske eller av data, som følge av at du benytter deg av det som står på denne siden. Om du ønsker hjelp er det bare å ta kontakt.

Klikkbare knapper i menyen for produktkategorier

Tidspunkt

Kategori

Stikkord