- Автор темы
- #1
Оформление блоков в DLE, или свой дизайн блока за 5 минут.
С того времени,как я сделал первую версию уроков поменялось много версий движка. Было внесено огромное количество изменений и дополнений и т.д. И, хотя уроки остаются по прежнему актуальными, я решил переписать их исходя из последней версии движка -6.3
Свои уроки я пишу исходя из того, что вы УЖЕ знаете язык HTML и CSS, более вам ничего не потребуется. Если же вы этого не знаете - вам следует начать с изучения HTML CSS и основ верстки простейших страниц. Я не буду на протяжении уроков обьяснять простейшие азы веб, HTML и CSS - для этого полно учебников написанных куда более умными людьми чем я.
В версии 5.5 изменился дизайн..на мой взляд в худшую сторону, кода и графики стало больше, даже мне было сложновато вот так сразу с наскоку въехать во все тонкости. Ну ничего..я надеюсь вместе мы сможем во всем разобраться.
Сначала у меня была идея так же как и в первой версии уроков - просто менять участки кода оригинального дизайна. После 2 часов изменний я понял, что даже мне разобраться сложно, разработчики наворотили просто немерянно кода в новом шаблоне, тонны графики, таблиц и т.п. Если сложно с этим работать мне, то тем кто читает эти уроки разобраться будет вообще невозможно. Мне нравится шаблон стандартный который использовался во всех версиях, его изменили только в 5.5. Поэтому за основу я взял имненно его, внес небольшие изменения как показано здесь:
Изменения НЕ критические и НЕ сложные. Буквально 3 строки.
Поэтому все изменения будут делаться относительно старого дизайна, новый для уроков не подходит..иначе придется писать целую библию. В конце уроков я выложу старый шаблон относительно которого делались изменения и новый который получится в итоге. так же старый шаблон можно взять с дистрибутива версии 5.3
Что представляет собой блок в DLE?
В простейшем варианте это обычная таблица с двумя строками.
Выглядит это так
Код 1
Меня лично это не устраивает. Ну какой может быть дизайн если вместо блоков вставить такие таблицы? Поэтому
для оформления блока необходим бекгрунд для заголовка - как минимум+оформление border(границ) таблицы.
Я нарисовал оформление блоков+нашел немного разных стрелочек и иконок для оформления.
Как сделать бекграунд и оформление - учите css+html, я же привожу готовый код блока, все пути прописаны относительно
папки pics. (папку pics создаем в папке templates/Default)
Код 2
В пути к картинкам вы обязательно должны указывать {THEME}/ - это указывает движку что картинка находится в папке
с скином, а не где то еще.
Вот, тепреь у нас есть ГОТОВАЯ заготовка для блока, что бы заменить нею ввсе стандартные блоки нам потребуется еще
5 минут.
Самый главный вопрос из-за которого многие не спят ночами - "Да заготовка блока есть, а как же его вставить то
в дизайн", ответ на самом деле прост:
в папке templates/Default ищем файл main.tpl (если не найдете то этот урок не для вас)
Открываем его - смело жмем на нем F4 (откроется блокнотом, у меня открывает Breed который встроен в TotalCMD)
1. Вход на сайт
В этом файле - main.tpl- куча строк непонятного когда. Первый блок который мы будем оформлять это Вход на сайт, вам необходимо найти код оригинального блока (проще всего это сделать нажав ctrl+F(поиск), и ввести в строку поиска "Вход на сайт")
Вот полный код этого блока (все остальные блоки выглядят так же, отличаются только содержимым, html код одинаков)
Код3:
Как видите этот код представляет собой простую таблицу, с бекграундами и т.д.,
удаляем ПОЛНОСТЬЮ этот код и вставляем вместо него Код 2, вместо "Заголовок блока", пишем "Вход на сайт",
в то место где стоит "Содержимое блока", вы вставляете тег - {login} - именно он и выводит содержимое блока "Вход на сайт"
В итоге вы получите такой код:
Код 4:
Если вы заметили то строке таблицы где рамещена надпись "Вход на сайт", назначен класс - class="navigation_box1".(в строке с содержимым есть class="navigationbg2" и class="navigationbg3"- о нем чуть позже).
Открываем файл templates/Default/css/style.css, в самом низу добавляем:
Код 5:
Это css офомление строки - бекгроунд (картинка на котороq находится заголовок блока), положение бекграунда, шрифт,трансорфмация, вид шрифта, размер шрифта, 2 отступа. Если вы этого кода не понимаете - то вам еще рано делать самим дизайн для DLE, и я рекомендую изучить CSS, для начала.
Тюнинг - тюнингом называется доведение участка страницы (либо всей страницы)..нет не до белого каления и не до зеленых чертиков..как вы подумали, а до окончательного блеска - ровняются участки текста, ссылки, цвета и т.д. Здесь все зависит от знания CSS+HTML, вот как бы это сделал я:
НО...это еще не все, как вы видите на скриншоте - ссылка "регистрация на сайте" выглядит несколько кривовато(я специально убрал class="copy" что бы продемонстрировать), за оформление этого блока отвечает класс css - copy, итак строке в которой выводится содержимое назначаем class="copy", далее открываем templates/Default/css/style.css,и находим там такой код
Код 6:
и удаляем его, наш класс это class="navigationbg2", в нем уже прописаны шрифты, размер и т.п. (см. код 5)
Далее чуть ниже находим оформление линков:
Код 7:
Заменяем его на:
Код 8:
Но и это еще не все - когда тебе за дизайн платят деньги нужно быть уверенным что ты их отработал, что бы не назвали барыгой или ламмером, Меняем отступ формы ввода пароля/логина
Открываем файл login.tpl
Находим код:
Код 9:
Что нас здесь интересует? Человек знающий хоть немного CSS+HTML сразу поймет, для остальных обясню нас интересует выравнивание и отступы. Необходимо убрать все padding-left:21px;, и align="right" заменить на align="left" (+ такое выравнивание поставить всей таблице), а так же в предпоследней строке заменить padding-left:55px; на padding-left:5px;
Код 10:
И последний штрих, находим код
и меняем на
таким образом вы меняете расположение кнопки "завершить сеанс", в коде меняется только padding-left:75px на padding-left:10px; т.е. вы меняте отступ от левой границы.
Все - блок Вход на сайт можно считать оформленным, это самый сложный блок для оформления
Оформляем остальные блоки:
2. Навигация по сайту (рассматривается вариант с включенным ЧПУ)
Дальше идет блок Навигация по сайту, почему-то у новичков созднаие навигации вызывает сильные затруднения, на самом деле это
ОЧЕНЬ просто. Итак - нам нужно создать меню со ссылками на разделы сайта. Для начала мы должны создать новостные разделы, идем в админцентр - категории - создеам новые категории нвоостей, имена пишем латинницей, создаем допустим 3 категории,
1.soft
2.games
3.music
Сделали. Тепреь туда нужно добавить туда хоть по одной новости (при переходе в пустой раздел вы увидите сообщение "Статьи по данному критерию не найдены"), добавили, кто не знает - это делается из админки-добавить новость.
я рассматриваю вариант навигации с включенным ЧПУ.
При включенном Чпу ссылка на любую категорию выглядит так
Допустим у меня есть сайт
<a href="http://monsterteam.ws/category/soft">Программы</a>
Если вы делаете ссылку на статическую страницу, то она будет выглядеть как
<a href="http://monsterteam.ws/static/страница.html">Статическая страница </a>
Итак, ссылки (пример на основе моего домена)
1.
2.
3.
а ссылки которые пойдут в модуль будут выглядеть так:
1. <a href="http://monsterteam.ws/category/soft">Программы</a>
2. <a href="http://monsterteam.ws/category/games">Компьютерные игры</a>
3. <a href="http://monsterteam.ws/category/music">Музыка</a>
Но - в модуль можно добавить вообще ЛЮБУЮ ссылку, на что угодно, я добавлю ссылку на форум
1. <a href="http://monsterteam.ws/category/soft">Программы</a>
2. <a href="http://monsterteam.ws/category/games">Компьютерные игры</a>
3. <a href="http://monsterteam.ws/category/music">Музыка</a>
4. <a href="http://monsterteam.info">Мой форум</a>
осталось самое простое - вставить эти ссылки в модуль Навигации
Открываем опять main.tpl, ищем там оригинальный блок
Код 11:
Удаляем его, а вместо него вставляем КОД2 - да-да, вставляем код модуля Вход на сайт, ничего ужасного здесь нет, оформление то ИДЕНТИЧНОЕ у всех блоков, а изменяется в нем только Заголовок и Содержимое, в данном случае в заголовке вы пишете Меню, вместо тега {login} вы вставляете свои ссылки на разделы сайта.
Вот что в итоге получится:
Код 12:
Тюнинг - как вы заметили в блоке с содержимым появились новые стили - class="navigation_box_bg", class="navi_first" открываем файл templates/Default/css/style.css и добавляем в него такой код (можно в самый низ):
Код 13:
Что этот код делает? Он меняет оформление ссылок в меню - шрифт, цвет, добавляет графику. Обычный CSS и ничего более.
Остальные блоки оформляются буквально за минуту, по аналогии с предыдущими
3. Опрос на сайте
Берем код оригинального блока:
Код 15:
Заменяем его на свой (ставим заголовок "Опрос на сайте" и содержимое - тег {vote}, он и выводит опрос) :
Код 16:
Все блок оформлен, дополнительные настройки для тюнинга находятся в файле vote.tpl
4. Календарь
Код 17:
и заменяем его на свой, по аналогии с предыдущими пунктами
Код 18:
Тег {calendar} выводит календарь
Дополнительное редактирвоание календаря:
файл engine.css - в нем прописаны все основные стили движка, ищем секцию:
/*
* ========================================
* Календарь
* ========================================
*/
Все что ниже подлежит редактированию - цвет, отступы и т.д., либо же вы можете оставить все как есть, если вас устраивает
5. Популярные статьи
находим код:
Код 19:
и меняем его на свой:
Код 20:
Тег {topnews} выводит топ новостей.
6. Архив новостей и смена скина
Небольшие блоки, поэтому объединил в один пункт:
Находим такой код (два блока, идут друг за другом):
Код 21:
и заменяем на:
Код 22:
ВСЕ.
С того времени,как я сделал первую версию уроков поменялось много версий движка. Было внесено огромное количество изменений и дополнений и т.д. И, хотя уроки остаются по прежнему актуальными, я решил переписать их исходя из последней версии движка -6.3
Свои уроки я пишу исходя из того, что вы УЖЕ знаете язык HTML и CSS, более вам ничего не потребуется. Если же вы этого не знаете - вам следует начать с изучения HTML CSS и основ верстки простейших страниц. Я не буду на протяжении уроков обьяснять простейшие азы веб, HTML и CSS - для этого полно учебников написанных куда более умными людьми чем я.
В версии 5.5 изменился дизайн..на мой взляд в худшую сторону, кода и графики стало больше, даже мне было сложновато вот так сразу с наскоку въехать во все тонкости. Ну ничего..я надеюсь вместе мы сможем во всем разобраться.
Сначала у меня была идея так же как и в первой версии уроков - просто менять участки кода оригинального дизайна. После 2 часов изменний я понял, что даже мне разобраться сложно, разработчики наворотили просто немерянно кода в новом шаблоне, тонны графики, таблиц и т.п. Если сложно с этим работать мне, то тем кто читает эти уроки разобраться будет вообще невозможно. Мне нравится шаблон стандартный который использовался во всех версиях, его изменили только в 5.5. Поэтому за основу я взял имненно его, внес небольшие изменения как показано здесь:
Изменения НЕ критические и НЕ сложные. Буквально 3 строки.
Поэтому все изменения будут делаться относительно старого дизайна, новый для уроков не подходит..иначе придется писать целую библию. В конце уроков я выложу старый шаблон относительно которого делались изменения и новый который получится в итоге. так же старый шаблон можно взять с дистрибутива версии 5.3
Что представляет собой блок в DLE?
В простейшем варианте это обычная таблица с двумя строками.
Выглядит это так
Код 1
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Меня лично это не устраивает. Ну какой может быть дизайн если вместо блоков вставить такие таблицы? Поэтому
для оформления блока необходим бекгрунд для заголовка - как минимум+оформление border(границ) таблицы.
Я нарисовал оформление блоков+нашел немного разных стрелочек и иконок для оформления.
Как сделать бекграунд и оформление - учите css+html, я же привожу готовый код блока, все пути прописаны относительно
папки pics. (папку pics создаем в папке templates/Default)
Код 2
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
с скином, а не где то еще.
Вот, тепреь у нас есть ГОТОВАЯ заготовка для блока, что бы заменить нею ввсе стандартные блоки нам потребуется еще
5 минут.
Самый главный вопрос из-за которого многие не спят ночами - "Да заготовка блока есть, а как же его вставить то
в дизайн", ответ на самом деле прост:
в папке templates/Default ищем файл main.tpl (если не найдете то этот урок не для вас)
Открываем его - смело жмем на нем F4 (откроется блокнотом, у меня открывает Breed который встроен в TotalCMD)
1. Вход на сайт
В этом файле - main.tpl- куча строк непонятного когда. Первый блок который мы будем оформлять это Вход на сайт, вам необходимо найти код оригинального блока (проще всего это сделать нажав ctrl+F(поиск), и ввести в строку поиска "Вход на сайт")
Вот полный код этого блока (все остальные блоки выглядят так же, отличаются только содержимым, html код одинаков)
Код3:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
удаляем ПОЛНОСТЬЮ этот код и вставляем вместо него Код 2, вместо "Заголовок блока", пишем "Вход на сайт",
в то место где стоит "Содержимое блока", вы вставляете тег - {login} - именно он и выводит содержимое блока "Вход на сайт"
В итоге вы получите такой код:
Код 4:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Открываем файл templates/Default/css/style.css, в самом низу добавляем:
Код 5:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Это css офомление строки - бекгроунд (картинка на котороq находится заголовок блока), положение бекграунда, шрифт,трансорфмация, вид шрифта, размер шрифта, 2 отступа. Если вы этого кода не понимаете - то вам еще рано делать самим дизайн для DLE, и я рекомендую изучить CSS, для начала.
Тюнинг - тюнингом называется доведение участка страницы (либо всей страницы)..нет не до белого каления и не до зеленых чертиков..как вы подумали, а до окончательного блеска - ровняются участки текста, ссылки, цвета и т.д. Здесь все зависит от знания CSS+HTML, вот как бы это сделал я:
НО...это еще не все, как вы видите на скриншоте - ссылка "регистрация на сайте" выглядит несколько кривовато(я специально убрал class="copy" что бы продемонстрировать), за оформление этого блока отвечает класс css - copy, итак строке в которой выводится содержимое назначаем class="copy", далее открываем templates/Default/css/style.css,и находим там такой код
Код 6:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
и удаляем его, наш класс это class="navigationbg2", в нем уже прописаны шрифты, размер и т.п. (см. код 5)
Далее чуть ниже находим оформление линков:
Код 7:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Заменяем его на:
Код 8:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Но и это еще не все - когда тебе за дизайн платят деньги нужно быть уверенным что ты их отработал, что бы не назвали барыгой или ламмером, Меняем отступ формы ввода пароля/логина
Открываем файл login.tpl
Находим код:
Код 9:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Что нас здесь интересует? Человек знающий хоть немного CSS+HTML сразу поймет, для остальных обясню нас интересует выравнивание и отступы. Необходимо убрать все padding-left:21px;, и align="right" заменить на align="left" (+ такое выравнивание поставить всей таблице), а так же в предпоследней строке заменить padding-left:55px; на padding-left:5px;
Код 10:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
И последний штрих, находим код
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
и меняем на
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
таким образом вы меняете расположение кнопки "завершить сеанс", в коде меняется только padding-left:75px на padding-left:10px; т.е. вы меняте отступ от левой границы.
Все - блок Вход на сайт можно считать оформленным, это самый сложный блок для оформления
Оформляем остальные блоки:
2. Навигация по сайту (рассматривается вариант с включенным ЧПУ)
Дальше идет блок Навигация по сайту, почему-то у новичков созднаие навигации вызывает сильные затруднения, на самом деле это
ОЧЕНЬ просто. Итак - нам нужно создать меню со ссылками на разделы сайта. Для начала мы должны создать новостные разделы, идем в админцентр - категории - создеам новые категории нвоостей, имена пишем латинницей, создаем допустим 3 категории,
1.soft
2.games
3.music
Сделали. Тепреь туда нужно добавить туда хоть по одной новости (при переходе в пустой раздел вы увидите сообщение "Статьи по данному критерию не найдены"), добавили, кто не знает - это делается из админки-добавить новость.
я рассматриваю вариант навигации с включенным ЧПУ.
При включенном Чпу ссылка на любую категорию выглядит так
Пожалуйста,
Войдите
или
Зарегистрируйтесь
для просмотра содержания URL!
категорииДопустим у меня есть сайт
Пожалуйста,
Войдите
или
Зарегистрируйтесь
для просмотра содержания URL!
, и есть категория soft, то ссылка будет выглядеть так<a href="http://monsterteam.ws/category/soft">Программы</a>
Если вы делаете ссылку на статическую страницу, то она будет выглядеть как
Пожалуйста,
Войдите
или
Зарегистрируйтесь
для просмотра содержания URL!
<a href="http://monsterteam.ws/static/страница.html">Статическая страница </a>
Итак, ссылки (пример на основе моего домена)
1.
Пожалуйста,
Войдите
или
Зарегистрируйтесь
для просмотра содержания URL!
2.
Пожалуйста,
Войдите
или
Зарегистрируйтесь
для просмотра содержания URL!
3.
Пожалуйста,
Войдите
или
Зарегистрируйтесь
для просмотра содержания URL!
а ссылки которые пойдут в модуль будут выглядеть так:
1. <a href="http://monsterteam.ws/category/soft">Программы</a>
2. <a href="http://monsterteam.ws/category/games">Компьютерные игры</a>
3. <a href="http://monsterteam.ws/category/music">Музыка</a>
Но - в модуль можно добавить вообще ЛЮБУЮ ссылку, на что угодно, я добавлю ссылку на форум
1. <a href="http://monsterteam.ws/category/soft">Программы</a>
2. <a href="http://monsterteam.ws/category/games">Компьютерные игры</a>
3. <a href="http://monsterteam.ws/category/music">Музыка</a>
4. <a href="http://monsterteam.info">Мой форум</a>
осталось самое простое - вставить эти ссылки в модуль Навигации
Открываем опять main.tpl, ищем там оригинальный блок
Код 11:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Вот что в итоге получится:
Код 12:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Код 13:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Что этот код делает? Он меняет оформление ссылок в меню - шрифт, цвет, добавляет графику. Обычный CSS и ничего более.
Остальные блоки оформляются буквально за минуту, по аналогии с предыдущими
3. Опрос на сайте
Берем код оригинального блока:
Код 15:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Код 16:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Все блок оформлен, дополнительные настройки для тюнинга находятся в файле vote.tpl
4. Календарь
Код 17:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Код 18:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Дополнительное редактирвоание календаря:
файл engine.css - в нем прописаны все основные стили движка, ищем секцию:
/*
* ========================================
* Календарь
* ========================================
*/
Все что ниже подлежит редактированию - цвет, отступы и т.д., либо же вы можете оставить все как есть, если вас устраивает
5. Популярные статьи
находим код:
Код 19:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Код 20:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
Тег {topnews} выводит топ новостей.
6. Архив новостей и смена скина
Небольшие блоки, поэтому объединил в один пункт:
Находим такой код (два блока, идут друг за другом):
Код 21:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
и заменяем на:
Код 22:
PHP:
Пожалуйста,
Войдите
или
Зарегистрируйтесь для просмотра содержимого кодов!
ВСЕ.
Последнее редактирование: