`tsunami
Иконки можно надписями сотворить, тут исходники не всегда нужны с: На шапку можно сделать размытие и добавить текстурок, не буду же я текстурки пихать в исходники хд
`tsunami | Moose
Сообщений 11 страница 20 из 39
Поделиться112013-03-03 13:26:37
- Участник
- Зарегистрирован: 2012-09-02
- Приглашений: 0
- Сообщений: 44
- Уважение: +0
- Позитив: +1
- Провел на форуме:
1 день 0 часов - Последний визит:
2013-05-15 20:47:13
Поделиться122013-03-04 08:57:50
- per aspera ad astra
- Зарегистрирован: 2013-02-07
- Приглашений: 0
- Сообщений: 1085
- Уважение: +85
- Позитив: +19
- Пол: Женский
- Провел на форуме:
6 дней 22 часа - Последний визит:
2013-05-04 13:04:56
Moose
Я понимаю. Ну иконки ладно, но для шапки я попросила несколько, ты можешь делать из одного, но задание выполнить надо.
Поделиться132013-03-04 17:10:54
- Участник
- Зарегистрирован: 2012-09-02
- Приглашений: 0
- Сообщений: 44
- Уважение: +0
- Позитив: +1
- Провел на форуме:
1 день 0 часов - Последний визит:
2013-05-15 20:47:13
Поделиться142013-03-05 09:20:43
- per aspera ad astra
- Зарегистрирован: 2013-02-07
- Приглашений: 0
- Сообщений: 1085
- Уважение: +85
- Позитив: +19
- Пол: Женский
- Провел на форуме:
6 дней 22 часа - Последний визит:
2013-05-04 13:04:56
Moose
Ну ладно, хоть 3. 4+ о.о
Работаем с кодом
Вернее, пока с нижним окном стиля, так как оно почти полностью отвечает за графику.
По-идее, весь этот урок будет представлять собой задание. На всякий случай я буду давать коды и показывать на них, где что изменять. Если ты все знаешь и без этого, я буду только рада.
1. Тело форума
Изменяешь на свой цвет. Можешь поставить картинку, но пока лучше цвет.
/* CS1.1 */
#pun { background-color: #шестизнак;
background-repeat: repeat;
background-position : center;}
Слово "шестизнак" меняешь на свой цвет.
2. Фон форума
Тоже меняшь на свой цвет. Картинку лучше пока не ставь, этим мы займемся позже.
/* CS1.2 */
body {background-color: #шестизнак;
background-repeat: no-repeat;
background-position : top center;
overflow-x: hidden;
}
Слово "шестизнак" меняешь на название своего цвета.
3. Категории форума
Я думаю, нам стоит сделать дизайн не аляповатым и ярким, а красивым и спокойным, поэтому цвет категорий ты меняешь на тот же, каким заливала тело форума.
/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
background-color: #шестизнак;
color: #шестизнак;
}
Цвет после свойства background-color означает цвет фона. Это ты знаешь (первое слово "шестизнак" меняешь как я написала раньше).
Цвет после свойства color означает цвет текста именно этой области (в данном случае - цвет текста, которым будет написано название категорий). Здесь тоже выбираешь свой, но обязательно такой, чтобы сочетался с фоном форума и не очень резал глаза. То есть не надо делать красное на синем или малиновое на зеленом, ладно?)
4. Шапка форума
А здесь мы напрямую сталкиваемся с графикой. Пока (для начала) ты можешь просто загрузить через какой-нибудь сервер и вставить в шапку пустую картинку, подогнав в фотошопе или любом другом графическом редакторе ее под размеры 850 х 500. Ты можешь сделать коллаж (если умеешь) опять же в любом графическом редакторе, но я этого не требую прямо в этом уроке. Если хочешь, этому мы научимся потом. Вот каким должен быть окончательный код для шапки:
/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
background-image : url("...");
}
Замени тот код, который у тебя стоит, на такой. Там мы просто изменяем свойство backround-color на свойство backround-image и убираем свойство color за ненадобностью. Можешь оставить последнее, конечно, это свойство не помешает.
5. Полосы легенд
Здесь опять та же штука, что и с категориями. Цвет фона ставим тот же, что и тело форума. Цвет текста выберешь сама, но опять же обязательно, чтобы сочетался с цветом форума. Можешь взять тот же, что и в категориях.
/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
background-color: #шестизнак;
color: #шестизнак
}
Первый "шестизнак" заменяешь на цвет фона опять же, второй на цвет текста. Тут все понятно.
6. Строки форум|сообщений|тем
Ту все то же самое - цвет фона тот же, что и тело. Цвет текста выбираешь сама.
/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl {
background-color: #шестизнак;
color: #шестизнак;
}
Первый "шестизнак" - цвет фона, второй - цвет текста.
7. Коды и цитаты
Здесь немного по-другому. Вместо цвета поля кодов или цитат можно ставить и картинки, но мы пока ограничимся цветом. Цвет ты выбираешь немного отличающийся от цвета тела форума, чтобы было заметно, где у нас цитата или код, а где нет. Но опять же все должно сочетаться.
/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
background-color: #шестизнак;
color: #шестизнак;
}
Первый "шестизнак" - на тот выбранный тобой цвет, второй - на цвет в поле цитаты или кода, но обязательно следи, чтобы было все видно.
8. Главное меню (форум, участники и т.д.)
Цвет фона выбираешь тот же, каким заливала тело форума. Цвет надписей выбирай сама.
/* CS1.8 */
#pun-navlinks .container {
background-color: #шестизнак;
color: #шестизнак;
}
На месте первого "шестизнака" - цвет фона, на месте второго - цвет текста.
9. Картинка в самый низ
Помнишь, мы добавляли этот пункт? Но сейчас он нам не понадобится, пока мы не будем его трогать, а позже я пришлю тебе стандартную картинку в самый низ, которую использую я, ты сделаешь свой копирайт.
10. Поле ввода
И этот пункт мы тоже добавляли к исходному коду. Цвет фона, думаю, стоит выбрать тот же, что и тело форума.
.punbb textarea, .punbb select, .punbb input {
background-color: #шестизнак;
color: #шестизнак;
}
Первый "шестизнак", как обычно, - фон, второй - цвет текста.
11. Границы
Я уже писала в прошлом уроке, что в них нужды нет, поэтому после всех свойств border-color: везде нужно подставлять transparent; во всем блоке. Так и сделай.
12. Все ссылки в неактивном состоянии
Нужно выбрать какой-нибудь цвет, который будет выделяться, но сочитаться с цветом тела форума.
/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
color: #шестизнак
}
Слово "шестизнак" меняешь на выбранный цвет.
13. Все ссылки в активном состоянии
Выбираешь цвет еще более светлый или просто ярче, чем в прошлом пункте.
.punbb a:hover, .punbb a:focus, .punbb a:active, .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
color: #шестизнак;
}
Слово "шестизнак" меняешь на этот цвет.
14. Главное меню без наведения
Здесь цвет лично я предпочитаю брать тот же, что мы брали для неактивных ссылок, но ты можешь взять какой-то другой на свое усмотрение.
/* CS3.3 */
#pun-navlinks a {
color: #шестизнак;
text-decoration: значение;
}
Вместо слова "шестизнак" - выбранный цвет, вместо слова "значение" выбираешь какое-либо украшение текста (см. первый урок).
15. Главное меню при наведении
Здесь все просто.
/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
color: #шестизнак;
text-decoration: значение;
}
Вместо слова "шестизнак" - выбранный цвет, вместо слова "значение" - выбранное украшение текста.
Задание
1. Собственно, весь наш этот урок состоял из задания. Как сделаешь, отпишись и скинь мне повторно ссылку на тестовик.
Поделиться152013-03-05 13:52:20
- Участник
- Зарегистрирован: 2012-09-02
- Приглашений: 0
- Сообщений: 44
- Уважение: +0
- Позитив: +1
- Провел на форуме:
1 день 0 часов - Последний визит:
2013-05-15 20:47:13
Поделиться162013-03-06 10:48:42
- per aspera ad astra
- Зарегистрирован: 2013-02-07
- Приглашений: 0
- Сообщений: 1085
- Уважение: +85
- Позитив: +19
- Пол: Женский
- Провел на форуме:
6 дней 22 часа - Последний визит:
2013-05-04 13:04:56
Moose
Да, все супер, собственно.
Ладно, вот новый урок. Вернее, его первая часть, чтобы не откладывать. Потом вторую пришлю, и у тебя будут две оценки.
Добавим чего-то нового
Часть 1. Что именно мы будем добавлять? Иконки. Помнишь, мы убрали последний блок в одном из уроков. Это совсем не случайно, я хочу дать тебе более простой и хороший код, как мне кажется, для этого важного дела. Собственно, вот он. Вставляется в HTML-верх он.
<style>
.punbb table Div.icon {
float: right;
display: block;
width: ширина;
height: высота;
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>
Здесь все, думаю понятно. Ширину и высоту иконок я предпочитаю указывать 100х100. Пикселей, конечно. Если ты будешь делать так же, то тогда на месте моих слов "ширина" и "высота" пишешь 100px и 100px. Ты можешь взять и свои значения, но размер иконок обязательно должен соответствовать размерам, указанным в коде. Иначе ничего не получится.
На месте соответствующих слов ты вставляешь ссылки на соответствующие иконки, которые ты сделала или где-то нашла. Вот и все.
Задание
1. Делаешь или ищешь где-то иконки, подходящие по цвету и стилю к нашему дизайну.
2. Вставляешь в HTML-верх код, данный мной.
3. Делаешь в нем соответствующие исправления, вставляешь иконки.
4. Кидаешь очередной раз ссылку на тестовик мне.
Поделиться172013-03-07 10:56:19
- Участник
- Зарегистрирован: 2012-09-02
- Приглашений: 0
- Сообщений: 44
- Уважение: +0
- Позитив: +1
- Провел на форуме:
1 день 0 часов - Последний визит:
2013-05-15 20:47:13
Поделиться182013-03-07 15:37:21
- per aspera ad astra
- Зарегистрирован: 2013-02-07
- Приглашений: 0
- Сообщений: 1085
- Уважение: +85
- Позитив: +19
- Пол: Женский
- Провел на форуме:
6 дней 22 часа - Последний визит:
2013-05-04 13:04:56
Moose
Ага, молодец.
Добавим чего-то нового
Часть 2. А на сей раз мы будем добавлять картинку в самый низ. Помнишь, мы даже вставляли специально для этого еще один пункт во второе окно стиля? Я очень много где использую такую картинку:
http://s3.uploads.ru/FgQU4.png
Ее взяла из классного урока на этом же сайте "Делаем дизайн [супернатурал]". Раньше делала каждый раз что-то разное, а теперь просто перекрашиваю такую и ставлю на ней свой копирайт. Копирайт можешь себе придумать и поставить, можешь не придумывать. Только ставь не очень высоко, в самом-самом низу, так как картинка по своему формату не соответствует нашему коду.
Загружаешь картинку через сервер, ссылку в этот код, если не помнишь:
/* CS1.9 */
#pun-about p.container {
background: transparent url("...")
bottom center no-repeat;
}
Но перед этим в фотошопе ты должна перекрасить картинку, чтобы она соответствовала телу форума. Заливаешь и рамочку (темно-коричневая), и саму картинку (бежевую часть) тем цветом (точно таким же!) каким у тебя залито тело форума. А те уголки светло-серые, которые по бокам, заливаешь цветом своего фона. Запутаться, вроде, не должна. Здесь все предельно просто.
Задание
1. Часть его была в уроке (перекрасить, вставить и пр.)
2. Выполняешь и кидаешь ссылку на исходник опять в тему.
Поделиться192013-03-09 01:23:11
- Участник
- Зарегистрирован: 2012-09-02
- Приглашений: 0
- Сообщений: 44
- Уважение: +0
- Позитив: +1
- Провел на форуме:
1 день 0 часов - Последний визит:
2013-05-15 20:47:13
Поделиться202013-03-09 10:18:48
- per aspera ad astra
- Зарегистрирован: 2013-02-07
- Приглашений: 0
- Сообщений: 1085
- Уважение: +85
- Позитив: +19
- Пол: Женский
- Провел на форуме:
6 дней 22 часа - Последний визит:
2013-05-04 13:04:56
Moose
Молодец.
Работаем с первым окном стиля
Почему я оставила его на потом? Оно сложнее, здесь легче запутаться. Но, думаю, ты разберешься, если внимательно читала все мои предыдущие уроки. Отсюда тебе нужно не очень многое, мы даже разбирать подробно всю структуру не будем. Я просто расскажу именно про ее важные части.
1. A3. Text setup
Эта часть отвечает за размеры и шрифты форума, их можно менять, но я редко когда трогаю именно их. Ты можешь посмотреть сам код этой части, видишь там названия шрифтов и величины? Вот они то и изменяются. Но мы на этом подробно останавливаться не будем, ты можешь поэксперементировать, а потом показать мне результат.
2. A5. Basic page layout and borders
Дальше A5 коды трогать не советую, там можно много накосячить, а потом не исправишь.
2.1. A5.1 А вот первый пункт регулирует ширину тела форума (самого форума, считай) и отступы относительно страницы.
/* A5.1 */
#pun {
margin: 0px auto auto auto;
width : значение ширины;
}
На месте слов "значение ширины" ты указываешь свою. Я беру 850px, ибо это стандарт. Под эту ширину должна подходить и шапка.
margin: 0px auto auto auto; отвечает за отступы, но я и это редко трогаю.
2.2. A5.3 Этот пункт отвечает за страницу переадресации. Если тебе эта вещь важна, то можешь изменять. Я на этом форуме даже статью видела хорошую про изменении этой страницы. Почитай, если хочешь, конечно.
/* A5.3 */
#pun-redirect, #pun-maint {
margin: 50px 20% 12px 20%;
width: auto;
float: none;
}
margin: 50px 20% 12px 20%; - данная строка отвечает за положение сообщения относительно границ монитора. Попробуй поизменять, может выйти что-то хорошее.
width: auto; - это ширина сообщения. Она указывается автоматически.
2.3. A5.9 Этот пункт отвечает за рамки на форуме. Сейчас стало модно их убирать, так предпочитаю делать и я. В этом коде тебе должно быть все понятно еще из первого урока.
/* A5.9 */
.punbb .container {
border-style: none;
border-width: 1px;
}
Здесь свойство-значение border-style: none; отвечает за стиль рамки, а border-width: 1px; за ширину рамки.
2.4. A5.10 Этот пункт отвечает за те же границы, но для категорий, полей профиля и всех других элементов. Здесь значения и свойства все те же самые, поэтому я даже расписывать про них не буду.
/* A5.10 */
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
padding: 0.5em 1em;
border-style: solid;
border-bottom: none;
border-width:1px;
}
3. B1. Parsed Content, Signatures and Scroll Boxes
Из этого блока нам понадобится только один пункт - B1.2. Этот параметр регулирует отображение границ между постами, а так же между подписями участников. Понятное дело, что здесь ни в коем случае нельзя все эти параметры делать одного цвета, потому что всё сольётся в один фон и выйдет плохо.
/* B1.2 */
.punbb .post-sig dt {
display: block;
border-top: 1px solid #888;
width: 250px;
margin: 5px 0;
}
Здесь со свойствами-значениями должно быть все понятно.
4. C2. Table layout
4.1. C2.1, C2.2, C2.3 Пункты C2.1, C2.2 и C2.3 отвечают за строку форума, тем, сообщений. Ее редко меняют, но если вдруг захочется, то:
/* C2.1 */
.punbb .main .tcl {
overflow: hidden;
text-align: left;
width: 50%;
}/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
background-color: transparent;
text-align: center;
width: 10%;
}/* C2.3 */
.punbb .main .tcr {
background-color: transparent;
overflow: hidden;
text-align: left;
width: 30%;
}
...то в этих кодах тебе нужно поменять часть: width: 30%;. Обрати внимание, что размеры нужно указывать в пикселях, если ширина форума тоже в пикселях, и наоборот - используй проценты, если ширина указана в процентах. Строка: text-align: left; - относится к расположению текста (центр, слева, справа).
4.2. C2.12 Этот пункт отвечает за цвет бордера. В таком коде (или том, который стоит у тебя) нужно цвета поменять на свои, понятное дело.
/* C2.12 */
.punbb .main th {
padding: 7px 1em 7px 1em;
border-left: 1px solid #шестизнак;
border-bottom: 2px solid #шестизнак;
border-top: 1px solid #шестизнак;}
Соответственно, если ты хочешь вообще убрать границы, то этот пункт должен выглядеть так:
/* C2.12 */
.punbb .main th {
border-style: none none none none;
border-width: 0 0 0 0px;
padding: 0.4em 1em 0.4em 1em;
}
4.3. C2.14 Этот немаловажный пункт отвечает за иконки, вернее, за их расположение. Конечно, и в том коде, которые мы добавляли с HTML-верх, есть элементы этого, но все-таки не все.
/* C2.14 */
.punbb td div.tclcon {
margin-left: 45px;
}
Здесь регулируется отступ иконок, то есть чем больше значение, тем больше будет отступ между иконкой и границей форума. Значения указываются в пикселях. И обязательное правило: отступ должен быть либо такой же, как иконка, а лучше даже больше, но ни в коем случае не меньше, иначе иконка "вылезет".
4.4. C2.15 Этот пункт тоже отвечает непосредственно за расположение иконок.
/* C2.15 */
.punbb div.icon {
float: left;
display: block;
width: 30px;
height: 30px;
margin-right: 7px;
}
Этот параметр обязательно нужно заполнить, теперь объясню почему. float: left; - отвечает за расположение иконок. Можно поставить их либо влево, либо вправо. width: 30px; height: 30px; - думаю, уже поняла. Размеры иконок. Их мы вписывали и в тот код, который для иконок потом добавляли. Здесь пропиши еще раз те же самые данные, что прописывала и там. Если вы вовсе не поменяешь их, или поставишь неверные, то иконки либо будут обрезаться, либо получатся громадными. margin-right: 7px; - отвечает за расположение иконки относительно названия форума или темы.
5. D1. Logo and discription
Собственно, почти в этой части меняется высота форума (высота шапки). Я думаю, что это не менее важно, чем иконки. Я решила рассказать тебе об этом сейчас, а не в уроке, когда мы работали с шапкой.
/* D1.2 */
#pun-title h1 {
display : block;
height: ширина;
margin-bottom: -1px;
}/* D1.3 */
#pun-title .container {
border-style: none ;
padding: 0.2em 1em 0.8em 1em;
}/* D1.4 */
#pun-title h1 span {
display: none;
}#pun-title TABLE {
border: none;
height: ширина;
width: 100%; margin-bottom: 0px; margin-top: 0px;
}#pun-title TD.title-logo-tdl {
border: none;
width: 100%; height: ширина;
}#pun-title TD.title-logo-tdr {
border: none;
width: высота;
vertical-align: top;
padding-right: 0px;
padding-top: 0px;}
Думаю, понятно. Везде, где стоит мое слово "ширина" ты прописываешь свое значение в пикселях. Стандарта нет, все зависит от дизайна, но я обычно беру где-то 500. Но заметь, что в этом же блоке второй раз появляется высота. Не забудь изменить ее на свою.
P. S. Хочу заметить, что у фотошопа с форумами представления о единицах измерения немного разные, поэтому пиксели в кодах указывай на 1-3 больше, чем они есть на самом деле, то есть в фотошопе, чтобы картинка не раздваивалась, не обрезалась.
Задание
1. Вообще, это больше теоритическая часть, чтобы ты знала на всякий случай где что менять и как. Только самые важные вещи.
2. Измени форум по своему усмотрению, поменяй, может быть, комментарии на понятные.
