Joomla Temalarına Yeni Stil Nasıl Eklenir

Joomla Temalarına Yeni Stil Nasıl Eklenir
22 Şubat 2011 tarihinde eklendi, 805 kez okundu.

Halen kullanmakta olduğunuz ve aktif olan temanızın özlliklerinden bir tanesi olan “Stiller” içeriklerinizi eklediğiniz kısımda kullandığınız yazı editöründe yer alan “Styles” öğesi altında yer alır. Bu stiller, girilen içeriklerle beraber örneğin yazı ile beraber tıpkı forumlarda olduğu gibi kod girmek ve bu kodu farklı bir çerçeve içinde göstermek gibi basit ve farklı özellikler ekleyebilmenize olanak tanır. Bazı temalarda bu özellik temanın ana css dosyasında yer alacağı gibi ayrıca oluşturulacak olan bir “editor.css” dosyası ile de sağlanabilir. Eğer yazı editöründe resimde de görülen alanı tıkladığınızda bu bölümde sadece standart olarak iki özellik görüyorsanız o zaman muhtemelen temanızın, editöre özel olarak kullanılacak olan bir editor.css dosyasına sahip olmadığıdır.

Bu durumda bu tip kod girme işlemini yine editörde yer alan “html” butonuna basarak manuel olarak “pre veya code” olarak girmek gerekir.

Resimdeki şekilde görüldüğü gibi seçili olan yazının tümü veya bir bölümüne ilgili özelliği bir tık ile eklemek için editor.css dosyasını sizlerin elle oluşturup temanızın “css” klasörüne koymanız gerekecektir. Bu durumda, temanıza ait örneğin “template.css” dosyası içinden veya temanızın türüne göre farklı isimdeki css dosyasından yazı editörüne dair kodları alıp boş bir txt dosyası içine eklemeniz gerekir, daha sonra bu boş txt dosyasını faklı kaydet seçeneğinden “editor.css” olarak kaydedip css klasörüne koyduğunuzda artık stillerde bu kodların pratik hareketlerini içeren stil çeşitlerinin geldiğini görebilirsiniz.

İsterseniz örnek bir editor.css dosyasına ait kodları size vererek bu işin nasıl yapıldığını daha net göstermiş olalım. yukarıdaki resimde yer alan tüm stillerin ekli olduğu editor.css dosyası içeriği aşağıdaki gibidir.

/* Ornek Joomla Editor.CSS Dosyası */
hr#system-readmore  { border: red dashed 1px; color: red; }
hr.system-pagebreak { border: gray dashed 1px; color: gray; }
pre,
.code{
margin: 10px 0 15px;
padding: 10px 15px;
font-size: 11px;
}
.info{
background:transparent url(‘../images/icons/info.gif’) no-repeat left top;
padding-left:30px;
}
.warning{
background:transparent url(‘../images/icons/warning.gif’) no-repeat left top;
padding-left:30px;
}
.tips{
background:transparent url(‘../images/icons/tips.gif’) no-repeat left top;
padding-left:30px;
}
.audio,
.credit,
.email,
.feed,
.help,
.webcam{
background:transparent url(‘../images/icons/audio.gif’) no-repeat left top;
padding-left:30px;
}
.credit{
background:transparent url(‘../images/icons/credit.gif’) no-repeat left top;
}
.email{
background:transparent url(‘../images/icons/email.gif’) no-repeat left top;
}
.feed{
background:transparent url(‘../images/icons/feed.gif’) no-repeat left top;
}
.help{
background:transparent url(‘../images/icons/help.gif’) no-repeat left top;
}
.webcam{
background:transparent url(‘../images/icons/webcam.gif’) no-repeat left top;
}
.highlight-1,
.highlight-2,
.highlight-3,
.highlight-4{
padding:1px 5px;
}
span.clear,
span.clear-1,
span.clear-2,
span.color,
span.color-1,
span.color-2,
span.color-3,
span.color-4,
span.color-5,
span.color-6,
span.color-7{
display: block;
padding: 5px 10px;
margin-bottom: 10px;
}
ol{
list-style-type:decimal;
margin-left:18px;
}

Örneğimizde, yazı editörümüzde yer alan tüm stillere ek olarak diğer kodları da görmekteyiz. Burada işimize yarayacak olanları bırakıp diğerlerini silerek veya farklı kodları ekleyerek bu editor.css dosyasını geliştirebilirsiniz.

Etiketler:

Yorumlar

Henüz yorum yapılmamış.

Sayfa başına git