Změna velikosti písma

Drobečková navigace

CSS blog > Widget - datum ala kalendář

Widget - datum ala kalendář



Příklad

Použití

Widget se dá použít pro všechny weby, zejména pro nové redesigny, kdy podoba widgetu může trochu oživit stránky. Barevnost kalendáře se dá přizpůsobit barvám webu, červené datum tedy není fixní:) Velikost widgetu a fonty jsou jen pro příklad tohoto webu. Ve finále standardně bude menší. Platí jako vždy, je potřeba si další parametry widgetu dostylovat na míru webu (obtékání, barvy, zarovnání apod.)

CSS

.module-widget-calendar {
width: 40%;
padding: 1em;
border: 1px solid #ffffff;
}
.module-widget-body {
margin: 0.5em 0;
}
.module-widget-body .widget-title {
vertical-align: middle;
display: inline-block;
}
.module-widget-body .widget-calendarDate {
display: inline-block;
vertical-align: middle;
width: 50px;
height: 45px;
background-color: #DDD;
text-align: center;
-webkit-box-shadow: 1px 1px 8px -2px #000000;
-moz-box-shadow: 1px 1px 8px -2px #000000;
box-shadow: 1px 1px 8px -2px #000000;
margin-right: 1em;
color: black;
}
.module-widget-body .widget-calendarDate span{
display: block;
background-color: red;
font-size: 90%;
}

HTML

<div class="module-widget-calendar">
<div class="ipo-widget" data-widget="article" data-widget-subtype="nearest" data-widget-source="2874125" data-widget-count="5">
<h2>{{name}}</h2>
{{#content}} {{#data}}
<div class="module-widget-body"><div class="widget-calendarDate"><span>{{#due}}%b{{/due}}</span>{{#due}}%d{{/due}}</div>
<div class="widget-title"><a href="http://{{link}}">{{title}}</div>
</div>
{{/data}} {{/content}}
{{^content}} Nic tu není. {{/content}}
</div>
</div>

Kalendář akcí

Po Út St Čt So Ne
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2