Miten tämä onnistuisi?!

peteliuz · Viesti Kirjoittaja **peteliuz** » 28 Touko 2006, 20:34

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?!

Viesti Kirjoittaja **Lurttinen** » 28 Touko 2006, 21:54

peteliuz · Viesti Kirjoittaja **peteliuz** » 29 Touko 2006, 00:38

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.

Viesti Kirjoittaja **Lurttinen** » 29 Touko 2006, 07:56

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ä.

Merri · Viesti Kirjoittaja **Merri** » 29 Touko 2006, 08:47

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.

peteliuz · Viesti Kirjoittaja **peteliuz** » 29 Touko 2006, 16:26

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.

Merri · Viesti Kirjoittaja **Merri** » 29 Touko 2006, 17:31

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 , 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ä).

peteliuz · Viesti Kirjoittaja **peteliuz** » 29 Touko 2006, 18:19

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:

Koodi: Valitse kaikki

<link href="templates/suku1/suku1.css/>

Laitahan mulle "oikeaoppinen" koodi-rivi kokonaisuudessaan, jos tuo ylläoleva on väärin, kiitos!

Merri · Viesti Kirjoittaja **Merri** » 29 Touko 2006, 20:41

Koodi: Valitse kaikki

<link rel="stylesheet" href="templates/suku1/suku1.css" type="text/css">

rel 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.

peteliuz · Viesti Kirjoittaja **peteliuz** » 29 Touko 2006, 20:56

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.

peteliuz · Viesti Kirjoittaja **peteliuz** » 30 Touko 2006, 22:00

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ä.

mrl586 · Viesti Kirjoittaja **mrl586** » 30 Touko 2006, 22:26

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.

peteliuz · Viesti Kirjoittaja **peteliuz** » 31 Touko 2006, 01:00

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! :)

mrl586 · Viesti Kirjoittaja **mrl586** » 31 Touko 2006, 01:17

Muokkaamista voi nopeuttaa tekstieditorin etsi-toiminnolla...

Aeth · Viesti Kirjoittaja **Aeth** » 31 Touko 2006, 08:27

Ja wordissa on ainakin etsi ja korvaa, jolla saa korvattua kaikki tiedostossa olevat entisen templaten nimet kerralla.

phpBB Suomi

Miten tämä onnistuisi?!

Suomeksi kiitos!

Paikallaolijat