Öğretici: Sitenize özel CSS ekleme

Stil oluşturma çalışma alanı, sitenizin yazı tipleri ve renkler gibi bazı tema özelliklerini düzenlemenizi sağlar; bununla birlikte, kendi özel CSS temalarınızı uygulayabilirsiniz.

Özel bir CSS dosyası tanımlayıp sitenize yükleyerek kendi temanızı oluşturabilirsiniz.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

• Özel CSS dosyası yükleme
• Web için Visual Studio Code'da CSS düzenleme

Önkoşullar

• Power Pages aboneliği veya denemesi. Buradan Power Pages denemesi edinin.
• Oluşturulmuş bir Power Pages sitesi. Power Pages sitesi oluşturma.
• Sık kullanılan CSS düzenleyicinizi kullanılarak oluşturulmuş özel bir tema dosyası.

Not

Oluşturduğunuz özel temalar Bootstrap v3 ile uyumlu olmalıdır.

Sitenize özel CSS ekleme

Aşağıdaki videoda, özel CSS kodunu sitenize nasıl uygulanacağı gösterilmektedir.

Bu örnekte, web sitemizdeki düğmelere gölge efektleri eklememizi sağlayan bazı özel CSS dosyaları ekleyeceğiz. Kendi özel CSS dosyanızı kullanabilir veya sağlanan örneği kullanabilirsiniz.

1. Bir örnek oluşturmak için, sık kullanılan CSS düzenleyicisinde button_shadow.css özel tema dosyasını oluşturun ve kaydedin.

   .button1 {
   box-shadow: 0 9px 18px 0 #333333, 0 8px 24px 0 #333333;
    }
   

2. Şuraya git: Power Pages.

3. Özel temayı eklemek istediğiniz siteyi ve Düzenle'yi seçin.

4. Stil oluşturma çalışma alanını açın.

5. Bir tema seçin, ... (üç nokta) simgesini seçin ve ardından CSS'yi Yönet seçeneğini belirleyin.

   

6. Özel CSS bölümünde, Yükle'yi ve özel CSS dosyanızı seçin. Bir defada yalnızca bir CSS dosyası yükleyebilirsiniz ancak birden çok dosya yüklenebilir. Birden çok CSS dosyada aynı öznitelik güncelleştirilirse listenin alt kısmındaki CSS dosyasının öznitelikleri geçerli olur. Özel CSS dosyalarınızın sırasını ayarlayabilirsiniz.

7. Güncelleştirmelerin sonuçlarını sayfa tuvalinde hemen görmeniz gerekir.

   

8. Özel CSS dosyalarınızın sırasını devre dışı bırakabilir veya taşıyabilirsiniz. Son olarak listelenen dosya diğerlerine göre öncelikli olur.

   

9. Üç noktayı (...) seçip Kodu düzenle seçeneğini belirleyerek bir CSS dosyasını doğrudan düzenleyebilirsiniz. Bu adımda, Web için Visual Code düzenleyicisi açılır. Değişikliklerinizi kaydetmek için CTRL-S'yi seçin.

   

10. CSS'yi güncelleştirmek ve değişiklikleri görüntülemek için taasrım stüdyosunda Eşitle'yi seçin.

11. Sitenizdeki özel temayı görüntülemek için Önizleme'yi seçin.

Not

Özel temayı tamamen kaldırmak için Portal Yönetimi uygulamasındaki web dosyası kaydını silin.