IceBlue: Свободное изменение дизайна IceBlue. Часть I
Тема восстановлена.
Дата первой публикации: 25.02.2008, 21:59
Автор: meinhart
Потеряется ли содержание при описанных здесь изменениях?
При изменении дизайна содержание вашего сайта не меняется. Меняется лишь внешний вид. Если вы уже выбрали дизайн IceBlue, то и содержание правых полей сохранится. Если же у вас другой дизайн, то после смены на IceBlue поля будут пустыми. Не пугайтесь. Когда вы вернетесь обратно в ваш дизайн все восстановится. Так что не бойтесь экспериментировать.
Вступление.
В этом пособии, состоящем из двух частей, я покажу как можно средствами CSS настроить дизайн IceBlue.
В первой части мы
- познакомимся с основными классами,
- расширим дизайн так, чтобы он автоматически подстраивался под размер окна,
- заменим область над и под текстовой частью и
- поменяем фон центральной части дизайна.
Во второй части, которая выйдет несколько позже, заменим все остальные элементы.
Для всего этого не обязательно знать CSS, а просто внимательно следовать инструкции. Забытая скобка или ; могут означать часы поиска ошибки. Поэтому прошу отнестись с пониманием к тому, что мы не можем оказывать техподдержку в таких случаях.
Но в принципе не все так страшно. Так что начнем.
Расширение дизайна IceBlue
Дизайн IceBlue разбит по ширине на четыре области: слева - навигация, затем центральная часть с основным содержанием, правые поля и фон за правыми полями. (см. схему дизайна)
В стандартном виде ширина этих полей фиксирована:
Навигация: 185 пикселей
Текст: 568 пикселей
Правые поля: 160 пикселей
Преимущество фиксированной ширины в том, что страница показывается одинаково как на 19", так и на 17" мониторе.
На 19" область справа просто будет заполнена фоном. То есть вы, как создатель сайта, можете быть уверенным, что центральная часть не растянется в ширину при большем разрешении монитора.
Если это не важно и вы хотите чтобы страница автоматически подстраивалась под размер окна, то сделать это нетрудно.
Надо просто изменить фиксированную ширину некоторых классов на процентную.
Сложно звучит? На практике все гораздо проще!
- зайдите в раздел "Выбор дизайна" и выберите IceBlue
- в поле "расширенные установки" -> "текст над дизайном" внесите следующий код
Цитата: <style type="text/css">
<!--
table.edit_main_table{width: 100% !important;}
td.edit_main_tr{width: 100% !important;}
table.edit_second_table{width: 100% !important;}
td.edit_header_full{width: 100% !important;}
td.edit_header_full table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
td.edit_navi_headbg{width: 185px !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 15% !important;}
td.edit_rechts_cbg{width:100%;}
-->
</style>
Значения 15% и 185px можно изменить, задать абсолютные значения в пикселях или процентные. Пока оставим их без изменения.
Вот собственно и все к вопросу расширения дизайна.
После сохранения получится примерно следующая картинка.
Что произошло?
Первая новость хорошая: мы добились своей цели и центральная часть расширилась. Не правда ли?
Вторая - так себе: "шапка" над текстом и сам текст выглядят мягко говоря странно.
Почему? Потому что они имеют вертикальные линии, а наши изменения заставляют повторять картинки, взятые в их основу. Вернемся к схеме дизайна и посмотрим, что нужно заменить. Шапка над текстом называется edit_content_top, само содержание - edit_content, еще ниже edit_content_bottom и наконец edit_content_bottom2. Будем их изменять. Лучше это делать в обычном "блокноте" (notepad.exe)
Напишем заготовку для CSS кода.
Цитата:
<style type="text/css">
<!--
Наш код будет здесь
-->
</style>
Теперь напишем сюда классы, которые мы хотим поменять, ставя "td." перед ними:
Цитата: <style type="text/css">
<!--
td.edit_content_top
td.edit_content
td.edit_content_bottom
td.edit_content_bottom2
-->
</style>
Пока это ничего не дает, но хотя бы видно что меняем. Осталось только добавить свойства к этим классам:
Цитата: <style type="text/css">
<!--
td.edit_content_top{height: 33px;background-image: url();background-color:#XXXXXX;}
td.edit_content{background-image: url();background-color: #XXXXXX;}
td.edit_content_bottom{height: 33px;background-image: url();background-color:#XXXXXX;}
td.edit_content_bottom2{height: 33px;background-image: url();background-color:#XXXXXX;}
-->
</style>
height: высота в пикселях
background-image: url(): URL-адрес фона
background-color:#XXXXXX; цвет фона в формате #XXXXXX
Поменяем картинку для наших классов. Но где взять URL?
1-я возможность:
Сделать самому картинку и загрузить себе на страничку. Затем правой кнопкой открыть в новом окне и взять URL из адресного поля браузера.
2-я возможность:
Посмотрим что уже наработано например здесь http://hpbk-webdesign.de.tl/Design24.htm
Видим картинку
На ней шапка над текстом проходит сплошной полосой. Значит подойдет!
Для тех, кто хочет быстро иметь результат: В тексте кода ищем "td.edit_content_top" и находим интересующую нас картинку: http://80.190.202.79/pic/d/design-24/vista1.gif . Возьмем ее же и для td.edit_content_bottom2.
Цитата: <style type="text/css">
<!--
td.edit_content_top{height: 33px;background-image: url(http://80.190.202.79/pic/d/design-24/vista1.gif);background-color:#XXXXXX;}
td.edit_content{background-image: url();background-color: #XXXXXX;}
td.edit_content_bottom{height: 33px;background-image: url();background-color:#XXXXXX;}
td.edit_content_bottom2{height: 33px;background-image: url(http://80.190.202.79/pic/d/design-24/vista1.gif);background-color:#XXXXXX;}
-->
</style>
Что будем делать с основным содержанием? Может просто поменять цвет? Но где я возьму этот код? Да еще в таком смешном формате!
Посмотрим, что можно взять у прародителя ru.gg к примеру здесь http://coolplace.de.tl/Farb_W.ae.hler.htm
Вот и Colorpicker. Для Firefox надо спуститься немного ниже. Выберем цвет и заберем наш код. Например светло желтый #ffffcc
Пока не будем заботиться о внешнем виде и возьмем просто для наглядности что-нибудь другое для td.edit_content_bottom. Например голубой #99ffff:
Цитата: <style type="text/css">
<!--
td.edit_content_top{height: 33px;background-image: url(http://80.190.202.79/pic/d/design-24/vista1.gif);background-color:#XXXXXX;}
td.edit_content{background-image: url();background-color: #ffffcc;}
td.edit_content_bottom{height: 33px;background-image: url();background-color:#99ffff;}
td.edit_content_bottom2{height: 33px;background-image: url(http://80.190.202.79/pic/d/design-24/vista1.gif);background-color:#XXXXXX;}
-->
</style>
Добавим что получилось в поле "Над дизайном",естественно не стирая предыдущий код.
Сохраним и проконтролируем результат.
Выглядит уже лучше!
- cтраница подстраивается под размер окна,
- центральная часть цельная.
Не мешало бы конечно заменить кнопки навигации, хидер, фон за дизайном и фон за правыми полями! Но об этом в следующей части.
А пока можно попробовать самому. Тем более, что первое знакомство с классами уже состоялось и где они находятся мы знаем из схемы дизайна.
Последний раз редактировалось: meinhart (25.06.2008, 23:39), всего редактировалось 1 раз
|
