Дизайн для CW|Memory Warriors

Страница: 1

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

Поделиться12011-09-28 01:27:16

Автор: Truffle
Писсимизм - это тоже что и реализм.
Откуда: появился... Пафос?
Зарегистрирован: 2011-08-01
Приглашений: 0
Сообщений: 102
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 3 часа
Последний визит:
2013-01-03 20:15:59

Опять же мой любимый генератор стилей сделал основное своё дело - http://xmage.ru/images/hyhhyh.png
Как вы уже догадались стиль будет у нас в серо-голубых тонах. Я планирую сделать что-то небесное. Лёгкое и воздушное.

Поделиться22011-09-29 23:03:46

Автор: Truffle
Писсимизм - это тоже что и реализм.
Откуда: появился... Пафос?
Зарегистрирован: 2011-08-01
Приглашений: 0
Сообщений: 102
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 3 часа
Последний визит:
2013-01-03 20:15:59

Идем в Администрирование-стиль, первое окно стиля, ищем строку:

/* A5.1 */

Всё содержимое меняем на:

Код:

  #pun {
    margin: 0px auto auto 200px;
      width : 850px;
      float: center;
      padding: 0px 0px 1px 0px;
      }

Ширина форума:

width : 850px;

Положение форума - Положение форума, left - по левому боку, right - по правому боку, center - по середине:

float: center;

Жирное - отступ от левого края

margin: 0px auto auto 200px

У меня:

Код:

/* A5.1 */
   #pun {
    margin: 0px auto auto 300px;
      width : 65%;
      float: center;
      padding: 0px 0px 1px 0px;
      }

http://xmage.ru/images/owoowo.png

Поделиться32011-10-07 10:58:15

Автор: Truffle
Писсимизм - это тоже что и реализм.
Откуда: появился... Пафос?
Зарегистрирован: 2011-08-01
Приглашений: 0
Сообщений: 102
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 3 часа
Последний визит:
2013-01-03 20:15:59

Шапка на мой фон не будет. Вместо этого я хочу зделать весьма популярную шапку на весь размер форума. Находим во втором окошке стиля:

Код:

body {
	background-color: #6495ED;
}

background-color: #6495ED; - цвет фона форума. У меня так:

Код:

body {
	background-color: #a0b4c4;
}

Потом вставляем внутрь скобочки ({}) это:

Код:

background-image: url("ссылка на картинку шапки");
  background-repeat: no-repeat; 
  background-attachment: scrool;
  background-position: top;

Позиция на странице (top - вверху, bottom - внизу)

Код:

background-position: top;

Вышло так:

Код:

body {
	background-color: #a0b4c4;
                background-image: url("http://xmage.ru/images/fbgfdgyny.png");
                background-repeat: no-repeat; 
                background-attachment: scrool;
                background-position: top;
}

Сохраняем, вышло - http://xmage.ru/images/ava.png

Как вы видите форум нужно слегка опустить, делаем это так:
Ищем:

Код:

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

heigh - ширина до начала форума... Вообщем это ширина не для всей шапки (http://xmage.ru/images/fbgfdgyny.png), а только для высоты над началом форума (http://xmage.ru/images/fgbdgb.png):

У меня так:

Код:

#pun-title TABLE {
  border: none;
  height: 579px;
  width: 100%;
}

Сохраняем и снова какая-то фигня! http://xmage.ru/images/hxhhxh.png
Не бойтесь это ещё не конец.)
Находим во втором окошке:

Код:

#pun-title, #pun-title .container

Теперь меняем всё содержимое раздела на это:

Код:

#pun-title, #pun-title .container {
  background-image: url(-);
  color: #F0F8FF;
  }

* {
border: none !important;
}

Поделиться42011-10-11 08:31:26

Автор: Truffle
Писсимизм - это тоже что и реализм.
Откуда: появился... Пафос?
Зарегистрирован: 2011-08-01
Приглашений: 0
Сообщений: 102
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 3 часа
Последний визит:
2013-01-03 20:15:59

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

