Чего не хватает в шаблонах

Опрос: С какими сложностями в шаблонах вы сталкиваетесь?

#16 15 ноября 2011 в 08:31
Я делаю так...
Из стандартного styles.css я убрал оформление шрифта, скругления, все бакграунды, может еще что, не помню.
Получился универсальный ксс. Затем создаю свой style.css и в нем уже задаю нужное мне оформление.
#17 15 ноября 2011 в 20:08


Видишь ли airy, фактически Львёнок создал эту тему для меня. Ну для таких как я. А то, что речь в постах идёт от первого лица, — так это литературный приём, чтобы незнаек сильно не колбасило, что вот они одне такие бестолковые. Автор как бы говорит: Занесло же НАС Незнаище в кугу!, Ну да ничего, во-о-он там есть, кажется, тернистая тропка наверх, Пойдём, что-ли, потихоньку?
А я автору: ну если потихоньку, со страховочкой и в шлеме, то попробуем. Коньки брать?

P.S. airy, знаю, что нехорошо людей на слове ловить. Да. Просто, знаю, что нехорошо...
P.P.S. А камушки из под ног выворачиваются, иногда, ну самые, на вид, надёжные...
Вот есть в форуме навигационный бар: предыдущая тема|следующая тема. Есть в стилях класс .forum_navbar. Надо этот бар влево двинуть. Казалось бы добавь к margin-bottom:4px; ещё margin-right: сколько нужно; и порядок. Не-а, не работает. Поищем решение в com_forum_view.tpl. Открыл, как сказал один мой собрат, посмотрел, но понял мало. Это ходовая наша фраза. Отличительная. Хорошо догадался во фронтенд заглянуть, увидел знакомый класс и стили таблицы для него. Там align="center" поменял на left. Получилось. Чисто случайно. Поисковику спасибо. В голове бы это никогда не прокурил...

ded-pikto
Все понял, про то что это скажем так для тех кто пока еще слабо разбирается в верстке. Но ведь с другой стороны — ставя конкретные вопросы — получишь конкретные ответы. А заточить таблицу стилей под всех — это же не возможно, даже для тех кто действует методом "научного тыка" 😊 Для последних — посоветую все таки почитать про то что из себя представляют селекторы css 😊 И в случае возникновения вопросов — именно задавать конкретно. Ведь в любом случае, разработчики InstantCMS не должны объяснять как Вам сверстать Ваш шаблон.
Может конечно я в чем то и не прав.
P.S. То что под спойлером — нифига не понял.
P.S.S. Надеюсь сегодня допишу и выложу инфу по теме как делать шаблоны для инстанта. Конечно же не касаясь вопросов верстки, потому как ИМХО — если взялся за это — то должен иметь хоть какое то представление об этом.
#18 15 ноября 2011 в 20:41

50% работ по проекту выполняется в последний день до сдачи. Закон жизни

airy
90% задач решаются сами собой, а 10% просто невыполнимы…
#19 21 ноября 2011 в 10:20
Извиняюсь, первым делом, перед Львёнком за возможно резвые строчки в предыдущем посте. Водка и сама по себе..., а если её ещё и курить......
airy, не льсти мне — это не метод научного тыка, он вообще не научный, и видимо не тык (старею?).
Так, блуждаю ...
А по теме: вот курил как-то водку и думал, чего не хватает дефолтному шаблону? Резиновости!
резиНОВОСТИ:
Взял 960.css и заменил там всё, где было "0px" на "%": 960px на 96%…
Надеюсь дописать на днях и выложить…
#20 21 ноября 2011 в 11:24


А по теме: вот курил как-то водку и думал, чего не хватает дефолтному шаблону? Резиновости!
резиНОВОСТИ:
Взял 960.css и заменил там всё, где было "0px" на "%": 960px на 96%…
Надеюсь дописать на днях и выложить...

ded-pikto
Отчасти согласен, но...
С резиновостью бы по осторожнее. Весь прикол Инстанта в том, что никогда не знаешь, какие изменения каким боком вылезут… Есть вероятность что где-то что-то начнет нехорошо разъезжаться…
#21 22 ноября 2011 в 19:37

