Neverwind - Aion
Välkommen till Neverwind!
Neverwind - Aion
Välkommen till Neverwind!
Neverwind - Aion
Vill du reagera på det här meddelandet? Registrera dig för forumet med några klick eller logga in för att fortsätta.



 
HemLatest imagesSökBli medlemLogga in

 

 HOWTO: Signatur med progress (editerbar)

Gå ner 
+3
Citrus
Naiv
Pandemonium
7 posters
FörfattareMeddelande
Pandemonium

Pandemonium


Antal inlägg : 16
Stad : Örebro

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptylör 19 sep 2009, 21:17

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




Till överst på sidan Gå ner
Naiv
Officer
Naiv


Antal inlägg : 97

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptylör 19 sep 2009, 21:49

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 :]
Till överst på sidan Gå ner
Pandemonium

Pandemonium


Antal inlägg : 16
Stad : Örebro

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptylör 19 sep 2009, 22:13

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
Till överst på sidan Gå ner
Citrus
Medlem
Citrus


Antal inlägg : 107
Stad : Stockholm

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptylör 19 sep 2009, 22:36

Sweet! Det här får man nog prova på sen när man kommer igång
Till överst på sidan Gå ner
Cressell

Cressell


Antal inlägg : 40
Stad : Stockholm

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptylör 19 sep 2009, 23:10

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!
Till överst på sidan Gå ner
miklis

miklis


Antal inlägg : 33

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptysön 20 sep 2009, 00:24

sig:en är bara kod för mig med.
Till överst på sidan Gå ner
Gäst
Gäst




HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptysön 20 sep 2009, 00:27

Funkar för mig, kör med Chrome.
Till överst på sidan Gå ner
Pandemonium

Pandemonium


Antal inlägg : 16
Stad : Örebro

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptysön 20 sep 2009, 01:00

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.
Till överst på sidan Gå ner
Citrus
Medlem
Citrus


Antal inlägg : 107
Stad : Stockholm

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptysön 20 sep 2009, 02:09

Sådär då pandan, då har jag lyckats fixa en egen efter lite knep och knåp.
Tackar!
Till överst på sidan Gå ner
Citrus
Medlem
Citrus


Antal inlägg : 107
Stad : Stockholm

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptysön 20 sep 2009, 02:17

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
Till överst på sidan Gå ner
Pandemonium

Pandemonium


Antal inlägg : 16
Stad : Örebro

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptysön 20 sep 2009, 11:06

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 Razz

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
Till överst på sidan Gå ner
mlwn

mlwn


Antal inlägg : 41

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptytor 24 sep 2009, 17:28

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.


Senast ändrad av mlwn den tor 24 sep 2009, 17:34, ändrad totalt 2 gånger
Till överst på sidan Gå ner
mlwn

mlwn


Antal inlägg : 41

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptytor 24 sep 2009, 17:29

Där var den också. Smile
Till överst på sidan Gå ner
cats
Ledare
cats


Antal inlägg : 184

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptytor 24 sep 2009, 17:36

Lite coolt ju, får man ta och testa sen Smile
Till överst på sidan Gå ner
mlwn

mlwn


Antal inlägg : 41

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptytor 24 sep 2009, 17:42

Pandemonium's psd moddad: psd här
All creds till Pandemonium jag har bara petat lite i det hela.
Till överst på sidan Gå ner
Pandemonium

Pandemonium


Antal inlägg : 16
Stad : Örebro

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptyfre 25 sep 2009, 10:43

mlwn skrev:
Pandemonium's psd moddad: psd här
All creds till Pandemonium jag har bara petat lite i det hela.

Kanon! Skitkul att se!
Allt som behövs till din är ju någon form av bild på din char eller något, jag vill se Janko! pirat
Till överst på sidan Gå ner
mlwn

mlwn


Antal inlägg : 41

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptyfre 25 sep 2009, 12:45

There we go. ! Smile
Till överst på sidan Gå ner
Pandemonium

Pandemonium


Antal inlägg : 16
Stad : Örebro

HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Emptyfre 25 sep 2009, 16:55

mlwn skrev:
There we go. ! Smile

Holy smokes! HOT! Wink
Till överst på sidan Gå ner
Sponsored content





HOWTO: Signatur med progress (editerbar) Empty
InläggRubrik: Sv: HOWTO: Signatur med progress (editerbar)   HOWTO: Signatur med progress (editerbar) Empty

Till överst på sidan Gå ner
 
HOWTO: Signatur med progress (editerbar)
Till överst på sidan 
Sida 1 av 1
 Liknande ämnen
-
» HOWTO: Minska på er ping!

Behörigheter i detta forum:Du kan inte svara på inlägg i det här forumet
Neverwind - Aion :: Neverwind - Övrigt :: Förslag/Råd-
Hoppa till: