TUTORIAL - Construção/Edição de Skins

[GodFather.]

Boas ppl...resolvi fazer um tutorial para o pessoal que queira fazer Skins para o jogo...

Alteração de Imagens

• Substituir as imagens que quer
• Manter o nome e a organização das pastas
• Deve manter os tamanhos e os formatos
• Converter as imagens para os devidos formatos, de forma a ficarem mais pequenos, Exem. no Photoshop

Alteração dos .CSS

Aqui não devem alterar nada para além do que está sublinhado com os XXX, para não desconfigurar o vosso jogo...mas se acharem capazes força

Os "#XXXXXX" representam um código de cor...

>>>VER LISTA DE CÓDIGOS DE COR<<<

[/i]

body {
   font-family: Trebuchet MS, Tahoma;
   color:#XXXXX;(textos de avisos) VER
   font-size:12px;
   margin-top:5px;
   background-color: #XXXXXX;(background do menu) VER
   background-repeat:no-repeat;
   background-attachment: fixed;
}

body.normal, body.log {
   background-image: url("../img/bg/background.jpg");
   background-position: right;
}

table {
   color:#XXXXXX; (cores gerais) VER
   font-family: Trebuchet MS, Tahoma;
   font-size:12px;
   border-style:hidden;
   border-color:#XXXXX; (não sei)
   empty-cells: show;
}

table.eco {
   border: none;
   font-size: 11px;
   font-weight: bold;
   padding: 5px;
   margin-top:0px;
   margin-bottom:10px;
}

.tooltip {
   font-size:11px;
   color:#XXXXX; (letras dos tooltips) VER
   opacity:.90;
   text-align: center;
   padding: 5px;
   width:215px;
   background-color: #XXXXXX; (background dos tooltips) VER
   border: 1px solid #XXXXX; (bordas dos tooltips) VER
   line-height: 18px;
}

