PHPBB3 Prosilver Profile On Left Side

This tutorial explains how to move poster's profile in proSilver to left side.


Some changes cannot be done in admin control panel, so it is better to edit .css file instead. If you have done any changes to css in control panel, then make css files writable (chmod it to 777), in control panel in styles admin select "themes" and click "export" button for prosilver. It will save changes you have previously done to css files.

Currently css editor in control panel is broken, so it is better to edit css files instead. Hopefully it will be fixed by the time phpBB 3.0.0 is released.

To edit css files open those files in any simple text editor, edit files, upload to server, then in admin control panel in styles admin click "themes" and click "refresh" link for proSilver theme.

1. Online Image

First you need to create new "online" image. To do that open file styles/prosilver/imageset/en/icon_user_online.gif in Photoshop or your image editor.

Change image mode to rgb: in menu choose Image -> Mode -> RGB Color
Then rotate image: in menu choose Edit -> Transform -> Rotate 90 CCW
Then save image: in menu choose File -> Save for Web

It will export new image in directory you selected. Move image to correct directory if needed.

2. Change in css
In control panel in styles admin select "Themes", then edit prosilver.

1. Select class ".postbody", click "raw css" button, or edit that class in content.css. You should see code like this:

.postbody {
color: #333333;
line-height: 1.48em;
padding: 0;
width: 76%;
float: left;
clear: both;
}

Change float: left to float: right

2. Select class ".postprofile", click "raw css" button, or edit that class in content.css. You should see code like this:

/* Also see tweaks.css */;
.postprofile {
margin: 5px 0 10px 0;
min-height: 80px;
color: #666666;
border-left: 1px solid #FFFFFF;
width: 22%;
float: right;
display: inline;
}

Change float: right to float: left, and border-left to border-right

3. Select class ".pm .postprofile", click "raw css" button, or edit that class in content.css. Change border-left to border-right (you can skip this step: see notes in "additional changes" section of this tutorial)

4. Select class ".online", click "raw css" button. You should see code like this:

.online {
background-image: none;
background-position: 100% 0;
background-repeat: no-repeat;
}

Change it to this:
Code:

background-image: none;
background-position: 0 0;
background-repeat: no-repeat;

3. Additional Changes
After all those changes, borders in viewtopic don't look right. Border is too far from content, so it looks like content is floating way too far on the right. This is easily fixed by moving borders from ".postprofile" class to ".postbody" class.

To .postbody add this (increase padding-left value if needed):
Code:

padding-left: 10px;
border-left: 1px solid #FFFFFF;

In .postprofile remove border-right
Rename ".pm .postprofile" to ".pm .postbody" and change border-right back to border-left

Notes
If when selecting some class you see different code, check another entry in class selector. Some classes have more than one entry.

If you are editing css files, then after doing all changes you should refresh it. In admin control panel in styles admin select "themes", and click "refresh" link for prosilver.

After code change "online" image might be behind avatar. That's a normal leftover caused by this change. When profile is on right side, text in profile block is aligned to left, so "online" image and avatar are on different sides. When profile is on left side, aligning text to right side is illogical and looks terrible, so text has to be aligned to ether left or center and in both cases "online" image overlaps with avatar. Best solution to this problem is to completely remove online image or replace it with some other image.

Submitted by CyberAlien, Apr 2007.

Read rest of entry

Skin Tones Digital Painting

Hello, so here is the first of another tutorial spawned by the last one. Skin tones.

What and how. Well, as I started writing this I realized I left out some important things, mainly, what are the colors used in other ethnic types, so that will come with the other sections of this.

Anyway, here is the first image. And this is what I have to say about it...


A Sample Palette for Skin Tones

The top of the image is the four basic colors that one would mostly associate with in painting caucasian flesh. A yellow, a red, and a cool, either a blue or a green. Also, white is necessary, and if you paint with limited palette, or darker palette, black is also included in toning the image. I did not include black here, I want to omit that hue till we are really ready for it.

The top is a mixture of these four basic colors to get tones, and me getting them. They are devoid of shade, because at this point, we are not concerned with that. We only want skin tones.

The bottom half of this image is a chromatic scale of these two red and yellow tones, and how they mix with each other. You can work in any of these intensities, so long as the image again, remains harmonious to the whole of the image.

The idea of making an ideal skin tone color is rediculous. Skin tones vary so much, from person to person, and art image to art image. If Drew Struzan were asked to paint Harrison Fords head, he would ask which context do you want this to be portrayed? Pictorially(illustrative) or realistically. There is a difference. And that difference tells you whether or not you "should" use straight out of the tube colors or not. ANything goes in flesh tones so long as the tones remain harmonious to the rest of the image, and value conscious to the whole image.

Spooges image of the pirate in a yellow to brown range only is a great example. Anyway, he used a monochromatic palette, all influence is warm, mostly in the yellow to yellow orange range. He dips into all teh chromas of these colors to create a graphically appealing image full of value and full of life, regardless of the abscent colors.


The Pirate by Craig Mullins. A great example of a monochromatic palette.

Part 1
This first part is a monochrome study, with just red. I went through a good part of the value range of red to create the volumes here that read three dimensionally. That is the most important part of any image, reading form. If the form doesnt read well, the image has failed, regardless of its labor of technique.

This image is to prove you can use any colors to get what you need. Now obviously, this would be a special case scenario using this much red. But in some cases, say, in a submarine when the alert lights go up, everything is red. This would work well, with a bit of work adjusting some of the values.

Part 2
is a duotone image, meaning I am using two colors, plus a tint and tone of them to get what I need. That is, in paint, I am also using black and white to adjust teh value range of the colors, using black sparingly so as not to destroy the vibrancy of the colors.

****IMPORTANT****
when you paint, as in part two, and you mix tones to get shadows or shade, you mix the correct corresponding value of that area of tones to get the correct color note. That is, if the object is red in the shadow, I need to also paint in red, since that is what color the object is, but the correct value of the shadow. Usually, in the minimalist point of view, or the high key of chroma scale, the values between the shadow and the light only vary by about 2 to 3 intervals of tone, (on the value scale-that is black is 1 and white is 9, or just the reverse depending upon where you went to school) So the red I put down to define the shadow would look a lot like my red head. Then, to make the image feel bound to the background, and you are painting with as many colors as you see in the image, then the blue in that shadow also needs to be mixed with the same value as the red in the shadow, so the value in that particular spot you are painting in does not lose its value intensity. In the green and blue head, I painted swatches next to the head to show what I mean... This is vital as the values are what hold together the form. I will do another visual on this tonight and post tomorrow.

Part 3
of this sheet has to do with saturation of a red yellow derivative of this idea. The bigger oval is painted in base colors that would serve well for a realistic image, while the dot next to it would apply itself in a drew struzan fashio of illustration. Both are equally valid, so long as the values of both hues correspond with each other so as not to distort the end value of the object you are painting.

Part 4
of this page is a bit more in depth, but really important to read about. The photo is any typical reference image. If I were naive to art, I might try using the color picker and grab from each area in the image till I kinda got what it looks like. If I were doing this image as a professional piece, I would have to take some things into consideration. The biggest of these would be the simplicity of the imagery. If we put shadows and light aside, we only have forms to contend with. Form is again, the most important thing in painting. This simplifies the problem completely. Now we see in this diagram, I have four main values. That is what I am trying to see. The big values, not the details at all. Now, I omitted some details, but they will again become part of the four big values if I know how to keep a center of interest and keep consistantly present in my image, the big statement I intended to start with, that is, these four main values.

From all the artists I have learned from, the one thing most of them say is keep the image simple, keep the values simple, no more than 5, no less than 3. Less than three, the image becomes a graphic representation, go more than 5, and chaos ensues. This does not mean your image cannot have many colors. It can have all the color in the world so long as the value make up of the image remains in tact.

Now, light and shade add four more additional values to the overall image, because you have to have some sort of toner for all these four big values in this image. But so long as the first four values are solid and do not dissapear from the painting as you progress in your work, it should still remain the way you intended it to in the first place. I will do more on this in a portrait tutorial.

The rest of the tutorial I did was involving modelling the form of the womans head. As long as I know my initial four colors, I can use those to mix my other colors in the image, and the colors mixed will retain a unity and strength in the piece, rather than adding a new color everytime you need to paint a new area. Her head was painted with the four local colors I chose for my image, I used slightly more saturated versions of those colors to mix with the correct corresponding values. In the end I got a similar feel, less grayed out, as I know that all the gray in the image is there only because of the print quality of the image. I added maybe too much light in the shadow tones, but it still works well in form.

