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

meinhart

DesignIceblue

Внимание:
Размещенная здесь информация рассчитана на пользователей и программистов, имеющих опыт работы в CSS.
Тех. поддержка по этой теме не оказывается.


Данная тема является переводом темы: http://homepage-baukasten.de/forum/viewtopic.php?t=52194.
Спасибо Wolle за подробное техническое описание дизайна Iceblue и возможностей его адаптации. Свободная адаптация дизайна 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: 15% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 15% !important;}
td.edit_rechts_cbg{width:100%;}

/* Ссылки и форматирование текста */
p, div, b{color: #000000;}

td.nav a{
color:#XXXXXX;
font-size: 12px;
text-decoration: none;}

a:hover {
color:#XXXXXX;
font-size: 12px;
text-decoration: none;}

a: link {
color:#XXXXXX;
font-size: 12px;
text-decoration: none;}

a:active {
color:#XXXXXX;
font-size: 12px;
text-decoration: none;}

a:visited {
color:#XXXXXX;
font-size: 12px;
text-decoration: none;}

/* Фон за дизайном */
body{
background-image: none;
background-color: #XXXXXX;}

/* Header фиксированный и по центру*/
td.edit_header_full{
width: 100% !important;
background-repeat:no-repeat;
background-position:center center;
background-image: url(http://Здесь Header-Image);}

/* Удалить заголовок Headerа*/
td.headline{visibility:hidden;}

/* Навигация*/
td.nav{
text-decoration: none;
color: #000000;
width: 185px;
height: 40px;
background-image: url(http://ЗДЕСЬ BUTTON 1.jpg);}

td.nav:hover{
color: #000000;
width: 185px;
height: 40px;
background-image: url(http://Здесь Button 2.jpg);}

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: 89px;
height: 80px;
background-image: url(http://Изображение над навигацией.jpg);
background-color: #XXXXXX;
padding-top: 0px;
font-weight: bold;
font-size: 15px;
text-decoration: none;}

td.edit_navi_headbg{
width: 185px;}

/* Форматирование Link-ов в поле текста*/
td.edit_content a{
color:#XXXXXX;
font-size: 12px;
text-decoration: none;}

td.edit_content a:hover {
color: #XXXXXX;
font-size: 12px;
text-decoration: none;}

/* Фон текстового поля*/
td.edit_content {
background-image: none;
background-color: #XXXXXX;}


/* Удалить заголовок над текстом */
td.headline2{
visibility:hidden;}
td.idcp{
visibility:hidden;}

td.edit_content_top{height: 25px;background-image: none;background-color:#XXXXXX;}
td.edit_content_bottom{background-image: none;background-color: #XXXXXX;}
td.edit_content_bottom2{background-image: none;background-color: #XXXXXX;;text-align: right;}
td.edit_rechts_cbg{margin: 0px;background-image: url(URL);background-color: #XXXXXX;}


/* Правые поля */
td.edit_rechts_sbg{background-image: none;width: 0px;}
td.sidebar_heading{background-image: none;background-color: #XXXXXX;border-bottom: 0px double #XXXXXX;}
.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: #XXXXXX;border-bottom: 0px solid #XXXXXX;}
td.edit_rechts_bottom{background-image: none;background-color: #XXXXXX;}

-->
</style>

Пояснение:
Это цвет текста и ссылок
Это цвет дизайна / фона
"Классы" маркированы красным.

Сделать элемент невидимым
:
td.Класс{visibility:hidden;}
td.Класс{background-image: none; background-color:transparent;}

Заменить график в дизайне:
td.Класс{background-image:url(http://здесь ваша картинка-URL); background-color:#XXXXXX;}
Заменить график в дизайне с заданной высотой:
td.Класс{background-image:url(http://здесь ваша картинка-URL); background-color:#XXXXXX;height:XXpx;}

Изменить цвет фона в дизайне:
td.Класс{background-image: none;background-color:#XXXXXX;}
Здесь показано где расположены классы в дизайне: 


Пример транспарентного дизайна: Прозрачный дизайн IceBlue
Готовые дизайны на основе IceBlue можно найти здесь: http://creative-design4you.de.tl/Start.htm
 
Всего 125809 посетителей
Другие сайты о ru.gg:
Этот сайт был создан бесплатно с помощью homepage-konstruktor.ru. Хотите тоже свой сайт?
Зарегистрироваться бесплатно