Обо всём.

Объявление

На нашем форуме появился чат! _____ Форум в ремонте. По некоторым причинам не могу посещать форум,постараюсь вернуться в ближайшие время. (Лана) _____ Гостям можно писать! Пишите, если не можете восстановить свой старый профиль Rikkih2o _____ Привет всем тем, кто изредка вспоминает об этом форуме... Как видите, форум пустеет окончательно, и очень слаба надежда на то, что все будет как раньше... Проходит время, все взрослеют, да и сами форумы уже отходят на второй план, уступая ВК и другим сайтам. К сожалению, под нашим админством разрушилась вся история форума, и сейчас он не то, чем был раньше... Но даже если тут не будет таких приятных бесед, как это было в прошлом, я бы хотела, чтобы форум вернулся в то состояние, в каком он был в свои золотые годы ( 2010-2014...). В подфоруме Организационные моменты проводится голосование Судьба форума, там вы все и узнаете. Rikkih2o

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

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


Вы здесь » Обо всём. » Творчество » Урок своего стиля для форума.


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

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

1

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

Код:
    /* 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

2

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

Код:
    /* 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

3

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

Код:
/*Убираем слово объявление из таблицы*/
#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

4

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

Код:
    /* 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

5

Результат моего форума:http://s3.uploads.ru/t/QqLOg.png

0

6

вполне полезная тема :cool:

0


Вы здесь » Обо всём. » Творчество » Урок своего стиля для форума.


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC