Changing the category cloud appearance

• 

  artusartos · Member · Sep 29, 2017 at 11:12 am

  • Copy link
  • Add topic to favorites

  As you can see I have a category cloud in the footer and would like to change its appearance. Specifically, I want the category cloud to be like the one on the Nucleare theme. Is there a way to do that?

  The blog I need help with is: (visible only to logged in users)

• 

  pauloeaquino · Staff · Sep 29, 2017 at 11:43 am

  • Copy link

  Hi @artusartos,

  With Custom CSS you could target the widget_tag_cloud class and add the background-color property for an instant effect. The code you would look like this:

  .widget_tag_cloud a {
      background-color: #9c6ec7;
  }

  And the result would be something like this:

  See screenshot:
  https://cloudup.com/cq0U9xs5wm7

  However, you would need a Premium or Business plan to access Custom CSS.

• 

  artusartos · Member · Sep 29, 2017 at 9:49 pm

  • Copy link

  Hello @pauloeaquino

  Thank you. But that doesn’t look exactly like the one on the Nucleare theme. There needs to be a bigger margin between the word and the boarder of the box so that the box is not almost the same size as the text. Also the text color needs to be white.

  Finally, all the tags must be the same size but I guess I can already change that from the customize section.

• 

  thesacredpath · Member · Sep 29, 2017 at 10:16 pm

  • Copy link

  @artusartos, we can make some adjustments, but the problem is that many of your category names are long and go to multiple lines, and there is no way for us to provide any padding either on the end of a line that breaks, or on the beginning of the next line. This is about the best I can do. This issue isn’t evident on the Nucleare demo site since it has short, single word tags.

  .widget_tag_cloud a {
  	background-color: #f24444;
  	padding: 10px !important;
  	margin-bottom: 20px !important;
  	font-size: 80% !important;
  	line-height: 2.5;
  	color: #fff;
  	font-weight: bold;
  }

• 

  artusartos · Member · Sep 30, 2017 at 2:50 pm

  • Copy link

  @thesacredpath Thanks a lot! I guess I need to shorten my category tags so it can look better.

  One final request….

  I was wondering what it would look like if the squares had round edges instead of sharp ones. Is there a simple way to do that or would that be too complicated?

• 

  thesacredpath · Member · Sep 30, 2017 at 8:40 pm

  • Copy link

  You are welcome. You could do the following, adding a border radius declaration as I have as the last one. You can adjust the radius as desired.

  .widget_tag_cloud a {
  	background-color: #f24444;
  	padding: 10px !important;
  	margin-bottom: 20px !important;
  	font-size: 80% !important;
  	line-height: 2.5;
  	color: #fff;
  	font-weight: bold;
          border-radius: 3px;
  }

• 

  artusartos · Member · Oct 1, 2017 at 3:28 pm

  • Copy link

  @thesacredpath Thank you so much!

• 

  thesacredpath · Member · Oct 1, 2017 at 7:33 pm

  • Copy link

  You are welcome.