Design

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Design » Моделирование стиля » Замена элементов дизайна

Замена элементов дизайна

Страница: 1

Сообщений 1 страница 3 из 3

1

  • Автор: Shed.y
  • Администратор
  • Shed.y
  • Зарегистрирован: 2010-10-18
  • Приглашений: 0
  • Сообщений: 8
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    1 час 2 минуты
  • Последний визит:
    2010-10-19 16:36:34

Как поставить задний фон?

Администрирование-стиль-Цвета style_cs.css

В коде (в самом начале) находим вот это:

Код:
body {
	background-color: #FFFFFF;
}

#FFFFFF-это цвет. Поменяв, например на #000000, фон станет чёрным.

И заменяем на это, если хотим чтобы задний фон прокручивался:

Код:
body {
	background-image: url(адрес картинки);
}

Если хотите сделать фон фиксированным, заменяете на это:

Код:
body {
background-color: #000000; background-image: url(адрес картинки); background-position: top center; background-attachment: fixed; background-repeat: no-repeat;
}

0

2

  • Автор: Shed.y
  • Администратор
  • Shed.y
  • Зарегистрирован: 2010-10-18
  • Приглашений: 0
  • Сообщений: 8
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    1 час 2 минуты
  • Последний визит:
    2010-10-19 16:36:34

Как поставить шапку?
Администрирование-стиль-Цвета style_cs.css
Ищем вот такой код (почти в начале)

Код:
/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #b7aea5;
  color: #FFFFFF;
  }

И заменяем на это:

Код:
/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: transparent;
  color: transparent;
  }#pun-title table {background: url(адрес картинки);}#pun-title .title-logo span {display: none;}

Но если вы посмотрите что получилось, то увидите, что шапка отображается некорректно. Это из-за того, что мы не настроили размер.
Поэтому, идём администрирование-стиль-Структура style.css
И находим ищем вот эти отрывки:

Код:
/* D1.2 */
#pun-title h1 {
  display : block;
  height : 40px;
  padding: 2em 1em 0 1em;
  }

#pun-title table {
	border: none;
	height: 40px;
	width: 100%;
}

#pun-title td.title-logo-tdr {
	border: none;
	width: 468px;
}

height: 40px;-это длина вашей шапки, меняем на своё.
width: 468px;-это длина вашей шапки, меняем на своё.

0

3

  • Автор: Shed.y
  • Администратор
  • Shed.y
  • Зарегистрирован: 2010-10-18
  • Приглашений: 0
  • Сообщений: 8
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    1 час 2 минуты
  • Последний визит:
    2010-10-19 16:36:34

Как поставить иконки?
Находим в администрирование-стиль-Цвета style_cs.css вот этот отрывок. (в самом конце)

Код:
/* CS4 Post status icons
 -------------------------------------------------------------*/

div.icon {border-color: #b7aea5 #978E85 #877E75 #978E85}
tr.iredirect div.icon {border-color: #b7aea5 #b7aea5 #b7aea5 #b7aea5}
div.inew {border-color: #FFFFFF #DFDFDF #CFCFCF #DFDFDF}

#pun-main div.catleft, #pun-main div.catright {display: none}

И заменяем этот отрывок на:

Код:
   /* CS4 Post status icons
 -------------------------------------------------------------*/
 div.icon {
            background: url(Адрес картинки "Нет новых сообщений") no-repeat;
    }

    tr.inew div.icon {
            background: url(Адрес картинки "Есть новые сообщения") no-repeat;
    }

    tr.iclosed div.icon {
            background: url(Адрес картинки "Закрытых тем") no-repeat;
    }

    tr.iredirect div.icon {
            background: url(Адрес картинки "Перемещена, переадресация") no-repeat;
    }

    tr.isticky div.icon {
            background: url(Адрес картинки важных тем) no-repeat;
    }

После того как вы это сделаете, нам нужно отредактировать размер. Потому что иконки будут отображаться только частью или залезать на текст.
Поэтому, идём администрирование-стиль-Структура style.css
И находим этот отрывок.

Код:
/* C2.12 */
.punbb .main th {
  border-style: none none none solid;
  border-width: 0 0 0 1px;
  padding: 0.4em 1em 0.4em 1em;
  }

/* C2.13 */
.punbb .main .tcl {
  border-left-style: none;
  border-left-width: 0
  }

/* C2.14 */
.punbb tbody.hasicon td.tcl {
  padding-left: 3.2em
  }

/* C2.15 */
.punbb div.icon {
  border-style: solid;
  border-width: 0.6em 0.6em 0.6em 0.6em;
  height: 0;
  line-height: 0.0;
  margin-top: 0.1em;
  width: 0;
  }

/* C2.16 */
.punbb  table div.icon {
  font-size: 1.05em;
  position: absolute;
  margin-left: -2.2em;
  }

Заменяем его на:

Код:
/* C2.12 */
.punbb .main th {
  border-style: none none none solid;
  border-width: 0 0 0 1px;
  padding: 0.4em 1em 0.4em 1em;
  }

/* C2.13 */
.punbb .main .tcl {
  border-left-style: none;
  border-left-width: 0
  }

* html .tclcon {height: 1px}

/* C2.14 */
.punbb td div.tclcon {
        margin-left: 80px;
}

/* C2.15 */
.punbb div.icon {
    float: left;
    display: block;
    width: 80px;
    height: 80px;}

/* C2.14 */
.punbb td div.tclcon {
        margin-left: 80px;
}
Красным отмечена ширина иконок. (для ровного отображения описания форума)

/* C2.15 */
.punbb div.icon {
    float: left;
    display: block;
    width: 80px;
    height: 80px;}
Фиолетовым отмечена ширина (width) и длина (height) иконки.

0

Страница: 1

Вы здесь » Design » Моделирование стиля » Замена элементов дизайна

Рейтинг форумов | Создать форум бесплатно