Dün ve bugün proje için temel bir tema taslağı oluşturdum. Ana tema dosyaları /so-content/themes/default/ dizini içerisinde bulunuyor ve şuan için şu dosyalardan oluşuyor:
- /so-content/themes/default/
- images/
- footer_bg.gif
- menu_bg.gif
- style.css
- theme.php
images adlı dizin adı üstünde temada kullanılacak olan imaj dosyalarını içeren klasördür. Şimdilik style.css dosyasında footer ve menu alanlarının arkaplanlarına yerleştirdiğim footer_bg.gif ve menu_bg.gif olmak üzere iki imaj dosyasından oluşmaktadır.
Projenin anasayfasını temsil eden index.php dosyasının theme.php‘yi içermesi ve css ve imaj dosyalarını sorunsuz çalıştırabilmesi için bu dosyaların theme.php‘de hedeflerinin sorunsuz belirtilmesi gerekiyordu. Bu sorun dizinlerin faklı olmasından kaynaklanmaktadır. Bu sorunu aşmak için so-config dizini altına rootpaths.php adında bir betik oluşturdum ve içeriğine şu kısa değişken tanımlamasını yaptım:
<?php
$rootpath_for_theme=”so-content/themes/”;
?>
Bu dosyayı index.php‘de theme.php dosyasını çağırmadan önce çağırdım;
<?php
include(’so-config/rootpaths.php’);
include(’so-content/themes/default/theme.php’);
?>
Böylece theme.php‘yi aşağıdaki gibi düzenleyerek ilgili css ve imaj dosyalarının sorunsuz çalışmasını sağladım:
<?php
$theme_name=”default”;
$cssfile=$rootpath_for_theme.$theme_name.”/style.css”;
?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link rel=”stylesheet” type=”text/css” href=”<?php echo $cssfile?>”>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
</head>
<body>
<div id=”header”></div>
<div id=”menu”></div>
<div id=”page”>burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
burası sayfanın ana bölüm alanı<br />
<div id=”page-side1″>sidebar 1 kısmı</div>
<div id=”page-side2″>sidebar 2 kısmı</div>
</div>
<div id=”footer”><br /><br /><br /><p>designed by Guardian</p></div>
</body>
</html>
Burada dikkat edilmesi gereken sadece css dosyasının hedefidir. Diğer imaj dosyaları css dosyasının içerisine gömülüdür. style.css dosyası içeriği:
/*
Theme Name: samkon default
Theme URI: http://www.samkon.org
Description: Design by Guardian
Version: 1.0
Author: Guardian
Author URI: http://www.samkon.org
*/
input,textarea,select,option
{
border: #878787 1px solid;
background-color:#e9e9e9;
color: #727272;
}
body {
margin: 0;
padding: 0;
background: #FFFFFF;
font-family: Verdana;
font-size: 12px;
color: #666666;
}
/* header */
#header {
position: absolute;
width: 100%;
height: 100px;
top: 0px;
left; 0px;
}
/* menu */
#menu {
position: absolute;
width: 100%;
height: 36px;
top: 100px;
left; 0px;
background: #FFFFFF url(images/menu_bg.gif) repeat-x;
}
/* page */
#page {
margin: 1px 0px 137px 0px;
position: relative;
width: 80%;
top: 136px;
left: 10%;
border:1px dashed #939393;
}
#page-side1 {
position: absolute;
text-align: center;
width: 200px;
top: 0px;
right: 0px;
}
#page-side2 {
position: absolute;
text-align: center;
width: 200px;
top: 0px;
right: 200px;
}
/* footer */
#footer {
position: relative;
width: 100%;
height:100px;
bottom: 0px;
left; 0px;
color: #000000;
text-align: center;
vertical-align: 50%;
background: #FFFFFF url(images/footer_bg.gif) repeat-x;
}
Tabi bu değişkenler ve değerler ileride daha dinamik yapılara ve fonksiyonlara bağlanacaktır. Şuan için üzerinde çalışabilmem adına sadece örnek bir tema taslağı çıkarttım. Temanın nasıl çalıştığını görmek isteyenler için çalışmanın ve gelişmelerin yer aldığı sayfa samkon.org/proje dir.
