Snelle manier om archief (widget) te stylen als horizontal menu?

Opgelost ProCessor
(@processor)

11 jaren, 2 maanden geleden

Hallo,

Is er een snelle/handige manier om een archief widget dezelfde styling te geven als een horizontaal menu? Ik heb al verschillende dingen geprobeerd, maar het werkt niet echt.

Alle hulp is welkom 🙂
Alvast bedankt!

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)

Moderator

Richard van Denderen

(@rdd)

11 jaren, 2 maanden geleden

Wat heb je zoal al geprobeerd? Dit zou met CSS gewoon mogelijk moeten zijn.

Thread starter

ProCessor

(@processor)

11 jaren, 2 maanden geleden

Ik heb o.a. de CSS van het hmenu in het customCSS veld van de plugin (Moo collapsing archives) verwerkt. Echter zonder resultaat.

Dit is standaard de CSS-opmaak van de plugin:

#sidebar span.collapsing.archives {
        border:0;
        padding:0;
        margin:0;
        cursor:pointer;
} 

#sidebar span.monthCount, span.yearCount {text-decoration:none; color:#333}
#sidebar li.collapsing.archives a.self {font-weight:bold}
#sidebar ul.collapsing.archives.list ul.collapsing.archives.list:before {content:'';}
#sidebar ul.collapsing.archives.list li.collapsing.archives.item:before {content:'';}
#sidebar ul.collapsing.archives.list li.collapsing.archives.item {list-style-type:none}
#sidebar ul.collapsing.archives.list li {
       margin:0 0 0 .8em;
       text-indent:-1em}
#sidebar ul.collapsing.archives.list li.collapsing.archives.item:before {content: '0BB 0A0' !important;}
#sidebar ul.collapsing.archives.list li.collapsing.archives .sym {
   font-size:1.2em;
   font-family:Monaco, 'Andale Mono', 'FreeMono', 'Courier new', 'Courier', monospace;
   cursor:pointer;
    padding-right:5px;}

Dit is de CSS van mijn hmenu:

ul.art-hmenu>li>a
{
   background: #FECF00;
   background: linear-gradient(top, rgba(255, 227, 102, 0.8) 0, rgba(255, 208, 0, 0.8) 54%, rgba(168, 137, 0, 0.8) 100%) no-repeat;
   background: -webkit-linear-gradient(top, rgba(255, 227, 102, 0.8) 0, rgba(255, 208, 0, 0.8) 54%, rgba(168, 137, 0, 0.8) 100%) no-repeat;
   background: -moz-linear-gradient(top, rgba(255, 227, 102, 0.8) 0, rgba(255, 208, 0, 0.8) 54%, rgba(168, 137, 0, 0.8) 100%) no-repeat;
   background: -o-linear-gradient(top, rgba(255, 227, 102, 0.8) 0, rgba(255, 208, 0, 0.8) 54%, rgba(168, 137, 0, 0.8) 100%) no-repeat;
   background: -ms-linear-gradient(top, rgba(255, 227, 102, 0.8) 0, rgba(255, 208, 0, 0.8) 54%, rgba(168, 137, 0, 0.8) 100%) no-repeat;
   background: linear-gradient(top, rgba(255, 227, 102, 0.8) 0, rgba(255, 208, 0, 0.8) 54%, rgba(168, 137, 0, 0.8) 100%) no-repeat;
   -svg-background: linear-gradient(top, rgba(255, 227, 102, 0.8) 0, rgba(255, 208, 0, 0.8) 54%, rgba(168, 137, 0, 0.8) 100%) no-repeat;
   padding:0 31px;
   margin:0 auto;
   position: relative;
   display: block;
   height: 51px;
   cursor: pointer;
   text-decoration: none;
   color: #222E39;
   line-height: 51px;
   text-align: center;
}

.art-hmenu a,
.art-hmenu a:link,
.art-hmenu a:visited,
.art-hmenu a.active,
.art-hmenu a:hover
{
   font-size: 12px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: bold;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
   font-variant: normal;
   text-align: left;
}