Then I tweaked the colors of her head to show that it can be viewed in other colors as well as long as, again, the values hold up and the big statement remains simple.

Ethnic tones are very colorful, we have yellowish to pale tones for asian types, as well as earth reds and dark siennas for high climate asians, and asians in the sun all the time. It is a different kind of sun tan, less rich in orangy colors, but still rich in tone.
African americans have a great variety of dark tones in the flesh, remembering that none of it is ever as peak-ed or pasty as a caucasian would have in his tones. The African American tones have beautiful purples and blues in them with specific ethnic types of africans, while some have rich reds and beautifully subdued greens in their skintones.
Indians have rich reds, umbers yellow ochres in their tones, and on and on. Skin tones are so varied, yet so alike, just subtle changes of hue will change the ethnic type, skin tone, immediately.
Black skin, is a wonderful mirror of light, reflecting great blues and blue purples from the sky during the day, purples and reds in the evening, and then picking up any and all light sources at night and adhering strictly to the colors of that light.
Asian tones pick up a lot of reflected light, especially if it is rich in color, and this tends to wash out the local color of the flesh in a large surface area, influencing the entire area with that tone, if the reflected light is semi strong to very strong; day light or spot lights...

1) I took base colors of reds to purples to blues to greens and layed them down opaque to begin with. This is what dean cornwell would do if he wanted to get a good representation of the opposite color, having the little bits and chunks of influence of the other colors in the tones he was producing. Then I took the opposite color, the complement, or close to the complement, the atypical flesh tone we reach for, and I transparently glazed it over the colors, and the results are there for us to see, the rich colors underneath influence the typical tones of flesh, giving them life, and clarity as to the ethnic type. Spend time looking at people in the mall, out on the town, where ever, and look for the colors of the skin. They are richer than you think. Because we are ACCUSTOMED TO LOOKING AT PICTURES, we have a different idea of what a skin tone is. Its not quite what you think it is typically. All the subleties that make skin tones what they are are washed out in photos most of the time for the sake of the photograph. Too many colors is too real, not photographic. Not to mention, the print process looses 20-40% of the subtle tones that reality does always produce.

We need to get away from training our eye with photos, and use nature to see clearly the colors we need.

Then we can use the photos to make our pictures, and not dictate our pictures.

Ethnic Tones Palette

2) I did the same thing here, making egg shapes representing the simple head shape. I gave the balls a gradation, much like in step 4, as I will explain then. Once the volume was found, I reached for those skin tones, and I glazed them transparently over the surface of the colors, achieving richer tones than I would have if I just painted in the typical tones I am expecting to paint in, such as the black ball in step 3.

3) a black ball, or a head we would typically paint if we were to paint a black person(African American)...if the picture is painted in this fashion first, make sure to remember to justify top planes, or planes adjacent to the sky by using good rich reflective tones of the light source in its relative color. And make sure that the tone is lighter than the source is. That is, if it is sky, do not use as intense a hue as teh sky is, lighten it with white by at least 20% or more to make it feel like light.

4)I put this here to show how to look at a mature face in color tone. Mature meaning, not painting kids who have yet to reach puberty. The top, or forehead region is yellowish in tone typically.
The middle band is the area of the features. These features, because they are so thin and have blood flowing through them, they are ruddier, redder in complexion. If one gets sun, this area is most effected with burn colors.
The Lower band is the jaw area. On the left is a male ball, the jaw area being bluer in complexion, because of the influence of facial hair. the ball on the right represents the female head. Instead of facial hair we represent, we are actual representing the turning planes that move quickly away from direct light, and take on the ground plane reflected tones, or tones from the shoulders, etc. these tend to be earthen in tone, and when used, they do not represent facial hair whatsoever. Not to mention, when using tone, and when painting half tones in flesh, we typically use a blue or a green to modulate these tones, so in so using green, it works more harmoniously with the female ball, while not misrepresenting the gender.

these two balls have no half tones included in them.

Author:Ron Lemen @ http://www.gfxartist.com/features/tutorials/14030

Read rest of entry

Choosing color combinations

All important but often elusive: tips on creating your next color palette

Color is a subjective experience, it is a mental sensation, a reaction of our brain. We say that an orange is 'orange'. But is it really orange? How do we know? We cannot get outside of our eyes or brain to find out, but we do know that when the sun or light disappears; color vanishes. We take colors for granted. It's only when we are actually drawing or painting that we realize how much value color brings to our daily life.

