Need help? Check out our Support site, then


Tag Cloud

  1. I have placed my tag cloud at the bottom of my home page - is there anyway I can change the font? have various colours? and most importantly - can I have it the full width of the blog (not just the one column width?)

    cheers

  2. sorry this is my site address : http://liveyourlifebuythebook.wordpress.com/

  3. is there anyway I can change the font?

    First check to see if updating the fonts at Appearance > Customize > Fonts will work.

    To target just the tag cloud widget to change the font family, you could do something like this:

    .wp_widget_tag_cloud {
    	font-family: "Times New Roman", Times, serif;
    }

    To learn about other types of font properties, see http://www.cssbasics.com/css-font-properties/

    To learn more about font stacks for the font-family property, see http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

  4. have various colours?

    You could change the color for all of those text links at once like this:

    #midrow .widgets .wp_widget_tag_cloud a {
    	color: red;
    }

    Change the color name to a color code of your choice:
    http://en.wikipedia.org/wiki/Web_colors#X11_color_names

    To change different types of links individually, you can use more specific CSS selectors. However since the tag cloud is your name again always changing, when your time to list changes you may have to update the CSS every time there's a new tag that shows up in the cloud.

    To learn how to target the separate links, you need to know a little bit about the HTML. Here is an example of the first few list items in the tag cloud:

    <a href="http://liveyourlifebuythebook.wordpress.com/tag/angels/" class="tag-link-20817" title="7 topics" style="font-size: 13.75px;">Angels</a>
    <a href="http://liveyourlifebuythebook.wordpress.com/tag/anthologies/" class="tag-link-10071" title="4 topics" style="font-size: 12.916666666667px;">Anthologies</a>

    You can use attributes to target your CSS to a specific element. For example to use the class attribute to target the "Angels" link, you can CSS like this:

    #midrow .widgets .wp_widget_tag_cloud a.tag-link-20817 {
    	color: green;
    }

    Similarly, this example will change the "Anthologies" link purple:

    #midrow .widgets .wp_widget_tag_cloud a.tag-link-10071 {
    color: purple;
    }

    Change the color names to color codes such as #123456
    http://0to255.com/

  5. can I have it the full width of the blog (not just the one column width?

    This is a little tricky because the heights of the different widgets in the middle area can be vary. Since you will know the approximate height of the time clock widget after making it fullwidth, you can use that I text you spacing to the top of the middle area and move the tag cloud widget into that space.

    Here's an example you can try it out:

    #midrow {
    	position: relative;
    	padding-top: 200px;
    }
    #wp_tag_cloud-2 {
    	width: 960px !important;
    	position: absolute;
    	margin-top: -200px;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic