Forum - Fluent in 3 months - Language Hacking and Travel Tips — Fluent in 3 months

Topic RSS

Problem with adding flags

July 9, 2011
07:50

Janalisa

United States

Member

Forum Posts: 39

Member Since:
July 5, 2011

Offline

I tried adding flags to my signature as Benny suggested (cool idea by the way!), but there seems to be a problem with it. Two of my languages (Japanese and Russian) happen to have flags with white around the edge. So I tried to add a 1 pixel border around them, but whenever I did this the flag would move stubbornly to the left side of the screen so I couldn't move it or type around it. For now I've just used an "alternative" flag for Japanese and left the Russian one as it is… But I'm wondering if anyone else has had this problem? Maybe it's a bug in the forum that needs to be fixed, so I just thought I should point it out.

Speaks:

English

Japanese

French Learning:

Russian More about me and my languages: http://www.janafadness.com/blog/languages/

July 9, 2011
14:13

frapy

France

Member

Forum Posts: 70

Member Since:
June 29, 2011

Offline

I have the same problem for the Russian flag, so what I did is add a 1 px gray border with html. But in this case, the border is bigger than the flag, so I had to add a padding:0 to the flag.

So, for example, if you want to add the Japanese flag, you should write something like this after clicking the "html" button (delete the space between < and img) :

< img style="border: 1px solid gray; padding: 0; width: 20px; height: 13px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Flag_of_Japan.svg/200px-Flag_of_Japan.svg" alt="Japanese" />

And you'll get something like

Of course, you can change the border's colour

Speaks :

Studying :

Dead :

Ancient Greek

July 9, 2011
14:15

Benny

Berlin, Germany

moderator

Forum Posts: 459

Member Since:
June 1, 2009

Offline

OK, I see the problem. In "alignment" try to select "baseline". Then you can move it around as before I'll add this to the how-to, thanks for the heads up!

Speaks:

Learning:

July 9, 2011
14:40

Benny

Berlin, Germany

moderator

Forum Posts: 459

Member Since:
June 1, 2009

Offline

If people prefer Frapy's solution (due to the padding rather than the border, which is probably too thick), then I can replace that in the how-to. Let me know which you prefer (ideally I'd prefer a solution with no coding, but I think I can explain it OK to non-technies)

Speaks:

Learning:

July 9, 2011
15:20

kuikentje Jar-ptitsa

Wallonia, Belgium

Member

Forum Posts: 187

Member Since:
July 8, 2011

Offline

The flags are nice but it's too complicated for me sorry for that.

soemone could put the flags on my profile? it would be this:

native: belgian French

fluent: Dutch, german

intermediate: spanish and english

Thank you in advance

vleermuisje

Native : Advanced :

Intermediate :

July 9, 2011
16:16

frapy

France

Member

Forum Posts: 70

Member Since:
June 29, 2011

Offline

Go to your profile page, click on "setup your signature", then click on the "html" button and copy/paste this :

Native : <acronym title="Belgian French"><img style="border: 1px #dbdbdb solid; padding: 0px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Flag_of_Belgium_%28civil%29.svg/200px-Flag_of_Belgium_%28civil%29.svg" alt="Belgian French" width="30" height="20" /></acronym> Fluent : <acronym title="Dutch"><img style="border: 1px #dbdbdb solid; padding: 0px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Flag_of_the_Netherlands.svg/200px-Flag_of_the_Netherlands.svg" alt="Dutch" width="30" height="20" /></acronym> <acronym title="German"><img style="border: 1px #dbdbdb solid; padding: 0px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/200px-Flag_of_Germany.svg" alt="German" width="30" height="20" /></acronym> Intermediate : <acronym title="English"><img style="border: 1px #dbdbdb solid; padding: 0px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Flag_of_the_United_Kingdom.svg/200px-Flag_of_the_United_Kingdom.svg" alt="English" width="30" height="20" /></acronym> <acronym title="Spanish"><img style="border: 1px #dbdbdb solid; padding: 0px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Flag_of_Spain.svg/200px-Flag_of_Spain.svg" alt="Spanish" width="30" height="20" /></acronym>

Your should obtain somethink like :

Native :

Fluent :

Intermediate :

Speaks :

Studying :

Dead :

Ancient Greek

July 9, 2011
16:33

duckshirt

Koblenz, DE

Member

Forum Posts: 90

Member Since:
June 28, 2011

Offline

Or alternatively, to make the language more clear but still keep it localized… unless you aren't really from Wallonia:

Native: Conversational: Basic (on hold):

Currently learning: (mission thread) My German Video Blog!

July 9, 2011
17:17

kuikentje Jar-ptitsa

Wallonia, Belgium

Member

Forum Posts: 187

Member Since:
July 8, 2011

Offline

Hi frapy

Thank you veyr much it's great and wonderful!!!!!!

Hi duckshirt

Thank you as well, yes I'm really from wallonia therefore it's better to have this Walloon flag, becuase the belgian one can be for French, Flemish/Dutch or German. The walloon one precise that it's French

How can I put the Walloon flag also, with the others?

Thank you!!!!!!

vleermuisje

Native : Advanced :

Intermediate :

July 9, 2011
18:24

frapy

France

Member

Forum Posts: 70

Member Since:
June 29, 2011

Offline

Well, if you put your mouse on the Belgian flag, you'll see "Belgian French" appear. But I can change the code if you prefer. The code would be :

Native : <acronym title="Belgian French"><img style="border: 1px #dbdbdb solid; padding: 0px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Flag_of_Wallonia.svg/200px-Flag_of_Wallonia.svg" alt="Belgian French" width="30" height="20" /></acronym> Fluent : <acronym title="Dutch"><img style="border: 1px #dbdbdb solid; padding: 0px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Flag_of_the_Netherlands.svg/200px-Flag_of_the_Netherlands.svg" alt="Dutch" width="30" height="20" /></acronym> <acronym title="German"><img style="border: 1px #dbdbdb solid; padding: 0px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_Germany.svg/200px-Flag_of_Germany.svg" alt="German" width="30" height="20" /></acronym> Intermediate : <acronym title="English"><img style="border: 1px #dbdbdb solid; padding: 0px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Flag_of_the_United_Kingdom.svg/200px-Flag_of_the_United_Kingdom.svg" alt="English" width="30" height="20" /></acronym> <acronym title="Spanish"><img style="border: 1px #dbdbdb solid; padding: 0px;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Flag_of_Spain.svg/200px-Flag_of_Spain.svg" alt="Spanish" width="30" height="20" /></acronym>

And you'll get :

Native :

Fluent :

Intermediate :

Speaks :

Studying :

Dead :

Ancient Greek

July 9, 2011
18:32

kuikentje Jar-ptitsa

Wallonia, Belgium

Member