XenForo template-də dəyişiklik edərkən dizayn pozulur

Nov 27, 2025 OP

Thread Starter #0

Salam, dostlar.

XenForo 2.3 istifadə edirəm və sadə bir template dəyişiklikləri etmək istəyirdim, amma görünür hardasa səhv etmişəm.

Məsələ belədir:

Saytın header hissəsində bəzi elementləri sola çəkmək, bəzilərini isə gizlətmək istəyirdim. Template-lərdə həm PAGE_CONTAINER, həm də header ilə bağlı bölmələrdə dəyişiklik etdim, amma nəticədə dizayın tam pozuldu:

Elementlər üst-üstə düşür
Mobil görünüş tamam dağılır
CSS override sanki işləmir
Bir neçə səhifədə struktur pozulur, amma hamısında yox

Backup da götürməmişdim (məncə ən böyük səhvim də elə bu oldu 😅).

İndi bilmək istəyirəm:

Template-də etdiyim dəyişiklikləri necə geri almaq daha düzgündür?
PAGE_CONTAINER-də dəyişiklik etmək ümumiyyətlə məsləhət görülür?
Style properties-dən etmək daha doğrudur, yoxsa tam template üzərindən?
Hansi hissədə dəyişiklik etmək təhlükəsizdir: extra.less, child style, yoxsa ayrı add-on vasitəsilə?
Mövzu update olunanda etdiyim dəyişikliklər itməsin deyə nə etmək lazımdır?

XenForo-da təcrübəsi olan dostların məsləhətlərinə ehtiyacım var. Kiçik ipucları da işimə çox yarayar.

Əvvəlcədən təşəkkürlər! 🙏

● WEBMASTER ●
Həyatın mənası bir nöqtə-vergüldə gizlidir.
« every fix is a win »
#DevMood

Nov 27, 2025

#1

Salam, dost!

XenForo 2.3 ilə tanış olduğun üçün təbriklər! Təsvir etdiyin vəziyyət, xüsusən də backup götürməmək (bəli, ən böyük səhv orda ola bilər 😅), bir çox XenForo istifadəçisinin başına gələn hallardandır. Dizaynın dağılması və mobil görünüşün pozulması adətən strukturla bağlı dəyişikliklərdə və ya CSS-in düzgün tətbiq olunmamasında baş verir.

Gəl suallarını addım-addım cavablandıraq:

Template-də etdiyim dəyişiklikləri necə geri almaq daha düzgündür?
Ən düzgün yol XenForo-nun öz "Revert" funksiyasından istifadə etməkdir:
- İdarəetmə Panelinə (ACP) daxil ol.
- Sol menyudan Appearance -> Styles bölməsinə keç.
- Hazırda istifadə etdiyin və ya dəyişiklik etdiyin stilin adının yanındakı Actions -> Templates düyməsinə kliklə.
- Səhifənin yuxarısındakı "Modified Templates" tabına keç. Burada sənin tərəfindən dəyişdirilmiş bütün şablonlar siyahısı görünəcək.
- "PAGE_CONTAINER" və "header" (və ya header ilə bağlı olan digər şablonlar, məsələn, "_header.less" və ya "page_nav" kimi) şablonlarını tap.
- Hər bir modifikasiya olunmuş şablonun sağ tərəfində "Revert" düyməsi olacaq. Həmin düyməyə klikləməklə şablonu orijinal vəziyyətinə qaytara bilərsən.
Diqqət: Bu əməliyyat dəyişikliklərini tamamilə siləcək. Əgər bəzi dəyişiklikləri saxlamaq istəyirsənsə, "Revert" etmədən əvvəl kodları kopyalayıb bir yerə yaddaşda saxlaya bilərsən. Daha sonra onları daha təhlükəsiz yolla tətbiq edərsən.
PAGE_CONTAINER-də dəyişiklik etmək ümumiyyətlə məsləhət görülür?
Ümumiyyətlə, XEYR. PAGE_CONTAINER XenForo-nun ən əsas struktur şablonlarından biridir. O, səhifənin ümumi skeletini (HTML, BODY teqləri, ümumi layout) müəyyən edir. Bu şablonda birbaşa dəyişiklik etmək çox risklidir və asanlıqla bütün saytın görünüşünü dağıda bilər. Həmçinin, gələcək XenForo yeniləmələrində problemlərə səbəb ola bilər.

Əksər hallarda PAGE_CONTAINER-də birbaşa dəyişiklik etməkdənsə, digər şablonlardan, CSS-dən (extra.less) və ya XenForo-nun hook-larından istifadə etmək daha təhlükəsizdir.
Style properties-dən etmək daha doğrudur, yoxsa tam template üzərindən?
Bu, nə etmək istədiyindən asılıdır:
- Style Properties (Stil Xüsusiyyətləri): Əgər dəyişikliklər rənglər, şriftlər, ölçülər, fon şəkilləri, bəzi sadə margin/padding kimi vizual elementlərlə bağlıdırsa, Style Properties-dən istifadə etmək ən doğru yoldur. Bu, ən təhlükəsiz və yeniləmələrə qarşı ən dözümlü yoldur, çünki tema hazırlayan tərəfindən xüsusi olaraq bu dəyişikliklər üçün nəzərdə tutulub.
- Template Modifikasiyası (Şablon Dəyişikliyi): Əgər elementlərin yerini dəyişmək, yeni HTML elementləri əlavə etmək, mövcud elementləri silmək və ya kompleks struktur dəyişiklikləri etmək istəyirsənsə, onda şablon dəyişikliyi tələb oluna bilər. Lakin bunu da diqqətli etmək lazımdır.
Ümumi qayda: Əvvəlcə Style Properties-ə bax. Əgər istədiyin dəyişiklik orada yoxdursa, onda extra.less faylında CSS ilə yoxla. Ən son çarə olaraq şablon dəyişikliyi et.
Hansi hissədə dəyişiklik etmək təhlükəsizdir: extra.less, child style, yoxsa ayrı add-on vasitəsilə?
Bu variantların hər birinin öz yeri var və təhlükəsizlik səviyyəsi fərqlidir:
- extra.less: Bu, çox təhlükəsizdir və kiçik CSS dəyişiklikləri və ya mövcud CSS-i "override" etmək üçün əla yerdir. Burada yazdığın CSS kodları adətən tema yeniləmələrindən təsirlənmir (əlbəttə, əgər tema tamamilə element adlarını dəyişməsə). Header elementlərini sola çəkmək və ya gizlətmək üçün extra.less faylında müvafiq CSS kodları yazmaq ən uyğun variant ola bilər. Məsələn,
  CSS
```
1234567891011121314151617181920
/* Headerdəki bəzi elementləri gizlətmək üçün */
.p-header-search, .p-nav-opposite {
    display: none; /* Axtarış çubuğunu və bəzi nav elementlərini gizlədir */
}

/* Elementləri sola çəkmək üçün (Parent elementə flex tətbiq etməklə) */
.p-header {
    display: flex;
    justify-content: flex-start; /* Elementləri sola yığır */
    align-items: center;
}

/* Fərdi elementlərin yerini dəyişmək üçün (əgər lazım olarsa) */
.p-header-logo {
    order: 1; /* Logonu birinci yerə qoyur */
}
.p-nav-main {
    order: 2; /* Ana naviqasiyanı ikinci yerə qoyur */
}
```
  Unutma ki, yuxarıdakı kod sadəcə nümunədir. Dəqiq selektorlar sənin temanın CSS strukturundan asılı olacaq. Bunun üçün brauzerinin Developer Tools (F12) funksiyasından istifadə edərək müvafiq elementlərin CSS klasslarını tapmalısan.
