Tag: 워드프레스

bookmark_border워드프레스 달력 스타일 변경

Posted on

기본 달력의 모양이 심심하여 스타일을 변경함.

관리자 > 테마디자인 > 사용자 정의하기 > 추가 CSS 에 CSS 추가

참고 : Better WordPress Calendar Widget Sass/CSS Styles

/* calendar widget */
.widget_calendar {float: left;}
#wp-calendar {
	width: 100%;
	max-width: 37.5rem;
	background: #ccc;
	margin-left: auto;
	margin-right: auto;
	font-size: 12px;
}

#wp-calendar caption { 
   text-align: right;
   color: #333;
   font-size: 13px;
   margin-top: 5px;
   margin-bottom: 5px;
}

#wp-calendar thead tr {
	border: 1px solid #ccc;
}

#wp-calendar thead th {
	font-size: 90%;
	font-weight: bold;
	padding: 0.5rem;
	background: #ccc;
	text-transform: uppercase;
	text-align: center;
}

#wp-calendar tbody td {
	position: relative;
	padding: 0.25rem;
	text-align: center;
	border: 1px solid #ccc;
	background: #fff;
}

#wp-calendar tbody td.pad {
	opacity: 0.7;
}

#wp-calendar tbody td#today {
	font-weight: bold;
}

#wp-calendar tbody td a {
	display: block;
	background: rgba(50, 153, 187, 0.2);
}

#wp-calendar tbody td a:hover {
	background: #3299bb;
	color: #fff;
}

#wp-calendar tfoot tr {
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid #ccc;
}

#wp-calendar tfoot tr td {
	border: 0;
	padding: 0;
}

#wp-calendar tfoot tr a {
	display: block;
	padding: 0.25rem 0.75rem;
}

#wp-calendar tfoot tr a:hover {
	background: #fff;
}

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

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