FREAKSHOW

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

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


Вы здесь » FREAKSHOW » Обучение дизайну » не осталось ничего


не осталось ничего

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

1

Привет Ксюша ))   Для начала предлагаю привести несколько примеров дизайнов которые тебе нравятся, с описанием того что именно в них нравится. И создай пробник на котором будем работать.

0

2

Тестовик:
http://kapelkaschastya.mybb.ru/
Дизайны:
http://newhistoryhollywood.rusff.ru/
http://universitynu.rusff.ru/
http://onceupon.mybb.ru/
http://princeton.rolebb.com/
http://colorforum.ru/
http://xmages.net/storage/10/1/0/6/c/up … d60b62.jpg
http://savepic.ru/2727924.jpg

0

3

Очень красивые дизайны )))

Предлагаю начать изучение дизайнов не с кодов и их расшифровки, а с изготовления графики. Сделай фон и шапку.
Размеры: Шапка 1450х500 пикселей, фон 1450х700 пикселей.

Шапка + задний фон (т.е. шапка находится на заднем фоне)

http://uploads.ru/t/G/z/f/GzfvH.png

Фон

http://uploads.ru/t/o/L/6/oL6SG.png

0

4

http://savepic.su/921190.png

0

5

Заходим в администрирование ---> Свой стиль
Для того что бы дизайн отображался нужно поставить галочку использовать свой стиль. В первом окне стиля не советую бездумно что либо менять. Оно отвечает за структуру форума и можно просто все испортить. Второе окно отвечает за цвета. С ним сейчас и будем работать.

/* CS1 Background and text colours
-------------------------------------------------------------*/

Вставляешь вот это

#pun-title table {
background-image : url("...");}
body {background-color: #цвет переадресации;
background-image : url("ссылка на фон");
background-repeat: repeat;
background-position : top center;}
#pun { background-image : url("ссылка на фон");
background-color : #;
background-position : center;}
#pun_wrap {background-image: url("ссылка на шапку"); background-repeat: no-repeat; background-position: center top; }

Сейчас все нужно будет настроить, это будем делать в 1 окне стиля.
Находим A5 Basic page layout and borders и вставляем следующее:

/* A5.1 */
#pun {
  margin: 0px;
  position: relative;
  width: 800px;
  margin: auto;
  }

800 пикселей это ширина нашего форума.
Теперь настроим шапку. Ищем D1 Logo and description. Теперь находим /* D1.4 */ и меняем на это:

#pun-title h1 span  {
   display: none;
  }
#pun-title TABLE {
  border: none;
  height: 500px;
  width: 800px;
  float: none;
  background-image: url(ссылка на шапку);
  background-position : top center; 
}
#pun-title TD.title-logo-tdl {
  border: none;
  width: 100%;
}

0

6

ультраморин
http://kapelkaschastya.mybb.ru/ готово

0

7

Ой, как быстро. Молодец!! Поставь мне админство.

0

8

ультраморин
поставила

0

9

ультраморин
кстати, а почему форум съехал влево?

Отредактировано капелька счастья (2011-12-14 23:06:38)

0

10

капелька счастья написал(а):

кстати, а почему форум съехал влево?

Сейчас гляну

0

11

У тебя в первом окне стиля в пункте отвечающем за ширину форума стоит большее значение чем должно. Форум не съехал в сторону а встал по тому размеру, что прописан. А графика меньшего размера, отсюда и кажется что все уехало.

Смотри:

/* A5.1 */
#pun {
  margin: 0px;
  position: relative;
  width: 970px;
  margin: auto;
  }

выделенное исправь на 800 px

/* D1.4 */ - тоже самое. Размеры графики не соответствуют размерам в кодах.

#pun-title h1 span  {
   display: none;
  }
#pun-title TABLE {
  border: none;
height: 350px;
  width: 970px;

  float: none;
  background-image: url(http://10pix.ru/img1/3445/6345810.png);
  background-position : top center; 
}
#pun-title TD.title-logo-tdl {
  border: none;
  width: 100%;
}

Выделенное исправить!!!

0

12

ультраморин написал(а):

выделенное исправь на 800 px

у меня середина на дизайне больше чем 800, если поставить 800 он будет сильно узкий

ультраморин написал(а):

height: 350px;
  width: 970px;

если я это изменю, то будут проблемы с шапкой, она не станет на место, а будет съезжать

0

13

Теперь поняла, просто обычно середину форума 800 пикселей делают. Ну да ладно. Форумы тормазят, так что завтра напишу что дальше.

0

14

ну что там?

0

15

Жди до вечера, с телефона не могу написать.

0

16

CS2 Border colours

Отвечает за бордюры на форуме. Они нам не очень то и нужны, так что будем их убирать. Внимание! Не удалять, а сделаем так что бы они не отображались.

Видим вот это:

border-color: #f5f5f5

Меняем на это:

border-color: transparent

И так в каждом пункте  Border colours.

Дальше избавимся от стандартного цвета форума.

CS1 Background and text colours

Там где написанно background-color: #f1f1f1;

убираем номер цвета. Должно получится  background-color: #;

Поскольку фоны мы прописали картинками, то прописывать цветом не будем. Он просто перекроет наши картинки. Конечно, при желание можно фон делать с помощью цвета. Но все-таки с помощью картинок больше возможностей.

Меняем иконки (Ставим в ХТМЛ ВЕРХ)

<style>
.punbb table Div.icon {float: right; display: block; width: 70px; height: 70px; border-style: none; background-image: url(ссылка старые сообщения);  background-repeat: no-repeat; position: relative;}
.punbb table div.inew {background: url(ссылка новые сообщения) no-repeat;}
TR.isticky Div.icon {background: url(ссылка важные сообщения) no-repeat;}
TR.iclosed Div.icon {background: url(ссылка закрытые сообщения) no-repeat;}
</style>
<style type="text/css">
.punbb td div.tclcon { padding-right: 75px; }
</style>

width: 70px; height: 70px - размер наших иконок. Можно сделать и больше, но по мне 70 вполне достаточно.

Задание: убрать лищнее в фоне, убрать бордюры и поставить иконки сообщений.

0


Вы здесь » FREAKSHOW » Обучение дизайну » не осталось ничего