Sivu 1/2
Miten tämä onnistuisi?!
Lähetetty: 28 Touko 2006, 20:34
Kirjoittaja peteliuz
Hei!
En tiedä kuuluko tämä aihe
modaamisen puolelle, mutta miten onnistuisin luomaan tämän näköisen phpBB -foorumin subsilver-pohjaa muokkaamalla:
http://www.peteliuz.net/indexk.htm
Ton CSS-tyylin olen luonut Dreamweaverillä eli olen copy-pastannut erään phpBB-foorumin (tyyli:subsilver) source coden DW:iin
VAIN ja AINOASTAAN sen takia, että voisin luoda uudet CSS-tyylit vanhojen päälle.
Eli kaikki grafiikat (buttonit, Flash-banneri yms.) ja CSS-tyylit mulla ois jo aivan valmiina.
1. Banneri on tehty siis Flashillä (swf-file)
2. Ohjeet-, haku-, yms. linkit on kuvia
3. Noi koristeelliset kehykset+vihreä tausta on sama toistuva taustakuva koko höskän alla
4. Alimpana oleva vaakatasossa oleva kehys on taulukon kolmeen soluun jaettu kuva
Mitä olen phpBB.com:in foorumilta lukenut niin mun pitäis muokkaila niitä header yms. templateja ja tehdä paljon muutakin. Menee kyllä tosi monimutkaiseksi, mutta oppimassahan tässä ollaan.
Eli jos joku on onnistunut luomaan tämän näköisen phpBB-foorumin niin pitäishän toi minunkin visio sitten onnistua jollakin tavalla:
http://www.phpbb.com/styles/forum/index.php?style=110
Harmi ku tossa phpB:n hallintapaneelissa ei oo mitään sisäänrakennettua web-editointi -softaa niin homma ois paljon helpompaa.
Ja ilmeisesti niitä Dreamweaverillä luomiania CSS-tyylejä (css-file) ei voi suoraan sellaisenaan lisätä phpBB-foorumille?!
Lähetetty: 28 Touko 2006, 21:54
Kirjoittaja Lurttinen
Suomeksi kiitos!
Lähetetty: 29 Touko 2006, 00:38
Kirjoittaja peteliuz
Kiitoksia linkeistä!
Mutta mie vähän aavistelinkin, että joku laittaa mulle kuitenkin linkit noihin phpbb.comin artikkeleihin, jota en itse asiassa hakenut takaa vaikka niissä asiaa onkin.
Joten voisitko sinä tai joku muu asiantuntija ystävällisesti vastata noihin mun kysymyksiin suomeksi, koska sitä vartenhan tämä suomenkielinen phpbb -foorumi on perustettu meitä suomalaisia phpbb-käyttäjiä ajatellen.
Olen muutenkin aivan aloittelija näissä phpbb-asioissa niinkuin varmaan moni muukin täällä joten ohjeet suomeksi kirkaistaisivat asioita huomattavasti.
Lähetetty: 29 Touko 2006, 07:56
Kirjoittaja Lurttinen
En tiedä onkohan tosta tehty mitän tutoriaalia suomeksi, mutta.
Perus sivu rakentuu yleensä kolmesta osasta.
Ylä-osa, overall_header.tp
Josssa aloitetaan sivu, avataan muutama table, luodaan ne linkit ja muut mitkä tuleee näkymään jokaisella sivulla.
CSS määrittelykin tehdään täällä, jotta admin paneelin säädöt toimisivat.
Sisältö, *_body.tpl
Sivun varsinainen sisältä löytyy *_body.tpl tiedostoista.
Oli sitten viestejä tai muuta...
Ala-osa, overall_footer.tpl
Sulkee avonaiset tablet ja näyttää foorumin ala-osan. phpBB copyrightit ja linkin admin paneeliin.
*.tpl tiedostot on tehty HTML:kielellä. Eli ovat aika yksinkertaisia seurata, jos perusteet on hallinnassa.
HTML opetusmateriaalia on netti ja kirjastot pullollaan.
Kuinka laitetaan kuva ja millaisen sivun haluaa tehdä. Riippuu ihan mielikuvituksesta ja kuinka hyvin osaa vääntää HTML:ää.
CSS tiedosto ei toimi suoraan sellaisenaan, vaan sun täytyy ottaa se eka pois overall_header.tpl tiedostosta ja osoittaa se käyttämään ulkopuolista CSS tiedostoa.
Käytännössä, poista pätkä koodia ja poista kommentit sen ulkoisen tiedoston käytöstä.
Lähetetty: 29 Touko 2006, 08:47
Kirjoittaja Merri
eXtreme Styles MODin (joka on älyttömän helppo asentaa, korvataan yksi tiedosto ja sitten vaan upataan muut ylös) mukana tulee tyylien muokkaamista varten ihan reilusti työkaluja. Itse olen käyttänyt sitä ihan PHP-koodinkin muokkaamiseen. Sillä on aika näppärä ottaa tuplakopio subSilveristä ja sitten muokata sitä kopiota. Sitten kun laittaa vielä ulkoasun vain itselleen niin voi katsoa miltä tulos näyttää kun asioita muokkaa.
Ensimmäinen muokkaus joka kannattaa tehdä on poistaa CSS overall_header.tpl:stä ja tehdä siellä olevasta poiskommentoidusta <link>-elementistä käytössä oleva. Sitten voi muokata tyylinnimi.css-tiedostoa. Tuota tekemääsi tyyliä varten tarvitsee lähinnä muokata overall_header.tpl:ää, jotta yläosan puoliskon saisi haluamasi näköiseksi.
Kannattaa muuten huomioida, että nuo yläpään linkit vaihtelevat enemmänkin: voi olla että nyt niille tuossa ulkoasussa valitsemasi tila ei riitäkään kaikille linkeille silloin kun käyttäjä on kirjautunut sisälle.
Lähetetty: 29 Touko 2006, 16:26
Kirjoittaja peteliuz
Lurttinen.
Niin, ei välttämättä löydykään suomeksi tutoriaalia, mutta ihan perinteistä suoraa vastausta mie odotin ja myös sen nyt sainkin joten kiitos!
Merri. Ensimmäinen muokkaus joka kannattaa tehdä on poistaa CSS overall_header.tpl:stä ja tehdä siellä olevasta poiskommentoidusta <link>-elementistä käytössä oleva. Sitten voi muokata tyylinnimi.css-tiedostoa. Tuota tekemääsi tyyliä varten tarvitsee lähinnä muokata overall_header.tpl:ää, jotta yläosan puoliskon saisi haluamasi näköiseksi.
1. Miten sen CSS:n poistaminen tapahtuu? Ja mitkä rivit pitää poistaa koodista etten vain menisi poistamaan jotain mitä EI SAA poistaa? 100 % aloittelija kun olen. Entäs se <link>-elementin moukkaminen?
2. Ja entäpä sen Dreamweaverissa luomani CSS-tyyli -tiedoston tuominen (kirjoittaminen) onnistuneesti sisään templateihin ja mihin templateihin?
Merri. Kannattaa muuten huomioida, että nuo yläpään linkit vaihtelevat enemmänkin: voi olla että nyt niille tuossa ulkoasussa valitsemasi tila ei riitäkään kaikille linkeille silloin kun käyttäjä on kirjautunut sisälle.
3. Siinä on vain ja ainoastaan ne linkit, jotka foorumille haluan. Mutta entäpä noiden ei-haluttujen linkkien esim. käyttäryhmät, yksityiset viestit jne. poistaminen onnistuu ilman katastrofaalisia seurauksia?
Ilmeisesti koodin kautta pitää hoitaa tämäkin niinkuin tuo edellinenkin tekstieditorin avulla.
Lähetetty: 29 Touko 2006, 17:31
Kirjoittaja Merri
Selviät tällä kertaa templaattien muokkaamisella. Joudut kuitenkin poistelemaan linkkejä useammastakin paikasta jos haluat estää toiminnon käytön kokonaan, mm. viewtopic_body.tpl ja profile_view_body.tpl - sieltä löytyy muutamia PM-muuttujia (jotka sisältävät mm. kielitietoja).
Ylärivin linkit vaihtelevat sen mukaan, onko käyttäjä kirjautunut sisälle vaiko ei. Tätä voi itse säätää templaattien kautta ja säätelyssä käytetään näitä:
Koodi: Valitse kaikki
<!-- BEGIN switch_user_logged_in -->
TÄMÄ NÄKYY SISÄÄNKIRJAUTUNEELLE
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
TÄMÄ NÄKYY ULOSKIRJAUTUNEELLE
<!-- END switch_user_logged_out -->
CSS:n poisto: poista <style type="text/css"> ... </style>, joka sijaitsee overall_header.tpl:ssä.
Erillisen CSS-tiedoston lisäys: tämän kohdan yläpuolella on <!--link href=... /-->, joka yksinkertaisesti muutetaan pois kommentista poistamalla merkit !-- ja -- (lopputulos on <link href=... />).
Tämän jälkeen voit käyttää erillistä tyylitiedostoa. Hmm... Puhutaan vaikka subSilveristä, vaikka tekisitkin muutokset omaan uuteen ulkoasuun. Eli subSilverin tapauksessa tämän CSS-tiedoston nimi on subSilver.css. Tämä sisältää ne CSS-jutut, jotka haluat muuttaa ja voit laittaa kaikki CSS-jutut sinne.
Ja lopuksi: tekstieditori on tosiaan iso kaveri näissä asioissa. Minä käytän vain ja ainoastaan yhdistelmää tekstieditori ja lisäksi eXtreme Stylesin tarjoamaa muokkausmahdollisuutta (koska se on näppärän nopea, ei tarvtse käyttää erillistä FTP-ohjelmaa välissä).
Lähetetty: 29 Touko 2006, 18:19
Kirjoittaja peteliuz
Jees, onnistuin jopa lisäämään sen flash-bannerin foorumille ja alas sen kehyksen:
http://www.peteliuz.net/foorumi
Tein ton kaikein sillä tavalla, että copy-pastasin noiden tpl-filujen koodit dreamweaveriin ja tein siellä haluamani muutokset. Sitten copy-pastasin muokatun koodin takaisin DW:Stä tpl-filujen -koodiin ja homma näyttää toimivan ihan näppärästi tuolla tavalla! :)
Tavallaan olen nyt keksinyt sen "sisäänrakennetun web-editointi -softan" phpbb:hen, joka toteutui nyt
"kiertotietä" :)
Toi css-linkki -koodini näyttää nyt tältä:
Koodi: Valitse kaikki
<link rel="stylesheet" href="templates/suku1/{T_HEAD_STYLESHEET}" type="text/css">
Voisko tuota muokata tähän muotoon, että se mahdol. olisi oikein:
Laitahan mulle "oikeaoppinen" koodi-rivi kokonaisuudessaan, jos tuo ylläoleva on väärin, kiitos!
Lähetetty: 29 Touko 2006, 20:41
Kirjoittaja Merri
Koodi: Valitse kaikki
<link rel="stylesheet" href="templates/suku1/suku1.css" type="text/css">
kertoo selaimelle, että kyseessä on tyylitiedosto.
type kertoo selaimelle tiedoston MIME-tyypin. Tässä tapauksessa tyylitiedosto on CSS-tiedosto.
Sinulle olisi kyllä hyötyä opiskella HTML:ää ja/tai XHTML:ää tovi, koska jos et nyt ala opetella, niin saat olla tämän tästä kysymässä miten ja miten jokin tietty asia tehdään - runsaasti kysymyksiä, vaikka tarvitsisi opetella vain joitakin perusteita ja muutama nyrkkisääntö
Tosin, mitä enemmän vaatii, sitä enemmän myös joutuu opettelemaan. Nämä tämänhetkiset muokkauksesi ovat kuitenkin onneksi suhteellisen yksinkertaisia, ettei tarvitse opetella mm. eri selainten huomioonottamista.
Lähetetty: 29 Touko 2006, 20:56
Kirjoittaja peteliuz
Kiitti!
Jees, oppimassahan tässä ollaan. Kunhan nyt pääsis alkuun näissä asioissa ja siksi kyselen. Kyllähän näillä eväillä alkuun olen päässyt. Kiitos teille!
Kyllä mulla html:n perusteet on ihan hyvin hallussa, mutta ei ole kaikki osa-alueet tietenkään hallussa edes perusteista.
Mulle ei tuota asenne-ongelmia/esteitä korkeasta vaatimus-tasosta johtuva uusien ja taas uusien asioiden opetteleminenkaan. Pidän näiden juttujen opiskelusta. Niitä tarvii tulevassa työelämässäkin.
Enempää en teitä enää vaivaa näillä yksityiskohtaisilla kysymyksilläni.
Lähetetty: 30 Touko 2006, 22:00
Kirjoittaja peteliuz
Merri. Selviät tällä kertaa templaattien muokkaamisella. Joudut kuitenkin poistelemaan linkkejä useammastakin paikasta jos haluat estää toiminnon käytön kokonaan, mm. viewtopic_body.tpl ja profile_view_body.tpl - sieltä löytyy muutamia PM-muuttujia (jotka sisältävät mm. kielitietoja).
Piti kysymän vielä sitä, että mistä kaikista tpl-fileistä ne haluamansa linkit pitää poistaa noiden mainitsemiesi linkkien lisäksi?
Menis ikä ja terveys jos alkais yksitellen katsoon jokaisen tpl-filen läpi, että onko niissä niitä ei-haluttuja linkkejä.
Lähetetty: 30 Touko 2006, 22:26
Kirjoittaja mrl586
peteliuz kirjoitti:Piti kysymän vielä sitä, että mistä kaikista tpl-fileistä ne haluamansa linkit pitää poistaa noiden mainitsemiesi linkkien lisäksi?
Menis ikä ja terveys jos alkais yksitellen katsoon jokaisen tpl-filen läpi, että onko niissä niitä ei-haluttuja linkkejä.
Mikä tekstieditori sinulla on? Minulla ei mene koko ikää, vaikka katsoisin kaikki tpl-fileet läpi.
Lähetetty: 31 Touko 2006, 01:00
Kirjoittaja peteliuz
TextPad, notepad, word. Mutta textpad on kyllä paras ja sitä mie yleensä käytänkin. Harmi vaan, että täysi versio maksaa 20 €. No, eip toi kovin kallis ole loppujen lopuksi.
Anyway sain haluamani linkit poistettua yksinkertaisesti käyttämällä "maalaisjärkeä" sen suhteen missä ne linkit voisivat sijaita. Eipä tarvinnutkaan kaikkia tpl-filuja selailla! :)
Lähetetty: 31 Touko 2006, 01:17
Kirjoittaja mrl586
Muokkaamista voi nopeuttaa tekstieditorin etsi-toiminnolla...
Lähetetty: 31 Touko 2006, 08:27
Kirjoittaja Aeth
Ja wordissa on ainakin etsi ja korvaa, jolla saa korvattua kaikki tiedostossa olevat entisen templaten nimet kerralla.