Код:

/* A2.1 */
html, body {margin: 0; padding: 0}

Ниже дописываем:

Код:

* {
border: none !important;
}

В итоге:

Код:

/* A2.1 */
html, body {margin: 0; padding: 0}

* {
border: none !important;
}

Сохраняем, границ нет.

Чтобы объединить форум в один целый блок, а не в несколько отдельных блоков (по другому сказать - убрать пространство между блоками), ищем:

Код:

/* A5.4 */
.punbb .section, .punbb .main {
  margin-bottom: 1em;
  }

Меняем на:

Код:

/* A5.4 */
.punbb .section, .punbb .main {
  margin-bottom: 0em;
  }

Ищем:

Код:

/* A5.5 */
.punbb .category, .punbb .post {
  margin-top: 0.4em;
  }

Меняем на:

Код:

/* A5.5 */
.punbb .category, .punbb .post {
  margin-top: 0em;
  }

Ищем:

Код:

/* 5.7 */
#pun-post .topic {
  margin-top: 1em;
  }

Меняем на:

Код:

/* 5.7 */
#pun-post .topic {
  margin-top: 0em;
  }

Сохраняем, выходит неплохо.

Поделиться52011-10-11 09:29:09

Автор: Truffle
Писсимизм - это тоже что и реализм.
Откуда: появился... Пафос?
Зарегистрирован: 2011-08-01
Приглашений: 0
Сообщений: 102
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 3 часа
Последний визит:
2013-01-03 20:15:59

Как и обещала говорю вам как подвинуть рекламный баннер мубб, но для начала правила:
- баннер должен быть полностью видимым (тоесть не выходить за пределы форума)
- баннер должен обязательно находится вверху форума (в шапке)
- баннер должен быть обязательно на самом видном месте.

Вообщем вот что было:
http://xmage.ru/images/bgb.png

Мы подвинем баннер. Находим в первом окошече стиля строки:

Код:

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

Вставляем ниже строки:

Код:

.title-logo-tdr a, .title-logo-tdr iframe, .title-logo-tdr object{
  position: relative;
  left: 100px;
  top: 100px;
}

В итоге у нас вышло:

Код:

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

.title-logo-tdr a, .title-logo-tdr iframe, .title-logo-tdr object{
  position: relative;
  left: 100px;
  top: 100px;
}

Отступ с левого бока форума, числа меняем на свои:

Код:

left: 100px;

Отступ с верху форума, числа меняем на свои:

Код:

top: 100px;

Методом проб и ошибок я определила нужные числа для моей шапочки и теперь рекламный баннер стоит в боку:

Код:

.title-logo-tdr a, .title-logo-tdr iframe, .title-logo-tdr object{
  position: relative;
  left: -614px;
  top:  275px;
}

http://xmage.ru/images/2ala.png

Поделиться62011-10-18 00:50:09

Автор: Truffle
Писсимизм - это тоже что и реализм.
Откуда: появился... Пафос?
Зарегистрирован: 2011-08-01
Приглашений: 0
Сообщений: 102
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 3 часа
Последний визит:
2013-01-03 20:15:59

Теперь я хочу изменить фон формы быстрого ответа
Находим во втором окошечке стиля строки:

Код:

.punbb textarea, .punbb select, .punbb input {
  background-color: #6495ED;
  color: #333333
}

Меняем их на:

Код:

.punbb select, .punbb input {
  background-color: #6495ED;
  color: #333333
}

А снизу добовляем строки:

Код:

.punbb textarea {
background-color: #a0b4c4;
color: #000000;
}

Где background-color - цвет фона формы быстрого ответа, color - цвет текста в форме быстрого ответа

Так, а дальше я займусь главным меню форума...
Ищем во втором окошке стиля:

Код:

/* CS1.8 */
#pun-navlinks .container {
  background-color: #000000;
  color: #FFFFFF;
  }

Где background-color - цвет фона главного меню, color - цвет текста.

Код:

#pun-navlinks .container {
  background-color: #c0c0c0;