С резиновостью бы по осторожнее.… Есть вероятность что где-то что-то начнет нехорошо разъезжаться...

Львенок
Это да, это уже. Но попробую. Потихоньку. Может коньки помогут. Надеюсь не в… ться (врезаться) в тупик. Может по дороге кто нить что нить подскажет (по шаблону)...
Пока добрался до:
резиНОВОСТИ (продолжение):
Главное меню и модуль приветствия в стилях заданы жёстко, поэтому в стилях же styles.css, в главном меню заменим пиксели ширины на проценты (строки 99-110):
  1. #topmenu{
  2. overflow:hidden;
  3. margin-top:15px;
  4. margin-bottom:10px;
  5. background:url(../images/menubar.jpg) repeat-x;
  6. border-radius:8px;
  7. -moz-border-radius:8px;
  8. box-shadow: 0 0 5px #000;
  9. -moz-box-shadow: 0 0 5px #000;
  10. width:94%;
  11. border:solid 1px #1F3147\9;
И в модуле приветствия тоже изменим пиксели на проценты (строки 208-221):
  1. #topwide{
  2. background:url(../images/topbg.jpg) repeat-x left bottom #FFF;
  3. border:solid 1px #AEAEAE;
  4. display:block;
  5. overflow:hidden;
  6. border-radius:8px;
  7. -moz-border-radius:8px;
  8. margin-bottom:20px;
  9. margin-top:10px;
  10. box-shadow: 0 0 5px #000;
  11. -moz-box-shadow: 0 0 5px #000;
  12. width:94% !important;
  13. border:solid 1px #1F3147\9;
  14. }
Перекур...
P.S. Если честно, то сейчас временно не курю, но мысленно… Хотя да, слово это (прекур) — паразит натуральный...
P.P.S. Продолжение на днях, не раньше…
#22 22 ноября 2011 в 20:54

Есть вероятность что где-то что-то начнет нехорошо разъезжаться...

Львенок
Такая вероятность есть, если где-то что-то не доделать. А резиновость лучше ограничивать — на широких мониторах очень часто сайты просто жутко выглядят. Я с таких сразу ухожу, так как приходится головой вертеть, чтобы текст прочитать и пальцем строки отсчитывать, так как при такой лдине за ними не уследить. Обычно резиновость ограничиваю от 800 до 1300 пикселей — больше не стоит. Если сайт предполагает много графики и, скорее всего, на него не будут с мобильных пк и телефонов заходить — то от 1024 до 1300 (1400 максимум).
  1.  
  2. {min-width: 800px;
  3. max-width: 1300px;
  4. width: expression(document.body.clientWidth
  5. < 800? "800px" : document.body.clientWidth > 1300? "1300px" : "auto");
  6.  
#23 22 ноября 2011 в 23:07

Как работает и для чего нужен 960.css

Объясняю на пальцах :)

Этот файл, как уже выше заметили, принадлежит CSS-фреймворку 960 Grid System (www.960.gs).

Его цель — позволить верстать div'ами колоночную верстку, как таблицами, при этом потратив минимум времени на написание CSS.

Работает так:

Ширина всего сайта берется равной 960px.
Далее эта ширина делится на 12 одинаковых вертикальных секций (каждая по 80px = 960px / 12).

Например нам нужно сверстать сайт из двух колонок — левой (широкой) и правой (узкой).
Тогда пишем такой HTML-код:
  1.  
  2. <div class="container_12">
  3. <div class="grid_8"> Левая колонка </div>
  4. <div class="grid_4"> Правая колонка </div>
  5. </div>
  6.  
Сначала идет "обертка" с классом container_12. Она говорит, что внутри будет 12 секций по 80px.
Далее нетрудно догадаться. Первый див (grid_8) будет иметь ширину 8*80px = 640px, а правый — 4*80px = 320px.

Колонок может быть сколько угодно. Главное чтобы сумма чисел в классах была равна 12.
То есть grid_8 + grid_4 = 12

Таким образом получаем почти таблицу из двух разных колонок, но на div'ах и без единой строчки CSS.