ul.art-hmenu>li>a.active
{
   background: #000000;
   background: linear-gradient(top, rgba(112, 112, 112, 0.8) 0, rgba(10, 10, 10, 0.8) 100%) no-repeat;
   background: -webkit-linear-gradient(top, rgba(112, 112, 112, 0.8) 0, rgba(10, 10, 10, 0.8) 100%) no-repeat;
   background: -moz-linear-gradient(top, rgba(112, 112, 112, 0.8) 0, rgba(10, 10, 10, 0.8) 100%) no-repeat;
   background: -o-linear-gradient(top, rgba(112, 112, 112, 0.8) 0, rgba(10, 10, 10, 0.8) 100%) no-repeat;
   background: -ms-linear-gradient(top, rgba(112, 112, 112, 0.8) 0, rgba(10, 10, 10, 0.8) 100%) no-repeat;
   background: linear-gradient(top, rgba(112, 112, 112, 0.8) 0, rgba(10, 10, 10, 0.8) 100%) no-repeat;
   -svg-background: linear-gradient(top, rgba(112, 112, 112, 0.8) 0, rgba(10, 10, 10, 0.8) 100%) no-repeat;
   padding:0 31px;
   margin:0 auto;
   color: #FFFFFF;
   text-decoration: none;
}

ul.art-hmenu>li>a:visited,
ul.art-hmenu>li>a:hover,
ul.art-hmenu>li:hover>a {
   text-decoration: none;
}

ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
   background: #858585;
   background: linear-gradient(top, #B5B5B5 0, #808080 58%, #595959 100%) no-repeat;
   background: -webkit-linear-gradient(top, #B5B5B5 0, #808080 58%, #595959 100%) no-repeat;
   background: -moz-linear-gradient(top, #B5B5B5 0, #808080 58%, #595959 100%) no-repeat;
   background: -o-linear-gradient(top, #B5B5B5 0, #808080 58%, #595959 100%) no-repeat;
   background: -ms-linear-gradient(top, #B5B5B5 0, #808080 58%, #595959 100%) no-repeat;
   background: linear-gradient(top, #B5B5B5 0, #808080 58%, #595959 100%) no-repeat;
   -svg-background: linear-gradient(top, #B5B5B5 0, #808080 58%, #595959 100%) no-repeat;
   padding:0 31px;
   margin:0 auto;
}

Ik heb vanalles geprobeerd om dit erin te krijgen… maar zonder succes helaas.

Thread starter

ProCessor

(@processor)

11 jaren, 2 maanden geleden

Uhm foutje zie ik… ik bedoel natuurlijk mijn vmenu:

.art-vmenublock
{
   width: 250px;
   padding:7px;
   margin:10px;
}
div.art-vmenublock img
{
   margin: 0;
}

.art-vmenublockcontent
{
   margin:0 auto;
}

ul.art-vmenu, ul.art-vmenu ul
{
   list-style: none;
   display: block;
}

ul.art-vmenu, ul.art-vmenu li
{
   display: block;
   margin: 0;
   padding: 0;
   width: auto;
   line-height: 0;
}

ul.art-vmenu
{
   margin-top: 0;
   margin-bottom: 0;
}

ul.art-vmenu ul
{
   display: none;
   margin: 0;
   padding: 0;
   position: relative;
}

ul.art-vmenu ul.active
{
   display: block;
}

ul.art-vmenu>li>a
{
   background: #000000;
   background: linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(0, 0, 0, 0.8) 100%) no-repeat;
   background: -webkit-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(0, 0, 0, 0.8) 100%) no-repeat;
   background: -moz-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(0, 0, 0, 0.8) 100%) no-repeat;
   background: -o-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(0, 0, 0, 0.8) 100%) no-repeat;
   background: -ms-linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(0, 0, 0, 0.8) 100%) no-repeat;
   background: linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(0, 0, 0, 0.8) 100%) no-repeat;
   -svg-background: linear-gradient(top, rgba(89, 89, 89, 0.8) 0, rgba(0, 0, 0, 0.8) 100%) no-repeat;
   border:1px solid transparent;
   padding:0 10px;
   margin:0 auto;
   color: #FFFFFF;
   min-height: 32px;
   line-height: 32px;
}
ul.art-vmenu a
{
   display: block;
   cursor: pointer;
   z-index: 1;
   font-size: 12px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   position:relative;
}

ul.art-vmenu li{
   position:relative;
}

ul.art-vmenu>li
{
   margin-top: 4px;
}
ul.art-vmenu>li>ul
{
   padding: 0;
   margin-top: 8px;
   margin-bottom: 8px;
}
ul.art-vmenu>li:first-child
{
   margin-top:0;
}

ul.art-vmenu>li>a:hover, ul.art-vmenu>li>a.active:hover
{
   background: #FECF00;
   background: linear-gradient(top, rgba(255, 236, 153, 0.6) 0, rgba(255, 208, 0, 0.6) 50%, rgba(102, 83, 0, 0.6) 100%) no-repeat;
   background: -webkit-linear-gradient(top, rgba(255, 236, 153, 0.6) 0, rgba(255, 208, 0, 0.6) 50%, rgba(102, 83, 0, 0.6) 100%) no-repeat;
   background: -moz-linear-gradient(top, rgba(255, 236, 153, 0.6) 0, rgba(255, 208, 0, 0.6) 50%, rgba(102, 83, 0, 0.6) 100%) no-repeat;
   background: -o-linear-gradient(top, rgba(255, 236, 153, 0.6) 0, rgba(255, 208, 0, 0.6) 50%, rgba(102, 83, 0, 0.6) 100%) no-repeat;
   background: -ms-linear-gradient(top, rgba(255, 236, 153, 0.6) 0, rgba(255, 208, 0, 0.6) 50%, rgba(102, 83, 0, 0.6) 100%) no-repeat;
   background: linear-gradient(top, rgba(255, 236, 153, 0.6) 0, rgba(255, 208, 0, 0.6) 50%, rgba(102, 83, 0, 0.6) 100%) no-repeat;
   -svg-background: linear-gradient(top, rgba(255, 236, 153, 0.6) 0, rgba(255, 208, 0, 0.6) 50%, rgba(102, 83, 0, 0.6) 100%) no-repeat;
   border:1px solid transparent;
   padding:0 10px;
   margin:0 auto;
}

ul.art-vmenu a:hover, ul.art-vmenu a.active:hover
{
   color: #204256;
}

ul.art-vmenu>li>a.active:hover>span.border-top, ul.art-vmenu>li>a.active:hover>span.border-bottom
{
   background-color: transparent;
}