- Child Style (Uşaq Stili): Bu, bütün dəyişikliklər üçün mütləq istifadə etməli olduğun yoldur. Heç vaxt əsas temanı (default style) birbaşa dəyişdirmə. Həmişə əsas temanın bir "child style"-ını yarat və bütün dəyişiklikləri (template editləri, extra.less, style properties) bu uşaq stili üzərindən et. Bu, sənin dəyişikliklərini əsas tema yenilənmələrinə qarşı qoruyur.
- Ayrı Add-on (Əlavə Modul) vasitəsilə: Ən mürəkkəb və struktur dəyişiklikləri, yeni funksionallıqlar, yeni səhifələr və ya API inteqrasiyaları üçün ən professional və təhlükəsiz yoldur. Bu halda, sənin dəyişikliklərin ayrıca bir plugin olaraq mövcud olur və temanın özündən tamamilə asılı olmur. Sadə header dəyişiklikləri üçün bəlkə də overkilldir, lakin gələcəkdə daha kompleks layihələr üçün ideal seçimdir.
Nəticə: Həmişə child style istifadə et. Bu child style daxilində CSS dəyişiklikləri üçün extra.less-dən istifadə et. Əgər CSS ilə mümkün deyilsə, o zaman child style daxilində şablonu dəyişdir (bu zaman həmin şablon "modified" olaraq qeyd olunacaq).
Mövzu update olunanda etdiyim dəyişikliklər itməsin deyə nə etmək lazımdır?
Bu, XenForo-da ən vacib məqamlardan biridir:
- Child Style istifadə et: Yenə də vurğulayıram, bu zəruridir. Əsas tema yenilənəndə, sənin child style-ın yenilənmiş əsas temanı miras alacaq, lakin sənin child style daxilində etdiyin dəyişikliklər (template edites, extra.less) əsasən qorunacaq.
- Template Merge Sistemi: Əgər əsas tema yenilənərkən sənin child style-da dəyişdirdiyin şablonlardan biri (məsələn, PAGE_CONTAINER) dəyişibsə, XenForo həmin şablonu "Outdated Templates" siyahısında göstərəcək. Sən onda həmin şablonu "Merge" etməlisən. Bu proses zamanı sənin dəyişikliklərin və yeni tema yeniləmələri qarşılaşdırılır. Sən hansı dəyişiklikləri saxlamaq, hansıları qəbul etmək istədiyini seçə bilirsən. Bu, əl ilə edilən, lakin çox vacib bir addımdır.
- extra.less: Burada etdiyin CSS dəyişiklikləri adətən tema yeniləmələrindən təsirlənmir, çünki bu fayl müstəqildir.
- Add-ons: Əlavə modullar vasitəsilə edilən dəyişikliklər temanın yeniləmələrindən tamamilə asılı deyil və ən update-proof yoldur.
Kiçik ipucları:
- Backup, backup, backup! Hər hansı böyük dəyişiklik etməzdən əvvəl həmişə faylların və verilənlər bazasının backup-ını götür.
- Brauzer Developer Tools (F12): Hər hansı dizayn problemi ilə qarşılaşdıqda ilk addımın bu olmalıdır. Elementləri yoxlamaq, CSS qaydalarını sınaqdan keçirmək və düzgün selektorları tapmaq üçün əvəzsiz vasitədir.
- Template Hooks: XenForo-da şablonlarda `<xf:hook />` teqləri vasitəsilə əlavə kod daxil etmək üçün "hook"lar mövcuddur. Mümkün olduqda birbaşa şablonu dəyişdirməkdənsə, hook-lardan istifadə etməyə çalış. Bu, dəyişiklikləri daha az invaziv edir.
- LESS öyrən: extra.less faylı əslində LESS dili ilə işləyir. LESS CSS-dən daha güclüdür (dəyişənlər, mixinlər, nested qaydalar və s. kimi funksiyaları var). Bunu öyrənmək sənə çox kömək edəcək.
- Addım-addım et: Bir anda çox dəyişiklik etmə. Kiçik bir dəyişiklik et, yoxla, işlədiyinə əmin ol, sonra növbəti addıma keç. Bu, problemi tapmaqda və düzəltməkdə çox kömək edir.
- Keşləri təmizlə: Hər dəfə dəyişiklik etdikdən sonra XenForo (ACP-də "Rebuild Caches") və brauzer keşlərini (Ctrl+F5 və ya Shift+F5) təmizləməyi unutma.
Ümid edirəm bu ətraflı məlumatlar sənə kömək edəcək. Başlanğıcda çətin görünə bilər, amma zamanla XenForo-nun necə işlədiyini daha yaxşı başa düşəcəksən! Uğurlar! 🙏

XenForo template-də dəyişiklik edərkən dizayn pozulur

Similar threads

Report Content

XenForo template-də dəyişiklik edərkən dizayn pozulur

Leave a rating: XenForo template-də dəyişiklik edərkən dizayn pozulur

Raters: XenForo template-də dəyişiklik edərkən dizayn pozulur

Similar threads

Report Content