CODEWITHSUNDEEP
htmlcsswordpresscss-selectors
Leahcim
Leahcim

Reputation: 41929

Any way to style a tag cloud widget, with lots of different class names

I'm using WordPress to host a blog. They have a tag cloud widget. The tags are like this. The class name changes with each tag

<a class="tag-link-9" title="1 topic" style="font-size: 8pt;">Blah Blah</a>

<a class="tag-link-10" title="1 topic" style="font-size: 8pt;">Blah Blah X</a>

The parent element is <div class="tagcloud">

Normally, with the theme I'm using, I can add custom styles like this

.custom .tag-link-1- {font-size: 10px}

but with the class name changing each tag, I have to constantly add new styles. Is there a way to do a CSS that will capture all the tag-links independent of the number?

Upvotes: 2

Views: 1929

Answers (4)

Stuart Burrows
Stuart Burrows

Reputation: 10814

If all tags are getting the same style can you not do:

.tagcloud a {font-size: 10px}

If not please clarify your question. Thanks!

edit if you are not worried about css validation you can use .custom a {font-size:10px !important;} to override inline styles. If using jQuery is an option, remove the inline styles: $('.tagcloud a').removeAttr('style');

Upvotes: 1

Wex
Wex

Reputation: 15695

You have two options that will work well for you in this scenario.

Option 1: Use CSS Selectors

If your tags are wrapped within some kind of a div, such that:

<div id="tag-cloud">
  <a class="tag-link-9" title="1 topic" style="font-size: 8pt;">Blah Blah</a>
  .
  .
  .
</div>

Use this CSS:

#tag-cloud a { ... } /* Each tag will be styled */

Option 2: Use jQuery!

If you can't figure out option 1, you can always use jQuery to style the element:

$('a[class^="tag-link"]').css( ... );

Refer to this for documentation on how to use the CSS function in jQuery

Option 3: Modify the Wordpress Widget file

You could always go into your wordpress files and modify what gets displayed in the output. I'd recommend removing style="font-size: 8pt;" bit, and then using Option 1 to style the links.

The downside to Option 3 is that you lose the Tag Cloud functionality that makes the links bigger when they appear more often. That might not matter to you, but it's something to consider.

Upvotes: 1

ChaosPandion
ChaosPandion

Reputation: 78262

I would define a numberless class to hold all the common style info.

.tag-link { font-size:10px; }

Then attach it to each element.

<a class="tag-link tag-link1">Link</a>

Upvotes: 1

Novikov
Novikov

Reputation: 4489

Not in a backwards compatible way, no.

CSS 3

a[class^='tag-link-'] {
    font-size:10px;
}

Upvotes: 2

Related Questions