Şimdi uğraştıracak olan kısma geçiyoruz J. Öncelikle photoshop veya benzeri bir programla sitemizin resimlerini ayarlayalım. Yaptığımız tasarımı sonucunu parçalara ayırıyoruz. (İlerde Ders olarak anlatılacaktır.) Sonra bu parçaları stil3.css dosyamızı stil2.css dosyasının aynısını kopyalayıp aralara bacground-image etiketlerini ekliyoruz. Birkaç tane daha eklememiz olacak. stil3.css dosyasına stil2.css den farklı olanlarıda yazarak belirteceğim. İsterseniz index4.html dosyası oluşturup ondan stil3 ü çağırırsak aradaki değişikliği daha belirgin olarak görebiliriz. Şimdi stil3 dosyamızın kodlarına bakalım.
/*
Eray USTA Tema Tasarımı
*/
/*Tğm border etiketleri stil 3 dosyasında tamamen silinecek temamız genel hatlarıyla oluşturulmuş olacak.*/
/*////////// GENEL TANIMLAMALAR //////////*/
body {
margin: 0px;
margin-top: 10px; /*stil3 de eklendi*/
}
#container {
/*stil3.css kodları*/
margin: 0 auto;
width: 897px;
font-family: “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height:16px;
/* Stil 2 deki hali
margin: 0 auto;
width: 900px;
border: 1px solid #666666;
font-family: “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height:16px;
color: #666666;
*/
}
#container2 {
/*stil3.css kodları*/
border-left: 1px solid #999999;
border-right: 1px solid #999999;
padding-top: 60px;
/*Stil2 deki kodlar
border: 1px solid #0000ff;
*/
}
#container3 {
/*stil3.css kodları*/
width: 670px;
float:left;
/*stil2 deki kodlar
width: 670px;
float:left;
border: 1px solid #ff0000;
*/
}
/*///////// GENEL YAZI AYARLARI//////////*/
h1, h4 {
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
}
h2, h3{
font-family: Georgia, Times, serif;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 22px;
line-height:24px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 14px;
}
p {
margin-bottom: 18px;
}
a {
color: #315a6c;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #6a94a7;
text-decoration: underline;
}
a:visited {
color: #8f8d66;
}
/*////////// HEADER KISMI //////////*/
#header {
/*Stil 3 deki kodlar*/
width: 930px;
height: 250px;
background: url(“images/oo_mag_header.jpg”) no-repeat left top;
/*Stil2 deki kodlar
border: 1px solid #00ff00;
width: 930px;
height: 300px;
*/
}
#header p, #header h1, #header h2/**/ {
display: none; /*stil3 de eklendi*/
}
/*stil 3 de eklendi*/
#header #date{
position:absolute;
font-family: Georgia, Times, serif;
font-size: 16px;
margin-top: 160px;
margin-left: 25px;
color:#253A59;
}
/*///Genel Renklendirme komutları///*/
/*Bu kısım stil2 de eklenen renklendirme kodlarıdır. Ayrıca eklenen kodlarda vardır
background resimlerinin kodları eklenmiştir*/
.thisMonth{
margin-top: 0;
height: 56px;
line-height: 85px;
background-color: #9E745E;
background: url(images/oo_mag_thisMonth_bg.gif) repeat-x top;
font-size: 42px;
font-weight: normal;
color: #ffffff;
border: 1px solid #9E745E;
}
.features{
margin-top: 0;
height: 46px;
line-height: 70px;
background-color: #9E9C76;
background: url(images/oo_mag_featurs_bg.jpg) repeat-x top;
font-size: 36px;
font-weight: normal;
color: #ffffff;
border: 1px solid #9E9C76;
}
.columns{
margin-top: 0;
height: 46px;
line-height: 70px;
background-color: #253A59;
background: url(images/oo_mag_columns_bg.jpg) repeat-x top;
font-size: 36px;
font-weight: normal;
color: #ffffff;
border: 1px solid #253A59;
}
.pastIssues{
margin-top: 0;
font-family: Georgia, Times, serif;
font-size: 31px;
font-weight: normal;
color: #305669;
}
.comments{
margin-top: 0;
padding-left: 10px;
padding-right: 10px;
height: 46px;
line-height: 50px;
background-color: #C5BBA0;
background: url(images/oo_mag_comment_bg.jpg) repeat-x top;
font-size: 12px;
font-weight: normal;
color: #333;
border: 1px solid #C5BBA0;
}
.commentIcon{
width: 100px;
padding-left: 20px;
float: left;
background-color: #253A59;
background: url(images/oo_mag_comment_icon.jpg) no-repeat top left;
height: 46px;
}
.comments a{
float: right;
}
/*////////// CONTENT //////////*/
#content {
/*stil3 de eklenen kodlar*/
margin:0 0 0 10px;
width: 430px;
float:left;
/* stil2 deki kodlar
margin:0 10px;
width: 420px;
float:left;
border: 1px solid #333333;
*/
}
/*////////// SIDEBAR KISMI//////////*/
/*Border etiketleri kaldırılmıştır sadece*/
#sidebarLT {
margin:0;
width:212px;
float:right;
}
#sidebarRT {
margin:0 10px;
width: 200px;
float: right;
}
/*////////// NAV Kısmı//////////*/
#top_navlist {
position: absolute;
top: 260px;
width: 897px;
text-align:right;
}
#top_navlist h2{
display: none;
}
#navlist{
padding: 10px 10px;
margin-left: 0;
border-bottom: 1px solid #ccc;
font-family: Georgia, Times, serif;
font-weight: bold;
}
#navlist li{
list-style: none;
margin: 0;
display: inline;
}
#navlist li a{
padding: 11px 30px;
margin-left: 3px;
border: none;
border-left: 1px solid #ccc;
background: #8BA8BA url(images/oo_mag_main_nav.jpg) no-repeat top right;
text-decoration: none;
color: #253A59;
}
#navlist li a:hover{
background-color: #9E9C76;
background-position: right -37px;
border-color: #C5BBA0;
color: #784B2C;
text-decoration: underline;
}
#navlist li.current_page_item a{
border-bottom: 1px solid white;
background-color: #fff;
background-position: right -74px;
}
#navlist li a:visited { color: #253A59; }
/*Ul etiketlerini tanımladığımız TOC Nav kısmı*/
.tocNav{
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
}
.tocNav li{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}
.tocNav li a { text-decoration: none; }
.tocNav li a:hover {text-decoration: underline;}
/*////////// LAZIM OLABİLECEKLER //////////*/
/*////////// FORMLAR//////////*/
/*////////// FOOTER KISMI //////////*/
/*Bu kısımda da border özellikleri kaldırılmış ve bacground image lar eklenmiştir.*/
#pushbottom{
clear:both;
}
#footer {
height: 85px;
border: 1px solid #999;
border-top:none;
}
#footer h3{
display:none;
}
#footerRight{
margin: 0 10px 0 0;
background: #C5BBA0 url(images/oo_mag_footerRt_bg.gif) repeat-x top;
width:430px;
height: 72px;
float:right;
text-align: center;
border: 1px solid #C5BBA0;
}
#footerLeft{
margin: 0 0 0 10px;
background: #8BA8BA url(images/oo_mag_footerLft_bg.jpg) repeat-x top;
width: 430px;
height: 72px;
float:left;
text-align:center;
border: 1px solid #8BA8BA;
}
/*////////// RESİM KISMI//////////*/
Şimdi resimleri images klasörüne attıktan sonra sitenin görünümü şu şekli alacaktır. Resimlerin kendi dosyalarını bu kısma kadar oluşturulan dosyaları bu bağlantıdan indirebilirsiniz.
Bundan sonraki derslerde ise wordpress temaya komple geçişi anlatacağım..
kardes ben buraya kadar yaptim ama sanece index2 aciliyor stil2 ve stil3 ekledim ama acamadim onlarla baglanti kurmadi.acil yardimci olurmusun?
Tema ilk 4 dersin dosyalarını indirirsen nerde yanlışlık yaptığını görmüş olursun. Yorumun için teşekkür ederim.