Support » Thema en CSS/opmaak » Stylen van Archief widget

  • Hallo,

    Ik heb een Archief widget (Moo Collapsing Archives) die ik wil stylen als mijn verticaal menu.

    Nou ben ik daar al goed mee opweg, maar ik zit een beetje vast.
    Ik krijg de jaartallen en maanden niet in een rechthoekig blok/item zoals bij het vmenu. Bij de posts onder de maanden lukt het wel.

    Zie hier het vmenu
    En hier de widget.

    Graag jullie hulp!

1 reactie aan het bekijken (van in totaal 1)
  • Thread starter ProCessor

    (@processor)

    De CSS opties die de plugin zelf mee geeft zijn:

    Default

    #sidebar span.collapsing.archives {
            border:0;
            padding:0;
            margin:0;
            cursor:pointer;
    } 
    
    #sidebar span.monthCount, span.yearCount {text-decoration:none; color:#CCC}
    #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;}";

    Block

    #sidebar li.collapsing.archives.item a {
                display:block;
                text-decoration:none;
                margin:0;
                padding:0;
                }
    #sidebar li.collapsing.archives a:hover {
                background:#CCC;
                text-decoration:none;
              }
    #sidebar span.collapsing.archives.item {
            border:0;
            padding:0;
            margin:0;
            cursor:pointer;
    }
    
    #sidebar li.collapsing.archives a.self {background:#CCC;
                           font-weight:bold}
    #sidebar ul.collapsing.archives.list ul.collapsing.archives.list:before,
      #sidebar ul.collapsing.archives.list li.collapsing.archives:before,
      #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.collapsItem {
          }
    #sidebar ul.collapsing.archives.list li.collapsing.archives .sym {
       font-size:1.2em;
       font-family:Monaco, 'Andale Mono', 'FreeMono', 'Courier new', 'Courier', monospace;
        float:left;
        padding-right:5px;
        cursor:pointer;
    }

    De custom waar ik mee bezig ben

    .art-sidebar1 li.collapsing.archives.item a {
                display:block;
                width: 250px;
              	min-height: 12px;
                text-decoration:none;
                margin-top:-33px;
                padding: 7px;
    			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;
    			text-align: left;
    			color: #FFF;
                }
    .art-sidebar1 li.collapsing.archives a:hover {
    	width: 250px;
        min-height: 12px;
    	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;
       color: #000000;
              }
    
    .art-sidebar1 span.monthCount, span.yearCount {
    	text-decoration:none;
    	background: #000;
    	}
    
    .art-sidebar1 span.collapsing.archives.item {
    }
    
    .art-sidebar1 li.collapsing.archives a.self {}
    .art-sidebar1 ul.collapsing.archives.list ul.collapsing.archives.list:before,
      .art-sidebar1 ul.collapsing.archives.list li.collapsing.archives:before,
      .art-sidebar1 ul.collapsing.archives.list li.collapsing.archives.item:before {
            content:'';
      }
    .art-sidebar1 ul.collapsing.archives.list li.collapsing.archives.item {
    	padding: 7px;
    	color: #FFFFFF;
    	}
    .art-sidebar1 ul.collapsing.archives.list li.collapsItem {
    	background: #000;
          }
    .art-sidebar1 ul.collapsing.archives.list li.collapsing.archives .sym {
       font-size:1.2em;
       font-family:Monaco, 'Andale Mono', 'FreeMono', 'Courier new', 'Courier', monospace;
        float:left;
        padding-right:5px;
        cursor:pointer;
    }

    Heb al verschillende dingen uitgeprobeerd maar krijg de jaartallen en maanden niet gestyled…

1 reactie aan het bekijken (van in totaal 1)
  • Het onderwerp ‘Stylen van Archief widget’ is gesloten voor nieuwe reacties.