Шаблон своими руками. Часть 13.

2906
Ну что же господа и дамы, поскольку никто из рисующих так и не захотел или не смог выделить время и нарисовать настоящий макет, а из меня дизайнер примерно такой же, как из бегемота балерина, то я с сожалением вынужден констатировать тот факт, что серия постов под общим названием "Шаблон своими руками" подошла к концу. Думаю не нужно объяснять, что верстать условные цветные квадратики на данном этапе было бы крайне глупо и бессмысленно. Однако не все так плохо и если подумать, то работы все же сделано немало. У тех, кто успешно дошел до этой части на сегодняшний день по идее имеется весьма неплохой каркас, на основе которого можно строить практически все что угодно. Что же касается моего учебного макета, то из нарисованного с самого начала остался только один модуль - "Главное меню", который и закончит этот цикл.

Итак. Напоминаю, что согласно макета в главном меню вместо текста "Главная" должен быть рисунок, активный пункт верхнего уровня должен быть подсвечен чем-то типа лампочки, кроме того все надписи должны иметь градиент и разделитель:

""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

Очевидно, что одной только правкой css тут явно не обойтись, поэтому начнем с самого начала, а вернее с шаблона вывода модуля меню - файла mod_menu.tpl. Естественно повторять здесь весь код этого файла не имеет совершенно никакого смысла, поэтому уже измененный файл вы можете взять отсюда и если хотите, можете сравнить его с оригиналом чтобы увидеть все изменения, а здесь я перечислю только самые значимые и вкратце опишу почему я поступил именно так, а не иначе.

1. Подключение jquery.treeview.css ликвидировал, поскольку если не вдаваться в подробности и говорить кратко, то место, в котором этот файл используется, я не нашел. Поправьте меня если я не прав...
2. Вывод слова «Главная» пришлось прибить физически из-за странного в последнее время поведения браузера Opera. Никакими силами заставить его принять text-indent я не смог. Возможно в следующих версиях разработчики это дело исправят, а пока пусть будет так как есть.
3. Все title убрал потому что мне не нравятся некрасивые всплывающие подсказки. Влияние или не влияние этих штук на СЕО я не учитывал, поэтому если вы считаете, что они там должны быть, то просто верните их на место.
4. Последний закрывающий тэг </ul>, который в оригинальном файле находится на строке 41 по всей видимости лишний. Не могу утверждать на 100% так как совсем уж досконально mod_menu.tpl не изучал и возможно при каком-то неведомом мне раскладе меню он все таки нужен, но в текущей конфигурации он явно мешает и я его убрал.
5. Ну а <span> в ссылки пунктов первого уровня добавлен по вполне очевидной причине, к каждому пункту нужно прикрутить два фоновых рисунка - разделитель и подсветку. На самом деле их три, еще и градиент, но вводить элемент по него в mod_menu.tpl я не буду, так как это будет сделано другим способом.

Теперь, когда с html частью разобрались можно переходить к стилям. Но для начала, чтобы потом уже не засорять код лишними комментариями скажу несколько слов о двух вещах, которые можно было бы прекрасно сделать и с помощью css если бы не одно но. Впрочем, давайте по порядку:

Итак, первое это уже упомянутый чуть выше градиент. По опыту футера вы должны помнить, что для наложения градиента нужен некий блок, который накладывается поверх надписи. В данном случае в качестве такого блока с легкостью можно было бы использовать псевдоэлемент(:after или :before), но проблема в том, что в любимом IE такой элемент поведет себя совсем не так как вы того ожидаете. Описывать этот маразм я не буду, но если хотите, то можете поэкспериментировать smile .

И второе. Без применения введенных в css3 трансформаций(transform) раскрытие подуровней меню при наведении(по :hover) будет выглядеть достаточно резким и некрасивым... Думаю дальше даже писать не стоит, опять IE впереди всех, а вы и так уже все поняли. В общем как бы там ни было, но красивостей все-таки хочется, поэтому вышеперечисленные проблемы будут с легкостью решены при помощи JavaScript чуть ниже, а пока что переходим непосредственно к стилям:

Скрытый текст виден только зарегистрированным пользователям


Ну и напоследок несколько вынужденных строк кода, о которых уже говорилось выше и которые как всегда нужно положить в файл include.js:

Скрытый текст виден только зарегистрированным пользователям


