Kreiranje PunBB skinova

[Loud]

Vidim da svi u poslednje vreme prave PunBB skinove ....
Uglavnom PunBB skin se pravi većinom preko CSS-a to jest Cascading Style Sheet-a
Za one koji ne znaju šta je to to je kao što i tamo piše
''U ovom delu, možete snimiti koda CSS da biste dodali elemente dizajna dodajući rukovanju boja administrativne boje. To podrazumeva da možete preči sa rukovanja boja, na ediciju lista stila a da ne izgubite nijedam podatak koji ste snimili.

To znači da sve što budete dodali na taj list će biti prioriteran sprem boja i slika koje ste definisali u rukovanju teme (CSS baze).''

Ako ste početnik u ovome došli ste na pravo mesto....


Evo nekih osnova CSS-a:

Kod:

/* Main heading (Logo and description)-------------------------------------------------------------*/

- U tom delu rukovodite logo

Kod:

/* Footer-------------------------------------------------------------*/

-Kontrola Footera

Kod:

/* Table-------------------------------------------------------------*/

-Kontrola kategorija i sl.

Kod:

/* Wrap .pun-------------------------------------------------------------*/

Uglavnom kontrolišete boju fonta,boju linkova,fontove i sl.

To su donekle osnovni delovi css-a

Dalje za

Kod:

/* Main heading (Logo and description)-------------------------------------------------------------*/

dodajete

Kod:

#pun-intro {
   margin: 0;
   padding: 1.5em 1em 1em 1em;
   border-bottom: 0px solid #296fa5;
   background-color: transparent;
   background-image: url('link slike logoa');
        background-position: center;
   text-align: left;
   background-repeat: no-repeat;
        height: visina u px;
        margin-top: -5px;
        margin-left: -23 px;
        width: sirina u px;
   }

Za

Kod:

/* Footer-------------------------------------------------------------*/

ovo

Kod:

#pun-foot {
   background-image: url('link slike footera');
        background-repeat: no-repeat;
        margin-left: -pomeranje ulevo u px(obavezno minus);
   width: sirina u px;
        background-position: bottom;
        height: visina u px;
        margin-bottom: -pomeranje u dnu u px(obavezno minus);
        }

Za

Kod:

/* Table-------------------------------------------------------------*/

Kod:

/* Table-------------------------------------------------------------*/

.pun table.table {
   width: 870 px;
   table-layout: fixed;
   empty-cells: show;
   border-collapse: collapse;
       
        }
.pun .frm .frm-form table {
   border: 1px solid #dddddd;
   border-top: 0px solid #1F537B;
   border-color: #bbb;
   }
.pun table.table th {
   padding: 0.5em 0;
   border-style: none;
   border-color: #;
   background-image: url('http://i86.servimg.com/u/f86/13/96/16/34/untit210.png');
   color: #333333;
   }
.pun table.table td {
  padding: 0.6em 0 0.7em;
  border-width: 1px;
  border-style: solid none none solid;
  line-height: 130%;
       background-color: #fbfbfb;
  background-image: url('slika pozadine opisa podforuma ');
        background-repeat: repeat-x;
      background-position: bottom;
  border-color: #dddddd;
}
.pun .main table td.tc2, .pun .main table td.tc3 {
   background-color: #fbfbfb;
   }
.pun table.table td table td {
   border: none;
   padding: 0px;
   }
.pun table .tcl {
   width: 50%;
   overflow: hidden;
   text-align: left;
   }
.pun table.table th.tcl {
   padding-left: 0.5em;
   }
.pun .frm .frm-form table .tc2 {
    text-align: left;
    padding-left: 0.5em;
   }
.pun .table .tc2, .pun .table .tc3 {
   width: 10%;
   text-align: center;
   }
.pun .frm .frm-form table .tc4 {
   text-align: center;
   width: 5%;
   }
.pun table .tcr {
   width: 30%;
   overflow: hidden;
   text-align: left;
   padding: 0 0 0 0.5em !important;
   }
.pun table th.tcl,.pun table th.tc2,.pun table th.tc3,.pun table th.tc4,.pun table th.tcr {
   overflow: hidden;
   }
.pun table .report {
    width: 9%;
    }
.pun .main table.table td.report {
    background-color: #fbfbfb;
    }
.pun table .tdtopics {
    padding-left: 42px;
    }
.pun table .tdtopics .status {
    margin-left: -32px;
    }
.pun table .tdtopics img, .pun .posthead img {
   vertical-align: middle;
   }
table .tcl.memberlist {
   width: 25%;
   }
.pun tbody.statused td.tcl {
   padding-left: 3.4em;
   }
.pun tbody.statused span.status {
   position: absolute;
   }
.pun table td.tcl {
   border-left-style: none;
   border-left-width: 0;
   vertical-align: top;
   height: 42px;
   padding-left: 0.5em;
   min-height: 24px;
   }
pun table td.tcl .height-giver {
   min-height: 42px;
   visibility: hidden;
   width: 1px;
   }
td.avatar-mini a {
   text-decoration: none;
   }
