Добро пожаловать в Forum.iCoder.Uz

Присоединяйтесь к нам сейчас, чтобы получить доступ ко всем нашим функциям. После регистрации и входа в систему вы сможете создавать темы, публиковать ответы на существующие темы, повышать репутацию других участников, получать собственный личный мессенджер и многое другое. Это также быстро и совершенно бесплатно, так чего же вы ждете?

Задать вопрос

Задавайте вопросы и получайте ответы от нашего сообщества

Отвечать

Отвечайте на вопросы и станьте экспертом в своей теме

Связаться с нами

Наши специалисты готовы ответить на ваши вопросы

DLE Оформление блоков в DLE, или свой дизайн блока за 5 минут.

  • Автор темы Shoxa
  • Дата начала
  • Ответы 1
  • Просмотры 2K

Информация о теме

О теме Здравствуйте, вы читаете тему Оформление блоков в DLE, или свой дизайн блока за 5 минут. созданную в в разделе Инструкции, модификации и статьи для DLE пользователем Shoxa. Эта тема была просмотрена 1 763 раз(а), получила 1 комментариев и 0 очки реакции...
Название категории Инструкции, модификации и статьи для DLE
Название темы Оформление блоков в DLE, или свой дизайн блока за 5 минут.
Автор темы Shoxa
Дата начала
Ответы
Просмотры
Количество реакций к первому сообщению
Последнее сообщение Ойбек

Shoxa

Пользователь
Пользователь
Регистрация
12.05.2016
Сообщения
181
Реакции
61
Баллы
35
Адрес
Джизак
Оформление блоков в DLE, или свой дизайн блока за 5 минут.



С того времени,как я сделал первую версию уроков поменялось много версий движка. Было внесено огромное количество изменений и дополнений и т.д. И, хотя уроки остаются по прежнему актуальными, я решил переписать их исходя из последней версии движка -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:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержимого кодов!
В пути к картинкам вы обязательно должны указывать {THEME}/ - это указывает движку что картинка находится в папке
с скином, а не где то еще.

Вот, тепреь у нас есть ГОТОВАЯ заготовка для блока, что бы заменить нею ввсе стандартные блоки нам потребуется еще
5 минут.

Самый главный вопрос из-за которого многие не спят ночами - "Да заготовка блока есть, а как же его вставить то
в дизайн", ответ на самом деле прост:

в папке templates/Default ищем файл main.tpl (если не найдете то этот урок не для вас:))

Открываем его - смело жмем на нем F4 (откроется блокнотом, у меня открывает Breed который встроен в TotalCMD)
1. Вход на сайт

В этом файле - main.tpl- куча строк непонятного когда. Первый блок который мы будем оформлять это Вход на сайт, вам необходимо найти код оригинального блока (проще всего это сделать нажав ctrl+F(поиск), и ввести в строку поиска "Вход на сайт")
Вот полный код этого блока (все остальные блоки выглядят так же, отличаются только содержимым, html код одинаков)

Код3:

PHP:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержимого кодов!
Как видите этот код представляет собой простую таблицу, с бекграундами и т.д.,
удаляем ПОЛНОСТЬЮ этот код и вставляем вместо него Код 2, вместо "Заголовок блока", пишем "Вход на сайт",
в то место где стоит "Содержимое блока", вы вставляете тег - {login} - именно он и выводит содержимое блока "Вход на сайт"
В итоге вы получите такой код:

Код 4:

PHP:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержимого кодов!
Если вы заметили то строке таблицы где рамещена надпись "Вход на сайт", назначен класс - class="navigation_box1".(в строке с содержимым есть class="navigationbg2" и class="navigationbg3"- о нем чуть позже).

Открываем файл 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:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержимого кодов!
Удаляем его, а вместо него вставляем КОД2 - да-да, вставляем код модуля Вход на сайт, ничего ужасного здесь нет, оформление то ИДЕНТИЧНОЕ у всех блоков, а изменяется в нем только Заголовок и Содержимое, в данном случае в заголовке вы пишете Меню, вместо тега {login} вы вставляете свои ссылки на разделы сайта.

Вот что в итоге получится:

Код 12:

PHP:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержимого кодов!
Тюнинг - как вы заметили в блоке с содержимым появились новые стили - class="navigation_box_bg", class="navi_first" открываем файл templates/Default/css/style.css и добавляем в него такой код (можно в самый низ):

Код 13:

PHP:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержимого кодов!

Что этот код делает? Он меняет оформление ссылок в меню - шрифт, цвет, добавляет графику. Обычный CSS и ничего более.


Остальные блоки оформляются буквально за минуту, по аналогии с предыдущими

3. Опрос на сайте

Берем код оригинального блока:

Код 15:

PHP:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержимого кодов!
Заменяем его на свой (ставим заголовок "Опрос на сайте" и содержимое - тег {vote}, он и выводит опрос) :

Код 16:

PHP:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержимого кодов!

Все блок оформлен, дополнительные настройки для тюнинга находятся в файле vote.tpl


4. Календарь
Код 17:

PHP:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержимого кодов!
и заменяем его на свой, по аналогии с предыдущими пунктами

Код 18:

PHP:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержимого кодов!
Тег {calendar} выводит календарь

Дополнительное редактирвоание календаря:

файл engine.css - в нем прописаны все основные стили движка, ищем секцию:

/*
* ========================================
* Календарь
* ========================================
*/

Все что ниже подлежит редактированию - цвет, отступы и т.д., либо же вы можете оставить все как есть, если вас устраивает

5. Популярные статьи

находим код:

Код 19:

PHP:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержимого кодов!
и меняем его на свой:

Код 20:

PHP:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержимого кодов!

Тег {topnews} выводит топ новостей.



6. Архив новостей и смена скина

Небольшие блоки, поэтому объединил в один пункт:

Находим такой код (два блока, идут друг за другом):

Код 21:

PHP:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержимого кодов!

и заменяем на:

Код 22:

PHP:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержимого кодов!

ВСЕ.
 
Последнее редактирование:

Больше тем этой же категории

Ойбек

Пользователь
Пользователь
Регистрация
16.05.2016
Сообщения
15
Реакции
1
Баллы
0
помоему уже готовый Модуль есть для выявления на шаблоне сайта уже Созданных категорий,
Тег: [cats]
тег субкатегорий: [sub-cats]
 
shape1
shape2
shape3
shape4
shape7
shape8
Сверху Снизу