Урок своего стиля для форума.

Поделиться117 ноября, 2012г. 15:53:06

Автор: Полина Ю.
Участник
Откуда: мне знать?
Зарегистрирован: 1 октября, 2012г.
Приглашений: 0
Сообщений: 36
Уважение: +2
Позитив: +0
Пол: Женский
Возраст: 21 [2002-07-25]
Провел на форуме:
6 часов 37 минут
Последний визит:
17 ноября, 2012г. 15:54:21

Вот недавно разобралась с этой опцией и вот вдруг решила"Расскажу ка я на форуме?". Ну и вот.Решила рассказать.Для начала сделаем стиль с нужными цветами.Его вы сможете сделать в генераторе стилей.Затем сохраняем стиль и вставляем туда куда там написано.У нас получился готовый шаблон форума.Для начала мы вставим ширину и расположение таблицы форума.Ищем в первом окошке стиля

Код:

    /* A5.1 */
    #pun {
      margin: 30px;
      position: relative;
      }

    /* A5.2 */
    .punbb {
      float: left;
      width: 100%;
      height: auto;
      }

Заменяем его на следующий код:

Код:

    /* A5.1 */
    #pun {
      margin: 0px auto auto auto;
      float: none;
      padding: 0px 0px 0px 0px;
      border: none;
      width: [b]850[/b]px;
      }

    /* A5.2 */
    .punbb {
      width: 100%;
      height: auto;
      }

Жирным шрифтом выделена ширина вашего форума.Эта частьmargin: 0px auto auto auto;
float: none;
padding: 0px 0px 0px 0px;ставит таблицу форума по центру.Если хотим слева ставим-float: left; вместо-float: none; а если справа-float: right;

0

Цитировать Сообщение 1

Поделиться217 ноября, 2012г. 19:59:59

Автор: Полюсик142
Продвинутый пользователь
Откуда: Новосибирск,детка)
Зарегистрирован: 22 августа, 2012г.
Приглашений: 0
Сообщений: 1185
Уважение: +44
Позитив: +25
Пол: Женский
Возраст: 23 [2000-07-25]
Провел на форуме:
8 дней 9 часов
Последний визит:
30 ноября, 2013г. 14:25:59

Что сделаем дальше.
Ищем в первом окошке стиля

Код:

    /* D1.4 */
    #pun-title h1 span  {
      font-size: 1.5em;
      }

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

И вместо height: 40px; прописываем высоту вашей шапки в пикселях.
Также меняем часть кода

Код:

/* D1.4 */
#pun-title h1 span  {
  font-size: 1.5em;
  }

на это

Код:

/* D1.4 */
#pun-title h1 span  {
  display: none;
  }

так мы уберем название форума из шапки.

0

Цитировать Сообщение 2

Поделиться317 ноября, 2012г. 20:02:00

Автор: Полюсик142
Продвинутый пользователь
Откуда: Новосибирск,детка)
Зарегистрирован: 22 августа, 2012г.
Приглашений: 0
Сообщений: 1185
Уважение: +44
Позитив: +25
Пол: Женский
Возраст: 23 [2000-07-25]
Провел на форуме:
8 дней 9 часов
Последний визит:
30 ноября, 2013г. 14:25:59

Теперь приступим к главнейшему моменту нашего урока,сама шапка,низ и фон форума.Во второе окошко стиля в самый вверх вставляйте это:

Код:

/*Убираем слово объявление из таблицы*/
#pun-announcement h2 {display: none}
#pun-announcement .container {padding-top: 1em}

/*Ставим шапку*/
body {
background-image: url("картинка");
background-repeat: no-repeat;
background-position: top center;
background-color: transparent;
}

/*Ставим фон*/
HTML {
background-color: фоновый цвет;
background-image: url("картинка");
background-repeat: repeat-xy;
background-position: center top;
}

/*Ставим низ*/
#pun_wrap { 
background-image: url("картинка");
background-repeat: no-repeat;
background-position: center bottom;
}

Все пояснения я уже включила в код, вам осталось только вставить ссылки на элементы. И не забудьте прописать цвет фона форума - подберите его таким образом, чтобы текст на нем выглядел читабельно и не было резкого контраста с самим фоном. Помните, что картинка фона грузится не сразу, а некоторые форумчане вообще картинки отключают, поэтому к выбору цвета нужно подойти серьезно.Также, чтобы стало видно шапку, задник форума и низ, прописываем везде во втором окошке в блоке CS1 в свойстве background-color значение transparent.

0

Цитировать Сообщение 3

Поделиться417 ноября, 2012г. 20:03:51

Автор: Полюсик142
Продвинутый пользователь
Откуда: Новосибирск,детка)
Зарегистрирован: 22 августа, 2012г.
Приглашений: 0
Сообщений: 1185
Уважение: +44
Позитив: +25
Пол: Женский
Возраст: 23 [2000-07-25]
Провел на форуме:
8 дней 9 часов
Последний визит:
30 ноября, 2013г. 14:25:59

ВСТАВЛЯЕМ КАРТИНКИ ИКОНОКНаходим во втором окошке стиля код

Код:

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

    div.icon {border-color: #E6E6E6 #DEDEDE #DADADA #E2E2E2}
    tr.iredirect div.icon {border-color: #F7F7F7 #F7F7F7 #F7F7F7 #f7f7f7}
    div.inew {border-color: #0080D7 #0065C0 #0058B3 #0072CA}

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

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

Код:

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

    /*Старые сообщения*/
    Div.icon {
    background-image : url('картинка');
    background-repeat: no-repeat;
    }

    /*Новые сообщения*/
    TR.inew Div.icon {
    background-image : url('картинка');
    background-repeat: no-repeat;
    }

    /*Важные темы*/
    TR.isticky Div.icon {
    background-image : url('картинка');
    background-repeat: no-repeat;
    }

    /*Закрытые темы*/
    TR.iclosed Div.icon {
    background-image : url('картинка');
    background-repeat: no-repeat;
    }

Вставляем ссылки на свои иконки.

0