WordPress Calendar Widget Style

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/i

While developing a WordPress theme a lot of time you forget to style WordPress calendar widget. You can find many premium themes which do not care about WordPress calendar widget and i know i have also done a lot in past. Although it’s a lesser used functionlity but it is unwise to ignore if you are developing a premium WordPress theme.

Style 0

wordpress-calendar-widget-style0

#wp-calendar {
width:100%;
font-size:12px;
font-weight:300;
border-collapse:separate;
border-spacing:8px;
margin-left:-2px;
}

#wp-calendar
caption {
display:none;
}

#wp-calendar tbody
td {
margin-bottom:10px;
text-align:center;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
border:1px solid #f4f4f4;
padding:6px;
}

#wp-calendar tbody td:hover {
border-color:#e2e2e2;
}

#wp-calendar tbody
td.pad {
border:0;
}

#wp-calendar tbody
td#today {
color:#47C2DC;
border-color:#47C2DC;
}

#wp-calendar tfoot td#prev a,#wp-calendar tfoot td#next
a {
color:#888;
font-size:12px;
font-weight:400;
position:relative;
text-transform:uppercase;
bottom:-9px;
margin-bottom:1px;
}

#wp-calendar tfoot
td#prev {
text-align:left;
}

#wp-calendar tfoot
td#next {
text-align:right;
}

#wp-calendar thead
th {
font-size:13px;
font-weight:400;
color:#888;
text-align:center;
padding-bottom:10px;
}

#wp-calendar tbody td
a,#wp-calendar tfoot td#prev a:hover,#wp-calendar tfoot td#next a:hover {
color:#47C2DC;
}

 Style 1

wordpress-calendar-widget-style1

.widget_calendar {float: left;}
#wp-calendar {width: 100%; }
#wp-calendar caption { text-align: right; color: #333; font-size: 12px; margin-top: 10px; margin-bottom: 15px; }
#wp-calendar thead { font-size: 10px; }
#wp-calendar thead th { padding-bottom: 10px; }
#wp-calendar tbody { color: #aaa; }
#wp-calendar tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding:8px;}
#wp-calendar tbody td:hover { background: #fff; }
#wp-calendar tbody .pad { background: none; }
#wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; }
#wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }

 Style 2

wordpress-calendar-widget-style2

#wp-calendar, #wp-calendar th, #wp-calendar td {
text-align: center;
background: none;
border: none;
}
#wp-calendar {
background: none;
empty-cells: hide;
width: 260px;
font: normal 11px / 200% Verdana, Arial, Helvetica, sans-serif;
}
#wp-calendar th {
font-style: normal;
font-weight: bold;
text-transform: capitalize;
border-bottom: 1px solid #666;
}
#wp-calendar td {
text-align: center;
background: transparent url(images/entry-meta.png) repeat-x top left;
padding: 0px;
border-bottom: 1px solid #ccc;
}
#wp-calendar td:hover {
background-color: red;
}
#wp-calendar a {
text-decoration: none;
display: block;
color: #fff;
}
#wp-calendar a:hover {
background: #c5d1d9;
color: #666;
}
#wp-calendar caption {
font-weight: bold;
text-align: center;
}
#wp-calendar #today {
rgba(255, 255, 255, 0.27);
}
#wp-calendar caption {
text-align: center;
width: 100%;
}
#wp-calendar .pad {
background-color: #fff;
}
#wp-calendar #next a {
padding-right: 10px;
text-align: right;
background: #f0f3f5;
color: #666;
}
#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
rgba(196, 196, 196, 0.67);
color: #666;
}
#wp-calendar #prev a:hover, #wp-calendar #next a:hover {
color: #fff;
}
#wp-calendar .pad, #wp-calendar .pad:hover {
background: rgba(255, 255, 255, 0);
}

 Style 3

wordpress-calendar-widget-style3

