Alternative Art : breath of a phoenix

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

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


Вы здесь » Alternative Art : breath of a phoenix » Восстановленное » Обучаемся css....


Обучаемся css....

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

1

Обучаемся css.

+1

2

Итак, первое задание, так это.
1. Определись с шириной форума. Допустим самое стабильно - 900 пикселей.
2. Нарисуй в фотошопе шапку, высотой в 350 пикселей, и шириной которую ты выбрала в пункте первом.
3. Нарисуй панель для категории, шириной что ты выбрала и высотой в 50 пикселей.
4. И последнее, тебе нужно нарисовать 4 иконки, размером 75х75 пикселей, с надписями Old, New, Closed, Stick

+1

3

1. Выбрала 800 пикселей.
2. Шапка.
3. Панель для категории.
4. Old, New, Stick.

0

4

[caramel'.]
А теперь создавай тестовый форум. Заходи в "Стиль"
Затем заходи сюда http://mybb.ru/generator
Подбери цвет, и сгенирируй стиль. После нажми "Сохранить", и код что тебе выдали, вставь во второе окошко.
Теперь будем делать логотип, во второе окошко вставь вот этот код:

Код:
#pun-title .title-logo {background-image : url("адрес картинки");
background-repeat : no-repeat; height : 182px;}

Прямо в самый верх нижнего окошка.
Там где написано height: 182px; 182 нужно заменить на высоту твоего лого.
Нажимаем сохранить, и вуаля, лого готово.

Теперь будем ставить картинку в категорию.
Во втором окне ищи вот такой код:

Код:
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2

там еще ниже будут параментры, а теперь это все
заменяй на это

Код:
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-image: url("адрес картинки");
  background-color: #f6eea7; 
  background-repeat: no-repeat; 
  color: #202021;
  height: 20px;
  font-style: normal;
  text-align: center;
  font-size: 12px;
  Font-Family: Trebuchet MC;
  font-weight: normal;

  }

где background-color: #f6eea7, задний фон, заменяй его на свой.
color: #202021, цвет которым будет написаны надписи на категории
height: 20px; высота самой картинки, заменяй его примерно на 35.
text-align: center; это позиция текста на картинки, center-по центру, left-по левому краю, right - по правому.
Font-size: 12px; это размер шрифта в пикселах.
Font-family: Trebuchet MC; это шрифт которым будет написан текст,
и наконец
Font-weight: normal; это как будет выглядеть шрифт, normal - без изменений, bold - жирный, italic - курсив.

Теперь будем ставить иконки, они у нас размером 75х75, поэтому идем в первое окошко, и ищем там вот такой код

Код:
/* C2.15 */
.punbb div.icon {
  float: left;
  display: block;
  width: 105px;
  height: 100px;
  padding-top: 1px;
  margin-top: 1px;
}

width: 105px - это ширина наших иконок
height: 100px - высота

Ставим height на 75, а width на 80, чтобы 5 пикселей были в отступе от текста.

Теперь идем во второе окно, прокручиваем его до конца. Пункт CS4.
Заменяем все на это

Код:
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 - это старая тема, то есть Old
TR.inew Div.icon - это новая тема, то есть New
TR.isticky Div.icon - это выделенная тема, то есть Stick
TR.iclosed Div.icon - это закрытая тема, то есть Closed
TR.iredirect Div.icon - это перенесенная тема, то есть Redirect, но я ставлю ее как Old.

Впринципе, это основной урок. Заполняй шаблон, а скрины дизайна, или адрес форума можешь кидать мне.

+1

5

Все сделала.
Единственное: логотип как-то не очень вышел (но это, Бог с ним, там просто по размеру и цвету не очень подошел), и когда вставила скрипт на иконки, они сдвинулись и закрывают пол текста подфорума. Может по размеру надо было меньше брать? не 75 пикселей, а 35 допустим? Проверяла - вроде все нормально вставила, по твоему шаблону. Посмотри пожалуйста, что там не так. Ссылка на форум у тебя есть...

0

6

[caramel'.]
Ну в общем то ты все освоила. Это из-за того что первый код стоит стандартный. А там все везде меня нужно под себя. Урок освоен. 5+

+1

7

Bombari.
А, поняла. Там просто стоял код на сужение форума)
Спасибо! Получай плюсы)

0

8

[caramel'. написал(а):

]А, поняла. Там просто стоял код на сужение форума)Спасибо! Получай плюсы)

Так мы еще многого не прошли. Я еще буду тебя учить и учить. х33

0

9

Bombari.
я опять блондиню XD
А, ну тогда ладно. Я думала уже все))

0


Вы здесь » Alternative Art : breath of a phoenix » Восстановленное » Обучаемся css....


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