Steven Zahm@ Randy
I looked at the site and its CSS, the widgets are using all the styles from the theme as they should. They actually do not come with any styling of their own so everything has to be inherited from the theme.
The front page:
The “Recent Directory Additions” are using the following styles from the theme:
.main-title { background:url(images/title-bg.png) repeat-x; height: 42px; line-height: 42px; font-size: 13px !important; text-transform: uppercase; color: #48423f; text-shadow: 1px 1px 1px #ffffff; font-weight: bold; text-align: center; padding-bottom: 0; font-family: 'Droid Sans',Arial,Verdana,sans-serif !important; }
.recent-content { background:url(images/recent-content-bg.png) repeat-y top right;margin-top: -1px; padding: 29px 32px 38px 35px; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
a { text-decoration: none; color: #00b7f3; }
span.fn, span.fn a { font-size: 22px; color: #48423f; text-decoration: none; }
span.fn a:hover { color: #111; text-decoration: none; }The “Directory Categories” are using the following styles from the theme:
.recent-middle { width: 318px !important; }
.recent-last { width: 321px !important; }
.recent-last .recent-content { background: none !important; }
.main-title { background:url(images/title-bg.png) repeat-x; height: 42px; line-height: 42px; font-size: 13px !important; text-transform: uppercase; color: #48423f; text-shadow: 1px 1px 1px #ffffff; font-weight: bold; text-align: center; padding-bottom: 0; font-family: 'Droid Sans',Arial,Verdana,sans-serif !important; }
#comment-wrap .main-title { margin: 0 -37px 12px -39px; }
.recent-content { background:url(images/recent-content-bg.png) repeat-y top right;margin-top: -1px; padding: 29px 32px 38px 35px; }
ol, ul { list-style: none; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
a { text-decoration: none; color: #00b7f3; }
a:hover { text-decoration: underline; }The issue seems to be that the widgets use the standard WP markup for categories but the theme does provide specific styles for them. The theme is primarily using the following style for widget lists:
.widget { width: 230px; padding: 30px 25px 30px 44px; }
.widget ul li { background:url(images/sidebar-bullet.png) no-repeat 0px 8px; padding-bottom: 10px; padding-left: 15px; display: block; font-size: 13px; font-family: 'Kreon', Arial, sans-serif; text-shadow: 1px 1px 1px #ffffff; }
.widget ul li a { color:#a1a6a6; text-decoration: none; }
.widget ul li a:hover { color:#111111; }
.widget ul li a {
color: #665858;
text-decoration: none;
}However, these styles are not being used in the theme’s front page “Recent” area.
On the directory page. The “Recent Directory” widget is using the above styles, but it also has the following which overrides the font style which is why it is so big.
span.fn, span.fn a { font-size: 22px; color: #48423f; text-decoration: none; }
span.fn a:hover { color: #111; text-decoration: none; }The above style is being applied because the name of the entry has the fn class. That is the only class that is being output by the widget that isn’t standard markup for categories. That markup is provided so user and theme authors can provide CSS just for individual and organization names in widgets. Which this theme seems to provide in this case.
You can fix this easily by reusing a few of the theme styles and changing a couple selectors…
Add the following to the end of the theme’s style.css file, or, alternatively if the theme has one its custom CSS area.
.cn-widget li, .cn-cat-tree li {
background: url(images/sidebar-bullet.png) no-repeat 0px 8px;
padding-bottom: 10px;
padding-left: 15px;
display: block;
font-size: 13px;
font-family: 'Kreon', Arial, sans-serif;
text-shadow: 1px 1px 1px #ffffff;
}
.cn-widget li .fn, .cn-cat-tree li.cat-item {
font-size: 13px;
}
.cn-widget li a, .cn-cat-tree li a, .cn-cat-tree li.cat-item, .cn-cat-tree li.cat-item a {
color: #48423f;
text-decoration: none;
}That’ll fix it up nicely.