Tags- How do you make them have large and small words
-
Hi I have added the tag cloud, simple tagging, simple tagging widget to my sidebar. I do have tags showing on my side bar. They are all the same height size and width. I am new to blogging and I cannot find how everyone makes their words larger and smaller. Just like on the front of this help forum some of the words are much larger than others, I see this on all the blogs I visit. Can anyone please tell me how to do this with mine?
Here is my blog site to see what I am talking about: https://jhershierra.com/wordpress/
Thanks I appreciate it very much
J
-
That happens over time. As you write posts and pages, the tags that are used the most will appear larger. As in this forum – the larger, the more used.
Thanks Samboll. Okay. However inside my tag section on my site there is a LOT of stuff for you to edit and I left a lot of it alone since I didnt know what it was.
Do any of these things affect this? Like these things below that I dont know what they are-
1) Tag search base:
Please don’t enter a leading or trailing slash.
Output:2) Post tag separator string:
3) Cloud tag link format:
%tagname% – Replaced by the name of the tag.
%fulltaglink% – Replaced by the full link, e.g. https://site.com/tag/Coffee+and+Tea.
%taglink% – Replaced by the link, e.g. Coffee_and_Tea. Can be used to create links e.g. to Technorati.
%flickr% – Replaced by the encoded version of the tag which conforms to Flickr link standards., e.g. coffeeandtea.
%delicious% – Replaced by the encoded version of the tag which conforms to del.icio.us link standards., e.g. coffeeandtea.
%count% – Replaced by the actual number of times the tag has been used.
%scale% – Replaced by the value the tag is scaled to.4) Cloud tag separator(s):
5) Tag count scaling minimum:
Use with the maximum scale to limit the range between your most popular and least popular tags.???
I have tried that plugin and its sidebar widget using a few different themes and the results always wind up looking like yours, no matter what I do. Decided to go with the category cloud widget, instead. Doesn’t handle tags, but does give a cloud effect to your categories.
I C……that is what I thought. I suspected that it was the program I downloaded.
However what made me question that thought is that on the download page it is one of the most popular downloads and all the blogs I view….seem to have the large and small words.
SOOO if they are not using the most popular tag cloud widget I wonder what everyone is using?
Also I dont see the tags getting larger with use, as what one person said
So I am still wondering how to create this affect for your tags.
I think a lot of WP bloggers are using the Ultimate Tag Warrior plugin.
Jhershierra: The Tag Cloud you have does have relative sizes. You’re just not using them. All it does is to add classes, you have to add CSS rules to style the various sizes.
Edit your theme’s CSS file and add this to it:
ul#tagcloudwidget { padding:0; margin:0; text-align:center; list-style:none; } ul#tagcloudwidget li { display:inline; font-size:70%; color:#ccc; background: none; padding: 0;} ul#tagcloudwidget li a, ul#tagcloud li a:link { text-decoration:none; } ul#tagcloudwidget li a:hover { text-decoration:underline; } ul#tagcloudwidget li.t1 a { color:#797979; font-size: 120%; } ul#tagcloudwidget li.t2 a { color:#6d6d6d; font-size: 160%; } ul#tagcloudwidget li.t3 a { color:#616161; font-size: 190%; } ul#tagcloudwidget li.t4 a { color:#555555; font-size: 210%; } ul#tagcloudwidget li.t5 a { color:#484848; font-size: 230%; } ul#tagcloudwidget li.t6 a { color:#3c3c3c; font-size: 250%; } ul#tagcloudwidget li.t7 a { color:#303030; font-size: 270%; } ul#tagcloudwidget li.t8 a { color:#242424; font-size: 290%; } ul#tagcloudwidget li.t9 a { color:#181818; font-size: 310%; } ul#tagcloudwidget li.t10 a { color:#0c0c0c; font-size: 330%; }
That was only an example I copied from somewhere else, of course. You may want different colors and sizes and such.
Wow. Except for the colors, that’s the exact same css I tried. Never worked for me. ??
gestroud: That CSS is for his site specifically. Your CSS might have needed to be different. It’s impossible to say without seeing the site.
Okay….Otto42 can you ‘ look at my site” and see if this information you posted will work? Where do I put this information? Do I find the css file and where inside the file do I copy and paste this? At the beginning or the end? If Gestroud used it, and it didnt work what do you need to ‘ see’ to see if it will work with my site?
https://www.jhershierra.com/wordpressI went to the ‘ style css” file as that is the only thing I could find that said css and copied paste it below please tell me where to put this code thank you.
Theme Name: Andreas04
Theme URI: https://oswd.org/userinfo.phtml?user=Andreas
Description: A WordPress port of an Andreas Viklund design
Version: 2.0
Author: Tara Aukerman
Author URI: https://tara.elmadera.com/wordpress/designUpdates June 2006:
– “widgetized” theme.
– added post navigation
– replaced photo gallery links with random photo generator
*/body{
margin:0;
padding:0;
font:76% tahoma,verdana,sans-serif;
background:#e6e6e6 url(images/bodybg.png) repeat-x;
color:#333;
text-align:center;
}a{
text-decoration:none;
color:#269;
font-weight:bold;
}a:hover{
text-decoration:underline;
}p{
margin:0 0 15px 0;
line-height:1.5em;
}h1,h2,h3,h4{
margin:0;
padding:0;
font-weight:normal;
}h1{
font-size:3.2em;
letter-spacing:-3px;
color:#567;
margin:12px 0 5px 20px;
}h1 a:hover{
text-decoration:none;
}h2{
font-size:1.8em;
letter-spacing:-1px;
margin:-10px 0 0 50px;
color:#888;
}h3{
color: #555;
font-size:1.4em;
margin:1em 0 0.5em 0.5em;
}h4{
font-size:1.2em;
font-weight:bold;
}#container{
width:92%;
min-width:760px;
padding:0 20px;
margin:0 auto;
background:#f0f0f0 url(images/contentbg.png) repeat-x;
color:#333;
text-align:left;
border-left:1px solid #eef;
border-right:1px solid #eef;
}#sitetitle{
float:left;
height:100px;
background:url(images/globe.gif) no-repeat; /* Delete this line to remove the animated globe */
width: 42%;
color: #333;
}#sitetitle a{
color:#567;
font-weight:normal;
}#sitetitle a:hover{
color:#269;
}#menu{
height:71px;
padding-top:35px;
text-align: right;
}#menu ul, #menu li {
padding:0;
margin:0;
list-style-type:none;
display:inline;
}#menu a{
margin:0;
height:100px;
padding:34px 6px 40px 6px;
font-size:1.6em;
font-weight:normal;
letter-spacing:-1px;
color: #888;
}#menu a:hover{
color:#269;
text-decoration:none;
background: #fff url(images/menuhover.png) repeat-x;
padding:34px 5px 40px 5px;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}#content{
margin-top:30px;
width:100%;
clear:both;
background:url(images/globebottom.gif) bottom left no-repeat;
}#content h2{
margin:0 0 10px 0;
color:#555;
border-bottom:2px solid #abb;
}#content h2 a{
color:#555;
font-weight:normal;
}#content h2 a:hover{
color:#269;
text-decoration:none;
background:none;
}#content p{
margin:0.5em 1em 0.8em 1em;
}#left{
width:62%;
float:left;
}#right{
margin-left:64%;
margin-top:-15px;
}#right h2{
margin:15px 0 5px 0;
width:98%;
font-size:1.6em;
}#footer{
clear:both;
padding:10px 0 12px 24px;
text-align:left;
color:#888;
}#footer a{
color:#888;
font-weight:normal;
}#footer span{
color:#aaa;
font-size:2em;
letter-spacing:-2px;
}.entry{
position:relative;
margin:0 0 20px 0;
border:2px solid #fff;
background:#eee url(images/entrybg.png) repeat-x;
color:#333;
padding:10px 10px 0 10px;
}.entry a:hover, .intro a:hover{
text-decoration:none;
padding-bottom:2px;
background:url(images/flash2.gif) bottom left repeat-x; /* Delete this line to remove the flashing underline for regular links */
}.entry img{
border: 1px solid #333;
}.link{
color:#269;
background:url(images/linkarrow.gif) left no-repeat;
display:block;
margin:4px 0 0 0;
padding:2px 1em;
}.link:hover{
color:#48b;
background:url(images/blinkarrow.gif) left no-repeat; /* Delete this line to remove the blinking arrows by the links */
text-decoration:none;
}.thumbs img{
position:relative;
padding:3px;
margin:0 2px 2px 0;
border:1px solid #fff;
background-color:#ddd;
color: #555;
}.thumbs img:hover{
background: url(images/flash.gif); /* Delete this line to remove the blinkingblue frame around the thumbnails */
}.entryphoto{
margin:5px 10px 10px 0;
float:left;
padding:3px;
border:1px solid #fff;
background-color:#ddd;
color:#333;
}.meta{
clear:both;
border-top: 2px solid #ccc;
padding: 5px 1px 0 0;
margin:10px 0 0 0;
text-align:right;
font-size:0.9em;
color: #567;
}.pagenav{
color: #888;
text-align:center;
}.entry img{
position:relative;
}.subcontainer {
width:98%;
}.subcontainer ul, .subcontainer li, .rightsub ul, .rightsub li {
list-style-type: none;
padding: 0;
margin: 0;
}.rightsub{
float:left;
width:45%;
}.rightsub2{
float:right;
width: 45%;
}.date{
float:left;
font-weight:bold;
}.right{
text-align:right;
}.center{
text-align:center;
}.clear{
clear:both;
}.hide{
display:none;
}Just paste it at the end of the style.css file. CSS is not all that complicated.
IT WORKED! THank you very much Otto42. You can see the different sizes now on my site see below
https://www.jhershierra.com/wordpress
??
- The topic ‘Tags- How do you make them have large and small words’ is closed to new replies.