ASP.NET THEME(SKIN VE CSS) KULLANIMI

Asp.Net ve Html kontrollerimizin görünümlerini bir merkezden yönetebilmek amacıyla temalardan faydalanırız.

Bunun için öncelikle projemize  Add Asp.Net Folder seçeneğinden Theme folderını ekliyoruz.Tema dosyasına resim,skin ve css dosyalarını ekliyoruz.

Skin dosyaları asp.net kontrollerinin görünüşlerini değiştirmek için kullanılır.

Örnek olarak sayfadaki bütün labellerımızın arka planı kırmızı,yazılarının ise sarı olmasını istiyoruz.Aynı zamanda bütün butonlarımızın arka planlarının mavi yazılarının sarı olmasını istiyoruz.

Bunun için yukarıdaki resimdeki gibi bir skin dosyasını oluşturarak ismini DefaultSkinFile verelim ve içine aşağıdaki gibi kodlarımızı yazalım.

<asp:Label runat=”server” Font-Italic=”true” BackColor=”Red” ForeColor=”Yellow”/>

<asp:Button runat=”server” Font-Italic=”true” BackColor=”Blue” ForeColor=”Yellow”/>

Theme yı sayfa bazlı ya da default olarak web configden okutacak şekilde yazabiliriz.

Sayfaya direkt olarak vermek istiyorsak html olarak page tanımının yapıldığı yere Theme adını vermemiz yeterlidir.

<%@ Page Language=”C#” AutoEventWireup=”true” Theme=”Theme1″  CodeFile=”Default.aspx.cs”

Bunu dedikten sonra resimdede görüleceği üzere sayfada bulunan bütün label ve buttonlarımız standart bir formata geldi ve her biri için ayrı ayrı property ayarı yapmadık

Bu theme  işlemini uygulama bazında bütün sayfalar için yapmak isteseydik web configde system.web altındaki pages kısmını şeklinde yazmamız yeterli olacaktır

<pages theme=”Theme1″>

</pages>

Bütün sayfalarımızın temaya tabi olmasını ancak bir sayfamızın theme almamasını istiyoruz bunun için ise sayfamıza gelerek page ayarları kısmında EnableTheming=”false” yazmamız yeterlidir.

<%@ Page Language=”C#” AutoEventWireup=”true”  EnableTheming=”false”

Bir theme dosyası birden fazla skin dosyasına sahip olabilir.Ancak bir kontrol bir theme için bir kere tanımlanabilir(Eğer SkinID özelliği kullanılmayacak ise).Ancak bir kontrolün farklı görünümler almasını istiyor isek bu sefer SkinID özelliğinden faydalanmamız gerekecektir.Skin dosyamızı açarak iki farklı Label görünümü tanımlıyoruz ve ikisinede farklı skinID ler veriyoruz

<asp:Label runat=”server” Font-Italic=”true” BackColor=”Red” ForeColor=”Yellow” SkinID=”a”/>

<asp:Label runat=”server” Font-Italic=”true” BackColor=”Black” ForeColor=”Yellow” SkinID=”b”/>

Bu şekilde bir skinde aynı kontrol birden fazla geçiyor ise default olarak sayfaya Theme vermek yetmeyecektir.Bütün Label kontrollerine gelerek hangi SkinID ile çalışacağını belirlememiz gerekmektedir.

Sayfamızdaki kontroller ise aşağıdaki gibi olacaktır

    <asp:Label ID=”lblSayi1″  runat=”server” Text=”Sayi1″ SkinID=”a”

                    meta:resourcekey=”lblSayi1Resource1″></asp:Label>

<asp:Label ID=”lblSayi2″ runat=”server” Text=”Sayi2″ SkinID=”b”

                    meta:resourcekey=”lblSayi2Resource1″></asp:Label>

Görüldüğü gibi her label kendi SkinID si belli oldu.

Skin server kontrolleri için kullanılırken genellikle CSS ise sayfa görünümündeki değişiklikler için kullanılır.

CSS oluşturmak için skindeki gibi add new item diyerek StyleSheet dosyasını oluşturuyoruz.Ve içine aşağıdaki gibi örnek kodlar yazıyoruz

body {

}

.label

{

background-color:Red;

color:Yellow;

 }

 .MyDefaultValue

{

color:Yellow;

font-family:Verdana;

background-color:Red;

}

Daha sonra ise sayfamıza bir bu css yerini page head kısmında belirterek controlün cssclassına ise css dosyasında belirlediğimiz kuralın ismini yazıyoruz.Styleları css dosyası yaratmadan sayfa bazlı yapmakta mümkündür.Css server controllerine verdiğimiz gibi table vs html elementlerindede kullanabiliyoruz.

Bu yazı .NET kategorisine gönderilmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

ASP.NET THEME(SKIN VE CSS) KULLANIMI için 3 cevap

  1. sayid der ki:

    lütfen yardım edermisin, asp.net thema builder de tema yapmam gerekiyor
    ancak programı açınca ekrana gelen sol kısımdan seçtiğim buton un birden fazla sitilini yapmam gerekiyor (farklı renk kullanılan zeminlerine göre renk renk butonlar ve onların da hover,pres,disable halleri vs) fakat bunu bir türlü yapamadım
    Çözüm olarak ilk aklıma sağ taraftaki panelde skin kısmından skin id denemek geldi fakat eklediğim skin, ile yeni bir renk oluşturamıyorum default yazanı seçtiğimde değişiklikler olmuyor…bilgin varsa artık çok iyi olur…

  2. Can der ki:

    Merhabalar makalenizi okudum ellerinize sağlık. Yapmak istediğim şey bir kullanıcı paneli ile css dosyasının içeriğine ulaşmak değişiklikler yapmak ve bunu kalıcı olarak yapmak istiyorum. Mesela css dosyamızda yazı rengi kırmızı ve biz yönetici paneline geldik ve yazı rengini siyah ile değiştirdik. Bunu dinamik olarak yapmakta bir sıkıntı yaşamıyorum fakat bunu kalıcı olarak nasıl yapabilirim. Yardımcı olursanız çok sevinirim.

    • bilgehanyildiz der ki:

      Merhabalar tam olarak istediğinizi yapmak nasıl mümkün olur bilmiyorum ama ilk aklıma gelen yollar, parametrik olacak yerlerinizin değerlerini veritabanında tutarak runtimeda bu değerleri saklayıp daha sonra okuyabilirsiniz.Diğer türlü css dosyanızı belki text olarak açıp değişikliklerden sonra eski dosyanızın üstüne kaydettirmekte bir yol olabilir

sayid için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>