• Sumo

Twenty Ten, being WordPress’ new default theme is usually used as groundwork for creating custom themes (apart from frameworks and skeleton themes), which I as well did so myself. Here, I rounded up five custom widget styles which you may find useful in customizing your Twenty Ten theme. I used gray colors so that you can change them and adapt your own color palette to the styles.

Widget Style 1
Code:

.widget-area ul ul {
	list-style: none;
	margin-left: 0 !important;
}
.widget-area ul ul li {
	padding: 3px;
}
.widget-container {
	margin: 0 0 18px 0;
	background: #ccc;
	padding: 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   font-size: 11px;
}
.widget-title {
	color: #f0f0f0;
	font-weight: bold;
	background: #666;
	padding: 5px;
	margin: -10px -10px 10px;
	padding-left: 10px;
	border-bottom: solid 1px #f0f0f0;
}
.widget-area a:link,
.widget-area a:visited {
	text-decoration: none;
	color: #666;
}
.widget-area a:active,
.widget-area a:hover {
	text-decoration: underline;
	color: #000;
}

Preview:

Widget Style 2
Code:

.widget-area ul ul {
	list-style: none;
	margin-left: 5px !important;
}
.widget-area ul ul li {
	padding: 3px;
}
.widget-container {
	margin: 0 0 18px 0;
	background: #f0f0f0;
	padding: 10px;
	border-bottom: solid 1px #aaa;
	font-size: 11px;
}
.widget-title {
	font-weight: bold;
	margin: -10px -10px 10px;
	border-bottom: solid 3px #aaa;
	border-top: solid 1px #666;
	padding: 5px 10px;
	background: #ccc;
	font-size: 10px;
	text-transform: uppercase;
}
.widget-area a:link,
.widget-area a:visited {
	text-decoration: none;
	color: #666;
}
.widget-area a:active,
.widget-area a:hover {
	text-decoration: underline;
	color: #000;
}

Preview:

Widget Style 3
Code:

.widget-area ul ul {
	list-style: square;
}
.widget-area ul ul li {
	padding: 3px;
	border-bottom: dotted 1px #aaa;
}
.widget-container {
	margin: 0 0 18px 0;
	font-size: 11px;
}
.widget-title {
	font-weight: bold;
	border-left: solid 4px #666;
	padding: 5px 10px;
	background: #ccc;
	font-size: 10px;
	text-transform: uppercase;
}
.widget-area a:link,
.widget-area a:visited {
	text-decoration: none;
	color: #666;
}
.widget-area a:active,
.widget-area a:hover {
	text-decoration: underline;
	color: #000;
}

Preview:

Widget Style 4
Code:

.widget-area ul ul {
	list-style: circle inside;
	margin-left: 0 !important;
}
.widget-area ul ul li {
	padding: 3px;
	border-top: dotted 1px #333;
}
.widget-container {
	margin: 0 0 18px 0;
	background: #080808;
	padding: 10px;
	font-size: 11px;
	border: double 3px #ccc;
}
.widget-title {
	color: #333;
	font-weight: bold;
	font-size: 18px;
	height: 20px;
	overflow: hidden;
	margin-bottom: 5px;
}
.widget-area a:link,
.widget-area a:visited {
	text-decoration: none;
	color: #666;
}
.widget-area a:active,
.widget-area a:hover {
	text-decoration: underline;
	color: #fff;
}

Preview:

Widget Style 5
Code:

.widget-area ul ul {
	list-style: none;
	margin-left: 5px !important;
}
.widget-area ul ul li {
	padding: 3px;
}
.widget-container {
	margin: 0 0 18px 0;
	background: #333;
	padding: 10px;
	border-bottom: solid 1px #000;
	font-size: 11px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	text-shadow: #000 0 -1px ;
}
.widget-title {
	font-weight: bold;
	margin: -10px -10px 10px;
	border-bottom: solid 1px #aaa;
	padding: 8px 0 8px 15px;
	font-size: 12px;
	color: #aaa;
}
.widget-area a:link,
.widget-area a:visited {
	text-decoration: none;
	color: #666;
}
.widget-area a:active,
.widget-area a:hover {
	text-decoration: underline;
	color: #aaa;
}

Preview: