✅ PrestaShop - Temel Tema Değişiklikleri

İçindekiler

Varsayılan temel tema olmasına rağmen PrestaShop Oldukça işlevseldir, bir mağaza bu şekilde çevrimiçi olamaz, çünkü ilk olarak başka bir mağazanın tamamen aynı görünmesi riskini taşırız ve ikincisi, belki de temel tema ihtiyacımız olmayan şeyleri içerir veya uygun olmayan bir şekilde düzenlenmiştir. mağazamıza.
Bu nedenle kişiselleştirme, öğelerin ve renklerin düzeninin farklı olabilmesi için ya yeni bir tema koyarak ya da mevcut olanı değiştirerek her zaman takip ettiğimiz yoldur.
İlk değişiklikler
Temanın varsayılandan tamamen farklı görünmesini sağlayacak basit ama çok etkili değişiklikler yapmaya başlayacağız, bunun için aşağıdaki adımları izleyeceğiz:

Logoyu değiştireceğiz, bunu yöneticiden yapıyoruz. arka ofis, bunun için şu bölümdeki resmi yükleyeceğiz: Tercihler -> Görünüm.
O zaman gitmeliyiz Arka Ofis -> Modüller -> Araçlar -> Ana Sayfa Düzenleyici.
Modülü yapılandırırken merkezi logoyu değiştirdik.

Bu başlangıçtan sonra, daha büyük bir kişiselleştirme etkisi için şimdi bazı konum öğelerini değiştireceğiz:

Bloğun konumunu değiştiriyoruz Kategori: sol sütunda.
Özel ürünleri devre dışı bırakıyoruz.
Bilgileri kategorilerde değiştiriyoruz.

Yaptığımız değişiklikleri inceleyebilmemiz için aşağıdaki ekran görüntüsüne bakalım, bazı şeylerin sağdan sola taşındığını ve diğer sütunların artık orada olmadığını ve bu nedenle bazılarının yerine yükseldiğini fark edeceğiz:

Şimdi varsayılan tema çok farklı görünüyor, yine de iyi bir sonuç alamazsak, endişelenmeyin çünkü yeni bir şey ve bu nedenle alanda uzman olmadan önce biraz pratik yapmalıyız.
CSS'yi Değiştirme
Çok etkili olan başka bir değişiklik, dosyaları değiştirmektir. CSS örneğin mağazanın arka plan rengini değiştirebileceğimiz.
Bu örneğin amaçları için kullanacağız Firefox ve geliştirici araçlarınızı veya isterseniz ateş böceği.
düzenlemeyi etkinleştirmek için CSS geliştirici araçlarıyla mağazaya sağ tıklayıp seçeneği seçeceğiz. Öğeyi incele, sonra görünen menüde seçeceğiz stil editörü.
Şimdi eğer kullanıyorsak ateş böceği, sadece firebug ile elementi incele diyoruz ve ardından CSS sekmesine gidiyoruz.
Açılan pencerede ve bir kez CSS bölümünde dosyayı bulacağız. global.css ve kodu değiştirmeye çalışacağız arka plan rengi.

 gövde {arka plan rengi: [b] mavi [/ b]; yazı tipi boyutu: 11 piksel; yazı tipi ailesi: Verdana, Arial, Helvetica, Sans-Serif; renk: # 5d717e; metin hizalama: merkez}

Bu araçlar sayesinde, değişiklik gerçek zamanlı olarak yapılır ve şu anda ilerlememizi görebilmemiz için onu görselleştirme fırsatımız olur:

Gördüğümüz gibi, mavi arka plan çok sert bir değişiklik, ancak etkili, açıkçası harfler ve diğer unsurların ayarlanması gerektiğinden çok iyi görünmüyor, ancak önemli olanı görüyoruz ve basit bir renk olabilir. fark.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.