Color theory in a wrap

To learn about color, you first need to understand the structure of color. A color wheel shows us how color is structured. We start with the three primary hues: yellow, red and blue. These are the basic building blocks of color. Next we have the three secondary hues: orange, violet and green. Then follows the third generation or third level: yellow-orange, red-orange, red-violet, blue-violet, blue-green, and yellow-green.

The color wheel (See Figure 1) shows us which colors are opposite to each other on the wheel. Blue is the opposite of orange, red is the opposite of green, yellow-green is the opposite of red-violet. These are called complements. Furthermore, we can divide colors into warm or cold colors. The colors on the bottom right, derived from blue are cold colors, those derived from red are warm colors.

Which color is suitable for which purpose?

Sometimes finding the right color combinations can be really hard, especially if you have to start a project from scratch. If your client already has a logo, a house-style or branding guidelines, you have a starting point. But if it’s your job to design that house-style, the first thing you should do is decide which style the logo should reflect. And with style comes typefaces and colors. Color plays a major part in all this. It symbolizes a certain mood. Does your house-style need cold or warm colors?

Colors reflect a certain personality. They also have several meanings, most of which are closely connected to each other. For example, blue stands for sky, heaven and water. It reflects freedom and peace, but it can also mean cold, protective, authoritative or technical. Red is the color of blood, it reflects courage, romance, but it also means hot, dynamic, vital, commanding or alert. All these symbolic connotations are perfectly visualized by Claudia Cortes in her Color in Motion, a real treat for the eye (the eye has its claims too).

You may not be superstitious or believe that colors have actual meanings, but you ought to consider them. Whether consciously or unconsciously, we consider those meanings when we judge an artwork or design. These generally accepted meanings often play a role in determining whether we like or dislike what we are looking at. Darkness will always suggest danger and mystery.


Colors effect us psychologically regardless of any symbolism, because in some cases they don't apply; it all depends on the circumstances. For example, black may signify mourning, but a tuxedo is also black and it signifies elegance. We all prefer bright vibrant colors over dull grey, but sometimes grey can be stylish too; it all depends on how we apply it in our design, it depends on the circumstances. But we should also be aware of the fact the meanings of color are different depending on the culture. For example, in most Western cultures, white symbolizes purity and elegance, cleanliness. However, in many Asian countries, white is also a color for death and mourning, and used for funerals. As with any design endeavor, make sure that you don’t only understand the psychological effects of colors but that you also know the nuances of the culture and audience you are designing for! This way you’ll have a better chance of success in achieving the emotional impact you want.

What makes a nice well-balanced color combination?

To define the colors for your project, choose a set of colors that fits with your client's logo. This color set should be limited. This way, you get a stronger brand or identity. The overall use of too many colors could result in chaotic and unintended effects. It can get your design totally out of balance. In other words, it will loose its style and personality.When you choose your shades, there are a few things you should keep in mind. First, there should be enough contrast, and secondly, it might be advisable to have one complementary color. For instance, if you have a set of three colors, Color One should be in contrast with the Color Two and Color Three. Alternatively, Color One could be a complement of Color Two or Color Three. Using complements is not exactly necessary but it can help you achieve nice results. (See Figure 2) Using contrasting colors is important to achieve an interesting well-balanced design. For example, try to have two light colors and one darker color. Or you can have a light color, medium light color and a dark color.

Too much contrast can result in a restless or even aggressive design. (See Figure 3) It might of course be your intention to achieve this effect, but if so, make sure that the eye has some resting place in your layout. A rest-point is (I believe) necessary to keep it all in balance. You see, besides using the right color combinations, you should also think on how you dose these colors. Try using them in the right proportions. For example, use the lighter color for the bigger areas like the background and the most vibrant color on the items where you want to attract the attention to, like the logo or title. The middle colors can be used for the text and other items.

Using one complementary color can even increase the ultimate effect, but there’s a bit of a catch to this method. You have to be sure to apply them in a subtle way. If you excagerate and get it out of proportion things will get too overwhelming (See Figure 5). If colors are wrong applied or don't go nicely together, they can make your design rather unharmonious. It's up you to find out what is suitable or not, after all, colors are a subjective experience. One might like the combination while another doesn’t. So what makes you have 'good taste' in colors? Tastes differ, we all have different meanings of what is attractive and what isn't. Yet still, the world would be unbearable if there wasn't some general agreement. Luckily, by following these simple guidelines, you’ll have a better chance of achieving the optimal result. If you get stuck, you might find Adam Polselli's Get The Look a nice source of inspiration on the latest color trends and styles.

