HOWTO: Signatur med progress (editerbar)

Antal inlägg : 16 Stad : Örebro

Forumsignatur med editerbar progressbar/level
------------------------------------------------------------------------------------------------------------

Hallå! Jag tog mig friheten att göra en signatur där man kan ändra sin level och progress på leveln simpelt och stilrent.
Jag tänkte skriva en guide om hur man gör, hoppas någon finner den användbar!

Detta behöver du:
Adobe Photoshop
5minuter
PSD-filen: progress_sig.psd

1. Photoshopfilen
Den är uppbyggd av 3 grupper, BACKGROUND / CHARACTER / CLASS ICON.
Under dessa finner du lager att ändra på.

Vill du inte ha din signatur i grått, använd då "changeColor"-lagrena. För att ändra dess färger går du till WINDOW > Adjustments, klicka i "Colorize" och dra i "HUE".
Det går alltså att ändra färg på CLASS ICONS och själva bakgrunden.

När du är klar med dina ändringar, spara för webben genom FILE > Save for Web > PNG 24 > progress_sig.png

2. Använda signaturen
Ladda upp din PNG-bild och spara länken.
Gå till "redigera signatur" här på Forumet.
Eftersom någon gud har tillåtit HTML i signaturen kan vi då använda oss av detta, vilket gör signaturen editerbar allt eftersom. KANON!
Dock får inte HTML-koden vara mer än 500 tecken, koden jag använder är ~480.
Kopiera koden nedan, klistra in i din signatur, redigera de röda fälten.

<div style="padding:0;margin:0;width:265px;height:50px;background: url('http://adress-till-din-bild/progress_sig.png') no-repeat; position:relative;">
<div style="padding:0;margin:0;font:10px arial;color:#fff;position:relative;top:20px;left:63px;background:none;">Level 1</div>
<div style="padding:0;margin:0;width:100px;height:8px;background:#000;position:relative;top:25px;left:63px;">
<div style="padding:0;margin:0;width:1px;height:8px;background:#fff;"></div></div></div>

Först ändrar du adressen till bilden. Sen ändrar du "Level" till din level.
Efter det, så är "progress" baren 100px total bredd i SVART.
Din själva progress är VIT, och by default, 1pixel bred.
100/10 = 10. Så jag tänkte att man kan fylla på sin progress upp till 100px, sen börjar man om på 1, men fyller på en level.
Ja, ni förstår!
OBS! Ta bort mellanrum om det blir några mellan alla divs, forumet tolkar enter (radbryt) som <br /> och det kommer flytta er progress.

Här är ett exempel:

Level 29

Är det några frågor så ställ dem gärna här!
Hoppas det fungerar fint, hade kunnat göra mer med lite mer tecken men det duger väl!

//Pandemonium

Officer Antal inlägg : 97

Ironiskt nog är din sig för mig
<div style="padding:0;margin:0;width:265px;height:50px;background: url('http://www.drsk.se/pandemonium/images/progress_sig.png') no-repeat; position:relative;"><div style="padding:0;margin:0;font:10px arial;color:#fff;position:relative;top:20px;left:63px;background:none;">Level 1</div><div style="padding:0;margin:0;width:100px;height:8px;background:#000;position:relative;top:25px;left:63px;"><div style="padding:0;margin:0;width:1px;height:8px;background:#fff;"></div></div></div>

E: Annars låter jättefint för dem som letar efter signaturer :]

Antal inlägg : 16 Stad : Örebro

Naiv skrev:: Ironiskt nog är din sig för mig
Level 1

E: Annars låter jättefint för dem som letar efter signaturer :]

Enda anledningen till att det visas som HTML för dig som jag kan komma på är för att du har en högre rank i forumet, och kan alltså se vad members har för HTML i deras signaturer?
Har kollat i IE7/IE8 och Firefox, min signatur syns på samtliga.

Tack för svaret dock! Enligt mig så är det kanon med en signatur man kan editera allt eftersom Smile

//Pandemonium

Medlem Antal inlägg : 107 Stad : Stockholm

