Опрос: С какими сложностями в шаблонах вы сталкиваетесь?
Когда я пытаюсь разработать новый шаблон для Инстанта, я сталкиваюсь с какими-то своими проблемами. Я могу решить эту какую-то проблему чисто для себя. Но… другие сталкиваются при правке стандартных шаблонов тоже с какими-то своими проблемами, и мне хотелось бы, чтобы вы здесь об этом написали. Понятно, что здесь сейчас будет разнобой мнений и пожеланий, но мне бы хотелось сейчас именно с ними ознакомиться и проанализировать, и использовать эту информацию в разработке новых шаблонов.
Надеюсь, что это не противоречит правилам форума.
Собственно от себя добавлю: сложности
Некий избыток стилей, используемый в CSS-таблице (на мой взгляд не всегда обоснованный, но это чисто имхо). Достаточно разнородное присваивание стилей. Нужно каждый раз в каждом компоненте разбираться, где как какой стиль присваивается.
В идеале, если мы сюда еще накидаем описания присвоений стилей по каждому компоненту, то это можно будет выложить уже в Документацию к Инстанту.
Ну а сложности по системе, моё имхо, неизбежны. Просто мы, люди, не можем, видимо, иначе — постоянно надо нам что-то где-то дорабатывать, изменять, усовершенствовать. И нет предела совершенству...
Вот взять хотя бы унификацию шрифта. Есть, казалось бы text.css. Измени его и на сайте весь текст поменяется. Он и поменяется, почти весь. А 2-3% надо менять ручками. Запускаешь анализатор элемента или поиск по системе, если
знаешь название шрифта. Находятся они, иногда, в самых неожиданных местах. Начал даже как-то составлять перечень где что, но всё улетело (у меня как рок какой-то — раз в год-полтора то винчестер накроется, то флешка, щас вот
Тошиба новая вмэрла — грустчу; диски хороши, но имеют свойство затираться, во всех смыслах этого слова).
Сейчас идёт тестирование 1.9rc. Ищут баги системы, но Fuze в #6 написал "у кого есть решения каких то проблем (типа верстки или другой мелочи), милости прошу в ЛС." Инстант начинает выходить на другой уровень и здесь
будет важен не только чистый функционал, но и то, как и в чём он подаётся, а значит мелочей не будет — конкуренция… Если есть какие-то наработки и для общего дела не жалко — можно попасть в релиз, ну а оттуда и в
документацию…
Итак в "/templates/_default_/template.php" подключаются следующие css-файлы: reset.css, text.css, 960.css, styles.css
Кроме того, для администраторов там же подключаются еще 2 файла: modconfig.css, nyromodal.css
<?php if($inUser->is_admin){ ?> <script src="/admin/js/modconfig.js" type="text/javascript"></script> <script src="/templates/_default_/js/nyromodal.js" type="text/javascript"></script> <link href="/templates/_default_/css/modconfig.css" rel="stylesheet" type="text/css" /> <link href="/templates/_default_/css/nyromodal.css" rel="stylesheet" type="text/css" /> <?php } ?>
Файл text.css хранит информацию для следующих тегов:
body{font:13px/1.5 'Helvetica Neue',Arial,'Liberation Sans',FreeSans,sans-serif} a:focus{} hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0} h1{font-size:25px} h2{font-size:23px} h3{font-size:21px} h4{font-size:19px} h5{font-size:17px} h6{font-size:15px} ol{list-style:decimal} ul{list-style:disc} li{margin-left:30px}
Файл 960.css больше всего ставит меня в тупик. В нем заложена некая логика верстки и форматирования элементов шаблона. Но вот какую мне пока непонятно. Выложу позже отформатированный отдельным сообщением (если никто не возражает =). Содержит имена классов типа .container_XX, .grid_XX, .prefix_XX, .suffix_XX, .push_XX, .pull_XX, где XX число вроде номера колонки или ширина в неких колонках. Ширина колонки может колебаться (пока мне непонятно в зависимости от чего).
Файл styles.css содержит все многообразие стилей используемых в инстанте в различных компонентах.
/*----------------------------------------------------------------------------*/ /*------ ------*/ /*------ Внимание! Этот файл содержит огромное количество стилей ------*/ /*------ Не пытайтесь найти здесь что-то вручную ------*/ /*------ Для поиска названия нужного стиля используйте Firebug: ------*/ /*------ http://instantcms.ru/content/0/read58.html ------*/ /*------ ------*/ /*----------------------------------------------------------------------------*/
/***************************** Шапка страницы *********************************/ /******************************* Верхнее меню *********************************/ #topmenu /*************************** Верхний широкий модуль ***************************/ #topwide /*************************** Верхний главный модуль ***************************/ #main /********************************* Сайдбар ************************************/ #sidebar /********************************** Футер *************************************/ #footer /************************* Кнопки настройки модулей ***************************/ span.fast_cfg_link /**************************** Сообщения сессии ********************************/ .sess_messages /*-------------------------- HORIZONTAL MENU ---------------------------------*/ .menutd /*------------------------ MODULE "LATEST PHOTO" -----------------------------*/ .mod_lp_ /*--------------------------- MODULE "POLLS" ---------------------------------*/ .mod_poll_ /*------------------------ MODULE "AUTHORIZATION" ----------------------------*/ .authtable /*----------------------- MODULE "LATEST ARTICLES" ---------------------------*/ .mod_latest_ /*-------------------------- REGISTRATION FORM -------------------------------*/ .reg /*------------------------------- LOGIN FORM ---------------------------------*/ .lf_ .login_form /*------------------------------ PAGES BAR -----------------------------------*/ .pagebar /*----------------------------- SITE SEARCH ----------------------------------*/ .search_ /*------------------------- COMPONENT "CONTENT" ------------------------------*/ .component .con_ /*------------------------- COMPONENT "PHOTOS" -------------------------------*/ .photo_ /*---------------------------- ARTICLE CONTENTS ------------------------------*/ .con_pt /*-------------------------------- SHOP CART ---------------------------------*/ .cart_ /*------------------------ COMPONENT "PRICE LIST" ----------------------------*/ .pricerow /*----------------------- MODULE "LATEST COMMENTS" ---------------------------*/ .mod_com_ /*--------------------- MODULE "LATEST FORUM WEB2.0" -------------------------*/ .mod_fweb2_ /*-------------------------- MODULE "CALENDAR" -------------------------------*/ .calendar /*-------------------------- UNIVERSAL CATALOG -------------------------------*/ .uc_ /*----------------------MODULE "LATEST FROM CATALOG"--------------------------*/ .uc_latest_ /*------------------------- MODULE "SITE TAGS" -------------------------------*/ a.tag /*---------------------------PERSONAL MENU -----------------------------------*/ .mod_user_menu .usr_msgmenu_bar /************************** Новые пользователи ********************************/ .mod_new_user /*----------------------------- COMPONENT "FAQ" ------------------------------*/ .faq_ /*------------------------------- KARMA --------------------------------------*/ .karma_ /*------------------------------ TAG BAR -------------------------------------*/ .tag /*------------------------ MODULE "LATEST BLOG POSTS" ------------------------*/ .mod_blog_ /*------------------------- MODULE "LATEST FAQ QUESTS" -----------------------*/ /* ------------------------ MODULE "LATEST BOARD ITEMS" --------------------- */ .new_board_ /* ---------------------------- MODULE "LATEST CLUBS" ----------------------- */ .mod_clubs div.club_entry /* ----------------------------- MODULE "USER RATING" ----------------------- */ .mod_user_rating /* ========================================================================== */ /* =========================== КОМПОНЕНТЫ =================================== */ /* ========================================================================== */ /* ========================================================================== */ /* ============================== БЛОГИ ===================================== */ /* ========================================================================== */ .blog_ /* ========================================================================== */ /* ========================= ДОСКА ОБЪЯВЛЕНИЙ =============================== */ /* ========================================================================== */ .bd /* ========================================================================== */ /* ============================== КАТАЛОГ =================================== */ /* ========================================================================== */ #shop_ /* ========================================================================== */ /* ============================== КЛУБЫ ===================================== */ /* ========================================================================== */ div.new_club div.club_entry /* ========================================================================== */ /* =========================== КОММЕНТАРИИ ================================== */ /* ========================================================================== */ .cmm_ /* ========================================================================== */ /* ============================== КОНТЕНТ =================================== */ /* ========================================================================== */ #con_ .con_ /* ========================================================================== */ /* ============================== ФОРУМ ===================================== */ /* ========================================================================== */ .forum_ /* ========================================================================== */ /* ========================== ПОЛЬЗОВАТЕЛИ ================================== */ /* ========================================================================== */ #usr_ .users_ /* ========================================================================== */ /* ======================= ЛЕНТА АКТИВНОСТИ ================================= */ /* ========================================================================== */ .action_
Для различных прибамбасов на jquery типа treeview, lightbox, tabs стили лежат в "/includes/jquery" в соответствующих папочках.
body{min-width:960px} .container_12,.container_16{margin-left:auto;margin-right:auto;width:960px} .grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px} .push_1,.pull_1,.push_2,.pull_2,.push_3,.pull_3,.push_4,.pull_4,.push_5,.pull_5,.push_6,.pull_6,.push_7,.pull_7,.push_8,.pull_8,.push_9,.pull_9,.push_10,.pull_10,.push_11,.pull_11,.push_12,.pull_12,.push_13,.pull_13,.push_14,.pull_14,.push_15,.pull_15{position:relative} .container_12 .grid_3,.container_16 .grid_4{width:220px}.container_12 .grid_6,.container_16 .grid_8{width:460px} .container_12 .grid_9,.container_16 .grid_12{width:700px}.container_12 .grid_12,.container_16 .grid_16{width:940px} .alpha{margin-left:0} .omega{margin-right:0} .container_12 .grid_1{width:60px} .container_12 .grid_2{width:140px} .container_12 .grid_4{width:300px} .container_12 .grid_5{width:380px} .container_12 .grid_7{width:540px} .container_12 .grid_8{width:620px} .container_12 .grid_10{width:780px} .container_12 .grid_11{width:860px} .container_16 .grid_1{width:40px} .container_16 .grid_2{width:100px} .container_16 .grid_3{width:160px} .container_16 .grid_5{width:280px} .container_16 .grid_6{width:340px} .container_16 .grid_7{width:400px} .container_16 .grid_9{width:520px} .container_16 .grid_10{width:580px} .container_16 .grid_11{width:640px} .container_16 .grid_13{width:760px} .container_16 .grid_14{width:820px} .container_16 .grid_15{width:880px} .container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px} .container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px} .container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px} .container_12 .prefix_1{padding-left:80px} .container_12 .prefix_2{padding-left:160px} .container_12 .prefix_4{padding-left:320px} .container_12 .prefix_5{padding-left:400px} .container_12 .prefix_7{padding-left:560px} .container_12 .prefix_8{padding-left:640px} .container_12 .prefix_10{padding-left:800px} .container_12 .prefix_11{padding-left:880px} .container_16 .prefix_1{padding-left:60px} .container_16 .prefix_2{padding-left:120px} .container_16 .prefix_3{padding-left:180px} .container_16 .prefix_5{padding-left:300px} .container_16 .prefix_6{padding-left:360px} .container_16 .prefix_7{padding-left:420px} .container_16 .prefix_9{padding-left:540px} .container_16 .prefix_10{padding-left:600px} .container_16 .prefix_11{padding-left:660px} .container_16 .prefix_13{padding-left:780px} .container_16 .prefix_14{padding-left:840px} .container_16 .prefix_15{padding-left:900px} .container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px} .container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px} .container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px} .container_12 .suffix_1{padding-right:80px} .container_12 .suffix_2{padding-right:160px} .container_12 .suffix_4{padding-right:320px} .container_12 .suffix_5{padding-right:400px} .container_12 .suffix_7{padding-right:560px} .container_12 .suffix_8{padding-right:640px} .container_12 .suffix_10{padding-right:800px} .container_12 .suffix_11{padding-right:880px} .container_16 .suffix_1{padding-right:60px} .container_16 .suffix_2{padding-right:120px} .container_16 .suffix_3{padding-right:180px} .container_16 .suffix_5{padding-right:300px} .container_16 .suffix_6{padding-right:360px} .container_16 .suffix_7{padding-right:420px} .container_16 .suffix_9{padding-right:540px} .container_16 .suffix_10{padding-right:600px} .container_16 .suffix_11{padding-right:660px} .container_16 .suffix_13{padding-right:780px} .container_16 .suffix_14{padding-right:840px} .container_16 .suffix_15{padding-right:900px} .container_12 .push_3,.container_16 .push_4{left:240px} .container_12 .push_6,.container_16 .push_8{left:480px} .container_12 .push_9,.container_16 .push_12{left:720px} .container_12 .push_1{left:80px}.container_12 .push_2{left:160px} .container_12 .push_4{left:320px}.container_12 .push_5{left:400px} .container_12 .push_7{left:560px}.container_12 .push_8{left:640px} .container_12 .push_10{left:800px}.container_12 .push_11{left:880px} .container_16 .push_1{left:60px}.container_16 .push_2{left:120px} .container_16 .push_3{left:180px}.container_16 .push_5{left:300px} .container_16 .push_6{left:360px}.container_16 .push_7{left:420px} .container_16 .push_9{left:540px}.container_16 .push_10{left:600px} .container_16 .push_11{left:660px}.container_16 .push_13{left:780px} .container_16 .push_14{left:840px}.container_16 .push_15{left:900px} .container_12 .pull_3,.container_16 .pull_4{left:-240px} .container_12 .pull_6,.container_16 .pull_8{left:-480px} .container_12 .pull_9,.container_16 .pull_12{left:-720px} .container_12 .pull_1{left:-80px}.container_12 .pull_2{left:-160px} .container_12 .pull_4{left:-320px}.container_12 .pull_5{left:-400px} .container_12 .pull_7{left:-560px}.container_12 .pull_8{left:-640px} .container_12 .pull_10{left:-800px}.container_12 .pull_11{left:-880px} .container_16 .pull_1{left:-60px}.container_16 .pull_2{left:-120px} .container_16 .pull_3{left:-180px}.container_16 .pull_5{left:-300px} .container_16 .pull_6{left:-360px}.container_16 .pull_7{left:-420px} .container_16 .pull_9{left:-540px}.container_16 .pull_10{left:-600px} .container_16 .pull_11{left:-660px}.container_16 .pull_13{left:-780px} .container_16 .pull_14{left:-840px}.container_16 .pull_15{left:-900px} .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0} .clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0} * html .clearfix,*:first-child+html .clearfix{zoom:1}
Выложу файл 960.css для ознакомления. Надеюсь админы не обидятся. У меня есть подозрения, что эти стили созданы какой-то верстальной программой в автоматическом режиме.
Блин, это же из css-framework'a 960 Grid System
960.gs/
Это далеко не автоматический режим, это на протяжении вроде 3х лет код писался, если мне память не изменяет.
Неужели же сложно разобраться с тем где элементу задается идентификатор, и с тем где этот идентификатор прописан?
вот вот, тем более что 95% html вынесено в шаблоныесть возможность сделать свой шаблон, в котором можно прописать все свои стили как надо
совершенно верноБлин, это же из css-framework'a 960 Grid System
Ну вот, уже кое-что проясняется… А вы говорите бесполезная…
совершенно верноБлин, это же из css-framework'a 960 Grid System
960.css — это чисто разметка то где отображаются различные элементы сайта. styles.css — это тот файл где прописано _как_ отображаются эти элементы.
Блин. Вот сейчас время есть, сяду и напишу по шаблонам мануал. а то реально информации нет нигде, приходится самому доходить. Так что часа через 3 выложу в блоге.
Ну не надо меня совсем уж маленьким считать. Я все это прекрасно понимаю. 960.css — это всего лишь небольшой подводный камешек из многих, на который наступаешь при создании действительно "индивидуального" шаблона заточенного под собственные нужды. Это не только переработка стандартных стилей. Это и переработка шаблонов компонентов и модулей. Это и вопросы по Смарти… Ладно, не буду о больных мозолях…
Львенок, ну что Вы как маленький, ну на самом деле. Таблица стилей 960.css применяется только в в файле разметки шаблона template.php, стили для отображения элементов компонентов и модулей прописаны в styles.css
Ну а для чего Вам использовать те таблицы стилей, которые использовали разработчики для дефолтного шаблона? Не понимаю если честно. Сверстали свой template.php, прописали для него свою таблицу стилей, потом уже править .tpl и вписывать в свою таблицу стилей то что прописано в .tpl
Ну не надо меня совсем уж маленьким считать. Я все это прекрасно понимаю. 960.css — это всего лишь небольшой подводный камешек из многих, на который наступаешь при создании действительно "индивидуального" шаблона заточенного под собственные нужды. Это не только переработка стандартных стилей. Это и переработка элементов компонентов и модулей и их шаблонов. Это и вопросы по Смарти… Ладно, не буду о больных мозолях...
Львенок, ну что Вы как маленький, ну на самом деле. Таблица стилей 960.css применяется только в в файле разметки шаблона template.php, стили для отображения элементов компонентов и модулей прописаны в styles.css
ИМХО, вот у инстанта самая вменяемая система шаблонизации из всех что я видел
:)
Ну а для чего Вам использовать те таблицы стилей, которые использовали разработчики для дефолтного шаблона? Не понимаю если честно. Сверстали свой template.php, прописали для него свою таблицу стилей, потом уже править .tpl и вписывать в свою таблицу стилей то что прописано в .tpl
ИМХО, вот у инстанта самая вменяемая система шаблонизации из всех что я видел
Допустим мне нужно сделать заточенный определенным образом портал. Я сижу и разбираюсь. Мне нужно переделать больше 60% шаблонов компонентов и модулей. Заодно пытаюсь понять куда какие стили лучше всего запихивать.
А я автору: ну если потихоньку, со страховочкой и в шлеме, то попробуем. Коньки брать?
P.P.S. А камушки из под ног выворачиваются, иногда, ну самые, на вид, надёжные...
Зачем куда-то что-то запихивать. При редактировании шаблона, а более конкретно компонентов и модулей для этого шаблона, все стили прописывайте в css файле Вашего шаблона.Допустим мне нужно сделать заточенный определенным образом портал. Я сижу и разбираюсь. Мне нужно переделать больше 60% шаблонов компонентов и модулей. Заодно пытаюсь понять куда какие стили лучше всего запихивать.