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

2 Views

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">

Read More

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?

Post Views: 2

Related posts

Leave a Reply

4 comments

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

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

  4. 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');