Обучаемся css.
Обучаемся css....
Сообщений 1 страница 9 из 9
Поделиться231-07-2009 15:21:27
Итак, первое задание, так это.
1. Определись с шириной форума. Допустим самое стабильно - 900 пикселей.
2. Нарисуй в фотошопе шапку, высотой в 350 пикселей, и шириной которую ты выбрала в пункте первом.
3. Нарисуй панель для категории, шириной что ты выбрала и высотой в 50 пикселей.
4. И последнее, тебе нужно нарисовать 4 иконки, размером 75х75 пикселей, с надписями Old, New, Closed, Stick
Поделиться331-07-2009 15:42:08
1. Выбрала 800 пикселей.
2. Шапка.
3. Панель для категории.
4. Old, New, Stick.
Поделиться431-07-2009 16:25:43
[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.
Впринципе, это основной урок. Заполняй шаблон, а скрины дизайна, или адрес форума можешь кидать мне.
Поделиться531-07-2009 17:06:01
Все сделала.
Единственное: логотип как-то не очень вышел (но это, Бог с ним, там просто по размеру и цвету не очень подошел), и когда вставила скрипт на иконки, они сдвинулись и закрывают пол текста подфорума. Может по размеру надо было меньше брать? не 75 пикселей, а 35 допустим? Проверяла - вроде все нормально вставила, по твоему шаблону. Посмотри пожалуйста, что там не так. Ссылка на форум у тебя есть...
Поделиться631-07-2009 17:12:13
[caramel'.]
Ну в общем то ты все освоила. Это из-за того что первый код стоит стандартный. А там все везде меня нужно под себя. Урок освоен. 5+
Поделиться731-07-2009 17:15:20
Bombari.
А, поняла. Там просто стоял код на сужение форума)
Спасибо! Получай плюсы)
Поделиться831-07-2009 17:16:25
]А, поняла. Там просто стоял код на сужение форума)Спасибо! Получай плюсы)
Так мы еще многого не прошли. Я еще буду тебя учить и учить. х33
Поделиться931-07-2009 17:20:28
Bombari.
я опять блондиню XD
А, ну тогда ладно. Я думала уже все))