Уникален темплейт за phpBB //Урок 2


Не е зле да прочетете урок 1

Почваме дизайна за нашия уникален темплейт. :)

Така...

Трябва имаме някакъв сайт за база.
Взимам готов темплейт за тази демонстрация.
Ето един темплейт от ТУК .

Един потребител си го избра за сайт и искаше вграждане на форум.
Има меню и т.н.

1-во какво правим?
Решаваме къде ще бъде (къде ще се вгради ) форумът.
В случая на мястото на цветята....
Разкарваме ги и се получава това

Погледнете HTML кода.
Виждате ли думата ТЕСТ? Там трябва да дойда форумът.
Целия код преди думата ТЕСТ трябва да отиде във файла overall_header.tpl .
Всичко след ТЕСТ трябва да отиде във файла overall_footer.tpl .

РЕЗУЛТАТ

overall_header.tpl отговаря за HTML-a на header-a на форума.
Отваряме файла overall_header.tpl и виждаме най-обикновен HTML код.
Прескачам засега кода който е между <head> и </head> и се
насочвам към кода който е след тага <body> .


Ето подробно:
Отиваме в темплейта /tourist/ и намираме файла overall_header.tpl .
Ще намерите
ТОЗИ код.

Махате всичко след <body> и слагате кода, който е преди ТЕСТ в темплейта.
Трябва да се получи ТОЗИ код.


Забелязали сте, че освен HTML има и едни странни тагове от сорта на
{U_FAQ} и {L_FAQ} .
Примерно {U_SEARCH} и {L_SEARCH} са бутона "Търсене".Първото е URL адреса на
бутона "Търсене", а второто е самия текст.
Представете си го така:
{U_SEARCH} = http://web-tourist.net/forum/search.php а {L_SEARCH} = "Търсене" .
Ако в файла overall_header.tpl напишем следното :
<a href={U_SEARCH}>{L_SEARCH}</a> то в форума ще излезе
<a href=http://web-tourist.net/forum/search.php>Търсене</a>.
Вече трябва да сте наясно, че този бутон "Търсене" може да го местим навсякъде.


Същото се отнася и за останалите.
{U_REGISTER}->url към регистрация/ {L_REGISTER}->"Регистрация".
{U_PRIVATEMSGS} -> URL към "Съобщения" / {PRIVATE_MESSAGE_INFO} -> "Съобщения".
И т.н.
Има една тънкост.
Примерно {PRIVATE_MESSAGE_INFO} може да има стойност -> "Нямате нови съобщения"
но може да има стойност и "Имате 1 ново съобщение" .
{L_LOGIN_LOGOUT} може да има стойност Изход[username] или Вход ( в зависимост дали
потребителя се е логнал или не).



Сега малко да пооправиме останалата част от форума.
В overall_header.tpl трябва да добавите и пътя до CSS-a на темплейта.
Трябва да качите картинките в папката image на темплейта и да оправите пътищата, който водят до тях.


Виждате, че има неподходящи цветове и фонове на таблиците.
Там където пише "Форум Теми Мнения Последно мнение " има син фон, който всъщност е една картинка.
Трябва да я променим или да махнем фона от таблицата.

Намирам следните редове:

th {
color: {T_FONTCOLOR3}; font-size: {T_FONTSIZE2}px; font-weight : bold;
background-color: {T_BODY_LINK}; height: 25px;
background-image: url(templates/tourist/images/{T_TH_CLASS2});
}

и ги заменям с

th {
color: {T_FONTCOLOR3}; font-size: {T_FONTSIZE2}px; font-weight : bold;
background-color: EEEFE9; height: 25px;
background-image: url(templates/tourist/images/{T_TH_CLASS2});
}


Така променям цвета на th (Форум Теми Мнения Последно мнение ).
Картинката ще я махна(или сменя) от контрол панела.


След това:

Намирам следния ред:

.forumline { background-color: {T_TD_COLOR2}; border: 2px {T_TH_COLOR2} solid; }

и го променям на:

.forumline { background-color: {T_TD_COLOR2}; border-left: 1px {T_TH_COLOR2} dotted; }


Така бордера на форума ще остане само отляво и ще е dotted, а не solid.





Сега отиваме в контрол панела->Стилове->Настройки->Промяна и почваме да ги настройваме.

Натиснете тук за да видите как съм ги променил.


Това е засега.

Бих желал да видя как изглеждат вашите уникални темплейти .
Цялата работа свърших с един файл (overall_header.tpl ).
За нещо по-сериозно ще с наложи да едитвам и други tpl. файлове.

В следващия епизод ще поговорим как да си направите сами МОД.
Колкото и готови МОД-ове да има винаги ще ви трябва нещо специално.


Някой разбра ли нещо??? :))


Урока е подготвен специално за http://web-tourist.net


Може да изтеглите темплейта от ТУК









/ Трябва да сте регистриран за да напишете коментар /
От: HackeR
22:07 26-09-2009
а може ли да ми го дадеш в един архив готово интегриран ?? плс
От: bubust
20:41 07-02-2010
Хубаво уроче, съвсем скоро ще го видиш в действие.

Аз какво направих - попромених overall_header.tpl и overall_footer.tpl

Цветовете на таблиците и фоновите изображения могат да се сменят от админ панела на форума. Просто се редактират стойностите за избрания шаблон. :)

Пак браво за уроците за промяна на скина.
От: IMBA
23:55 14-01-2011
Тъпичко е като линковете неработят.
От: cakky
20:00 19-01-2011
То в този сайт на 99% от демотата не работят
1