#wp-calendar { width: 100%; font-size: 11px; }
#wp-calendar thead th { background: #f5f5f5; border: 1px solid #ddd; border-top: none; font-size: 11px; }
#wp-calendar tbody td { text-align: center; border: 1px solid #ddd; line-height: 2.5em; transition: background 0.15s ease; -webkit-transition: background 0.15s ease; -o-transition: background 0.15s ease; -moz-transition: background 0.15s ease; }
#wp-calendar tbody td:hover { background: #f1f1f1; color: #333; }
#wp-calendar tbody td a { display: block; text-decoration: none; background: #f1f1f1; color: #333; }
#wp-calendar tbody td:hover a { background: #4d4d4d; color: #fff; }
#wp-calendar tfoot td { padding-top: 1px; padding: 4px; }
#wp-calendar caption { cursor: pointer; font-size: 13px; text-transform: uppercase; margin: 0; padding: 12px; outline: 0 none !important; background: #3b86b0; color: #fff; }
#wp-calendar tbody a { display: block; text-decoration: underline; }
#wp-calendar th { text-align: center; border: 1px solid transparent; border-top: none; padding: 7px 0; color: #a7a7a7; }
#footer #wp-calendar thead th { background: #222 }
#footer #wp-calendar tbody td { border-color: #222 }

 Style 4

wordpress-calendar-widget-style4

#calendar_wrap {
	border: 1px solid #DDD;
	border-radius: 4px;
	}

.widget_calendar #wp-calendar {
	width: 100%;
	}

.widget_calendar caption {
	font-size: 18px;
	font-style: italic;
	color: #777;
	background: #F4F4F4;
	padding: 5px 0 8px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #DDD;
	}

.widget_calendar th,
.widget_calendar td {
	text-align: center;
	}

.widget_calendar #today {
	background: #F4F4F4;
	border-radius: 4px;
	}

.widget_calendar #prev,
.widget_calendar #next {
	padding: 5px 0;
	}

 Style 5

wordpress-calendar-widget-style5

#wp-calendar { border-collapse: collapse; border:1px solid #ddd; width:100%; border-top:none; }
#wp-calendar td, #wp-calendar th { text-align:center; }
#wp-calendar caption { color: #fff; padding: 0; line-height: 39px; }
#wp-calendar thead, #wp-calendar tfoot { line-height:33px; background:#eee; }
#wp-calendar tbody { line-height:33px; }
#wp-calendar #prev, #wp-calendar #next { padding:0 10px; background:#eee; }
#wp-calendar #prev { text-align:left; }
#wp-calendar #next { text-align:right; }

 Style 6

wordpress-calendar-widget

#wp-calendar {
width:100%;
}

#wp-calendar caption {
color:#eee;
font-size:13px;
margin-top:0;
background:#111;
text-transform:uppercase;
padding:8px 0;
}

#wp-calendar thead {
font-size:10px;
background:#333;
color:#fff;
}

#wp-calendar thead th {
padding:4px 10px;
}

#wp-calendar tbody {
color:#aaa;
}

#wp-calendar tbody td {
background:#222;
color:#ccc;
text-align:center;
font-size:13px;
padding:2.5%;
}

#wp-calendar tbody td a {
color:#ccc;
text-decoration:underline!important;
}

#wp-calendar tbody td.pad {
background:#111;
}

#wp-calendar tbody .pad {
background:none;
}

#wp-calendar #today {
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,.3);
background:0;
}

#wp-calendar tfoot #next {
font-size:10px;
text-transform:uppercase;
text-align:right;
}

#wp-calendar tfoot #prev {
font-size:10px;
text-transform:uppercase;
padding-top:5px;
}

 Style 7

wordpress-calendar-widget-style6

.widget_calendar {float: left;}
#wp-calendar {width: 100%; }
#wp-calendar caption { text-align: right; color: #333; font-size: 12px; margin-top: 10px; margin-bottom: 15px; }
#wp-calendar thead { font-size: 10px; }
#wp-calendar thead th { padding-bottom: 10px; }
#wp-calendar tbody { color: #aaa; }
#wp-calendar tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding:8px;}
#wp-calendar tbody td:hover { background: #fff; }
#wp-calendar tbody .pad { background: none; }
#wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; }
#wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; }

A WordPress calendar comes with core wordpress classes which is pretty simple to customize. You can find a set of WordPress calendar widget core classes to customize it by your own.

.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

 

source: small envelope, wp explorer

 

Banyak Tau Tapi Gak Tau Banyak

Terakhir diperbaharui: Kamis, 25 Agustus 2016 pukul 15:12
Tautan: http://darto.id/j

Semakin hari teknologi semakin canggih dan semakin mudah mencari informasi sehingga bermunculan sosok mandiri-mandiri manusia yang mencari prestise dengan menjadi serba tahu dengan segala media informasi yang bertebaran di dunia maya.