color: #000000;
  }

Поделиться72011-10-18 01:10:21

Автор: Truffle
Писсимизм - это тоже что и реализм.
Откуда: появился... Пафос?
Зарегистрирован: 2011-08-01
Приглашений: 0
Сообщений: 102
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 3 часа
Последний визит:
2013-01-03 20:15:59

Будем учится менять иконки форума. Для этого во втором окошечке стиля ищем строки:

Код:

div.icon {border-color: #ffe9b7 #DFC997 #CFB987 #DFC997}
tr.iredirect div.icon {border-color: #ffe9b7 #ffe9b7 #ffe9b7 #ffe9b7}
div.inew {border-color: #ffe9b7 #DFC997 #CFB987 #DFC997}

Удаляем их и вставляем:

Код:

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;
}
TR.iredirect Div.icon {
background-image : url(ссылка на картинку);
background-repeat: no-repeat;
}

Рассмотрим где какая иконка и что вставлять:

Нет новых сообщений:

Div.icon

Новое сообщение:

TR.inew Div.icon

Важная тема:

TR.isticky Div.icon

Тема закрыта:

TR.iclosed Div.icon

Перемещённая тема:

TR.iredirect Div.icon

У меня вышло так:

Код:

Div.icon {
background-image : url(http://xmage.ru/images/ctc.png);
background-repeat: no-repeat;
}
TR.inew Div.icon {
background-image : url(http://xmage.ru/images/wowwow.png);
background-repeat: no-repeat;
}
TR.isticky Div.icon {
background-image : url(http://xmage.ru/images/wowwow.png);
background-repeat: no-repeat;
}
TR.iclosed Div.icon {
background-image : url(http://xmage.ru/images/ctc.png);
background-repeat: no-repeat;
}
TR.iredirect Div.icon {
background-image : url(http://xmage.ru/images/ctc.png);
background-repeat: no-repeat;
}

Дальше находим в первом окошечке стиля - /* C2.13 */ всё содержимое этого окошечка меняем на это:

Код:

.punbb .main .tcl {
  border-left-style: none;
  border-left-width: 0;
  }

* html .tclcon {height: 1px}

Всё содержимое окошечка - /* C2.14 */ меняем на:

Код:

.punbb td div.tclcon {
  margin-right: 0px;
}

Всё содержимое окошечка - /* C2.15 */ меняем на:

Код:

.punbb div.icon {
  float: left;
  display: block;
  width: 100px;
  height: 100px;
  padding-top: 1px;
  margin-top: 1px;
}

width - ширина иконок
height - высота иконок

Полностью удаляем:

Код:

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

Сохраняем и вуоля:
http://xmage.ru/images/wkwwkw.png

Поделиться82011-10-18 01:18:21

Автор: Truffle
Писсимизм - это тоже что и реализм.
Откуда: появился... Пафос?
Зарегистрирован: 2011-08-01
Приглашений: 0
Сообщений: 102
Уважение: [+0/-0]
Позитив: [+0/-0]
Провел на форуме:
1 день 3 часа
Последний визит:
2013-01-03 20:15:59

Так, ставим копирайт.
Как картинку:

Код:

<img src="ссылка на картинку">

Как картинку с переадресацией на любую ссылку:

Код:

<a href="ссылка на которую при нажатии мы будем переходить"><img src="ссылка на картинку"></a>

Как текст:
Дизайн by ваш копирайт

Код:

<center><B>Дизайн by ваш копирайт</B></center>

Страница: 1

Тестовый форум

Меню навигации

Пользовательские ссылки

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

Дизайн для CW|Memory Warriors

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

Поделиться12011-09-28 01:27:16

Поделиться22011-09-29 23:03:46

Поделиться32011-10-07 10:58:15

Поделиться42011-10-11 08:31:26

Поделиться52011-10-11 09:29:09

Поделиться62011-10-18 00:50:09

Поделиться72011-10-18 01:10:21

Поделиться82011-10-18 01:18:21