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>
<!--
/* Расширить дизайн */
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