[Randy McCall]

Hello,

I purchased the pro pack, as well as the cMap theme.

My site is in test phase. When I tried using the “Connections: Recent Additions” widget, I found it was not picking up the theme or cMap styling. How can I correct this

Examples: http://www.tameshigiri.ca/ near the bottom. On the left is Recent Additions widget; on the right the styled output of the Connections Categories widget. Note that even the output of the Categories widget isn’t the same as the theme’s own Comments or Archives widgets.

http://www.tameshigiri.ca/resource-directory/ The Recent Additions widget is in the right column. Note that the widget has picked up the very small background image the theme uses as a bullet point, but the text is completely out of wack.

One would think these should pick up the theme’s styling immediately… assistance would be appreciated.

[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.

[Randy McCall]

SEven,

Perfect, many thanks. It appears my old CSS training isn’t up to some of the coding used in complex themes like those from Elegant Themes.

[Author]

Posts