td.avatar-mini a span {
   text-decoration: underline;
   }
td.avatar-mini img {
   background-color: #fff;
   border: 1px solid #1f537b;
   vertical-align: middle;
   width: 38px;
   height: 38px;
   }
* html .pun table {
   position: relative;
   }
* html .pun table td.tcl {
   position: relative;
   }
.pun table td.tcl h2 {
   font-weight: bold;
   }
.pun .main table.table td.td-title {
   background-color: #f4f9fd;
   }
.pun .main table.table th.name {
   padding-left: 0.5em;
   }
.pun .sticky-separator {
   border-top: 5px double #dddddd !important;
   }
.mod-text {
   font-weight: bold;
   }
h2.topic-title {
   display: inline;
   }
.hierarchy {
   display: inline;
   text-transform: none;
   border: none;
   font-size: 10px;
   font-weight: bold !important;
   }


A za wrap

Kod:



/* Wrap .pun-------------------------------------------------------------*/
.pun {
   width: 880px;
   margin: 0 auto;
   padding: 5px;
   
/* Fix for RTL min-width bug, left here for consistency */
min-width: 768px;
   line-height: 130%;
   }
.pun div, .pun td, .sig-line {
   border-color: ##dddddd;
   color: ##dddddd;
   }
.pun img, .pun fieldset {
   border: none;
   }
.pun a:link {
   color: #boja linka;
        text-decoration: none;
   }
.pun a:visited {
   color: #boja posećenog linka;
        text-decoration: none;
    }
.pun a:hover {
   color: #boja linka kad je mis iznad;
        text-decoration: none;
    }
.pun a:active {
   color: #boja kativnog linka;
        text-decoration: none;
    }

.pun h2, .pun h3, .pun th, .pun input, .pun select {
   font: normal 1em Verdana, Arial, sans-serif;
   }

Još jedan važan kod je

Kod:


body {
   background-color: #boja pozadine;
   background-image: url('slika za sredinu foruma(npr http://i86.servimg.com/u/f86/13/96/16/34/bocy10.png)');
   background-attachment: scroll;
        background-repeat: repeat-y;
   color: #333333;
   font-size: 12px;
   font-family: Skup fontova ;
background-position: center;
   }

Tu rukovodite pozadinu i to....

Takođe css sadrži još kodova
A dobra stvar je to što možete u cssu da dodajete ponešto i na srpskom ....

Sada CSS nije jedino mesto gde menjate skin i dalje možete menjati skin preko Rukovanje Slika-Prošireni mod
Samo za logo morate staviti transparentnu sliku jer ako ne stavite logo u css-u će biti prekriven i sve će se poremetiti

PunBB sadrži i template to jest HTML kodove koji takoće preko njih menjate izgled


Da ne bi svaki template objašnjivao valjda znate čemu služe...

Editovali ste template al vam se ništa ne dešava?
-Morate da potvrdite template....
Na sledeći način:
U redu templatesa koje ste editovali imaćete sa desne strane ovo: ,pisaće Na čekanju
i naslov templatesa će biti u crvenoj boji kliknite na to +
i onda će vam biti prikazane template,pisati u admin panelu Izdato i naziv templata će biti zelen ....

To je nešto osnovno što biste trebali znati u vezi kreiranja PunBB skina....Pustite maštu na volju i istražujte ....

Ne postoji stvarno tutorijal kako napraviti skin jedino je dovoljno vaša mašta i imaćete perfektan skin ..Ovo je samo osnovno...

Napisao **BeeBo.O™**-Marko | (c) www.svettutorijala.forumotion.net

---

Ako negde stavljate tutorijal stavite i ovo

Kod:

[b][right][size=10] Napisao **BeeBo.O**-Marko | (c) www.svettutorijala.forumotion.net [/size][/right][/b]

Da se zna koje pravio tutorijal
Ako ne stavite bićete kažnjeni ....

[iwkzy]

gde da pravim ovo kao sto je ovde, ono skroz dole gde je mamut sam...i ovo iznad gde pise svet tutorijala? Neznam da li si me razumeo? I to si pravio preko ps?

EDIT: evo slike
kako da napravim to gde to rukovodim?

[Duško*]

Gde se kopiraju ovi vazdan kodovi?

[CyBeR]

To ti je Css A iwkzy , to je slika kod dela footer

[iwkzy]

aham hwala....nasao sam
samo mi trebaju ta prazna polja

[Loud]

gde da pravim ovo kao sto je ovde, ono skroz dole gde je mamut sam...i ovo iznad gde pise svet tutorijala? Neznam da li si me razumeo? I to si pravio preko ps?

EDIT: evo slike
kako da napravim to gde to rukovodim?

a bag nmg da verujem

[iwkzy]

hehee nasao sam

[Loud]

aj da ne spamujemo idi tamo u bagovi foruma pa tu javi

[Nattaliya]

ja sam sve uradila kako je i tu,i nista

[Dragica Siflis]

mozete da napravite tut kako da stavim cet na forum

[Sponsored content]