Resizing Widgets

Topics: Themes
Nov 13, 2010 at 11:34 AM
Hi Guys, I'm currently in the process if creating my own theme to match my site design. I've got most of it sorted, but I'm having a couple of problems with the widgets. For example, the tags inside the tag cloud run ider than the width of the tag cloud itself. The same for the Administration widget. Also, the widget isn't tall enough- I was hoping that it would stretch automatically to fit it's contents, but the only way I've found to the increase the height is to hard- code it into the CSS (which obviously isn't the answer). Any help is greatly appreciated! Many thanks, John
Nov 13, 2010 at 12:57 PM

Did you try using percentages in your widgets instead of hard coding the height and width in your CSS? Use a percentage such as 90% for just the widget section, it should size it to 90% of the set size for the column for that widget. If you want to post some of your CSS code here, I or someone else may be able to help you set up percentages in your .css code.

Coleen

Nov 20, 2010 at 11:47 AM
Edited Nov 20, 2010 at 11:48 AM

Hi Coleen, Thanks for your response, here is some of my css (I've pasted the CSS for the widget zone and the tag cloud) Thanks! The widgets part:

#sidepanel {
	margin-right: 0px;
	float: right;
	width: 225px;
}

div.widgetzone{
    margin-right: 10px;
	padding: 0;
	background: none;
	float: right;
	width: 225px;
}

div.widgetzone .clear{
	clear: left;
}

div.widget{
	background: #F1D9AD;
	border: 1px solid silver;
	padding: 10px 15px;
	margin-bottom: 10px;
	z-index: 1;
	min-width: 1px;
	height: auto;
}

div.widget .content{
	line-height: 16px;
	color: #F1D9AD;
}

div.widget h4{
	font-size: 120%;
	border-bottom: 1px solid silver;
	padding-bottom: 5px;
	margin: 0;
	margin-bottom: 5px;
	z-index: 0;
	color: #999999;
	letter-spacing: 1px;
}

div.widget a.edit, div.widget a.move{
	font-size: 85%;
	font-weight: normal;
	float: right;
	z-index: 1;
	margin-left: 5px;
}

div.widget a.delete{
	font-weight: bold;
	color: #999999;
	float: right;
	margin-left: 5px;
	position: relative;
	top: -3px;
	z-index: 1;
	text-decoration: none;
}

div.widget a.delete:hover{
	color: black;
}

.widgetzone .widget ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-transform: capitalize;
}

.widgetzone .widget ul li {
	margin-bottom: 3px;
}

.widgetzone div.search{
	background: none;
	border: none;
	padding-left: 10px;
}

.widgetzone img.rssButton {
	margin-right: 3px;
}

.widgetzone div#moveWidgetToContainer {
	text-align: right;
	margin: 3px;
}


.tagcloud {
	margin-bottom: 10px;
	white-space: normal;
	height: 90%;
}

.tagcloud li {
	display: inline;
}

.tagcloud a {
	margin-right: 3px;
	display: inline-block;
	color: #9F301F;
}

.tagcloud a.biggest {
	font-size: 130%;
}

.tagcloud a.big {
	font-size: 124%;
}

.tagcloud a.medium {
	font-size: 115%;
}

.tagcloud a.small {
	font-size: 100%;
}

.tagcloud a.smallest {
	font-size: 90%;
}

Nov 20, 2010 at 12:50 PM
Found the problem- it was picking up the CSS from another menu on my site. D'oh!