meinhart - Iceblue2

Iceblue2

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

В первой части этого пособия мы
- взяли за основу стандартный дизайн IceBlue
- расширили его, чтобы он подстраивался под размер окна
- заменили центральную часть
- получили такую картинку
При этом наш CSS-код выглядит следующим образом.

Мы внесли этот код в поле "Выбор дизайна"->"Расширенные установки"->"Текст над дизайном"

Для дальнейших изменений используем код из темы Свободная адаптация дизайна 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;}

Вот и все. Наш дизайн готов!

Результат

Здесь полный код нашего дизайна