<div class=”evenementenlijst”>
[events_list_grouped mode=”monthly” category=38 date_format=”F Y”]<div class=”box”>
<div class=”datumvoluit”>#l, #_{j} #_{M}
#H:#i -#@H:#@i</div>
<div class=”eventblokjeonder”>#_LOCATIONLINK
#_CATEGORYNAME: #_EVENTLINK</div>
</div>
[/events_list_grouped]</div> [/code]CSS:
[code] .box { border:3px solid green;-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 10px 0px;
text-align: left; color:#000;
}
.box .datumvoluit {color:#fff;background-color:green; padding-left:10px!important }
.box .eventblokjeonder { padding-left:10px!important; color:green; font-weight:700 }
.box .eventblokjeonder {color:blue!important}
[/code]
[code] [events_list_grouped mode=”monthly” date_format=”F Y”]
<div id=”alles”>
<div id=”links”>
<div class=”datebox”>
<div class=”datumvoluit”>#l</div>
<div class=”day”>#_{d}</div>
</div>
</div>
<div id=”rechts”>
<h1>#_EVENTLINK</h1>
#_LOCATIONNAME | #H:#i-#@H:#@i | #_EVENTPRICERANGE |<a href=”#_EVENTURL”> aanmelden</a>
<a href=”#_EVENTGCALURL”>Overnemen in Google Agenda</a> | <a href=”#_EVENTICALURL”>Opslaan in ical</a></div>
</div>
<hr />
<div style=”clear: both;”></div>
</div>
[/events_list_grouped] [/code]CSS:
[code] /* databoxen op de overzichtspagina’s*/.datebox {
width: 75px;
height: 60px;
/*background: purple;*/border:2px solid black;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.datebox .datumvoluit {text-align: center;color:#fff;background-color:purple; font-size:13px }
.datebox .day {
margin: 0 10px;
padding-top: 5px;
background: #fff;
font-size: 22px;
font-weight: 700;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;color:#000;
}
<h1>Wat is er te doen?</h1>
<div class=”evenementenlijst”>
[events_list date_format=”F Y” limit=”3″]
<div class=”box” style=”border: 3px solid #_CATEGORYCOLOR;”>
<div class=”datumvoluit” style=”background-color: #_categorycolor;”>#l, #_{j} #_{M}: #H:#i -#@H:#@i</div>
<div class=”eventblokjeonder”>
<div style=”float: right;”>#_CATEGORYIMAGE</div>
#_LOCATIONNAME
<span style=”color: #_categorycolor;”> #_CATEGORYNAME</span>: #_EVENTLINK</div>
</div>
[/events_list]</div> [/code] [code] /* layout lijst in zijbalk */.evenementenlijst h2{color:#e09900; text-align:center}
.evenementenlijst p {padding-bottom:0px}
.evenementenlijst a {color:blue}
.box { border:3px solid green;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 0px 0px 0px 0px;
text-align: left;
}
.box .datumvoluit {color:#fff;background-color:green; padding-left:10px!important }
.box .eventblokjeonder { padding-left:10px!important; font-weight:700 }
[/code]
Vergelijkbaar:
- *Events manager pro
- *Events manager
Prettige kalender, alles goed vertaald