PS: для наглядности см. этот пример, заглянув в исходный код страницы
#24 23 ноября 2011 в 01:38
А можно еще популярней? Я, все таки, так и не поняла — чем такая верстка лучше табличной, которая позволяет сделать шаблон резиновым под любое разрешение монитора? Ведь сейчас размеры мониторов серьезно уходят в крайности. Все популярнее мобильные устройства с маленькими и все больше становятся стационарные. А размер в 960 пикселей — имхо, вообще атавизм — ни к какому перспективному виду мониторов не катит — 1024 и 1280, на которых он смотрится прилично, используются все меньше. На маленьких и больших — либо не помещается и пользоваться им не удобно, либо выглядит убогой полоской посередине scratch
#25 23 ноября 2011 в 03:11
Вот, вот, maia, в эту сторону я и думаю (не будем говорить "курю")...
резиНОВОСТИ (продолжение):
Проглядел, что в модуле приветствия есть ещё один !important (! засланец). Его тоже под проценты. В styles.css строки 228-232
  1. #topmod{
  2. padding:15px;
  3. margin:0px;
  4. width:91% !important;
  5. }
Теперь резиновость стала довольно существенной (не говорю достаточной) как в сторону расширения, так и сужения окна браузера. Появились и минусы — у главного меню и модуля приветствия осталась центровка посередине, а шапка и нижние модули ушли влево. Да и пропорции ширины нарушились...
Так, в стену стучат — пора заканчивать резино-дедические опыты…
#26 23 ноября 2011 в 04:01
Ну, я бы не сказала, что мы в одну сторону думаем. Если выбирать между неограниченной резиной и сттатикой — я бы выбрала второй вариант. Тем более, смысла в переделке хорошего статисного дивового шаба в хреновый резиновый — вообще нет. Если уж делать — то нормальный табличный изначально.
#27 24 ноября 2011 в 13:04
Администратор, я всего лишь пробую, как зачастую говорят, поиграться с настройками, вдруг что-то интересное вылезет. Знаю, такое редко бывает, чтобы интересное...
maia, если считаешь, что мы не в одну сторону думаем, то хоть чуть соприкасаться мыслями разрешаешь? Разумеется не собираюсь делать "хреновый резиновый" шаблон. Не с моими талантами, даже хреновый. Просто пытаюсь развить мысль (хотел этим заканчивать "резиНОВОСТИ", но раз уж зашёл разговор), что хорошо бы сделать переключение стилей шаблонов налету, в зависимости от ширины окна браузера. При сужении окна грайды в процентах держат общий порядок сайта до какой-то степени сжатия, а потом уже идёт почти голый текст наладонников на чистых дивах. При расширении окна увеличиваются боковые полосы фона, а начиная с какой-то ширины на них появляются какие-то дополнительные функции: кнопки, закладки, радио, видео и т.д. и т.п....
Ну это всё розовые, как их..., а пока:
резиНОВОСТИ (продолжение):
Попробуем выставить главную страницу по центру. Итак: в 960.css, в грайде_4 делаем не 30, а 34%; в грайде_9 делаем не 70, а 74%. Главная страница – резиновая и по краям выровненная. Попробуйте сузить окно браузера.
Извиняйте, тут зовут срочно...
P.S. Не то что-то вышло, пошли косяки косяков…
#28 24 ноября 2011 в 14:43
Наконецто я поняла что это за 960.css!

P.S.S. Надеюсь сегодня допишу и выложу инфу по теме как делать шаблоны для инстанта.

airy

Взял 960.css и заменил там всё, где было "0px" на "%": 960px на 96%…
Надеюсь дописать на днях и выложить...

ded-pikto
Очень интересная тема, постою послушаю.
#29 25 ноября 2011 в 00:06
Мы на провокации не поддаёмся! Иногда. Но сегодня не мой день.
Хватит тянуть резину, в смысле — историю с продолжением. Сегодня подали мне недостающий балл, можно открыть блог "дедический опыт". Хотел "опыты" написать, но баллов опыта для множественного числа не хватает.:)
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.