Na va radau aš kaip koduoti Php Fusion dizainą tik nežinau ar čia viskas ir-ar V7-am tinka :) . Tai jei viskas ok tai man mažiau jūsų pagalbos reikės ir pradėsiu koduoti :) .Šaltinis
Supažindinsiu su detalia PHP-Fusion Theme sudėtimi ir sukursime theme.
Susikūriame tuščia aplanką ir pavadiname kaip tik norite, dabar atsidarome šį aplanką ir sukuriame failą pavadinimu "styles.css", atsidarome Notepad (arba kitą editorių koki turite).
1,1 dalis - Nuorodos
Dedame į savajį styles.css tai:
a {
color : #000;
text-decoration : none;
}
a:hover {
color : #000;
text-decoration : underline;
}
Color dalis:
Dabar jums reikia spalvų (RGB Kodais), jų rasite čia html-color-codes.com, kad galėtume pakeisti "color" sau tinkama spalva.
text-decoration dalis:
teksto dekoracijos gali būti:
· none
· underline
· overline
· line-through
1,2 Dalis - Šoninės nuorodos
(Tai jūsų saito šoninės panelės)
a.side {
color : #000;
text-decoration : none;
}
a:hover.side {
color : #000;
text-decoration : underline;
}
1,3 Dalis - Viršutinės nuorodos
(Randasi subheaderyje, tai nuorodos po jūsų baneriu)
a.white {
color : #000;
text-decoration : none;
}
a:hover.white {
color : #000;
text-decoration : underline;
}
2,1 Dalis - Body (bendras saito vaizdas)
(Pagrindinė dalis, kurioje bendra saito išvaizda,teksto dydis ir pagrindinis fonas)
body {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
}
2,2 Dalis - Horizonatios Linijos
(Atrodo kaip paprastas tagas <hr>)
hr {
height : 1px;
border : 1px solid #eee;
}
hr.side-hr {
height : 1px;
border : 1px solid #eee;
}
2,3 Dalis - Lentelės,alt tekstas ir t.t.
(Reguliuoja tekstų spalvas,forume, vartotojo informacijoje - Vieta, Kada registravosi ir t.t.)
td {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
}
.tbl-border {
color : #555;
background-color : #e1e1e1;
}
.tbl {
font-size : 11px;
color : #000;
background-color : #fff;
padding : 4px;
}
.tbl1 {
font-size : 11px;
color : #000;
background-color : #fff;
padding : 4px;
}
.tbl2 {
font-size : 11px;
color : #000;
background-color : #fff;
padding : 4px;
}
pre {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
}
.alt {
color : #005599;
}
3,1 Dalis - Headeriai
Nuorodų sektorius:
.white-header {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000;
border-bottom : 1px solid #ccc;
padding : 5px;
}
Banerio dalis:
.full-header {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000;
background-color : #fff;
border-bottom : 1px solid #ccc;
padding : 5px;
}
3,2 Dalis - Footeris
(Šioje dalyje užrašai kūrėjų (Powered by PHP-Fusion)
.footer {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000;
background-color : #fff;
border-top : 1px solid #ccc;
padding : 5px;
}
3,3 Dalis - Mygtukai, teksto fonas (textbox)
.button {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000;
background-color: #fff;
height : 20px;
border : 1px solid #ccc;
margin-top : 2px;
}
.textbox {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000;
background-color : #fff;
border : 1px solid #ccc;
}
form {
margin : 0px;
}
4,1 Dalis - Panelių išvaizda
(panelių fonai, bet ne užrašų)
.main-body {
font-size : 11px;
color : #000;
background-color : #fff;
padding : 4px 4px 5px 4px;
}
.side-body {
font-size : 10px;
color : #000;
background-color : #fff;
padding : 4px;
}
4,2 Dalis - Panelių pavadinimų užrašai (panel titles)
.capmain {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
font-weight : bold;
color : #000;
background-color: #fff;
border-bottom : 1px solid #ccc;
padding : 2px 4px 4px 4px;
}
.scapmain {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
font-weight : bold;
color : #000;
background-color: #fff;
border-bottom : 1px solid #ccc;
padding : 4px;
}
4,3 Dalis - Kampai ir fonai
(Tai visi jūsų kampai theme's)
.main-bg {
color : #000;
background-color : #fff;
padding : 5px;
}
.outer-border {
border : 1px solid #ccc;
}
.border {
border : 1px solid #ccc;
}
.side-border-left {
border-right : 1px solid #ccc;
background-color : #fff;
padding : 5px;
}
.side-border-right {
border-left : 1px solid #ccc;
background-color : #fff;
padding : 5px;
}
4,4 Dalis - Naujienos ir Balsavimai
Naujienų apačia Footer (pvz.: Naujieną parašė: Nikas)
.news-footer {
font-size : 10px;
color : #000;
background-color : #fff;
border-top : 1px solid #ccc;
padding : 3px 4px 4px 4px;
}
O čia balsavimo bloko spalva
.poll {
height : 12px;
border : 1px solid #000;
}
5,1 Dalis - Forumai, mini-čatas, komentarai
(Forumo quote, kategorijų vardai, mini-čato pranešimai ir komentarai)
.forum-caption {
font-size : 11px;
font-weight : bold;
color : #000;
background-color: #fff;
padding : 2px 4px 4px 4px;
}
/* Quote langas */
.quote {
font-size : 11px;
color : #555;
background-color : #f8f8f8;
padding : 4px;
margin : 0px 20px 0px 20px;
border : 1px solid #bbb;
}
.comment-name {
font-weight : bold;
color : #005599;
}
/* Mini-čato pranešimo autorius */
.shoutboxname {
font-weight : bold;
color : #005599;
background-color : #fff;
}
/* Mini-čato tekstas */
.shoutbox {
color : #777;
background-color : #fff;
}
/* Mini-čato data */
.shoutboxdate {
font-size : 10px;
color : #888;
background-color : #fff;
}
6,1 Dalis - Maži tekstai, etiketės
(Tai mažiausi tekstai ir šoninių panelių etiketės (labels))
.small {
font-size : 10px;
font-weight : normal;
}
/* mažiausias tekstas */
.small2 {
font-size : 10px;
font-weight : normal;
color : #555;
}
/* mažas tekstas panelėse */
.side-small {
font-size : 10px;
font-weight : normal;
color : #555;
background-color : #fff;
}
/* nav paneles teksto skyrius */
.side-label {
color : #000;
background-color : #fff;
padding : 2px 2px 3px 2px;
}
6,2 - Fotogalerija
.gallery {
padding : 16px 0px 8px 0px;
}
.gallery img {
border : 1px solid #ccc;
}
img.activegallery {
border : 1px solid green;
}
Viskas styles.css baigtas.
Dabar theme.php sudėtis.
Sukuriame naują failą pavadintą theme.php ir jį atsidarome su savo naudojamu editoriumi pvz. Notepad.
1,1 Dalis
Pradėsime įterpdami tai:
<?php
čia jus rašysite visą tūrini užbaigdami ?> kurio niekur daugiau neprireiks, tik baigiant theme.
?>
1,2 Dalis
(Šis kodas apibrėž keletą pagrindinių nustatymų)
if (!defined("IN_FUSION")) { header("Location: ../../index.php"); exit; }
require_once INCLUDES."theme_functions_include.php";
/ nustatymai
$body_text = "#000000";
$body_bg = "#ffffff";
$theme_width = "100%";
$theme_width_l = "175";
$theme_width_r = "175";
Paaiškinimas:
$body_text - tai pagrindinė spalva teksto jūsų saite
$body_bg - tai spalva fono jūsų theme
$theme_width - tai dydžiai jūsų theme
1,3 Dalis - Headeris
function render_header($header_content) {
global $theme_width;
/* tai pats viršus jūsų saito */
echo "<table align='center' cellspacing='0' cellpadding='0' width='$theme_width' class='outer-border'>
<tr><td>";
Čia randasi jūsų baneris
echo "<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='full-header'>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td>$header_content</td>
</tr>
</table>
</td>
</tr>
</table>\n";
Tai nuorodos, bei laikrodis
echo "<table cellpadding='0' cellspacing='0' width='100%'>\n<tr>
<td class='white-header'><strong>".showsublinks("·", "white")."</strong></td>
<td align='right' class='white-header'>".showsubdate()."</td>
</tr>
</table>\n";
Ir pagaliau pradedame daryti puslapi
echo "<table cellpadding='0' cellspacing='0' width='100%'>\n<tr>\n";
}
Footeris
(nuorodos apačioje, pvz. Powered by PHP-Fusion)
function render_footer($license=false) {
global $theme_width,$settings;
echo "</tr>\n</table>\n
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td align='center' colspan='3' class='footer'>";
echo stripslashes($settings['footer'])."</td></tr><tr>";
if(!$license){
/* Čia php-fusion teisės */
echo "<td align='left' class='footer' width='30%'>\n
Powered by <a href='http://www.php-fusion.co.uk' class='white'>
PHP-Fusion</a> v".$settings['version']."</td>";
}
/* čia jūsų theme pavadinimas, bei skaitliukas */
echo "<td align='center' class='footer' width='40%'>
<!-- įterpkite čia savo theme pavadinimą -->
</td>
<td align='right' class='footer' width='30%'>".showcounter()."</td></tr>
</table>
</td>
</tr>
</table>\n";
}
Naujienos
čia naujienų tūrinys ir pačios naujienos...
function render_news($subject, $news, $info) {
echo "<table cellpadding='0' cellspacing='0' width='100%' class='border'>
<tr>
<td class='capmain'>$subject</td>
</tr>
<tr>
<td class='main-body'>$news</td>
</tr>
<tr>
<td align='center' class='news-footer'>\n";
echo openform("N",$info['news_id']).newsposter($info,"<br>").newsopts($info,"·").closeform("N",$info['news_id']);
echo "</td>
</tr>
</table>\n";
}
Kitos dalys: straipsnių, ir kai kurių kitų panelių
function render_article($subject, $article, $info) {
echo "<table width='100%' cellpadding='0' cellspacing='0' class='border'>
<tr>
<td class='capmain'>$subject</td>
</tr>
<tr>
<td class='main-body'>
".($info['article_breaks'] == "y" ? nl2br($article) : $article)."
</td>
</tr>
<tr>
<td align='center' class='news-footer'>\n";
echo openform("A",$info['article_id']).articleposter($info,"<br>").articleopts($info,"·").closeform("A",$info['article_id']);
echo "</td>
</tr>
</table>\n";
}
Opentable - centrinės panelės/kaip atrodys puslapis
function opentable($title) {
echo "<table cellpadding='0' cellspacing='0' width='100%' class='border'>
<tr>
<td class='capmain'>$title</td>
</tr>
<tr>
<td class='main-body'>\n";
}
function closetable() {
echo "</td>
</tr>
</table>\n";
}
Openside - tai yra pačios jūsų šoninės panelės
function openside($title) {
echo "<table cellpadding='0' cellspacing='0' width='100%' class='border'>
<tr>
<td class='scapmain'>$title</td>
</tr>
<tr>
<td class='side-body'>\n";
}
function closeside() {
echo "</td>
</tr>
</table>\n";
tablebreak();
}
Opensidex - tai jūsų šoninės panelės tik skirtumas kad jos turinčios funkciją atsidaryti ir užsidaryti pelės paspaudimu.
function opensidex($title,$state="on") {
$boxname = str_replace(" ", "", $title);
echo "<table cellpadding='0' cellspacing='0' width='100%' class='border'>
<tr>
<td class='scapmain'>$title</td>
<td class='scapmain' align='right'>".panelbutton($state,$boxname)."</td>
</tr>
<tr>
<td colspan='2' class='side-body'>
<div id='box_$boxname'".($state=="off"?" style='display:none'":"").">\n";
}
function closesidex() {
echo "</div>
</td>
</tr>
</table>\n";
tablebreak();
}
Tablebreak
function tablebreak() {
echo "<table cellpadding='0' cellspacing='0' width='100%'>\n<tr>\n<td height='5'></td>\n</tr>\n</table>\n";
}
ir čia užbaigiame theme
?>
Forumo paveiksliukai
reikalinga sukurti naują bylą "Forum" ir sukelti jūsų sukurtus paveiksliukus:
aim.gif (aim - skype id)
icq.gif (ICQ )
msn.gif (MSN Messenger)
yahoo.gif (Yahoo! Instant Messenger)
web.gif (Tinklapis)
email.gif (Emailas)
ip.gif (IP addresas – administratoriams bei moderatoriams matomas)
pm.gif (Privati žinutė)
Bylos, aplankai, lipnios temos.
folder.gif (neatsakytos temos) -
folderhot.gif (temos su daug atsakymų) -
folderlock.gif (užrakinta) -
foldernew.gif (temos su naujais pranešimais) -
stickythread.gif (lipni tema) -
newthread.gif (nauja tema) -
reply.gif (rašyti atsakymą) -
Themes Paveiksliukai
Kuriame naują bylą "images" ir sukeliame šiuos paveiksliukus:
Rodyklėlės, strėlės ir panelės
bullet.gif (normali rodyklėlė) -
bulletb.gif (atvirkščia rodyklėlė) -
down.gif (žemyn rodyklė)
right.gif (į dešnę rodyklė)
left.gif (į kairę rodyklė)
up.gif (į viršų rodyklė)
panel_on.gif (an open side panel) –
panel_off.gif (a closed side panel) -
Likusieji:
edit.gif - redaguoti
printer.gif - spausdintuvas
pollbar.gif (balsavimo blokas)
Reikalingas tuščias paveiksliukas pavadinimu - “blank.gif”
jei norite galite įsikelti ikonelę su užrašu PHP-Fusion ir nuoroda į php-fusion.co.uk pavadinimu fusion.gif
Grafinė dalis baigta.
Šis straipsnis labiau jūsų įdomumui, nes theme yra sukurta begalės ir lengviausia jas atsisiūsti, jei ir nerandate sau reikiamos, dabar yra ir kas kuria pagal užsakymus.