Color inspiration

It's been said before, but bears repeating: inspiration can come from anywhere. Always keep your eyes open for color combinations that you like. Examine photographs, pay attention to the vibrant colors of nature, and most importantly, keep experimenting!

Read rest of entry

Photoshop Facial Photo Retouching

This tutorial will show you how to create beautiful model face from ordinary girl photo. I will show you an easy method on how to create a nice looking effect in just a few steps.

First of all I’ll make the pickles and blemishes to disappear. I will select Spot Healing Brush Tool, and i will make small drawing over each imperfection of the face.

The result is very good. It will take you some time, but I assure you will have the same result as mine. I will select eyedropper tool, and I will choose the color for the eyebrows. With a smooth round brush, I will try to accentuate a little the eyebrow. Try to set the brush opacity to 30 %.

You can see my result in the following image

I will select a eyelash brush from deviantart.com. You can use any of the following brushes

Eyelash Brushes
Eyelashes Photoshop Brushes
Make Up Brushes

I will add the eyelash on a new brush, and I will go to Edith > Transform > Warp.

In the following image you will see how I will manipulate the eyelash with warp tool.

I will place the same eyelash brush also on the other eye.

The image with the girl looks already good.


I will make a selection with Pen Tool around the girls face. I am doing this step because I want to add some simple makeup.
I will right click on my canvas and I will chose make selection.

Then I will go to Select > Inverse ( SHIFT+CTRL+I ).
Create a new layer ( press CTRL+SHIFT+ALT+N )
I will select Brush Tool, and with a smooth round brush (opacity value 20 %) I will draw over the cheek

I will create 4 small shapes with Rectangle Tool.

I will select all the layers with the rectangles, and I will click on CTRL+E to merge all the layers into a single one. The next step is to use Warp tool, to modify the aspect of the shapes.


This is my result. As you see I try to add some light in her eyes.

I will use Dodge Tool to add some lights over the eyes. This is my final result.

source and author : http://www.grafpedia.com/

Read rest of entry

CSS Box To Write Code for Blogger

Sometimes we must write down some code to our blog. Like HTML code or Css code or another program codes.
First if the code use < or >, we can change with &lt; for < and &gt; for >.
Before you post on blogger, copy paste your code to word or other program then click replace for < with &lt; and > with &gt; to minimize broken tags.

if only one line you can use <blockquote>..the code..</blockquote>.
But if you wanna write about 200 lines you can do some code write on your css blogger.

• First after log in to your blog click edit html

• Then write this code : before

]]<>/b:skin<

.csscode {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #333333;;
border-top : 2px solid #AAAAAA;
border-right : 2px solid #AAAAAA;
border-bottom : 2px solid #AAAAAA;
border-left : 2px solid #AAAAAA;
}

just like this exsample below.

• Now if you wanna write some code you can use <div class="csscode">.... your code...</div>

Read rest of entry

Tag Clouds Widget for Blogger

Here is the code and setup information to use the Label Cloud in New Blogger.
First you obviously have to have a blog on New Blogger, and you MUST be using the layouts templates, (this isn't available for classic templates, or FTP published blogs ) and you must have some posts labeled already. (There needs to be at least ONE label with more than ONE entry or the scripts hit a bug - so have at least one label with more than one entry before starting).

Make sure you backup your template before making any changes!

If you already have a Labels page element installed, skip to step 2.

Step 1: Log into Blogger and go to your layouts section. On the 'Page Elements' setup page make sure you have a label widget already installed where you want it (it can be moved around later).

Click "Add a Page Element" in the column you wish:

Then find the Labels page element and click "Add to Blog":

Step 2: Now the code comes in 3 parts. A section for the stylesheet, a configurations section, and then the actual widget itself.
First navigate to your templates source under your template settings:

Then check off "Expand Widget Templates":

The first part to put in is the stylesheet section. The following code needs to be copied and inserted into your stylesheet, which in the layouts is marked out by the <b:skin> tags.
Easiest thing to do is find the closing skin tag

]]>

