Using ThemeRoller to make a pretty tag cloud

  • Resolved aiiiiiight

    (@aiiiiiight)


    7 years, 1 month ago

    Hello,

    I am trying to make a tag cloud for our site that would aid in browsing frequently covered topics. Right now it’s located on the page I linked to. I would like to make a more visually impactful word cloud, aside from just matching the color scheme of the site. I want to do some adventurous text styling – maybe even rotating some of the words 90o? – as well as exaggerating the difference between the largest and smallest words, and perhaps randomizing the colors or making them correspond to some parameter – like count –?if possible.

    I know how to use CSS to do a lot of this, but is it possible in ThemeRoller? To be honest, ThemeRoller is making my brain shut off because I don’t really know how most of the attributes in the left menu correspond to the tag cloud, aside from “content” and “clickable.” I have a feeling only a few of them matter, but I do not know which ones. Can someone give me some pointers on using ThemeRoller? Which example items on the right, for example, most resemble the tag cloud?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • On the ThemeRoller page the relevant element on the right side is what you find below “Tabs”. But I think that it lets you only adjust the colors. So you could take the main colors from your website and enter them here and play around until you find the ideal composition.

    The font sizes will be more extreme if you choose a larger difference between the parameters smallest and largest.

    I see that you already managed to change the classes according to the tag label. That way you could define a different styling for each tag. Of course, once you enter a new tag, you also need define its class in your css.

    If you are (apparently) not afraid of changing the code, then I would probably use for each tag several classes, e.g. first for the font size, second for the number of words in the label, third for the first letter. (I’m just making up something.) Then the HTML for a tag could look like:
    <a href="https://sinaiandsynapses.org/multimedia-tag/abraham-joshua-heschel/" title="(7)" class="font-size-14 number-of-words-3 first-letter-a"><span style="font-size:14px">Abraham Joshua Heschel</span></a>

    That way you don’t need an own definition for each new tag, but you can decide for example to set the color by the first letter and the orientation of the text by the number of words. Just an idea.

    Thread Starter aiiiiiight

    (@aiiiiiight)

    Hi Chris,

    Thanks for the response. I’m actually pretty rusty with CSS… I tried to see if I could style the text in any way based on your keen observation about the ID’s (I’m not sure how that happened, maybe it has something to do with my theme?), but calling just the ID (#AAAS) and trying to style it doesn’t do anything. Is it possible to style these individual tags from the WordPress customizer? I have no idea how I would change the HTML.

    If you want to style classes, you need to define them with a dot:

    
.community {
   color:red;
}

.cognition {
   color:blue;
}

    and so on. In your customizer there should be a place where to add custom css.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Using ThemeRoller to make a pretty tag cloud’ is closed to new replies.