Sweet! Det här får man nog prova på sen när man kommer igång

Antal inlägg : 40 Stad : Stockholm

Pandemonium skrev:

Naiv skrev:: Ironiskt nog är din sig för mig
<div style="padding:0;margin:0;width:265px;height:50px;background: url('http://www.drsk.se/pandemonium/images/progress_sig.png') no-repeat; position:relative;"><div style="padding:0;margin:0;font:10px arial;color:#fff;position:relative;top:20px;left:63px;background:none;">Level 1</div><div style="padding:0;margin:0;width:100px;height:8px;background:#000;position:relative;top:25px;left:63px;"><div style="padding:0;margin:0;width:1px;height:8px;background:#fff;"></div></div></div>

E: Annars låter jättefint för dem som letar efter signaturer :]

Enda anledningen till att det visas som HTML för dig som jag kan komma på är för att du har en högre rank i forumet, och kan alltså se vad members har för HTML i deras signaturer?
Har kollat i IE7/IE8 och Firefox, min signatur syns på samtliga.

Tack för svaret dock! Enligt mig så är det kanon med en signatur man kan editera allt eftersom Smile

//Pandemonium

Stämmer nog, då samma sak händer för mig.

Ska ta en titt på det där senare inatt, ser intressant ut!

Antal inlägg : 33

sig:en är bara kod för mig med.

Gäst

Funkar för mig, kör med Chrome.

Antal inlägg : 16 Stad : Örebro

Vet inte vad det kan bero på annars, HTML är på och det är jättesimpel HTML-kod.
En div med en bild som bakgrund (sigen man skapar genom PSD-filen), en div för definition av Level, en för en svart bar och till sist, en för progress.

Ska inte vara några konstigheter, ta koden och klistra in i notepad, spara som test.html och kör > ska fungera utan problem. Någonting med forumet annars.

Har nog med rättigheter att göra, fungerar i Firefox 3.5, IE7+8, mer har jag inte provat. Men det ska fungera i alla browsers.

Medlem Antal inlägg : 107 Stad : Stockholm

Sådär då pandan, då har jag lyckats fixa en egen efter lite knep och knåp.
Tackar!

Medlem Antal inlägg : 107 Stad : Stockholm

Man kanske skulle göra om xp-mätaren så att 50xp är max, så att det blir som en progressbar mot lvl 50?
Slipper man pilla så ofta med den Razz

Antal inlägg : 16 Stad : Örebro

Citrus skrev:: Man kanske skulle göra om xp-mätaren så att 50xp är max, så att det blir som en progressbar mot lvl 50?
Slipper man pilla så ofta med den

Ser ju kanon ut! Om du vill ha mindre steg så öka varje gång med 20px bara. 100px width är bara för att det är delbart med 5, 10 osv.
Efter en dags lirande kan man ju uppskatta ungefär hur mycket X/100px(%) man har kvar till ding, så fyller man i sin vita progress efter det Razz

Schysst att du fick ihop den Smile

Antal inlägg : 41

Jag ändrade lite i koden :>
Har inte min avatar där ennu,
Fungerar inte kanske lika lätt som ditt exemplar, men jag tackar och bockar, utan din kod, psd och Citrus förslag hade jag aldrig gjort en egen iaf.
Stort tack HOWTO: Signatur med progress (editerbar) Icon_smile

HOWTO: Signatur med progress (editerbar) 185149

EDIT: koden

Kod:: <div style="padding:0;margin:0;width:260px;height:50px;background:#000;">
<div style="padding:0;margin:0;width:90px;height:50px;background:#FFF;">
<div style="padding:0;margin:0;width:265px;height:50px;background: url('http://url/bild.png')no-repeat; position:relative;">
<div style="padding:0;margin:0;font:9px arial;color:#fff;position:relative;top:18px;left:63px;background:none;">Level:</div></div></div></div>

lägger till 2 pixlar varje level, blir lite krångligt eftersom dom inte börjar på 0 :p
fick inte det vita att flytta ut utan att flytta bilden, vet ej om det går.