Опрос: С какими сложностями в шаблонах вы сталкиваетесь?
- Предыдущая
- 1
- 2
- Показаны 16-29 из 29
Из стандартного styles.css я убрал оформление шрифта, скругления, все бакграунды, может еще что, не помню.
Получился универсальный ксс. Затем создаю свой style.css и в нем уже задаю нужное мне оформление.
Все понял, про то что это скажем так для тех кто пока еще слабо разбирается в верстке. Но ведь с другой стороны — ставя конкретные вопросы — получишь конкретные ответы. А заточить таблицу стилей под всех — это же не возможно, даже для тех кто действует методом "научного тыка" 😊 Для последних — посоветую все таки почитать про то что из себя представляют селекторы css 😊 И в случае возникновения вопросов — именно задавать конкретно. Ведь в любом случае, разработчики InstantCMS не должны объяснять как Вам сверстать Ваш шаблон.
Видишь ли airy, фактически Львёнок создал эту тему для меня. Ну для таких как я. А то, что речь в постах идёт от первого лица, — так это литературный приём, чтобы незнаек сильно не колбасило, что вот они одне такие бестолковые. Автор как бы говорит: Занесло же НАС Незнаище в кугу!, Ну да ничего, во-о-он там есть, кажется, тернистая тропка наверх, Пойдём, что-ли, потихоньку?
А я автору: ну если потихоньку, со страховочкой и в шлеме, то попробуем. Коньки брать?
Вот есть в форуме навигационный бар: предыдущая тема|следующая тема. Есть в стилях класс .forum_navbar. Надо этот бар влево двинуть. Казалось бы добавь к margin-bottom:4px; ещё margin-right: сколько нужно; и порядок. Не-а, не работает. Поищем решение в com_forum_view.tpl. Открыл, как сказал один мой собрат, посмотрел, но понял мало. Это ходовая наша фраза. Отличительная. Хорошо догадался во фронтенд заглянуть, увидел знакомый класс и стили таблицы для него. Там align="center" поменял на left. Получилось. Чисто случайно. Поисковику спасибо. В голове бы это никогда не прокурил...P.S. airy, знаю, что нехорошо людей на слове ловить. Да. Просто, знаю, что нехорошо...
P.P.S. А камушки из под ног выворачиваются, иногда, ну самые, на вид, надёжные...
Может конечно я в чем то и не прав.
P.S. То что под спойлером — нифига не понял.
P.S.S. Надеюсь сегодня допишу и выложу инфу по теме как делать шаблоны для инстанта. Конечно же не касаясь вопросов верстки, потому как ИМХО — если взялся за это — то должен иметь хоть какое то представление об этом.
90% задач решаются сами собой, а 10% просто невыполнимы…50% работ по проекту выполняется в последний день до сдачи. Закон жизни
airy, не льсти мне — это не метод научного тыка, он вообще не научный, и видимо не тык (старею?).
Так, блуждаю ...
А по теме: вот курил как-то водку и думал, чего не хватает дефолтному шаблону? Резиновости!
резиНОВОСТИ:
Взял 960.css и заменил там всё, где было "0px" на "%": 960px на 96%…
Надеюсь дописать на днях и выложить…
Отчасти согласен, но...
А по теме: вот курил как-то водку и думал, чего не хватает дефолтному шаблону? Резиновости!
резиНОВОСТИ:
Взял 960.css и заменил там всё, где было "0px" на "%": 960px на 96%…
Надеюсь дописать на днях и выложить...
С резиновостью бы по осторожнее. Весь прикол Инстанта в том, что никогда не знаешь, какие изменения каким боком вылезут… Есть вероятность что где-то что-то начнет нехорошо разъезжаться…
Это да, это уже. Но попробую. Потихоньку. Может коньки помогут. Надеюсь не в… ться (врезаться) в тупик. Может по дороге кто нить что нить подскажет (по шаблону)...С резиновостью бы по осторожнее.… Есть вероятность что где-то что-то начнет нехорошо разъезжаться...
Пока добрался до:
резиНОВОСТИ (продолжение):
Главное меню и модуль приветствия в стилях заданы жёстко, поэтому в стилях же styles.css, в главном меню заменим пиксели ширины на проценты (строки 99-110):
#topmenu{ overflow:hidden; margin-top:15px; margin-bottom:10px; background:url(../images/menubar.jpg) repeat-x; border-radius:8px; -moz-border-radius:8px; box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; width:94%; border:solid 1px #1F3147\9;
#topwide{ background:url(../images/topbg.jpg) repeat-x left bottom #FFF; border:solid 1px #AEAEAE; display:block; overflow:hidden; border-radius:8px; -moz-border-radius:8px; margin-bottom:20px; margin-top:10px; box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; width:94% !important; border:solid 1px #1F3147\9; }
P.S. Если честно, то сейчас временно не курю, но мысленно… Хотя да, слово это (прекур) — паразит натуральный...
P.P.S. Продолжение на днях, не раньше…
Такая вероятность есть, если где-то что-то не доделать. А резиновость лучше ограничивать — на широких мониторах очень часто сайты просто жутко выглядят. Я с таких сразу ухожу, так как приходится головой вертеть, чтобы текст прочитать и пальцем строки отсчитывать, так как при такой лдине за ними не уследить. Обычно резиновость ограничиваю от 800 до 1300 пикселей — больше не стоит. Если сайт предполагает много графики и, скорее всего, на него не будут с мобильных пк и телефонов заходить — то от 1024 до 1300 (1400 максимум).Есть вероятность что где-то что-то начнет нехорошо разъезжаться...
{min-width: 800px; max-width: 1300px; width: expression(document.body.clientWidth < 800? "800px" : document.body.clientWidth > 1300? "1300px" : "auto");
Как работает и для чего нужен 960.css
Объясняю на пальцах :)Этот файл, как уже выше заметили, принадлежит CSS-фреймворку 960 Grid System (www.960.gs).
Его цель — позволить верстать div'ами колоночную верстку, как таблицами, при этом потратив минимум времени на написание CSS.
Работает так:
Ширина всего сайта берется равной 960px.
Далее эта ширина делится на 12 одинаковых вертикальных секций (каждая по 80px = 960px / 12).
Например нам нужно сверстать сайт из двух колонок — левой (широкой) и правой (узкой).
Тогда пишем такой HTML-код:
<div class="container_12"> <div class="grid_8"> Левая колонка </div> <div class="grid_4"> Правая колонка </div> </div>
Далее нетрудно догадаться. Первый див (grid_8) будет иметь ширину 8*80px = 640px, а правый — 4*80px = 320px.
Колонок может быть сколько угодно. Главное чтобы сумма чисел в классах была равна 12.
То есть grid_8 + grid_4 = 12
Таким образом получаем почти таблицу из двух разных колонок, но на div'ах и без единой строчки CSS.
PS: для наглядности см. этот пример, заглянув в исходный код страницы
резиНОВОСТИ (продолжение):
Проглядел, что в модуле приветствия есть ещё один !important (! засланец). Его тоже под проценты. В styles.css строки 228-232
#topmod{ padding:15px; margin:0px; width:91% !important; }
Так, в стену стучат — пора заканчивать резино-дедические опыты…
maia, если считаешь, что мы не в одну сторону думаем, то хоть чуть соприкасаться мыслями разрешаешь? Разумеется не собираюсь делать "хреновый резиновый" шаблон. Не с моими талантами, даже хреновый. Просто пытаюсь развить мысль (хотел этим заканчивать "резиНОВОСТИ", но раз уж зашёл разговор), что хорошо бы сделать переключение стилей шаблонов налету, в зависимости от ширины окна браузера. При сужении окна грайды в процентах держат общий порядок сайта до какой-то степени сжатия, а потом уже идёт почти голый текст наладонников на чистых дивах. При расширении окна увеличиваются боковые полосы фона, а начиная с какой-то ширины на них появляются какие-то дополнительные функции: кнопки, закладки, радио, видео и т.д. и т.п....
Ну это всё розовые, как их..., а пока:
резиНОВОСТИ (продолжение):
Попробуем выставить главную страницу по центру. Итак: в 960.css, в грайде_4 делаем не 30, а 34%; в грайде_9 делаем не 70, а 74%. Главная страница – резиновая и по краям выровненная. Попробуйте сузить окно браузера.
Извиняйте, тут зовут срочно...
P.S. Не то что-то вышло, пошли косяки косяков…
P.S.S. Надеюсь сегодня допишу и выложу инфу по теме как делать шаблоны для инстанта.
Очень интересная тема, постою послушаю.Взял 960.css и заменил там всё, где было "0px" на "%": 960px на 96%…
Надеюсь дописать на днях и выложить...
Хватит тянуть резину, в смысле — историю с продолжением. Сегодня подали мне недостающий балл, можно открыть блог "дедический опыт". Хотел "опыты" написать, но баллов опыта для множественного числа не хватает.:)
- Предыдущая
- 1
- 2
- Показаны 16-29 из 29