я вот к чему:
http://eternaluniverse.mybb.ru/
смотри, какая маленькая. хоть крась, хоть не крась.
`tsunami | crimson soda
Сообщений 31 страница 40 из 56
Поделиться312013-02-16 18:43:18
Поделиться322013-02-16 20:48:23
crimson soda
В фотошопе идем и увеличиваем. Если и так не получится... Мне просто странно это, так как у всех до тебя получалось все прекрасно. Короче, вот ссылка если что:
http://s3.uploads.ru/FgQU4.png
Отредактировано `tsunami (2013-02-16 20:50:18)
Поделиться332013-02-17 19:35:08
`tsunami
http://eternaluniverse.mybb.ru/
так?
Поделиться342013-02-17 21:02:52
crimson soda
Так, только эту рамочку темненькую лучше залей тем же цветом, что и основную картинку.
Поделиться352013-02-18 08:32:00
`tsunami
http://eternaluniverse.mybb.ru/ - готово.
Поделиться362013-02-18 17:03:57
crimson soda
Отлично. Копирайт делать не стала?
Поделиться372013-02-18 17:36:13
`tsunami
пока нет. не очень люблю копирайты в принципе. ну, разве что обычным текстом приписать, а не в картинку врисовывать).
дальше?
Поделиться382013-02-18 18:14:07
пока нет. не очень люблю копирайты в принципе. ну, разве что обычным текстом приписать, а не в картинку врисовывать).
дальше?
Хорошо))
Поделиться392013-02-18 18:15:02
Работаем с первым окном стиля
Почему я оставила его на потом? Оно сложнее, здесь легче запутаться. Но, думаю, ты разберешься, если внимательно читала все мои предыдущие уроки. Отсюда тебе нужно не очень многое, мы даже разбирать подробно всю структуру не будем. Я просто расскажу именно про ее важные части.
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. Измени форум по своему усмотрению, поменяй, может быть, комментарии на понятные.
Поделиться402013-02-18 18:43:53
`tsunami
прочитала, ознакомилась.
учитывая название следующего урока, было бы интересно прочитать его, а потом менять что-либо на тестовике. можно так?