Dan sangat mirisnya adalah seseorang dengan mudah mengatakan kepada orang lain perkataan yang kasar dengan memberikan gelar tidak up to date dan bodoh akan dunia luar padahal dunia informasi bertebaran dimana-mana dan mudah didapatkan dengan hanya satu klik saja.

Yang lebih aneh lagi, justru orang yang sering mencari-cari informasi di dunia maya ini ternyata adalah orang yang memiliki kepercayaan bahwa ada kitab suci yang lebih agung untuk di baca atau dilantunkan, Al Qur’an. Dan yang lebih aneh lagi justru orang ini menyebarkan paham ini tetapi dia sendiri tidak mengamalkannya dan lebih asik membaca informasi di dunia maya yang kadang di komentarinya bahwa informasi-informasi yang ada di dunia maya sengaja disebarkan untuk mengelabui umat Islam. Anehnya terlalu extreme. Dan yang bikin geleng kepala ketika orang ini tersudutkan dia membuat pernyataan dusta, “emangnya kalau gue baca Al Qur’an ngomong-ngomong sama lo”. Wallahu’alam.

Orang sekarang lebih prestise akan banyak hal yang dia ketahui dibandingkan dengan mengetahui sesuatu lebih banyak. Banyak tahu tapi tidak tahu banyak. Padahal akan sungguh bermanfaat kalau seandainya dia mengetahui sesuatu tetapi memiliki pengetahuan banyak akan sesuatu itu. Ini yang disebut skill.

Sebetulnya dunia informasi mungkin terlihat begitu vulgar, seolah-olah semuanya ada di pelupuk mata saat kita melihat monitor tentunya :D. Sehingga sesuatu itu atau sebuah informasi itu hanya dengan cukup dengan mencari di mesin pencari. Padahal ini hanya permainan dunia bisnis saja yang orang yang banyak tahu ini semakin tergoda untuk terus memakai atau terus mengunjungi sumber informasi ini sehingga dia terbuaikan akan aktifitasnya dan semakin dibuat untuk ketagihan untuk memakaianya, yang sesungguhnya telah membuat bodoh dirinya sendiri karena tidak ada ilmu yang banyak dia ketahui di kepalanya dan semakin membuat dia malas untuk melakukan sesuatu karena yang sebenarnya dia tidak bisa melakukannya dikarenakan tidak memiliki sebuah ide dikarenakan terlalu banyak informasi yang dia baca sebelumnya.

Berbeda halnya jika dia memiliki pengetahuan akan sesuatu tetapi dia memfokuskan lebih dalam lagi mengenai pengetahuan tersebut.

Yang perlu dipertanyakan adalah, jika memang media atau seseorang membagikan sebuah informasi atau ilmu, lantas kenapa bermunculan adanya para ahli yang menguasai atau yang memiliki pengetahuan justru hanya di bidang-bidang tertentu saja? Dan mengapa perusahaan merekrut karyawan banyak yang menguasai dibidangnya masing-masing? Pernahkah terlintas dipikiran anda bahwa seorang manager atau seorang pengusaha akan menarik anda atau memperkerjakan anda jika anda banyak tahu tetapi ketika di test untuk mengerjakan sesuatu anda tidak tahu banyak? ini yang namanya no skill atau no talent.

Informasi adalah sesuatu yang sangat berharga yang sangat bernilai sehingga tidak akan mudah disebarkan didunia maya tanpa ada tujuan materi atau prestise.

Mulailah hidup anda dengan sebuah keahlian, banyak mengetahui atau fokus di satu bidang. Ketika anda mencoba untuk banyak tahu segala hal maka disitulah letak kesalahan pertama anda. Dan orang yang menguasai sesuatu hal akan dengan tidak mudah menganggap orang lain itu bodoh. Karena orang yang menguasai sesuatu hal itu akan lebih menyadarkan dirinya bahwa ternyata banyak hal yang dia tidak ketahui karena dia hanya mengetahui satu hal saja.

Fitnah apa yang lebih besar daripada anggapan Anda, engkau mengkhususkan suatu keutamaan yang tidak pernah dicontohkan oleh Rasulullah shallallahu ‘alaihi wasallam? Dalam riwayat yang lain: Fitnah apa yang lebih besar daripada Anda menyangka bahwa apa yang Anda pilih itu lebih baik dari pilihan Allah dan RasulNya?

Imam Malik