and place the code right BEFORE that.
Here it is, copy and paste without modification right now. I'll explain what can be tweaked later.

Replace the Labels page element widget code with the custom tag cloud code above.

* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

This next section is the configuration section for the Cloud. It also goes in the head of the template, but outside of the stylesheet part. Easiest thing to do again is to find the closing stylesheet tag

]]></b:skin>

But this time place the code right AFTER that line, but BEFORE the tag. Here it is.

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

All of these settings can be changed but I'll explain them in a moment. The defaults will work for now.

Now the widget itself. Scroll down and find the label widget in your sidebar. It should look something like this.

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Copy the following code (from beginning widget tag to ending widget tag) and replace
the line above with it.

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Now if all has gone well, and you have posts already labeled, then if you preview the blog you should see some form of the Cloud appearing. If it doesn't appear, then something went wrong. You should probably back out and try it again from the start.

Update : I've found 2 things to check for first if the label cloud isn't showing. First make sure that at least one of your labels has more than one entry. A bug in the script causes it to fail when all the labels have only one entry.(As soon as any label has more than one entry, then it should be ok from then on) Also, make sure that none of your labels contain quote marks " . Apostrophes or single ticks ' are ok. ------

Most likely the cloud with it's default settings won't be what you ultimately want. But all the colors and sizes are configurable to match your tastes. If the cloud is appearing in preview then you can go about changing some of the variables so they suit.

The settings in the Variables section will be where you make most of your adjustments. Here I'll explain what each setting does.

var cloudMin= 1;

This setting you can use to limit the number of labels shown (for example if you have a lot of labels). Leave the setting at 1 to show ALL labels. If you enter in a higher number, then only labels that have at least that number of entries will appear in the cloud.

var maxFontSize = 20;

var maxColor = [0,0,255];

var minFontSize = 10;

var minColor = [0,0,0];

var lcShowCount = false;

The lines for

maxFontSize

maxColor

do what you may think they do. The first one sets the size (in pixels) of the label with the most amount entries. The maxColor sets the color of that entry (in RGB format). Similiar with the next two

minFontSize

minColor

Just these are for the label with the least amount of entries. Again the size is in pixels, the color is in RGB format. Any labels between the two will get their color/sizes based on how many labels they are, and where their entry count falls, giving the much desired cloud effect.

From my experimenting, there are many factors that make up a pleasant looking cloud. From color/size choice, to the number of actual labels, to how well dispersed the entries are amoung the labels. 3 Labels don't make a good cloud as there isn't much to work with. You just have to experiment around to see what looks good with your setup.

IMPORTANT, when change the color settings, Keep them in the format supplied. In between the [ ] and the numbers separated by commas. The default colors are BLUE for the max and BLACK for the min.

You can select any valid RGB color combination. If you don't know what RGB colors are, don't worry. It's just a way of defining a color. You can use many charts on the Internet to get the correct RGB value for the color you want to try. Here's one that is fairly good.

The last variable there is

lcShowCount

This can either be false (default) or true. All this does is turn off/on the post count displayed next to the label. Usually in a 'traditional' cloud the count isn't used. But if you go to a 'flat' listing then it's sometimes useful to turn it on.

Now to the CSS section. Most people won't need to tweak these much, and it's not necessary to understand what all those entries are for. Most are just to make sure that other styling elements from the rest of your page don't inherit in and ruin the cloud. But there are a few that you may want to change to suit.

The first line

#labelCloud {text-align:center;font-family:arial,sans-serif;}

You could change the fonts used in the cloud here if you wanted.

Also, the text-align statement can also be changed. I have it set to center by default but you could use

text-align:justify;
text-align:right;
text-align:left;

If those suit better.

The next line

#labelCloud .label-cloud li{display:inline;background-image:none
!important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

Well don't worry about most of it unless you are a hardcore CSS'er. The only one of real importance is the first entry

display:inline;

You can change that to

display:block;

To get the 'Flat' (each entry on it's own separate line) listing of the weighted entries.

Usually if that is set to block you would probably want to change the sort frequency from alphabetical to frequency. You do that by editing the widget from the Page Elements tab in Blogger.

And the last bit I'll mention is the line

#labelCloud .label-count

If you set the lcShowCount variable to true to show the post counts, you could change the color/size of those numbered entries with that line.

Read rest of entry