Поиск в форуме:
Искать


Автор Сообщение
Сообщение25.06.2008 в 22:31 (UTC)    
Заголовок сообщения: IceBlue: Изменение дизайна IceBlue. Часть II

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-код
- добавляем перед последним
Цитата:
-->
</style>

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>
Показать сообщения:   


Powered by phpBB © 2001, 2005 phpBB Group
phpBB