Хочется немного поделится с начинающими о том с чего начинать и по мере развития темы делится маленькими хитростями. Составляется всеми начинающими. спасение утопающих дело рук самих утопающих.
1. Создаем в ../forum/templates/ свою папку/каталог, например MyExBB (при этом важно помнить о регистре букв и использование латиницы).
2. За основу нашего скина берем имеющийся дефолтный скин InvisionExBB (хотя можно взять и любой другой).
3. Копируем из папки которую взяли за основу в нашем случае InvisionExBB все файлы и папки со всем содержимым в нашу папку MyExBB.
4. Открываем в редакторе, можно даже блокнотом все файлы, поиском находим InvisionExBB и заменяем MyExBB.
5. Наш скин готов к изменениям.
Изображения.
Используем изображения с расширением gif, так как все браузеры их корректно отображают. при этом в начале желательно сохранять размеры/пропорции что не даст таблицам сузится или расширится.
1. Подготавливаем файлы изображений к замене и копируем в папку im с заменой имеющихся при этом имена файлов оставляем прежними (что не даст запутаться Вам и другим при изменении или проблемах) и опять таки помним о регистре как самих файлов так и расширений.
Цветовую палитру настраиваем через стили которые хранятся в файле style.css
При переименовании цветов важно помнить что хранятся они в шеснадцатиричных кодах
например желтый #ffba00 и т.д.
(Добавление)
файл all_header.tpl т.к. называемая "Шапка" с этого файла начинается построение всех страниц и если там есть ошибки то вся страница построится с ошибками.
Что можно здесь настроить?
title что будет отражаться в заглавии страницы, там стоит переменная которая автоматически генерирует/создает название форума и конкретной темы или страницы.
meta - теги если не понимаете о чем речь, тогда не стоит их трогать, тем более влияние их незначительно...
link осуществляет связывание файлов шаблона и например каскадных таблиц стилей .CSS это если вдруг вы ее переместите или будете использовать с другого сайта.
body задание общего стиля "центральной" таблицы в общем то его значения прописываются в файле style.css, но можно их прописать и непосредственно здесь. Это в основном отступы от краем, фоновые цвета или изображения.
и начало первой то есть основной таблицы причем имено тут и указывается ширина всей талицы 95% (по умолчанию) это значение можно менять в пределах разумного не более 100%
1. Victor - 9 ноября 2009 — 21:03 - перейти к сообщению
2. mastersound - 9 ноября 2009 — 21:21 - перейти к сообщению
+1. Согласен, что надо завести такую тему. Думаю, по мере возможностей, все смогут сюда что-нибудь закинуть, сообразно своего опыта.
3. Victor - 9 ноября 2009 — 21:24 - перейти к сообщению
Как ни странно конец всей создаваемой страницы находится не в папке с скином, а в папке include и называется page_tail.php именно в нем закрываются все ранее открытые таблицы. Для нас важно что в этом файле находится вывод самой..самой нижней строчки (которую многие просто не учитывают при создании скинов)
[Script Execution time: 0.0217] [ Gzip Disabled ]
либо эти строки нужно удалить (это не копирайты) и мало кому не считая специалистов они будут интересны. Либо тут же отредактировать цвет, фон, размер и другие косметические моменты.
(Добавление)
следующий файл footer.tpl это "низ" всех страничек, в котором содержатся копирайты, а так же можно разместить контактную информацию и информеры, счетчики посещаемости и рекламу...
ПОМНИМ УДАЛЕНИЕ КОПИРАЙТОВ АВТОРОВ ПРЕСЛЕДУЕТСЯ ПО ЗАКОНУ и вообще это порой некрасиво по отношению к авторам (хотя перечислять уборщиц и массажисток здесь тоже не обязательно)
(Добавление)
logos.tpl этот файл отвечает за вывод логотипа, названия форума, меню пользователя, и вообще меню (можно добавить свое меню или отдельно взятые пункты), рекламу в смысле банер, и приветствие пользователя.
(Добавление)
smile_map.tpl смайлы, точнее те первые или основные которые выводятся сразу при создании сообщения без открытия дополнительных (кстати ссылка на открытие дополнительных смайлов находится там же.
Значит если мы хотим безболезненно, точнее с наименьшими потерями для своей темы добавить оригинальные смайлы например квадратные (не трогая основные смайлы) создаем новую папку например smalie и в нее копируем смайлы.. затем меняем путь в коде.
правда придется отказаться от многообразия смайлов или просто проделать титанический труд по замене всех ссылок
[Script Execution time: 0.0217] [ Gzip Disabled ]
CODE:
<center>
<font color="#990000" size="1">
[Script Execution time: $totaltime] [ {$_GZIP_STATUS} ]</font
<br /><br />
</font>
</center>
<font color="#990000" size="1">
[Script Execution time: $totaltime] [ {$_GZIP_STATUS} ]</font
<br /><br />
</font>
</center>
либо эти строки нужно удалить (это не копирайты) и мало кому не считая специалистов они будут интересны. Либо тут же отредактировать цвет, фон, размер и другие косметические моменты.
(Добавление)
следующий файл footer.tpl это "низ" всех страничек, в котором содержатся копирайты, а так же можно разместить контактную информацию и информеры, счетчики посещаемости и рекламу...
ПОМНИМ УДАЛЕНИЕ КОПИРАЙТОВ АВТОРОВ ПРЕСЛЕДУЕТСЯ ПО ЗАКОНУ и вообще это порой некрасиво по отношению к авторам (хотя перечислять уборщиц и массажисток здесь тоже не обязательно)
(Добавление)
logos.tpl этот файл отвечает за вывод логотипа, названия форума, меню пользователя, и вообще меню (можно добавить свое меню или отдельно взятые пункты), рекламу в смысле банер, и приветствие пользователя.
(Добавление)
smile_map.tpl смайлы, точнее те первые или основные которые выводятся сразу при создании сообщения без открытия дополнительных (кстати ссылка на открытие дополнительных смайлов находится там же.
Значит если мы хотим безболезненно, точнее с наименьшими потерями для своей темы добавить оригинальные смайлы например квадратные (не трогая основные смайлы) создаем новую папку например smalie и в нее копируем смайлы.. затем меняем путь в коде.
CODE:
<img src="im/emoticons/laugh24.gif" alt="smalie" onClick="bbcode(0,'::laugh24.gif::')" />
на
<img src="./templates/MyExBB/smalie/laugh24.gif" alt="smilie" onClick="bbcode(0,'::laugh24.gif::')" />
на
<img src="./templates/MyExBB/smalie/laugh24.gif" alt="smilie" onClick="bbcode(0,'::laugh24.gif::')" />
правда придется отказаться от многообразия смайлов или просто проделать титанический труд по замене всех ссылок
4. 1Bot - 9 ноября 2009 — 22:02 - перейти к сообщению
Victor
Очень хорошее начинание, желательно бы так же подробно описать все каркасные шаблоны из темы
Очень хорошее начинание, желательно бы так же подробно описать все каркасные шаблоны из темы
5. Victor - 10 ноября 2009 — 05:29 - перейти к сообщению
1Bot что знаю напишу, но многое я сам не знаю
для того и создал тему что б каждый по немного расказал глядишь и наберется информация
для того и создал тему что б каждый по немного расказал глядишь и наберется информация
6. Borman - 10 ноября 2009 — 11:50 - перейти к сообщению
Victor Еще бы было хорошо если подробно был расписан файл style.css, где какой цвет меняем . Если конечно можно
7. electron - 10 ноября 2009 — 12:03 - перейти к сообщению
Borman пишет:
бы было хорошо если подробно был расписан файл style.css, где какой цвет меняем
это можно легко понять методом "научного тыка". все цвета там прописаны в виде #000 или #5F9EA0. меняя буквы и цифры после # можно легко изменить какой-либо цвет. меняешь - смотришь что изменилось на форуме.
кстати, вот офигенная страничка на тему цветов. постоянно ею пользуюсь если нужен код какого-либо цвета
8. LordShad0W - 10 ноября 2009 — 14:16 - перейти к сообщению
electron пишет:
вот офигенная страничка на тему цветов. постоянно ею пользуюсь если нужен код какого-либо цвета
Спасибо за ссылочку! Полезная вещь!
9. Borman - 10 ноября 2009 — 16:31 - перейти к сообщению
electron пишет:
Таким методом можно не туда тыкнуть, а хотелось бы мне ламеру хоть както понять куда тыкать и что будет после
это можно легко понять методом "научного тыка"
10. electron - 10 ноября 2009 — 16:35 - перейти к сообщению
а ты сохрани изначальный файл style.css где-нибудь в заначке на компе и если что-то накосячишь - скинул его назад на хост и всё восстановилось, как не бывало ошибок
11. Victor - 10 ноября 2009 — 16:46 - перейти к сообщению
Borman постараюсь ответить как я анализирую этот файл:
открываем для начала файл самого шаблона например logos.tpl и начинаем искать где у нас отсылка к стилям оформления:
многие стили применяются в разных местах и имеют еще иерархию то есть главные, а потом в них вложенные...
(Добавление)
BODY - относится ко всей странице в целом, можно задать фон, цвета шрифтов и сами шрифты, отступы внутри браузера от края и т.д. все дело в том что каждый браузер если специально не указать возьмет все это из своих настроек, например если не указать цвет ссылок то они будут синие...
img соответственно оформление всех изображений причем именно всех.. не путать со вставленными, тоесть и логотипов и фоновых...
a:link, a:visited, a:active ссылки соответственно в тексте, посещенные, активные
(Добавление)
вот хорошая тема по CSS с примерами:
http://wdh.suncloud.ru/css01.htm
(Добавление)
board_body.tpl этот файл формирует непосредственно первую страницу с выводом всех форумов, при этом использует и другие файлы шаблона (подключает их). Что здесь можно настроить вывод:
быстрой авторизации
последний визит когда был
название форума (имеется в виду навигация над форумом)
и конечно статистика
также при включении подключаются модули Топ-лист и дни рождения пользователей
и конечно RSS
упоминал подключаемые файлы:
board_data.tpl
отвечает непосредственно за вывод таблиц с темами, числом сообщение, обновлением...тоесть и формирует содержимое таблиц, здесь и можно поработать с оформлением этих таблиц и вообще менять взаимное расположение столбцов...
открываем для начала файл самого шаблона например logos.tpl и начинаем искать где у нас отсылка к стилям оформления:
CODE:
<table width="100%" [b]id='logostrip' [/b]cellspacing="0" cellpadding="0">
вот она ссылка на стиль id='logostrip' значит для оформления этой таблицы используется стиль logostrip, открываем файл style.css и ищем:
#logostrip {
border:1px solid #345487;
background-color: #3860BB;
background-image:url(im/tile_down.gif);
padding:0px;
margin:0px;
}
#logostrip a:link, #logostrip a:visited, #logostrip a:active {
font-size:20px;
text-decoration: none;
color: #3A4F6C;
font-weight : bold;
}
<table width="100%" [b]id='logostrip' [/b]cellspacing="0" cellpadding="0">
вот она ссылка на стиль id='logostrip' значит для оформления этой таблицы используется стиль logostrip, открываем файл style.css и ищем:
#logostrip {
border:1px solid #345487;
background-color: #3860BB;
background-image:url(im/tile_down.gif);
padding:0px;
margin:0px;
}
#logostrip a:link, #logostrip a:visited, #logostrip a:active {
font-size:20px;
text-decoration: none;
color: #3A4F6C;
font-weight : bold;
}
многие стили применяются в разных местах и имеют еще иерархию то есть главные, а потом в них вложенные...
(Добавление)
BODY - относится ко всей странице в целом, можно задать фон, цвета шрифтов и сами шрифты, отступы внутри браузера от края и т.д. все дело в том что каждый браузер если специально не указать возьмет все это из своих настроек, например если не указать цвет ссылок то они будут синие...
img соответственно оформление всех изображений причем именно всех.. не путать со вставленными, тоесть и логотипов и фоновых...
a:link, a:visited, a:active ссылки соответственно в тексте, посещенные, активные
(Добавление)
вот хорошая тема по CSS с примерами:
http://wdh.suncloud.ru/css01.htm
(Добавление)
board_body.tpl этот файл формирует непосредственно первую страницу с выводом всех форумов, при этом использует и другие файлы шаблона (подключает их). Что здесь можно настроить вывод:
быстрой авторизации
последний визит когда был
название форума (имеется в виду навигация над форумом)
и конечно статистика
также при включении подключаются модули Топ-лист и дни рождения пользователей
и конечно RSS
упоминал подключаемые файлы:
board_data.tpl
отвечает непосредственно за вывод таблиц с темами, числом сообщение, обновлением...тоесть и формирует содержимое таблиц, здесь и можно поработать с оформлением этих таблиц и вообще менять взаимное расположение столбцов...
12. Victor - 15 ноября 2009 — 21:03 - перейти к сообщению
13. altjo - 16 ноября 2009 — 15:47 - перейти к сообщению
пожалуй, добавлю пару нотаток...
1) изменяя размеры кнопок: inboxpm.gif, newpm.gif и outboxpm.gif,
не забудьте поменять значения width и height во всех файлах pm_*.tpl (т.е. pm_inbox.tpl, pm_show.tpl... кроме файла pm_inbox_data.tpl - всего 6 файлов),
т.к. для этих трех кнопок габариты задаются еще и отдельно (не совсем понятно зачем)
2) изменяя размеры следующих изображений: bar.gif, bar_left.gif и bar_right.gif,
не забудьте поменять значения width и height в файле poll_data.tpl
зы. кстати для дефолтового стиля эти параметры почему-то не совпадают...
3) изменяя длину изображения logo.gif
в файле logos.tpl измените значение width
зы. кстати для дефолтового стиля этот параметр не совпадает (указано width="207", а на самом деле 210)...
1) изменяя размеры кнопок: inboxpm.gif, newpm.gif и outboxpm.gif,
не забудьте поменять значения width и height во всех файлах pm_*.tpl (т.е. pm_inbox.tpl, pm_show.tpl... кроме файла pm_inbox_data.tpl - всего 6 файлов),
т.к. для этих трех кнопок габариты задаются еще и отдельно (не совсем понятно зачем)
CODE:
<a href="messenger.php?action=inbox"><img src="{$InBoxIcon}" width="108" height="30" border="0"></a>
<a href="messenger.php?action=outbox"><img src="{$OutBoxIcon}" width="115" height="30" border="0"></a>
<a href="messenger.php?action=new"><img src="{$NewPMIcon}" width="94" height="30" border="0"></a>
<a href="messenger.php?action=outbox"><img src="{$OutBoxIcon}" width="115" height="30" border="0"></a>
<a href="messenger.php?action=new"><img src="{$NewPMIcon}" width="94" height="30" border="0"></a>
2) изменяя размеры следующих изображений: bar.gif, bar_left.gif и bar_right.gif,
не забудьте поменять значения width и height в файле poll_data.tpl
CODE:
<td><img src="./templates/InvisionExBB/im/bar_left.gif" width="6" alt="" height="12" hspace="0" /><img src="./templates/InvisionExBB/im/bar.gif" width="{$width}" height="12" alt="{$percent}" hspace="0" /><img src="./templates/InvisionExBB/im/bar_right.gif" width="6" alt="" height="12" hspace="0" /></td>
зы. кстати для дефолтового стиля эти параметры почему-то не совпадают...
3) изменяя длину изображения logo.gif
в файле logos.tpl измените значение width
CODE:
<td><a href="index.php" title="{$fm->exbb['boardname']}"><img src="./templates/InvisionExBB/im/logo.gif" alt="{$fm->exbb['boardname']}" width="207" height="52" border="0" /></a></td>
зы. кстати для дефолтового стиля этот параметр не совпадает (указано width="207", а на самом деле 210)...
14. Victor - 16 ноября 2009 — 16:19 - перейти к сообщению
altjo пишет:
кстати для дефолтового стиля этот параметр не совпадает
просто в шаблоне указывается тот размер который нужен, и он может не совпадать так что при замене этого файла он автоматически подгонится под нужный размер
15. Victor - 16 ноября 2009 — 20:38 - перейти к сообщению
попалась интересная заметка о слоях, надеюсь комуто пригодится:
Итак, что же из себя представляет слой?
id - это индивидуальное имя слоя, совпадать и повторяться оно не должно!
style - это вид слоя, то есть способ его отображения. Без этого параметра сам по себе тег div может служить лишь способом форматирования вложенного в него текста - без главных особенностей, присущих слоям - таких, как расположение поверх чего угодно.
left - расстояние от левого края: может быть как в пихелях, так и в процентах от общей ширины экрана.
top - расстояние от верха.
z-index - значение может быть только цифрой. Причем, чем меньше эта цифра, тем выше находится слой по отношению к другим слоям.
Казалось бы, дизайн, построенный на слоях, намного удобнее и проще, чем дизайн на банальных таблицах, но есть нюансы, как положительные, так и отрицательные.
В числе положительных:
* удобство для дизайнера - большая свобода и больше эффектов.
* быстрее загрузка и не ждать закрытия замыкающего тега.
* удобнее манипулировать их содержимым
Отрицательные стороны:
* сложно подстраиваться под меняющееся разрешение монитора. И еще сложнее делать такой дизайн гибким - чтобы ширина слоя менялась сообразно ширине окна. Это, конечно, можно сделать при помощи весьма громоздкого скрипта, но... второе преимущество из списка положительного мы теряем.
* o поисковики... многие последовательности тегов, как ни вопят владельцы поисковых машин - а находятся хуже! Вывод - будь проще, и к тебе потянутся.
Дополнительные возможные теги:
background-color: цвет фона
layer-background-color: цвет слоя
border: 1px none - если убрать "ноне", то вокруг слоя появится бордюрчик 1 пихель толщиной
CODE:
HTML
<div id="имя слоя" style="position:absolute; left:204px; top:143px; width:171px; height:62px; z-index:2">содержимое слоя</div>
<div id="имя слоя" style="position:absolute; left:204px; top:143px; width:171px; height:62px; z-index:2">содержимое слоя</div>
Итак, что же из себя представляет слой?
id - это индивидуальное имя слоя, совпадать и повторяться оно не должно!
style - это вид слоя, то есть способ его отображения. Без этого параметра сам по себе тег div может служить лишь способом форматирования вложенного в него текста - без главных особенностей, присущих слоям - таких, как расположение поверх чего угодно.
left - расстояние от левого края: может быть как в пихелях, так и в процентах от общей ширины экрана.
top - расстояние от верха.
z-index - значение может быть только цифрой. Причем, чем меньше эта цифра, тем выше находится слой по отношению к другим слоям.
Казалось бы, дизайн, построенный на слоях, намного удобнее и проще, чем дизайн на банальных таблицах, но есть нюансы, как положительные, так и отрицательные.
В числе положительных:
* удобство для дизайнера - большая свобода и больше эффектов.
* быстрее загрузка и не ждать закрытия замыкающего тега.
* удобнее манипулировать их содержимым
Отрицательные стороны:
* сложно подстраиваться под меняющееся разрешение монитора. И еще сложнее делать такой дизайн гибким - чтобы ширина слоя менялась сообразно ширине окна. Это, конечно, можно сделать при помощи весьма громоздкого скрипта, но... второе преимущество из списка положительного мы теряем.
* o поисковики... многие последовательности тегов, как ни вопят владельцы поисковых машин - а находятся хуже! Вывод - будь проще, и к тебе потянутся.
Дополнительные возможные теги:
background-color: цвет фона
layer-background-color: цвет слоя
border: 1px none - если убрать "ноне", то вокруг слоя появится бордюрчик 1 пихель толщиной