DLE — разработка шаблона на дополнительных полях

DLE - разработка шаблона на дополнительных поляхЧтобы увидеть картинку в оригинальном разрешени нажмите на на значек (второй справа), когда картинка увеличится

На скриншоте выше полный снимок страницы, сделанной полностью на дополнительных полях для каталога софта! Ниже постепенно разложу как это все создать.

Далее на примере скриншота разбираем что там есть! Дополнительные поля буду сокращать в виде: ДП.

1. Придумываем блоки и их назначения.

В моем случае я использовал такие блоки с дп:

— картинка

— характеристики программы

— описание программы

— системные требования

— скриншоты

— ссылки на скачивание

а так же статические, не требующие ДП — рекламные блоки, похожие новости, ссылки, комментарии, разные интригующие фразы!

2. Создаем для каждого из разделов дополнительное поле

Сразу не стоит, постепенно, можно даже разработать шаблон на компьютере, стилизовать и подставить в движок или еще проще — сразу на локальном сервере. Начинаем сверху и постепенно добавляем блоки.

3. Картинки и логотипы

Картинка нужна и для короткой новости и для полной. Думал и придумал — она едина. Заливается и вставляется через одно и то же дополнительное поле. Размер не важен, его отрегулирует css.

Картинка получила название fullimage. для вывода в шаблоне нужно подставить обязательную приставку: [xfvalue_ fullimage]

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

Многострочное поле выбрано не случайно. Он позволяет использовать редактор, необходимый для заливки картинки.

Выводим картинку в шаблон:

Открываем файлы: {THEME>/fullstory. tpl и {THEME>/shortstory. tpl и там, где планируется вывод картинок прописываем строку:

Далее на стилях css редактируем и подправляем под себя! Пример из файлов короткой полной новостей:

Проблему с картинкой решили! Нужно учесть, что в поле короткой новости картинку больше указывать не нужно, в файл shortstory. tpl добавить тег ДП картинки и через css настроить по цвету и вкусу! Пример:

4. Остальные блоки

На скриншоте у меня следом за картинкой идут другие блоки, все они одинаковые по стилизации, но имеют разные CSS id и собственно разные ДП.

Следом идут:

— характеристики программы

— описание программы

— системные требования

— скриншоты

— ссылки на скачивание

абсолютно одинаковы, хоти и различаются по названию стилей. Исходник:

Исходник CSS:

чтоб не заморачиваться и дублировать одно и то же, разделил запятыми. Для скринов чуть поболее, они не обрезаются до своих квадратиков и заливаются в едином варианте — тумб по ширине 550px — предел, который не влазит в окно фулстори. Поэтому для скринов дополнительно задаем сжатие:

и при этом ничего в поле не написать, то блок просто не появится или же подставит значение по умолчанию, которое можно задать!

Собственно новость является логическим завершением другой — новости в две колонки полностью на css

This entry was posted in Софт и программы для DLE and tagged , , . Bookmark the <a href="http://dlehaki.ru/soft/dle-razrabotka-shablona-na-dopolnitelnyx-polyax.html" title="Permalink to DLE — разработка шаблона на дополнительных полях" rel="bookmark">permalink</a>.

Comments are closed.