.stt { border-bottom: 1px solid #444; }

tr.hover:hover, tr.sethover, td.hover:hover, td.hover:hover { background-color: #XXXXX; } (seleccionar) VER

a {
   color:#XXXXXX; (letras menu) VER
   text-decoration: underline;
   cursor: pointer;
}

a:hover { text-decoration:underline; }
a.noline, a.noline:hover { text-decoration: none; }

img { border-style:none; }

input {
   background-color: #XXXXXX; VER
   color: #XXXXXX; VER
   border-color: #XXXXXX; (não sei)
}

textarea {
   border-style:solid;
   border-width:1px;
   color:#XXXXXX; (acho que não funciona muito bem, mas é nas letras das msgs)
   background-color: #XXXXXX; (background a escrever msgs)
border-color:#XXXXXX; VER
}

td.br { border-right: #XXXXXX solid 1px; }
td.bl { border-left: #XXXXXX solid 1px; }
td.bt { border-top: #XXXXXX solid 1px; }
tr.bb td, td.bb { border-bottom: #XXXXXX solid 1px; } (linha na vista geral, edifício, laboratório, hangar, armamento) VER

tr.h30 { height: 30px; }
tr.h28 { height: 28px; }

p.text {
   text-align:center;
   margin-top: 30px;
   margin-bottom: 30px;
   font-style: italic;
   font-size: 12px;
}

.noborder {
   border-style: none;
   border-width: 0px;
}

input.text {
   border: 1px solid #XXXXXX; VER
   padding-left: 2px;
   font-size: 11px;
}

input.button {
   border: 1px solid #XXXXXX; VER
   font-size: 11px;
}

.xmini { font-size: 10px; }
.mini { font-size: 11px; }
.medium { font-size: 14px; }
.big { font-size: 17px; }
.b, .bold { font-weight: bold; }
.center { text-align: center; }
.red { color: #F44; }
.blue { color: #69C; }
.green { color: #4C4; }
.orange { color: #FA2; }
.grey { color: #555; }
.white { color: #AAA; } (hotkeys das msgs)

li {
   line-height: 1.5em;
   list-style-type: square;
   margin: .2em 0 0 0;
   padding: 0;
   list-style-image: url(../img/bg/bullet.gif);
}

ul.nl0, ul.nl1, ul.nl2, ul.nl3, ul.nl4, ul.nl5 {
   padding: 0;
   margin: 0;
}

ul.nl1 { padding-left: 2em; }
ul.nl2 { padding-left: 4em; }
ul.nl3 { padding-left: 6em; }
ul.nl4 { padding-left: 8em; }
ul.nl5 { padding-left: 10em; }

tr.sep td, td.sep { border-bottom: 1px solid #XXX; }
tr.sept td, td.sept { border-top: 1px solid #XXX; } (não sei)
td.left { text-align: left; }
td.right { text-align: right; }
label.ecored { font-size: 12px; font-weight: bold; }

table.eco {
   width: 760px;
   font-size: 11px;
   font-weight: normal;
   background-position: bottom center;
   background-repeat: no-repeat;
   color: #XXXXXX; (recursos) VER
   margin-bottom: 20px;
}

table.ecobig { background-image: url("../img/bg/ecobback.png"); }
td.ecobheight { height: 45px; }
td.ecosheight { height: 25px; }

td.econormal {
   background-repeat: no-repeat;
   background-position: center;
   width: 88px;
   text-align: center;
}

td.ecospecial {
   background-repeat: no-repeat;
   background-position: center;
   width: 135px;
   text-align: center;
}

td.ecobmetal { background-image: url("../img/bg/ecobmetal.png"); }
td.ecobdiamond { background-image: url("../img/bg/ecobdiamond.png"); }
td.ecobhydrogen { background-image: url("../img/bg/ecobhydrogen.png"); }
td.ecobzion { background-image: url("../img/bg/ecobzion.png"); }
td.ecobnanite { background-image: url("../img/bg/ecobnanite.png"); }
td.ecobenergy { background-image: url("../img/bg/ecobenergy.png"); }
td.ecobrobots { background-image: url("../img/bg/ecobrobots.png"); }

td.ecosmetal { background-image: url("../img/bg/ecosmetal.png"); }
td.ecosdiamond { background-image: url("../img/bg/ecosdiamond.png"); }
td.ecoshydrogen { background-image: url("../img/bg/ecoshydrogen.png"); }
td.ecoszion { background-image: url("../img/bg/ecoszion.png"); }
td.ecosnanite { background-image: url("../img/bg/ecosnanite.png"); }
td.ecosenergy { background-image: url("../img/bg/ecosenergy.png"); }
td.ecosrobots { background-image: url("../img/bg/ecosrobots.png"); }

div.econame { font-size: 12px; font-weight: bold;}
div.ecovalue { position: relative; top: 2px;}

td.empty { width: 10px; }

table.help {
   width: 760px;
   margin-bottom: 15px;
   line-height:17px;
   border-collapse: collapse;
}

tr.b760 {
   background-image: url("../img/bg/back.png");
   background-repeat: repeat-y;
}

tr.b760t {
   height: 5px;
   background-image: url("../img/bg/bt760.png");
   background-position: top;
}

tr.b760b {
   height: 5px;
   background-image: url("../img/bg/bt760.png");
   background-position: bottom;
}

tr.b670 {
   background-image: url("../img/bg/back.png");
   background-repeat: repeat-y;
   width: 670px;
}

tr.b670t {
   height: 5px;
   background-image: url("../img/bg/bt670.png");
   background-position: top;
}

tr.b670b {
   height: 5px;
   background-image: url("../img/bg/bt670.png");
   background-position: bottom;
}

tr.bo720 {
   background-image: url("../img/bg/oback.png");
   background-repeat: repeat-y;
   width: 670px;
}

tr.bo720t {
   height: 5px;
   background-image: url("../img/bg/bot720.png");
   background-position: top;
}

tr.bo720b {
   height: 5px;
   background-image: url("../img/bg/bot720.png");
   background-position: bottom;
}

tr.b720 {
   background-image: url("../img/bg/back.png");
   background-repeat: repeat-y;
   width: 670px;
}

tr.b720t {
   height: 5px;
   background-image: url("../img/bg/bt720.png");
   background-position: top;
}

tr.b720b {
   height: 5px;
   background-image: url("../img/bg/bt720.png");
   background-position: bottom;
}

table.b670 {
   width: 670px;
   border-collapse: collapse;
}

table.b760 {
   width: 760px;
   border-collapse: collapse;
}

table.b720 {
   width: 720px;
   border-collapse: collapse;
}

td.pad {
   padding-left: 8px;
   padding-right: 8px;
}

table.justify td, td.justify {
   text-align: justify;
   padding-right: 5px;
   padding-left: 5px;
}

table.cell {
   border-collapse: collapse;
}
/* --- */

td.helptext {
   padding: 0px 10px 0px 10px;
   text-align: justify;
}

.helptop {
   position: absolute;
   top: 5px;
   right: 10px;
}

div.helpimg, div.helpimg2 {
   width: 25px;
   height: 25px;
   background-image: url("../img/bg/infomini.png");   
   background-position: center;
   cursor: pointer;
}

body, table, input, select, font {
   font-family: "Trebuchet MS";
   font-size: 12px;
}

ul.subhelp, ul.help { margin: 0px; padding: 0px; padding-top: 2px;}
ul.subhelp { padding-left: 20px; }

select {
   background-color: black;
   border: solid 1px;
   font-family: Trebuchet MS;
   font-size: 12px;
   text-align: left;
   color: #XXXXXX; VER
   border-color: #XXXXXX; VER
}

select.unitslist {
   width: 250px;
   border: 1px solid #XXX; VER
   background-color: #XXX; VER
}

img.avatar { width: 80px; height: 80px; }

.playerstate { color: #XXX; font-family: Trebuchet MS; font-weight: bold; font-size: 11px;} (estado V, I, N, E, P do observatório)

input.center {
   border: 1px solid #XXX; VER
   font-size: 11px;
   text-align: center;
}

/* TABS */
td.tabini, td.tabend, td.tabnormal, td.tabactual, td.tabnormalh, td.tabactualh {
   background-image: url("../img/bg/tabs.png");
   background-repeat: no-repeat;
}

td.tabsep { background-image: url("../img/bg/tabsep.png"); }

td.hidebarini, td.hidebarend, td.hidebar {
   background-image: url("../img/bg/tabs.png");
   background-repeat: no-repeat;
   height: 30px;
}

body { margin: 0px 0px 0px 0px; }
font.hotkey { font-size:10px; }

td { text-align: center; }

div {
   cursor: pointer;
   background-repeat: no-repeat;
   background-position: center;
   text-align: center;
}

table.menutopbase, td.menucat, td.menuplanetsel {
   background-repeat: no-repeat;
   background-position: center;
}

table.menutopbase {
   background-image: url("../img/bg/menutopbase.png");
   background-position: center top;
   height: 32px;
}

div.menutopmsg { height: 22px; background-image: url("../img/bg/menutopmsg.png"); }
div.menuontime { height: 22px; background-image: url("../img/bg/menunewmsg.png"); }
div.menutopnotes { height: 22px; background-image: url("../img/bg/menutopnotes.png"); }
div.menutoppanel { height: 22px; background-image: url("../img/bg/menutoppanel.png"); }
div.menutopexit { height: 22px; background-image: url("../img/bg/menutopexit.png"); }

td.menutopmsg { width: 34%; }
td.menutopnotes, td.menutopcfg, td.menutopexit { width: 22%; }

div.menuoptions { background-image: url("../img/bg/menuoptions.png"); }
div.menuoptions:hover, div.menuoptionsh { background-image: url("../img/bg/menuoptionsh.png"); }

div.menutopmsg:hover, div.menutopmsgh { height: 22px; background-image: url("../img/bg/menutopmsgh.png"); }
div.menuontime:hover, div.menuontimeh { height: 22px; background-image: url("../img/bg/menunewmsgh.png"); }
div.menutopnotes:hover, div.menutopnotesh { height: 22px; background-image: url("../img/bg/menutopnotesh.png"); }
div.menutoppanel:hover, div.menutoppanelh { height: 22px; background-image: url("../img/bg/menutoppanelh.png"); }
div.menutopexit:hover, div.menutopexith { height: 22px; background-image: url("../img/bg/menutopexith.png"); }
   
td.menucat {
   background-image: url("../img/bg/menucat.png");
   text-align: right;
   background-position: top;
   font-size: 9px;
   color: #XXXXXX; VER
   font-weight: normal;
   height:14px;
}

label.menucat { position: relative; top: 2px; }

td.menuplanet {
   width: 32px;
   height: 40px;
   cursor: pointer;
}

td.menuplanetsel {
   width: 32px;
   height: 40px;
   border-style: none;
   cursor: pointer;
   background-image: url("../img/bg/menuplanetsel.png");
}
   
table.menutable { width: 95px; }
table.bigone {}
table.planets {}

table.obs { margin-top: 5px; font-size: 11px; }

td.team, td.friend, td.enemy, td.region, td.sel, td.selh,
td.miniteam, td.minifriend, td.minienemy, td.miniregion,
td.teamh, td.friendh, td.enemyh, td.regionh {
   background-repeat: no-repeat;
   background-position: center;
}

td.team { background-image: url("../img/bg/obsteam.png"); }
td.friend { background-image: url("../img/bg/obsfriend.png"); }
td.enemy { background-image: url("../img/bg/obsenemy.png"); }
td.region { background-image: url("../img/bg/obsregion.png"); }
td.sel, td.selh { background-image: url("../img/bg/obssel.png"); }

td.team:hover, td.teamh { background-image: url("../img/bg/obsteamh.png"); }
td.friend:hover, td.friendh { background-image: url("../img/bg/obsfriendh.png"); }
td.enemy:hover, td.enemyh { background-image: url("../img/bg/obsenemyh.png"); }
td.region:hover, td.regionh { background-image: url("../img/bg/obsregionh.png"); }

td.obs { height: 89px; width: 104px; text-align: center;}
table.obsblue {
   background-repeat: no-repeat;
   background-position: center;
   background-image: url("../img/bg/obsblue.png");
}
table.nreg { width: 95%; height: 98%; }
td.legend { height: 20px; }

td.radio { width: 30px; }
td.name { width: 70px; }
td.bigname { width: 105px; }
input.probes { width: 40px; text-align: center; }
input.nav { width: 40px; height: 24px; }
input.disabled { color: #XXX; border-color: #XXX; font-style: italic; } (não sei)
tr.nav { height: 26px; }

td.vtab {  font-size: 13px; }
td.vtab:hover, td.vtabh { font-weight: bold; font-size: 13px; }

td.obsmap { background-image: url("../img/bg/map.png"); }
td.obsmap2 { background-image: url("../img/bg/map2.png"); }
td.obsmap, td.obsmap2 {
   background-repeat: no-repeat;
   background-position: center;
   width: 35px;
   height: 35px;
}

/* Notas */
textarea.note {
   font-size: 11px;
   width: 575px;
   height: 100px;
   padding: 2px 0px 2px 2px;
}
div.note {
   padding: 5px;
   text-align: justify;
}
input.tnote { width: 300px; }

/* Mensagens */
font.num {
   font-style: italic;
   font-size: 11px;
}
table.systemmsg {
   width: 99%;
   height: 100%;
}
div.normalmsg {
   width: 100%;
   height: 103px;
   overflow: auto;
}
td.noavatar { padding-left: 3px; }

/* Envio de Mensagens */
input.sendw { width: 200px; }
textarea.sendmsg {
   width: 460px;
   height: 180px;
   padding: 2px;
}
td.warn { text-align: justify; }

/* Requisitos */
table.lreq {
   color: #XXXXXX; (barra dos requisitos) VER
   width: 600px;
   line-height: 22px;
   border-collapse: collapse;
}

table.lreq a {
   text-decoration: none;
   color:#XXXXXX; (barra do nome - requistos) VER
}

/* Simulador */
td.sti {
   width: 50px;
   font-size: 11px;
   border-bottom:solid 1px;
}

/* Estatisticas */
table.stat {
   font-size: 11px;
   width: 720px;
}
table.stop {
   margin-bottom: 10px;
   width: 325px;
}
table.sttop { width: 710px; }
td.points { width: 90px; }
td.totalp {
   width: 100px;
   font-weight: bold;
}

/* Jogadores*/
input.pname { width: 150px; }
input.pinv { width: 350px; }
table.ttplayers {
   width: 200px;
   font-size:11px;
   color: #XXXXXX; (não sei)
}

/* Mercado */
td.meco, td.mmyeco {
   font-size:11px;
   width:120px;
   text-align:center;
   color:#XXXXXX; (letras de topo - Mercado) VER
}
td.mmyeco {
   font-weight: bold;
}
input.meco {
   width:100px;
   font-size: 11px;
   text-align: center;
}
td.mtrow {
   text-align:right;
   font-size:11px;
}
.bad {
   color:#XXXXXX; (mau - "vermelho")
   font-weight: bold;
}
.good {
   color:#XXXXXX; (bom - "verde")
   font-weight: bold;
}

tr.mb670 {
   background-image: url("../img/bg/mback.png");
   background-repeat: repeat-y;
   width: 680px;
}

tr.mb670t {
   height: 5px;
   background-image: url("../img/bg/mbt670.png");
   background-position: top;
}

tr.mb670b {
   height: 5px;
   background-image: url("../img/bg/mbt670.png");
   background-position: bottom;
}

/* Espiar */
tr.empty { height: 18px; }
tr.spy { line-height: 22px; }
td.spyhide { text-decoration: underline; cursor: pointer; }
input.disab { border: 1px solid; color: #XXX; text-align: center; } (não sei)
input.enab { border: 1px solid; color: #XXX; text-align: center; } (não sei)

/* Genérico */
input.feco { width:90px; }

table.regions {
   font-size:11px;
   padding:3px;
   color: #XXXXXX; VER
}

/* Imperio */
table.empire {
   margin-left: 10px;
   font-size: 11px;
}

/* Vista Geral */
td.vgplanets {
   border: solid 1px;
   border-color:#XXXXXX; VER
   width: 131px;
   height: 120px;
   background-color:#XXXXXX; VER
   font-size:10px;
   cursor:pointer;
}

td.onplanet { opacity: 0.5; }
td.offplanet { opacity: 1.0; }

td.cleanplanet {
   width: 131px;
   height: 120px;
}

td.vgcenterp {
   border: solid 1px;
   background-color:#XXXXXX; VER
   border-color:#XXXXXX; VER
}

table.msgunread {
   border: 1px solid;
   height: 28px;
   margin-bottom: 10px;
   width: 700px;
}

font.destak {
   color: #XXXXXX; VER
   font-weight: bold;   
}

/* Relatórios de Ataque */
td.warb, td.warbl, td.warbr {
   background-image: url("../img/bg/bwar.png");
   background-repeat: no-repeat;
   height: 30px;
}

td.warb { background-position: center; }
td.warbl { background-position: left; }
td.warbr { background-position: right; }

td.warob, td.warobl, td.warobr {
   background-image: url("../img/bg/bowar.png");
   background-repeat: no-repeat;
   height: 30px;
}

td.warob { background-position: center; }
td.warobl { background-position: left; }
td.warobr { background-position: right; }

tr.wsp { height: 10px; }

Alujamento

• Fazer hosting dos ficheiros, mantendo o nome e a organização das pastas originais
• O URL indicado deverá ter na raiz a pasta "img" e a "css".

Sugestões

• Estar atento à versão dos ficheiros de modo a ter sempre um "derivado" da versão actual.
• Clientes da cabo visão tem asseso a um servidor FTP particular

LINK UTEIS

• Skin no PC - by Duracell
• Lista de Skins

Agradeço as vossas sugestões para melhorar o Tut... espero que vos seja util  [/list]

[Icaro]

excelente trabalho!

Stiky 

[Dead_punK]

Grande ajuda

Mas só quem tem serviços pagos e que pode fazer e usar a sua skin, não é?

[GodFather.]

Todos podem fazer mas apenas jogadores com serviços pagos as podem usar...

talvez quando o jogo estiver mais avançado e começar a dar lucro, isso possa mudar...

[OCoiso]

Muito bom stunt 
Já andava aqui as voltas para criar uma, com isto vai ser mais fácil 

[KUKA]

Epá, vais me desculpar, mas onde é que está esse tutorial?

Eu aqui só vejo código, não vejo nenhum tutorial sobre como mudar x e y...

[Falken]

Kuka os comentários no código ajudam a perceber ao que as mudanças se referem... 

Bom trabalho 

[KUKA]

ahhhhh

Quer dizer que o que está entre parêntesis não faz parte? É a explicação do que estamos a editar?

 

[Rock'N'Rolla]

body.normal, body.log {
   background-image: url("../img/bg/background.jpg");
   background-position: right;
}

Edit:a img foi removida
esta imagem e' o que está na citaçao??

mas eu qeria mudar de imagem do fundo, como eu faço???

[GodFather.]

 

Fazes download dos ficheiros originais das Skins, para editar...

ai estão os ficheiros .CSS com explicação entre () e tens a frente de todos os #XXXXXX um url de uma imagem que mostra a modificação...

• Modificar as Imagens
• Modificar os CSS...#XXXXXX é um código de cor, basta alterares isso...
  
• Fazer Host dos ficheiros da Skin...
  

>>> VER LISTA DE CÓDIGOS DE COR <<<

 

EDITADO: nome do post principal para TUTORIAL - Contrução/Edição de Skins

[GodFather.]

body.normal, body.log {
   background-image: url("../img/bg/background.jpg");
   background-position: right;
}

http://i241.photobucket.com/albums/ff90/killer12_17/background.jpg
esta imagem e' o que está na citaçao??

mas eu qeria mudar de imagem do fundo, como eu faço???

 ... Basta ires a pasta IMG > BJ > eliminares o ficheiro background.jpg... e colocares nessa mesma pasta a tua imagem com o nome background no formato .jpg

[Rock'N'Rolla]

Obrigadaoooooo.. 

excelente TUTORIALLL 

Qero q venha ai mais IDEIAS 

Continua assim 

[Rock'N'Rolla]

Mais outra duvida 

o meu skin ta pronto..

e como é que eu faço para ter o Url do meu skin ??

[GodFather.]

Mais outra duvida 

o meu skin ta pronto..

e como é que eu faço para ter o Url do meu skin ??

Alujamento

    * Fazer hosting dos ficheiros, mantendo o nome e a organização das pastas originais
    * O URL indicado deverá ter na raiz a pasta "img" e a "css".

Se fores cliente cabovisão tens um servidor FTP...mas existem muitos servidores outros servidores grátis que podes arranjar, podem é não ser de confiança ... só tens de procurar 

p.s - se quiseres manda-me um MP, com o teu mail...e eu faço-te hosting dos ficheiros

[Rock'N'Rolla]

http://i241.photobucket.com/albums/ff90/killer12_17/duvida.jpg

textarea {
   border-style:solid;
   border-width:1px;
   color: #9900CC
   background-color: transparent;
   border-color: #9900CC;

a minha questao e' porque que isto (imagem) ta branco como no codigo que pôs, ta' transparete..???