Стъпка създаде налагане шаблон на базата адаптивна Twitter фърмуера

влизане

Преди да започнем, за по-добро разбиране на урока, бих искал да привлека вниманието ви към същността на стандартизацията CMS Joomla система - как става това от вътрешната страна, и на какво основание е избор на модел. Ако имате необходимите умения, създаване на шаблон за Joomla от нулата не е нещо, slozhnoosuschestvimym или липсват. Но когато изграждане на уеб сайт с уебдизайнера винаги се получава възможност за избор - да си купи шаблона клуб или да създадете свой собствен. Отделно от тези две решения там, а третият - за промяна на съществуващи шаблон. За да направите правилния избор, вие трябва да разберете основите на създаването на Joomla шаблон върху.

Фиг. Twitter за първоначално зареждане интеграция в Joomla шаблон

Joomla шаблони

Както знаете, Joomla е разделена на предна част (предния край) и администраторския панел ( "Admin"). И двете части имат свои собствени модели, те се съхраняват в папки:

• / Шаблони - челни шаблони
• / Администратор / шаблони - Шаблони admin.paneli

Всеки шаблон има своя собствена папка. В Joomla 2.5 разпределение две предварително зададена адаптивно оформление шаблон без (шаблона 2 и 5) и рамка шаблон (атомна):

• / Шаблони / атомен
  Атомна - нещо като мълчаливо шаблон събрание въз основа на стандартна рамка;
• / Шаблони / beez_20
  Шаблона 2 - стандартен Joomla шаблон
• / Шаблони / beez5
  Шаблона 5 - тази версия на шаблона 2, но с HTML5 за маркиране;
• / Шаблони / система
  Тази папка съдържа всички шаблони за често използвани файлове, като например онлайн страница, страница за грешка и т.н.

Папка с admin.shablonami изглежда точно един и същ:

• / Администратор / шаблони / bluestork
  Bluestork- стандартния шаблон за администраторския панел;
• / Администратор / шаблони / Хатор
  Хатор - възможности шаблон административния панел. Тя е изработена в съответствие със стандартите за достъпност за хора с увреждания и цветния модел може да се промени, колкото искате.
• / Администратор / шаблони / система
  Тази папка съдържа всички шаблони за често използвани файлове, като например грешки на страници.

Как да създадете нов шаблон?

Има три начина:

1. Шаблон от нулата - да се създаде папка и всички файлове;
2. Настройте разпределението на шаблон и променяте файлове на;
3. Копирайте съществуващ шаблон и да го модифицирате.

В този урок ще разгледаме първият вариант. Задачата - за създаване на шаблони с адаптивна налагане на Twitter за първоначално зареждане на Joomla 2.5 от нулата. Аз ще се опитам да се прилага на материала в най-достъпна форма. Целта на този урок - избухна Joomla шаблон структура. След като основите са усвоили, създаването на шаблони, за да станат по-достъпни занимание :)

Името на шаблона

Първото нещо, което да се направи - да се намери име за шаблона ни. Името ще бъде показана в XML файл, на сървъра на база данни, файловата система и кеш папка. Избягвайте да използвате специални символи или празни, а героите не са ASCII набор от символи (система nazvnie трябва да напишете в латински букви). Ние постави под въпрос в този урок кокоат шаблон.

Файлове и папки

Така че, създайте папка / шаблони / кокоат

В тази папка, трябва да създадем файлове и подпапки за CSS стилове:

Обявата 1: index.php

templateDetails.xml

Обява 2: templateDetails.xml

Намиране и инсталиране на шаблон

След ще бъдат създадени две файлове и папки: ние трябва да намерим (режим на търсене), и е дал пример. Започвайки с Joomla 1.6, шаблона "сгушена" в база данни на масата #__extensions. Отидете на "Extensions -> Extension Manager -> Търси". "Търсене", кликнете върху иконата отгоре. Сега можете да видите на прясно създаден шаблона (вж. Фиг. По-долу). Обърнете внимание на името на шаблона и кликнете върху иконата в "Set" (Фигура 2).

Фиг. 1: модел за съвпадение кокоат

Фиг. 2: Успешно инсталиране шаблон кокоат

В процеса на инсталиране автоматично стил шаблон е създаден. Обърнете внимание на стила ( "Extensions -> Template Manager") и да я зададете по подразбиране шаблон стил (Фигура 3).