На этом я закончил. Итоговый результат проделанной работы какое-то время повисит по этому адресу, смотрите, сравнивайте, делайте выводы. Хост иногда глючит поэтому если не открывается, то попробуйте вот так. Тут же можете забрать недостающие картинки для главного меню, firebug еще никто не отменял. Если относительно этой темы имеются вопросы, то в общем то как всегда, либо здесь в личку, либо в аську 192-562-615. Последнее предпочтительнее. Золотые горы конечно не обещаю, но если будет время, то помогу.

Ну и конечно же если вдруг вы посчитаете, что предоставленная в 13 частях информация была для вас сколь ни будь полезна, то в благодарность можете положить на один из этих кошельков сколько посчитаете нужным. Буду рад любой поддержке:
R165866979435, Z360916051050, E245052631755, U375712357243 или ЯД - 410011677997877

Желаю всем удачи...

Скрытый текст виден только зарегистрированным пользователям
Шаблон своими руками. Часть 12... | Слайдер фотографий и товаров из УК
Комментарии (26)
Олег Васильевич я 17 января 2013 в 02:13 +1
Pasha, спасибо!
Где-то уже работаете преподавателем, учитесь или мне показалось?
Pasha 17 января 2013 в 10:27 +3
Показалось :)
sotastroy 17 января 2013 в 10:40 0
Жаль, что эти уроки заканчиваются, я еще в середине пути. Но автору большое спасибо за проделанную работу и персональную помощь.
Александр 17 января 2013 в 11:35 0
Паша, спасибо вам за уроки, очень полезно!
У меня предложение, если нет дизайна на котором наглядно можно уроки провести, может взять рип любого сайта и на нем сделать? Многим бы полезно было.
Pasha 17 января 2013 в 19:38 +4
Если бы это было возможно, то именно так бы я с самого начала и поступил. Но делать рип для инстанта просто не с чего. Копируя шаблон от той же джумлы или вордпресса дальше главной страницы не уйти, весь нутряк так или иначе придется выдумывать...
В общем, подходящих аналогов, где была бы такая же функциональность в одном продукте и для которых шаблоны рисуются профессионалами я не знаю, может быть плохо искал....
Александр 17 января 2013 в 21:05 0
а в чем разница то? нарисован диз или рипнут со всеми внутренними
Pasha 17 января 2013 в 21:41 +3
...или рипнут со всеми внутренними
Но я же написал - достойных для рипа аналогов инстанта в чистом виде просто не существует. Да, есть красивые блоги, форумы, фотогалереи... но все это отдельно, в разных движках и соответственно в разных стилях. Единого объекта содержащего все навороты(компоненты, функционал) присущие инстанту и при этом достойных внимания вы просто не найдете. Что рипать то?
Совсем другое дело когда пусть даже не с нуля, а понадергано от разных движков, но все это до кучи собирается дизайнером... Вот в этом то собственно и разница, будет ли все гармонично или как всегда... Или я не правильно вас понимаю?
Александр 17 января 2013 в 21:47 0
Ну так те разделы которых не хватает в рипе просто оставлять дефолтными, с изменением шрифтов и прочих элементов под диз рипа
Pasha 17 января 2013 в 21:50 +4
Давайте конкретный образец. Я подумаю. Может быть и рипну... бесплатно...
Только какое отношение это будет иметь к теме "Шаблон своими руками"? :)
Александр 17 января 2013 в 21:52 0
самое прямое smile это ведь получится в итоге шаблон сделанный своими руками :)
Александр 17 января 2013 в 21:58 0
суть то не просто рипнуть а пошагово описать что и как.
Pasha 17 января 2013 в 22:19 +4
На создание с нуля того, что вы сейчас видите на моем демо сайте(от макета до размещения на сервере) у меня ушло фактически 3-4 дня, а вот на описание всего этого процесса более или менее человеческим языком - 2 с лишним месяца... Чуствуете разницу? Хотите что бы я умер раньше времени?
Да и как вы себе это представляете? Как можно описать пошагово, например, езду на автомобиле? Учите html + css, вот вам и все пошаговое руководство... Все остальное я более, чем подробно уже рассказал...
sotastroy 17 января 2013 в 22:13 +1
Паша, вы не подумайте, что мы придираемся. Но, допустим, есть шаблон без внутренностей, но "любая внутренность" состоит из простых частей(заголовок, текст, картинка и тд), а стили к ним есть на других страницах. У вас неплохо получается делать с 0, а если к этому еще прибавить те стили, которые уже есть - получиться очень близко к оригиналу + новый функционал.
Pasha 17 января 2013 в 22:48 +2
Да я и не думаю что кто-то придирается, с чего бы? Даже в посильной помощи не отказываю, но и суть просьбы мне, например, не совсем понятна. "Прибавить те стили, которые уже есть" Есть где? В шаблоне по умолчанию? Так просто скопируйте их из css оригинала. Файлы шаблонов то не тронуты, все идентификаторы и классы остались прежними... По сути подключите в template.php еще и styles.css от _default_ и будет вам готовый нутряк. Ну разве что некоторые картинки еще вернуть придется, а в самом файле убить стили для главного меню.
sotastroy 17 января 2013 в 21:27 0
Я побоялся тут писать про рипы, ибо тут много радеющих за совсем правильность коммерческих отношений. Но тоже считаю, что попробовать стоило. Есть шаблоны с персональными страницами пользователя, каталогом и даже инет-магазином. А в чем собственно проблема придумывать внутряки в общем стиле шаблона?
Pasha 17 января 2013 в 21:44 +3
А в чем собственно проблема придумывать внутряки в общем стиле шаблона?
Для меня это проблема... Зато я хорошо умею делать другие вещи. Тут кто на что учился.
Pasha 17 января 2013 в 21:47 +3
А "правильность коммерческих отношений" мне в данном случае не грозит. Так что с этой стороны я на этот вопрос даже не смотрю :)
Александр 17 января 2013 в 21:51 0
за правильность коммерческих отношений будут в ответе те кто будет использовать его, а тренироваться можно абсолютно на любом сайте
Владимир 17 января 2013 в 12:58 +5
Как хорошо, что подобные люди еще встречаются в жизни. Жаль, что все реже и реже…
Спасибо огромное за уроки, очень полезно.
Pasha 17 января 2013 в 22:52 +4
И вам спасибо за доброе слово.
AndroS 18 января 2013 в 19:07 0
Паша, все офигенно! Читал только первые уроки, дальше пошли непонятки и я отвлекся на другие темы. У меня такой вопрос, скорее всего ламерский очень... Я бы хотел получить урок по шаблонам tpl... Понимаю, что там смарти, который тоже нужно изучать, но хотелось бы пошаговую инструкцию на живом примере, как меняется внешний вид внутряка при ковырянии tpl... Для меня, к примеру, до сих пор загадка, что такое module.tpl и simple_module.tpl
Или, к примеру, где искать код, отвечающий за вывод определенного элемента контента? Вообще, по ходу конечно, вопросы были бы более четкими и конкретными, но если суть их понятна, то уже хорошо :)
Pasha 18 января 2013 в 21:37 +2
смарти, который тоже нужно изучать
Если цель только верстка, то изучать smarty совсем не обязательно, достаточно просто знать про его существование.
Для меня, к примеру, до сих пор загадка, что такое module.tpl и simple_module.tpl
Часть 9
где искать код, отвечающий за вывод определенного элемента контента
искомый текст == исходный код страницы (id, class и т.д.)
где искать == почти всегда в папке шаблона, иногда поиск по всему движку.
чем искать == например Total Commander
Валерий 20 января 2013 в 22:08 0
Отличные уроки! Очень удобно если с данной cms только начинаешь работать, спасибо автору.
Для пробы своял по урокам шаблон, всё отлично! но как обычно всё хорошо не бывает... в ие9 подменю на демо отображается, а у меня только рамка и всё, пунктов меню нет.
Просьба Павел подскажи пожалуйста где я мог ошибиться.
Pasha 21 января 2013 в 00:47 +2
Не видя пациента сказать что либо внятное я не могу, но один совет все же дам, вернее напомню о чем я говорил с самого начала - если что-то не работает, то первым делом проанализируйте свою страничку с помощью валидатора.... Почти уверен, что все автоматически встанет на свои места и вопросы отпадут сами по себе.
surfer 8 мая 2013 в 03:02 0
А если взять бесплатный шаблон и на нем продолжить?
GuanoApes 31 марта 2015 в 18:09 0
Пожалуйста выложите исходники....Все ссылки битые