Tag Cloud font size – css issue

[mviens]

Hello,

I am trying to customize how the Tag Cloud widget is displayed. I was able to adjust most parameters in my Child theme css EXCEPT for the font size. I want the font size to vary based on the frequency of the Tag – pretty common.

I found this in the Flexform parent function.php file:

	/* WORDPRESS TAG CLOUD WIDGET MODS
	================================================== */
	
	add_filter( 'widget_tag_cloud_args', 'sf_tag_cloud_args' );
	
	function sf_tag_cloud_args( $args ) {
		$args['largest'] = 12;
		$args['smallest'] = 12;
		$args['unit'] = 'px';
		$args['format'] = 'list';
		return $args;
	}

This was setting the element.style to 12px so I added this to my Child function to override it:

/* WORDPRESS TAG CLOUD WIDGET MODS
================================================== */

// Removes sf_tag_cloud_args from the flexform phase
function remove_add_filter() {
    remove_action('widget_tag_cloud_args','sf_tag_cloud_args' );
}
// Call 'remove_add_filter' during WP initialization
add_action('init','remove_add_filter');

// Add our custom function to the 'flexform' phase
add_filter( 'widget_tag_cloud_args', 'child_tag_cloud_args' );

function child_tag_cloud_args( $args ) {
	$args['largest'] = 18;
	$args['smallest'] = 8;
	$args['unit'] = 'px';
	$args['format'] = 'list';
	return $args;
}

Viewing the css with Firebug, I see the element.style is displaying properly – font-size is ranging from 8px-18px as directed by my Child function.

BUT the Flexform parent style.css includes the following:
.widget ul.wp-tag-cloud li > a {
font-size: 14px !important;
}

The big question is why would a developer use “!important” for a font size in css? This basically defeats the “cascading” property of css.

I could simply comment out the line of code in my Parent style.css but that would defeat the purpose of a Child theme.

How can I get around this issue? Perhaps the !important can be removed from this statement in future updates?

Thank you,
Michael

[Melanie – SUPPORT]

The big question is why would a developer use “!important” for a font size in css?

Because without !important it is not possible to override the native WP css, which as you already noticed makes the font size vary depending on importance of the tag, which is not was swift ideas was looking for in that theme.

This basically defeats the “cascading” property of css.

Yes, that’s the point 🙂

Not sure what you can do to improve it, maybe try adding this custom css:

.widget ul.wp-tag-cloud li > a {
font-size: auto !important;
}