Testforum for NHL #9

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

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


Вы здесь » Testforum for NHL #9 » Тестовый форум » Приступим к пыткам. :D


Приступим к пыткам. :D

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

1

Разберём дизайн с Маккуры. Для начала возьмём только стиль(второе окошко, Цвета style_cs.css), а потом перейдём к структуре(первое окошко).

Код:
/* CS1 Background and text colours
-------------------------------------------------------------*/
body {background-color: #020202;}
#pun-title {background-image: url(http://i311.photobucket.com/albums/kk465/ASoA/MAKKURADEN/LOGO.jpg);
background-position: top center;
backgroun-repeat: no-repeat;}
#pun {background-color: #fefdfb;}


/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
  background-color: #fefdfb;
  color: #333;
  }

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #fefdfb;
  color: #333;
  }

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #49a0b9;
  color: #fff;
  }

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #fefdfb;
  color: #333;
  }

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #fefdfb;
  color: #005EAB
  }

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: #fefdfb;
  color: #333
  }

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #f9f9f9;
  color: #333
  }

/* CS1.8 */
#pun-navlinks .container {
  background-color: #49a0b9;
  color: #f1f1f1;
  }

.offline li.pa-online strong {
  font-weight: normal
  }

/* CS2 Border colours
-------------------------------------------------------------*/

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: transparent;
  }

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: transparent;
  }

/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: transparent;
  }

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: transparent;
  }

/* CS2.5 */
.punbb th {
  border-color: #fefdfb;
  }

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: #ccc #fff #fff #ccc;
  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: transparent;
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: transparent;
  }

.punbb .divider {
  border-color: transparent;
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid transparent;
  }

li.pa-online {
  border-left-color: #48dcf3;
  }


/* CS3 Links
-------------------------------------------------------------*/

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #2e859e;
  text-decoration: none;
  font-weight: bold;
  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #333
  }

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #49a0b9;
  }

/* CS3.3 */
#pun-navlinks a {
  color: #eee;
  text-decoration: none;
  }

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #fff;
  text-decoration: none;
  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #333;
  color: #fff;
  }

/* CS4 Post status icons
 -------------------------------------------------------------*/

Div.icon {background-image : url(http://i311.photobucket.com/albums/kk465/ASoA/MAKKURADEN/OLD.jpg); 
background-repeat: no-repeat;
  }

TR.inew Div.icon {background-image: url(http://i311.photobucket.com/albums/kk465/ASoA/MAKKURADEN/NEW.jpg);
background-repeat: no-repeat;
  }

TR.isticky Div.icon {background-image : url(http://i311.photobucket.com/albums/kk465/ASoA/MAKKURADEN/STICKY.jpg);
background-repeat: no-repeat;
  }

TR.iclosed Div.icon {background-image : url(http://i311.photobucket.com/albums/kk465/ASoA/MAKKURADEN/CLOSE.jpg);
background-repeat: no-repeat;
  }

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

#pun-title td.title-logo-tdl {
    border: none;
    width: 100%;
    color: transparent;
}

0

2

В данном стиле задний фон это:

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

Он чаще всего встречается как body, html, однако я эти два кода использую раздельно, чтобы можно было наложить один фон на другой, если потребуется.
Цвет форума чёрный:

Код:
background-color: #020202;

В css это стандартный код для смены заднего фона чего-либо.

0

3

Fumuse написал(а):

body {background-color: #020202;}
#pun-title {background-image: url(http://i311.photobucket.com/albums/kk46 … N/LOGO.jpg);
background-position: top center;
backgroun-repeat: no-repeat;}
#pun {background-color: #fefdfb;}

это как шапка форума так?

0

4

Fumuse написал(а):

В css это стандартный код для смены заднего фона чего-либо.

значит цвета могут быть любые? на заднем фоне, главное вставть нужные цифры.

0

5

а есть код, чтобы сделать форум более узким?

0

6

GM написал(а):

это как шапка форума так?

Нет-нет.

Шапка это:

Код:
#pun-title {background-image: url(http://i311.photobucket.com/albums/kk465/ASoA/MAKKURADEN/LOGO.jpg);
background-position: top center;
backgroun-repeat: no-repeat;}

Чтобы понять, что это уже другой код, отвечающий за другой элемент, достаточно только на него посмотреть. Сначала идёт название элемента:

Код:
#pun-title

Затем идёт его описание:

Код:
{background-image: url(http://i311.photobucket.com/albums/kk465/ASoA/MAKKURADEN/LOGO.jpg);
background-position: top center;
backgroun-repeat: no-repeat;}

0

7

GM написал(а):

значит цвета могут быть любые? на заднем фоне, главное вставть нужные цифры.

Ну это не совсем цифры, это код-цвета, а так ты всё правильно поняла.)
GM
Этот код идёт в структуре.
В первом окошке находишь:

/* A5.1 */
#pun {
  margin: 60px auto auto auto;
  width: 968px;
  }

выделенное, это регулирование ширины.

0

8

Вернусь ещё немного к заднему фону.
В заднем фоне, так же можно вставить картинку. Тогда это получается так:

body {
background-color: #020202;
background-image: url(http://i311.photobucket.com/albums/kk46 … EN/fon.jpg);}

Так же картинку можно регулировать по всему пространству окна.

0

9

background-attachment - этот элемент описания отвечает за то, будет ли фон(-картинка) прокручиваться. У него есть два параметра:

scroll - фон поддается прокрутке
fixed - не поддается прокрутке.

К примеру у фона:

body {
background-color: #020202;
background-image: url(http://i311.photobucket.com/albums/kk46 … EN/fon.jpg);
background-attachment: fixed;}

Этот фон будет зафиксирован и не будет прокручиваться.
Так же не стоит забывать, в конце каждого элемента описания ставить точу с запятой, иначе код работать не будет.

0

10

Fumuse
ага ага поняла) пока все)

0

11

background-repeat - этот элемент описания отвечает за повторение картинки. У него есть 4 параметра:

no-repeat - с этим параметром у нас получится только одна картинка, она повторяться вообще не будет.
repeat-x - с этим параметром наша картинка будет повторяться только по горизонтали.
repeat-y - с этим только по вертикали.
repeat - ну и последний параметр, с ним картинка будет повторяться в обоих направлениях.

Опять к примеру из фона:

body {
background-color: #020202;
background-image: url(http://i311.photobucket.com/albums/kk46 … EN/fon.jpg);
background-attachment: fixed;
background-repeat: repeat-x;}

Так у нас будет зафиксированный фон, который копирует изображение только по горизонтали.

0

12

GM
Тебе с элементами описания картинок продолжить объяснение или пока что хватит?)

0

13

Fumuse
пока понятно все) как посты отпишу сяду и попробую что -нибудь поделать) спасибо)

0

14

Пингвин рулитссс
Обращайся, мой юный ученик.)

0

15

Fumuse
конечно, только посты отпишу)

0


Вы здесь » Testforum for NHL #9 » Тестовый форум » Приступим к пыткам. :D


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