ul.art-vmenu>li>a.active
{
   background: #FECF00;
   background: linear-gradient(top, #FFE366 0, #FFD000 54%, #A88900 100%) no-repeat;
   background: -webkit-linear-gradient(top, #FFE366 0, #FFD000 54%, #A88900 100%) no-repeat;
   background: -moz-linear-gradient(top, #FFE366 0, #FFD000 54%, #A88900 100%) no-repeat;
   background: -o-linear-gradient(top, #FFE366 0, #FFD000 54%, #A88900 100%) no-repeat;
   background: -ms-linear-gradient(top, #FFE366 0, #FFD000 54%, #A88900 100%) no-repeat;
   background: linear-gradient(top, #FFE366 0, #FFD000 54%, #A88900 100%) no-repeat;
   -svg-background: linear-gradient(top, #FFE366 0, #FFD000 54%, #A88900 100%) no-repeat;
   border:1px solid transparent;
   padding:0 10px;
   margin:0 auto;
   color: #7D2B03;
}

ul.art-vmenu>li>ul:before
{
   margin:0 auto;
   display: block;
   position: absolute;
   content: ' ';
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

ul.art-vmenu li li a
{
   background: #000000;
   background: linear-gradient(top, rgba(77, 77, 77, 0.8) 0, rgba(0, 0, 0, 0.8) 100%) no-repeat;
   background: -webkit-linear-gradient(top, rgba(77, 77, 77, 0.8) 0, rgba(0, 0, 0, 0.8) 100%) no-repeat;
   background: -moz-linear-gradient(top, rgba(77, 77, 77, 0.8) 0, rgba(0, 0, 0, 0.8) 100%) no-repeat;
   background: -o-linear-gradient(top, rgba(77, 77, 77, 0.8) 0, rgba(0, 0, 0, 0.8) 100%) no-repeat;
   background: -ms-linear-gradient(top, rgba(77, 77, 77, 0.8) 0, rgba(0, 0, 0, 0.8) 100%) no-repeat;
   background: linear-gradient(top, rgba(77, 77, 77, 0.8) 0, rgba(0, 0, 0, 0.8) 100%) no-repeat;
   -svg-background: linear-gradient(top, rgba(77, 77, 77, 0.8) 0, rgba(0, 0, 0, 0.8) 100%) no-repeat;
   margin:0 auto;
   position: relative;
}
ul.art-vmenu ul li
{
   margin: 0;
   padding: 0;
}
ul.art-vmenu li li{
   position: relative;
   margin-top: 4px;
}

ul.art-vmenu ul a
{
   display: block;
   position: relative;
   min-height: 30px;
   overflow: visible;
   padding: 0;
   padding-left: 15px;
   padding-right: 15px;
   z-index: 0;
   line-height: 30px;
   color: #FFFFFF;
   font-size: 12px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   margin-left: 0;
   margin-right: 0;
}

ul.art-vmenu ul a:visited, ul.art-vmenu ul a.active:hover, ul.art-vmenu ul a:hover, ul.art-vmenu ul a.active
{
   line-height: 30px;
   color: #FFFFFF;
   font-size: 12px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   margin-left: 0;
   margin-right: 0;
}

ul.art-vmenu ul ul a
{
   padding-left: 30px;
}
ul.art-vmenu ul ul ul a
{
   padding-left: 45px;
}
ul.art-vmenu ul ul ul ul a
{
   padding-left: 60px;
}
ul.art-vmenu ul ul ul ul ul a
{
   padding-left: 75px;
}

ul.art-vmenu ul>li>a:hover, ul.art-vmenu ul>li>a.active:hover
{
   background: #FECF00;
   background: linear-gradient(top, rgba(255, 219, 61, 0.6) 0, rgba(255, 208, 0, 0.6) 48%, rgba(189, 154, 0, 0.6) 100%) no-repeat;
   background: -webkit-linear-gradient(top, rgba(255, 219, 61, 0.6) 0, rgba(255, 208, 0, 0.6) 48%, rgba(189, 154, 0, 0.6) 100%) no-repeat;
   background: -moz-linear-gradient(top, rgba(255, 219, 61, 0.6) 0, rgba(255, 208, 0, 0.6) 48%, rgba(189, 154, 0, 0.6) 100%) no-repeat;
   background: -o-linear-gradient(top, rgba(255, 219, 61, 0.6) 0, rgba(255, 208, 0, 0.6) 48%, rgba(189, 154, 0, 0.6) 100%) no-repeat;
   background: -ms-linear-gradient(top, rgba(255, 219, 61, 0.6) 0, rgba(255, 208, 0, 0.6) 48%, rgba(189, 154, 0, 0.6) 100%) no-repeat;
   background: linear-gradient(top, rgba(255, 219, 61, 0.6) 0, rgba(255, 208, 0, 0.6) 48%, rgba(189, 154, 0, 0.6) 100%) no-repeat;
   -svg-background: linear-gradient(top, rgba(255, 219, 61, 0.6) 0, rgba(255, 208, 0, 0.6) 48%, rgba(189, 154, 0, 0.6) 100%) no-repeat;
   margin:0 auto;
}
ul.art-vmenu ul li a:hover, ul.art-vmenu ul li a.active:hover
{
   color: #306482;
}

ul.art-vmenu ul a:hover:after
{
   background-position: center ;
}
ul.art-vmenu ul a.active:hover:after
{
   background-position: center ;
}
ul.art-vmenu ul a.active:after
{
   background-position: bottom ;
}

ul.art-vmenu ul>li>a.active
{
   background: #FECF00;
   background: linear-gradient(top, #FFDB3D 0, #FFD000 48%, #BD9A00 100%) no-repeat;
   background: -webkit-linear-gradient(top, #FFDB3D 0, #FFD000 48%, #BD9A00 100%) no-repeat;
   background: -moz-linear-gradient(top, #FFDB3D 0, #FFD000 48%, #BD9A00 100%) no-repeat;
   background: -o-linear-gradient(top, #FFDB3D 0, #FFD000 48%, #BD9A00 100%) no-repeat;
   background: -ms-linear-gradient(top, #FFDB3D 0, #FFD000 48%, #BD9A00 100%) no-repeat;
   background: linear-gradient(top, #FFDB3D 0, #FFD000 48%, #BD9A00 100%) no-repeat;
   -svg-background: linear-gradient(top, #FFDB3D 0, #FFD000 48%, #BD9A00 100%) no-repeat;
   margin:0 auto;
}
ul.art-vmenu ul a.active, ul.art-vmenu ul a:hover, ul.art-vmenu ul a.active:hover
{
   color: #000000;
}

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)

Het onderwerp ‘Snelle manier om archief (widget) te stylen als horizontal menu?’ is gesloten voor nieuwe reacties.

Snelle manier om archief (widget) te stylen als horizontal menu?

Onderwerptags

Weergaven