Фигура 3: Изберете шаблон по подразбиране кокоат на

А сега нека да отворите предната част на сайта и да видим какво имаме (Фигура 4).

Фиг. 4: Преглед на сайта с нов шаблон, без стил

Свързване на Twitter за първоначално зареждане Досиетата

Фигура 5: Официален сайт Twitter за първоначално зареждане

След като ще има по-голям опит с Joomla шаблони, вие ще бъдете в състояние да прехвърли необходимите Twitter фърмуера файлове в друга папка. Но в нашия пример, той ще бъде по-лесно да се използва папа / активи.

Twitter за първоначално зареждане интеграция в Joomla шаблон

/templates/cocoate/index.php файл съдържа всички необходими части на Joomla. Ние ще свърже двете части - Joomla и Twitter фърмуера. Нека да започнем с основните елементи, които трябва да бъдат включени в досието на първо място:

С този код започва Joomla шаблон. $ Обекта приложението съдържа различни полезна информация. Например, тя може да се използва, за да получите името на сайта.

Това е документ от тип версия на HTML5 и е пълен с примери на Twitter за първоначално зареждане шаблон.

раздел трябва да създадем Joomla мета тагове, като се обадите отбори и интегрирани фърмуера файлове.

раздел . в по-голямата си част, може да бъде копиран от първоначално зареждане например "fluid.html". Важно е да се изгради екипи на правилното място. По-долу е пример за най-горното меню. Вие трябва да поставите модула на менюто в позиция "отгоре-меню" и ако е необходимо, на името на сайта може да се показва с помощта на приложението обект $:

Начало се намира в т.нар "Подвижен контейнер" ( "Fluid Контейнер"), който има 12 реда по подразбиране. Ние използваме 9 линии, за да се покаже Joomla компонент и от 3 до колоната дясната с модули, наречени "право". Колоната за десен трябва otobrazhratsya само ако има активни модули в него.

Както можете да видите от кода, той зарежда JQuery рамка и минималната версия на Twitter за първоначално зареждане. Обява финалната версия може да се види тук index.php /templates/cocoate/index.php.

Резултатът все още е далеч от идеалното (Фигура 7), но тя изглежда като един сайт и. Шаблон има адаптивно оформление. Опитайте да играете с преоразмеряване на прозореца на браузъра си!

Фигура 7: Първият поглед към новия шаблон

Замени на Joomla

Така че, както видяхме, всичко е съвсем проста. Сега идва друга важна част - работа с стилове и модел декорации. Трябва да замените стандартния HTML изход Joomla, за да се възползват пълноценно от възможностите и предимствата на рамката Twitter за първоначално зареждане (Фигура 8). Ако не сте запознати с отмяната, можете да откриете информация тук (за фирми) и тук (за потребители).

Фигура 8: HTML замяна

Падащо меню

Като пример, аз използвах демо Joomla данни модул и е публикувал в "Основно меню" в позицията на "най-меню". За правилно съвпадение CSS клас, което трябва да се добави "НСА-меню" (с място в началото) в суфикса на менюто клас ( "Rasshireniya-> Модул мениджър -> Main Menu> Edit -> Advanced Settings") (Фигура 9)

Фигура 9: Главно меню - Разширени настройки

Тестване на готовия модел

Интеграцията между Joomla и Twitter за първоначално зареждане работи. Падащо меню има отзивчиви оформление и дори изображения автоматично ще променят размера си при смяна на разделителната способност на екрана. (Фигура 10).

Фигура 10: Adaptive оформлението на базата на Twitter за първоначално зареждане

по-нататъшни действия

• Поиграйте си с различни техники и технологии (CSS, JS, HTML5, Joomla, PHP, Twitter фърмуера);
• Научете превод на български език на документите Twitter за първоначално зареждане;
• Създайте свои собствени CSS стилове;
• Използвайте настройките за Joomla, за да персонализирате шаблона.

заключение

Надяваме се, че сега искате да отидете по-дълбоко рамка Joomla темплейт, използвайки Twitter за първоначално зареждане. сила, която просто оценявам и аз се надявам, че този урок - първата стъпка към създаването на професионалните ви и качеството на Joomla шаблони с адаптивно оформление. В следващия урок ние ще говорим за това как да се създаде чисто Joomla шаблон на базата на Twitter за първоначално зареждане.