Tenkte da å skrive en kort liten guide på hvordan du kan redigere det eksisterende designet på siden din med et unikt design som kun er ditt
Dette er min workflow, men do as you wish.
Jeg er en lat mann og finner som regel et theme som er tilnermet lit stilen jeg vil ha (oppsett av menyer, bokse, etc) og går ut i fra den.
Ok la oss starte her.
Steg 1
Finn et theme du mener har potensiale for ditt forum og last det ned på din maskin.
Det neste du gjør nå er å kopiere over alle bildefilene i:
- Kode: Merk alt
.../styles/din_theme/theme/images
Bildene til selve designet ligger som regel i denne mappen mens forumikoner etc ligger i:
- Kode: Merk alt
.../styles/din_theme/imageset
Legg disse bildene i en egen mappe så har du litt kontroll over dem.
Steg 2
Finn deg et bilderedigeringsprogram hvor du kan lage ditt eget utseende.
Personlig bruker jeg photoshop CS4 og CS3, men det finnes noen flere alternativer for deg som vil prøve ut design gratis.
Programmer:
- Gimp (Last ned) (Info) (Tutorials)
- Paint.net (Last ned) (Info) (Tutorials)
- SmoothDraw NX (Last ned) (Info)
- Project Dogwaffle 1.2 (Last Ned) (Info)
Personlig ville jeg gått for Gimp siden jeg mener det er det beste alternativet til photoshop.
Så har du selvfølgelig økonomiversjonen til adobe, Adobe Photoshop Elements som varmt kan anbefales om du er ny innen photoshop, men vil lære photoshop
Prisforskjellen er ekstrem på CS-serien og Elements-serien. Du får Elements til rundt 800-1000,-, mens CS4 ligger på 8-15 000,-.Forskjellen er STOR, men likevel har du alt du trenger i elements til og designe litt web
Steg 3
Nå er det vel forsåvidt bare å kose seg med designing av bildene du har kopiert, pass på at bildene går overens og at kanter, buer, hjørner etc. passer med hverandre.
Jeg har ikke så mye mer å si om design-delen, men bare les guider, prøv deg frem og lær!
Bonustips:
- Det finnes uenderlig mange ikoner på nettet, bruk ikoner til å piffe opp for eksempel knapper, hjørner på bokser etc.
- Om du vil ha en stilig logo, lek med Layers (layers i gimp, photoshop etc.). Legg flere bilder over hverandre og lek med blending modes. (Tips: Abstrakt er alltid kult svakt i bakgrunnen)
- Google bildesøk er en perfekt kilde for ikoner, bilder og inspirasjon.
- Du finner mange tutorials på youtube!
- Jeg driver også en side med photoshop-filmer. På denne siden kan du lære masse innen photoshop CS3.
(Hadde satt pris på om noen kunne gitt feedback på filmene mine på DW om noen bruker dem.)
Steg 4
Trodde du det var alt? Feil! Du er en brøkdel på vei til ditt eget design, men likevel godt på vei
Det neste du må fikle med nå er CSS (Nei vi snakker ikke om det patetiske FPS-spillet med dårlig motor og firkanta blod-dråper).
CSS kan være en smule frustrende i starten, men når du vet hvor du skal se går ting som en lek. Hovedtingene som du bør og må fikse er fargekodene, bakgrunnsbilder og eventuelle fontstørrelser, paddings osv osv osv osv.
Et lite forord om CSS før vi starter
CSS står for Cascading Style Sheets og er noe av det beste som har hendt oss i denne generasjonen.
I CSS filene på ditt theme stiller du 80% av designet, oppsett, farger, plasseringer o.l, og det som er så genialt med CSS er at når du endrer én fil, så endrer du designet på hele siden.
I CSS filene til ditt theme bytter du ut farger, bakgrunner, bilder, bredde på design etc så dette er en god start om du for eksempel vil gjøre designet litt bredere enn patetiske 500px.
Fargekoder
Fargekoder i CSS er det samme som i HTML, nemmelig en kode som starter med # og har 6 tegn etter seg. Eksempler på fargekoder er for eks: #ffffff (Hvit) #000000 (svart) #cccccc (Grå) osv.
Det å vite hvilken farge som er riktig kan være litt kjipt, men en metode er å finne fargekart på nettet og gå ut i fra disse eller som jeg gjør lager først designet, print-screener themet mens det vises i phpbb og åpner det i photoshop. Dermed tar jeg "eyedropper tool" og leser av fargekoden i Photoshop.
Hva betyr de forskjellige tagsa i CSS?
Jeg kan legge ved en liten del av en css-fil her og forklare hva det forskjellige betyr.
font-weight: normal; (Dette er hvordan du at fonten skal se ut, italic, bold, normal eller underline)
font-family: Arial, Helvetica, sans-serif; (Dette er font-typen du vil bruke på siden, de mest brukte et Tahoma, Arial, Helvetica og Verdana)
text-transform: uppercase; (Denne brukes om du vil at all tekst skal vises med STORE BOKSTAVER )
color: #BF0000; (Dette er fargekode som forklart over, med andre ord er dette farge Rød)
font-size: 10px; (Dette er fontstørrelsen du vil bruke)
border-width: 0; (Denne brukes på bilder og beskriver om du vil ha ramme rundt bildene, 0 = Ingen ramme)
border: 0 none #FFFFFF; (Dette er om du kjører ramme og om du vil ha en spesifikk farge på rammen)
height: 1px; (Dette er høyden på objektet på det aktuelle området)
margin: 5px 0; (Dette vil si at objektet, teksten, bildet er 5px i fra nærmeste objekt fra alle kanter. Du kan også bruke margin-left, margin-right, margin-top og margin-bottom)
text-align: right; (Dette er hvordan teksten skal være plassert, center, left eller right)
Det finnes selvfølgelig utallig mange andre tags, men tingen er at det meste er veldig logisk.
Litt info:
- Kode: Merk alt
#header-bg {
width: 1300px;
height: 147px;
margin: 0px auto;
}
Denne koden forteller oss at vi jobber med header-bg (når "overskriften starte med . eller # kaller vi det en klasse/class)
Headeren er 1300px bred og 147px høy (Dette er en bildelogo)
Marginen til andre gjenstander er 0px og automatisk prøver å tilpasse seg resten av siden. Dvs at den går i ett med det som er under logoen.
Setter vi margin til for eks: margin: 5px; vil det være 5px i fra alle andre nære gjenstander.
Hvor endrer jeg CSS?
En mulighet er at du kan redigere .css-filene som ligger på din server ./styles/din_theme/theme/
Men nå har det seg slik at noen av de nyere themsa og phpbb3 lagrer .css informasjonen i mySQL (Noe jeg hater sterkere enn sterkest).
Måten du kan redigere dine css-filer på da er via ditt adminpanel i phpbb.
Først går du inn på ditt adminpanel og trykker på utseende:
Så velger du videre der Stilark (CSS):
Velg nå under ditt theme -> Rediger
Og til slutt kan du endre css-filene dine her.
Bonustips: Det lønner seg virkelig og ta backup av databasen før du begynner å endre filene. Brått så sitter du der uten forum og uten å kunne fikse det igjen ved å bare laste opp en ny, orginal css-fil.
Backup av databasen, Metode 1
Dette er en enkel prosedyre, så forklarer kort med tekst.
Gå på ditt adminpanel -> Vedlikehold -> Under Database-kategorien på menyen velger du Sikkerhetskopiering
Det neste du gjør er å følge bildet under:
1. Ta full backup.
2. Velg filformatet databasen skal lagres i. (gzip anbefales)
3. Her velger du om du vil lagre filen på serveren eller om du vil laste ned filen til din maskin.
(Jeg anbefaler å legge den på serveren, for da dukker den automagisk opp i gjenopprett kategorien.)
4. Merk alle! Grunnen er enkel, velger du feil tabell er du doomed uansett. Da er backupen forgjeves. Så her er det bedre å være på den sikre siden.
5. Trykk OK.
6. Rediger i vei. Om du nå er uheldig går du bare inn på samme siden hvor du var og velger Gjenopprett på menyen og velg backup med siste dato.
Backup av databasen, Metode 2
Ved hjelp av et innspill under legger jeg også til at man kan installere Auto DB Backup mod.
Dette er en mod som automatisk tar backup av din database hver dag. Jeg har ikke brukt denne modden, men det kan virke som man kan stille inn modden til å kjøre så mange backuper du orker når du vil.
Takk til cityking for innspill!
CSS er utrolig stort og det vil ta meg flere uker å skrive en guide så alle skal forstå, men noen tips skal jeg skrive under her
- En Class er et spesifikk område på siden som er koblet opp mot en .php-fil i ditt theme. (#header-bg er for eks. toppen, #search-box er hvordan søkeboksen skal se ut etc.)
- De fleste css-filene har overskrifter som forklarer hvilket område du redigerer. (Eksempel: /* Attachments ----------------------------------------*/ .. Under denne overskriften redigerer du utseende på vedlegg)
- Bruk kun websikre fargekoder!
- Les guider om CSS for å lære mer, en flott side er w3schools.
- Bruker du firefox kan jeg anbefale å laste ned en add-on hvor du får opp CSS-fila i browservinduet og kan endre filen og se på forskjellene på den orginale siden din. Du kan videre lagre css-filen og laste den opp på sin server.
- Ta ALLTID backup av .CSS-filer. Grunnen er enkel. Driter du deg ut, så driter du deg ut
Steg 5
Ikke glem å legge deg, spise eller drikke mens du designer. Jeg har gått på smellen at brått klokka er 02:33 på natten og man skal på jobb dagen etter.
Moralen er: CSS og Jobb = Vodka, battery for å holde seg våken.
Håper noen ble litt klokere på ting hvertfall. spør om det er noe
Good nite!
01.10.09 - Edit* Lagt til noen flere linker og noe glemt info
01.10.09 - Edit** Lagt til noen bilder og "Hvor endrer jeg css". Bildene er lagt til enkelt og greit fordi guiden blir mye lettere å lese.
