CSS дизайн Iceblue: Основа для свободного дизайна
Тема восстановлена.
Дата первой публикации: 26.01.2008, 22:10
Оригинал: http://homepage-baukasten.de/forum/viewtopic.php?t=52194
Автор: Wolle
Перевод: meinhart
Внимание: Размещенная здесь информация рассчитана на пользователей и программистов, имеющих опыт работы в 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: url();
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: 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: 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:url();
background-color: #XXXXXX;}
/* Удалить заголовок над текстом */
td.headline2{
visibility:hidden;}
td.idcp{
visibility:hidden;}
td.edit_content_top{height: 25px;background-image: url();background-color:#XXXXXX;}
td.edit_content_bottom{background-image: url();background-color: #XXXXXX;}
td.edit_content_bottom2{background-image: url();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: url();width: 0px;}
td.sidebar_heading{background-image: url();background-color: #XXXXXX;border-bottom: 0px double #XXXXXX;}
.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: #XXXXXX;border-bottom: 0px solid #XXXXXX;}
td.edit_rechts_bottom{background-image: url();background-color: #XXXXXX;}
-->
</style>
Пояснение:
Это цвет текста и ссылок
Это цвет дизайна / фона
"Классы" маркированы красным.
------------------------------------------------------------------------------
Сделать элемент невидимым:
Цитата: td.Класс{visibility:hidden;}
Цитата: td.Класс{background-image:url(); 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:url();background-color:#XXXXXX;}
Здесь показано где расположены классы в дизайне: 
------------------------------------------------------------------------------
Вставка на сайте
- войти в систему
- "Выбор дизайна"
- вставить готовый код в поле "Текст над дизайном"
------------------------------------------------------------------------------
Пример транспарентного дизайна: http://www.homepage-baukasten.de/forum/viewtopic.php?t=52202
Готовые дизайны на основе IceBlue можно найти здесь: http://creative-design4you.de.tl/Start.htm
Последний раз редактировалось: meinhart (08.03.2008, 22:12), всего редактировалось 5 раз(а)
Последний раз редактировалось: meinhart (25.06.2008, 22:59), всего редактировалось 1 раз
|
