IceBlue: Свободное изменение дизайна IceBlue. Часть II
Тема восстановлена.
Дата первой публикации: 16.03.2008, 15:26
Автор: meinhart
В первой части этого пособия мы
- взяли за основу стандартный дизайн Iceblue
- расширили его, чтобы он подстраивался под размер окна
- заменили центральную часть
- получили такую картинку
При этом наш CSS-код выглядит следующим образом.
Цитата: <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>
<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> Мы внесли этот код в поле "Выбор дизайна"->"Расширенные установки"->"Текст над дизайном"
Для дальнейших изменений используем код из темы CSS дизайн Iceblue: Основа для свободного дизайна
и схему дизайна.
Принцип всегда один:
- находим нужный участок кода
- заменяем адрес картинки или меняем код цвета
- если нужно меняем размеры или делаем элемент невидимым
- перенимаем в наш CSS-код
- добавляем перед последним
1. Заменим картинку хидера
Можно воспользоваться готовыми или сделать самому... Мы возьмем готовую у http://free-grafix.ru.gg . Для того он их и предлагает. Например эту http://80.190.202.79/pic/f/free-grafix/header_iceblue2.png
Находим в коде нужный фрагмент:
Цитата: /* Header фиксированный и по центру*/
td.edit_header_full{
width: 100% !important;
background-repeat:no-repeat;
background-position:center center;
background-image: url(http://Здесь Header-Image);}
Заменяем адрес на свой:
Цитата: /* Header фиксированный и по центру*/
td.edit_header_full{
width: 100% !important;
/*background-repeat:no-repeat;*/
background-position:center center;
background-image: url(http://80.190.202.79/pic/f/free-grafix/header_iceblue2.png);}
Смотрим что получилось. Хидер на месте!
2. Заменим навигацию
Копируем из кода все что относится к навигации и подставляет свои значения (здесь мы опять взяли кнопки у http://free-grafix.ru.gg ):
Цитата: /* Навигация*/
td.nav{
text-decoration: none;
color: #XXXXXX;
width: 185px;
height: 33px;
background-image: url(http://80.190.202.79/pic/f/free-grafix/button1.png);}
td.nav:hover{
color: #XXXXXX;
width: 185px;
height: 33px;
background-image: url(http://80.190.202.79/pic/f/free-grafix/button2.png);}
td.edit_navi_headbg{
margin: 0px;
padding: 0px;
background-image: url();
background-color: #XXXXXX;
width: 185px;
background-repeat: repeat-y;}
td.edit_below_nav{
visibility: hidden;
width: 185px;}
td.edit_below_nav img{
visibility: hidden;}
td.nav_heading{
width: 185px;
height: 33px;
color: #XXXXXX;
background-image: url(http://80.190.202.79/pic/d/design-24/vista1.gif);
background-color: #XXXXXX;
font-weight: bold;
font-size: 12px;
text-decoration: none;}
td.edit_navi_headbg{
width: 185px;}
Смотрим результат
3. Заменим правые поля
Цитата: /* Правые поля */
td.edit_rechts_sbg{background-image: url();width: 0px;}
td.sidebar_heading{background-image: url(http://80.190.202.79/pic/d/design-24/vista1.gif);color: #XXXXXX;background-color: #XXXXXX;border-bottom: 0px double #XXXXXX;;height:33px;}
.shouty, .shouty2, .shouty3, .shouty4, .shouty5{background-image: url();background-color: #XXXXXX;color:#XXXXXX;font-weight: bold;}
td.edit_rb_footer{background-image:url(); background-color:transparent;}
td.edit_rechts_bottom{background-image:url(); background-color:transparent;}
Результат
4. Поменяем фон за дизайном и фон под центральной частью
Так как картинка фона повторяется, лучше брать однотоные изображения с повторяющимся рисунком без острых краев.
Воспользуемя зтим http://80.190.202.79/pic/f/free-grafix/back.png
Цитата: /* Фон за дизайном */
body{
background-image: url(http://80.190.202.79/pic/f/free-grafix/back.png);
background-color: #XXXXXX;}
/* Прозрачный Фон под центральной частью */
td.edit_rechts_cbg{background-image:url(); background-color:transparent;}
Вот и все. Наш дизайн готов!
Результат
Здесь полный код нашего дизайна
Цитата: <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>
<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;}
/* Header фиксированный и по центру*/
td.edit_header_full{
width: 100% !important;
/*background-repeat:no-repeat;*/
background-position:center center;
background-image: url(http://80.190.202.79/pic/f/free-grafix/header_iceblue2.png);}
/* Навигация*/
td.nav{
text-decoration: none;
color: #XXXXXX;
width: 185px;
height: 33px;
background-image: url(http://80.190.202.79/pic/f/free-grafix/button1.png);}
td.nav:hover{
color: #XXXXXX;
width: 185px;
height: 33px;
background-image: url(http://80.190.202.79/pic/f/free-grafix/button2.png);}
td.edit_navi_headbg{
margin: 0px;
padding: 0px;
background-image: url();
background-color: #XXXXXX;
width: 185px;
background-repeat: repeat-y;}
td.edit_below_nav{
visibility: hidden;
width: 185px;}
td.edit_below_nav img{
visibility: hidden;}
td.nav_heading{
width: 185px;
height: 33px;
color: #XXXXXX;
background-image: url(http://80.190.202.79/pic/d/design-24/vista1.gif);
background-color: #XXXXXX;
font-weight: bold;
font-size: 12px;
text-decoration: none;}
td.edit_navi_headbg{
width: 185px;}
/* Правые поля */
td.edit_rechts_sbg{background-image: url();width: 0px;}
td.sidebar_heading{background-image: url(http://80.190.202.79/pic/d/design-24/vista1.gif);color: #XXXXXX;background-color: #XXXXXX;border-bottom: 0px double #XXXXXX;;height:33px;}
.shouty, .shouty2, .shouty3, .shouty4, .shouty5{background-image: url();background-color: #XXXXXX;color:#XXXXXX;font-weight: bold;}
td.edit_rb_footer{background-image:url(); background-color:transparent;}
td.edit_rechts_bottom{background-image:url(); background-color:transparent;}
/* Фон за дизайном */
body{
background-image: url(http://80.190.202.79/pic/f/free-grafix/back.png);
background-color: #XXXXXX;}
/* Прозрачный фон под центральной частью */
td.edit_rechts_cbg{background-image:url(); background-color:transparent;}
-->
</style> |
