Общее Расширения Картинки Мультимедиа Коды Дизайн ЧаВо Поиск

meinhart

Iceblue2

Свободное изменение дизайна IceBlue. Часть II.

В первой части этого пособия мы
- взяли за основу стандартный дизайн 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(https://img.webme.com/pic/d/design-24/vista1.gif);background-color:#XXXXXX;}
td.edit_content{background-image: none;background-color: #ffffcc;}
td.edit_content_bottom{height: 33px;background-image: none;background-color: #99ffff;}
td.edit_content_bottom2{height: 33px;background-image: url(https://img.webme.com/pic/d/design-24/vista1.gif);background-color:#XXXXXX;}
-->
</style>
Мы внесли этот код в поле "Выбор дизайна"->"Расширенные установки"->"Текст над дизайном"

Для дальнейших изменений используем код из темы Свободная адаптация дизайна Iceblue
и схему дизайна.
Принцип всегда один:
- находим нужный участок кода
- заменяем адрес картинки или меняем код цвета
- если нужно меняем размеры или делаем элемент невидимым
- перенимаем в наш CSS-код
- добавляем перед последним
-->
</style>
1. Заменим картинку хидера
Можно воспользоваться готовыми или сделать самому... Мы возьмем готовую у http://free-grafix.ru.gg . Для того он их и предлагает. Например эту https://img.webme.com/pic/m/meinhart/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(https://img.webme.com/pic/m/meinhart/header_iceblue2.png);}
Смотрим что получилось. Хидер на месте!

2. Заменим навигацию

Копируем из кода все что относится к навигации и подставляет свои значения (здесь мы опять взяли кнопки у http://free-grafix.ru.gg ):
/* Навигация*/
td.nav{
text-decoration: none;
color: #XXXXXX;
width: 185px;
height: 33px;
background-image: url(https://img.webme.com/pic/m/meinhart/button_iceblue1.png);}

td.nav:hover{
color: #XXXXXX;
width: 185px;
height: 33px;
background-image: url(https://img.webme.com/pic/m/meinhart/button_iceblue2.png);}

td.edit_navi_headbg{
margin: 0px;
padding: 0px;
background-image: none;
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(https://img.webme.com/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: none;width: 0px;}
td.sidebar_heading{background-image: url(https://img.webme.com/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: none;background-color: #XXXXXX;color:#XXXXXX;font-weight: bold;}
td.edit_rb_footer{background-image: none; background-color:transparent;}
td.edit_rechts_bottom{background-image: none; background-color:transparent;}

Результат

4. Поменяем фон за дизайном и фон под центральной частью
Так как картинка фона повторяется, лучше брать однотоные изображения с повторяющимся рисунком без острых краев.
Например такой
/* Фон за дизайном */
body{
background-image: url(https://img.webme.com/pic/m/meinhart/iceblue_background.png);
background-color: #XXXXXX;}
/* Прозрачный Фон под центральной частью */
td.edit_rechts_cbg{background-image: none; 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(https://img.webme.com/pic/d/design-24/vista1.gif);background-color:#XXXXXX;}
td.edit_content{background-image: none;background-color: #ffffcc;}
td.edit_content_bottom{height: 33px;background-image: none;background-color: #99ffff;}
td.edit_content_bottom2{height: 33px;background-image: url(https://img.webme.com/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(https://img.webme.com/pic/m/meinhart/header_iceblue2.png);}

/* Навигация*/
td.nav{
text-decoration: none;
color: #XXXXXX;
width: 185px;
height: 33px;
background-image: url(https://img.webme.com/pic/m/meinhart/button_iceblue1.png);}

td.nav:hover{
color: #XXXXXX;
width: 185px;
height: 33px;
background-image: url(https://img.webme.com/pic/m/meinhart/button_iceblue2.png);}

td.edit_navi_headbg{
margin: 0px;
padding: 0px;
background-image: none;
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(https://img.webme.com/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: none;width: 0px;}
td.sidebar_heading{background-image: url(https://img.webme.com/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: none;background-color: #XXXXXX;color:#XXXXXX;font-weight: bold;}
td.edit_rb_footer{background-image: none; background-color:transparent;}
td.edit_rechts_bottom{background-image: none; background-color:transparent;}

/* Фон за дизайном */
body{
background-image: url(https://img.webme.com/pic/m/meinhart/iceblue_background.png);
background-color: #XXXXXX;}

/* Прозрачный фон под центральной частью */
td.edit_rechts_cbg{background-image: none; background-color:transparent;}
-->
</style>

Всего 114227 посетителей
Другие сайты о ru.gg:
=> Тебе нужна собственная страница в интернете? Тогда нажимай сюда! <=