InsiDEUS

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

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


Вы здесь » InsiDEUS » Глава III. Вдохновение и мастерство » Веб-дизайн и сайтостроение


Веб-дизайн и сайтостроение

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

1

Учебники, размещённые в Сети.

1. "Htmlbook.ru" - очень полезный сайт, содержит информацию о всех видах тегов, а также статьи и учебники.
2. "Ruled.ru" - всё о CSS с иллюстрированными примерами.
3. "Art-Ro: мастер-класс по HTML".
4. "Ruseller.com". Уроки по созданию сайтов на html, dhtml, примочки на css, полезные советы и т.п.
5. HTML-manual.ru - учебник по html.

Теги: html,css,обучение,уроки,сделать,сайт

0

2

Онлайн-генераторы и схожие с ними штучки

1. Генератор стилей [для форумов на базе mybb, spybb, 0pk, ibord и т.п.]. Располагается по адресу http://mybb.ru/generator/ и максимально удобен в использовании. Позволяет генерировать скины для форумов по нескольким параметрам: "случайный стиль", "генерация на основе выбранного цвета". Кроме того, есть вкладки, с помощью которых можно оформить ссылки, цвет текста форума и т.п. Однако, с фоновыми изображениями и т.п. вам придётся разбираться с помощью скриптов и кодов, которые предоставляет форум технической поддержки - http://forum.mybb.ru [+ http://forums.0pk.ru]

2. Онлайн-словари и переводчики на translito.com. С одной стороны, довольно удобный, с другой - несколько заедающий сайт. Есть, в частности, русско-латинский словарь, причём работающий как в одном, так и в другом направлении. Выбор языков и направления перевода есть на каждой странице.

3. Орфограф - настоящее спасение для тех, кому наш великий и могучий русский язык даётся с трудом. Обитает эта штучка по адресу http://www.artlebedev.ru/tools/orfograf/.

4. Сайт, подсчитывающий ТИЦ и PR сайта или форума. Располагается по адресу http://stakhov.ru/webmaster/. Будет очень полезен любому вебмастеру.

0

3

Руководство по дизайну [сервис PunBB] © Чандра.

    Автор некогда обитал здесь.

Приветствую всех.

Давайте повнимательнее рассмотрим опцию свой стиль и поймем с чем ее едят.
Сразу скажу многоуважаемым критикам, что я не профессионал, но для абсолютного новичка данное небольшое руководство очень может пригодится.

Теперь начнем.

Итак, сначала вы топаете на Единую Техподдрежку, где в срочном порядке зазубриваете вот этот пост - http://forum.mybb.ru/viewtopic.php?pid=3510#p3510, на касаясь, притом, всех остальных.
Теперь мы берем css-код, который у нас состоит из 2 частей. Одна - большая и страшная, вторая по меньше и менее ужасает.
Первая часть, она же style.css отвечает за структуру, границы, размеры, формы, положение текста, его начертание, вид, семейство шрифтов и прочее таблицы вашего форума. Вторая - style_cs.css - за цветовое решение.

Убедительная просьба, товарищи, не брать код из генератора. Почему? Потому что замучаетесь вы с ним невероятно, там 15% элементов не прописаны вообще.
Тогда возникает вопрос - где взять css-код. Проще, конечно, его составить самому, однако, так как MyBB размещает на форуме все больше и больше рекламы, то не будет особо аморально совершить маленькое клептомантсво, так как, если вы помните, котролируемая клептомания - занятие весьма выгодное.
Итак, вы идете в каталог стилей MyBB (http://mybb.flazy.ru/) и выбираете стандартный стиль, который вам нравится. Выбрали?
Теперь на вашем форуме выбираете этот стиль и дописываете позади ссылки вашего форума в адресной строке браузера: style/название_стиля/название_стиля.css, чтоб получить код структуры, и style/название_стиля/название_стиля_cs.css, чтоб получить код цветов.
Копируйте их на ваш компьютер.
Теперь заходите в опцию "Свой стиль" вашего форума и вставляйте коды - код структуры в верхнее окно, код цветов - в нижнее. Ставите галочку на использовать свой стиль и сохраняете.

Форум потерял все цвета? Не переживайте, это ненадолго.
Теперь приступим к редактированию кода.
Это обзорная экскурсия, поэтому я не буду долго останавливатся на тех элементах, для изменения которых нужен опыт и сноровка.
Лучше будет, если вы произведя каждое конкретное действие будете сохранять изменения, так как это позволит вам увидеть небольшие недочеты сразу после того, как они появятся.

Итак, первым дело пропишите вот тут:

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */
  @import url(название_вашего стиля_cs.css);

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */
  @import url(style_cs.css);

То есть замените название вашего стиля на style. так форум поймет, что цвета ему нужно брать из файла cs_css, а не откуда-то с другого места.
Теперь сохраните изменения.

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

Теперь возьмем код структуры таблиц вашего форума.
После изменения в A 1.1 лучше ничего пока что не трогайте в следующих пунктах. Потом, поднабравшись опыта, вы сможете это поменять, если пожелаете. Там речь в основном идет о отступе фонового рисунка, границ рисунков и т.д.

Далее. Вот этот кусочек кода: 

/* A3 Text setup
-------------------------------------------------------------*/

/* A3.1 */
body {
  font-size: 100.01%;
  }

/* A3.2 */
.punbb {
  font: normal 68.75% verdana, arial, helvetica, sans-serif;
  }

/* 3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
  font: 1em verdana, arial, helvetica, sans-serif
  }

/* A3.6 */
.punbb pre {
  font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

Регулирует размер шрифта и шрифты вашего форума. Если хотите оформить ваш форум в одном шрифте - поменяйте все семейства шрифтов тут на избранное вами. Но лично я не рекомендую этого делать, так как много шрифтов лучше, чем один.

Далее не трогайте следующие пункты и переходите вот к этому:

/* A5 Basic page layout and borders
-------------------------------------------------------------*/

/* A5.1 */
#pun {
  margin: 0px auto auto auto;
  width : 90%;
}

Этот пункт задает положение страницы вашего форума. То есть - как (какой будет отступ от начала страницы, как она будет размещатся - справа или слева, а может посередине (margin: 0px auto auto auto;)) она будет отображатся, и какой она будет ширины (width : 90%; - можно задавать в процентах и в пикселях. В процентах надежнее для всех разрешений, но в пикселях удобнее для установки шапки).

/* A5.3 */
#pun-redirect, #pun-maint {
  margin: 50px 20% 12px 20%;
  width: auto;
  float: none;
  }

Этот кусочек кода регулирует положение страницы переадресации.
То есть -  margin: 50px 20% 12px 20%; то, на каком расстоянии от границ монитора она будет отображаться.
width: auto; - какой будет ширины

/* A5.9 */
.punbb .container {
  border-style: solid;
  border-width: 1px;
  }

Это излюбленное место всех администраторов форумов по некам - обводка таблицы форума. Обычно, увы, еще и розовым.
Тут все очевидно - border-style - как именно вы желаете, чтоб отображалась граница основной таблицы форума,
border-width - какой ширины эта несчастная границы должна быть.

/* 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;
  }

Этот параметр регулирует то же самое, только относительно границ категорий, полей профиля и.т.д.

Далее обращаете ваше внимание на вот этот параметр:

/* B1.2 */
.punbb .post-sig dt {
  display: block;
  border-top: 1px solid #888;
  width: 250px;
  margin: 5px 0;
  }

Это настройки отображение границы между постами и подписями ваших пользователей. Упаси вас боги сделать их одного цвета с фоновой заливкой поста - будет жуткая неразбериха. Делайте их контрастным цветом.
border-top: 1px solid #888; - параметр, отвечающих за то, как будет отображаться эта граница и какого она будет цвета.
width: 250px; - ширина этой линии-границы. Не рекомендую делать больше 500px, будет на редкость фигово выглядеть.
margin: 5px 0; - настраивает величину отступа

Далее просто проматываете ваш код, ничего не изменяя, пока не натыкаетесь вот на это. Если вам не нравится ширина граф таблицы форума "Форум", "Тем", "Сообщений", "Последнее сообщение", то используя эти параметры вы можете их изменить.
Если вы задавали ширину форума в процентах, то лучше не прописывайте ширину граф в пикселях, может выйти полная мура. (У меня было, хотя это только единичный случай. Но на MyBB бывает всякое, сами знаете).
Если форум у вас в пикселях - задавайте как хотите, но учитывайте, что ширина вашего форума - это 100%.

/* C2.1 */
.punbb .main .tcl {
  overflow: hidden;
  text-align: left;
  width: 50%;
  }

Первая графа - "Форум".
text-align: left; - отображение текста описания форума.
width: 50%; - ширина данной графы.

/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
  text-align: center;
  width: 10%;
  }

Вторая и третья графы - "Тем и "Сообщений"
text-align:center; - отображение цифр.
width: 10%; - ширина данной графы.

/* C2.3 */
.punbb .main .tcr {
  overflow: hidden;
  text-align: left;
  width: 30%;
  }

Графа "Последнее сообщение". Не задавайте ей слишком большую ширину, это не очень красиво выглядит. Пройдите по другим форумам - графа "Форум" должна быть самой широкой, это общепринятая практика, и, она наиболее привычна, если вы понимаете о чем я.
Сайты принято затачивать под 1024*768, в крайнем случае 1280*1024, графа "Форум" - самая широкая - это общее правило.
text-align: left; - отображение текста описания форума.
width: 30%; - ширина данной графы.

Находите вот это:

/* C2.12 */

.punbb .main th {

  padding: 7px 1em 7px 1em;

  border-left: 1px solid #цвет;

  border-bottom: 2px solid #цвет;

  border-top: 1px solid #цвет;

  }

Этот пункт определяет цвет и стиль обводки вашего punbb .main th, а говоря обычным языком - той графы, где располагаются слова - "Форум", "Тем", "Сообщений", "Последнее сообщение".

Далее пропускаете несколько строк и видите вот такие строки. Тут вы сможете настроить отображения иконок тем (Есть\нет новых сообщений, закрыто, важно, переадресация)

/* C2.14 */
.punbb td div.tclcon {
margin-left: 45px;
}

Этот параметр регулирует отступ от иконки. То есть то расстояние, в пикселях, которое будет пропущено между иконкой и тестом описания форума. Не ставьте этот параметр в процентах.
Отступ должен быть не меньшим, чем длина вашей иконки, а лучше - чуть большим.

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

Расположение, ширина и высота ваших иконок. Если вы только собираете их делать - пока что оставьте это поле пустым, заполните позже. Заполнять его надо обязательно, скрипты в ХТМЛ-верх, низ и еще куда вас не спасут.

Есть категория дизайнеров, которые мнят себя великими, однако допускают ламерские ошибки. Но вы, мой дорогой читатель, ведь не такой? Таких псевдодизайнеров легко вычислить по вот этому моменту, которого они не знают, и никогда не изменяют. Смешно смотреть, как на черном фоне ярко видна белая, или зеленая палочка, и в голове вертится только одно слово. Догадайтесь сами, какое.
Этот параметр меняет границу между ником пользователя и датой и временем отправки сообщения.
Что бы вы, мой уважаемый читатель, выглядели умным администратором, обязательно заменить вот тут одно значение:

/* C3.3 */

.punbb .post h3 span {

  border-left: 1px solid #000;

  padding: 0.5em 1em;

  display: block;

  margin-left: 19em;

  }

border-left: 1px solid #000; - вот тут поставьте основной цвет границ таблицы вашего форума - и будет вам и респект, и уважуха.

Далее просто проматываете ваш код вот до этого места:
/* D1 Logo and description
-------------------------------------------------------------*/

Находите вот этот момент. Видите его? Тут нужно вставить высоту вашего логотипа.

/* D1.2 */
#pun-title h1 {
  display : block;
  height : 105px;
  padding: 2em 1em 0 1em;
  }

Вот это значение - height : 105px; заменяете на значение высоты вашего лого.

#pun-title TABLE {
        border: none;
        height: 105px;
        width: 100%;
        border-top: solid 1px #636496
}

Здесь вы можете настроить размер и цвет графы, где будет помещатся ваш логотип.
height: 105px; - высота логотипа - лучше, если будет совпадать  с той, которая в D1.2
width: 100%; - ширина графы. Менять не стоит.
border-top: solid 1px #636496 - обводка логотипа сверху. Цвет лучше брать либо с основной таблицы форума, либо выбирать основной цвет фона. Избегайте контрастных цветов.

#pun-title TD.title-logo-tdr {
        border: none;
        width: 468px;
}

Рекламный баннер, который скрывать нельзя, так как господин Ананьев и его команда буду жутко недовольны. Тут я советую поступить как в Mybb_Cards. Вот кодик для такого перемещения баннера:

#pun-title TD.title-logo-tdr {
  border: none;
  width: 468px;
  vertical-align: top;
  padding-top: 2px;
  position: absolute;
  left: 31%;
  top: 0;
}

На забудьте использовав этот  кодик, вернутся назад и прописать вот тут:

/* A5.1 */
#pun {
  margin: 0px auto auto auto;
  width : 90%;
}

Вот тут:
margin: 64px auto auto auto;
Высота баннера, что тут поделаешь, бесплатный форум.

В принципе, далее можно не трогать, особенно если вы незначительно переделываете форум. Если вы его переделываете значительно, то ищите вот эти моменты:

/* D3.1 */

#pun-navlinks {

  border: 1px solid transparent;

  margin: 0;

  margin-bottom: 10px;

}

И вот тут:  border: 1px solid #цвет; Ставите либо основной цвет границ вашего форума, либо параметр прозрачности.

Далее идете вот сюда:

/* D4.2 */

#pun-ulinks .container {

  padding: 0.7em 1em;

   text-align: center;

   border: solid 1px transparent;

  }

и делаете то же самое.

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

Далее ничего не трогаете и сохраняете все изменения.
Если все вышло так, как вы хотели, то можете открыть Фотошоп, сходить на кухню за чашечкой чая и приступить ко второй части.

0

4

Итак, теперь, открыв фотошоп, зайдя на сайт Ленаголд, и приготовив все ваши папки с графикой мы пускаемся в плаванье по второй части нашего кода, то есть начинаем задавать цвета и фоны.

Вы видите это:

html, body{
  background-color: #000;
  color: #fff
}

Что это? Этот параметр задает фоновый рисунок вашего форума.
В данном случае фоновый рисунок задан просто как заливка цветом. если вы хотите поставить что-то более интересное - используйте вот такой код:

body {

        background: url(ссылка на ваш фон) #цвет repeat fixed !important;

}

Цвет ставите тот, который вам будет приятно видеть на странице переадресации.

Далее:

#pun-title TABLE {
        background: url(ссылка на шапку вашего форума (или лого)) #цвет заливки no-repeat top center;
}

Заливку каждого элемента лучше делать, так как многие отключают отображение графики и ваш супер-красивый фон, шапку или еще что-то просто не будет видно.
Если вы хотите, чтоб под таблицей форума был отдельный цвет или фон, отличный от бекграунда, то обязательно уделите внимание этому моменту:

#pun {

        background: url(ссылка на фон) #цвет;

}

Если не хотите заливать - просто сотрите все параметры отсюда, если они тут есть, пропишите background:none и оставьте этот кусочек кода в покое.

Далее вы видите параметр, отвечающий за заливку всех основных элементов вашего фора. Тут и фон поста, и фон строки приветствия, и фон граф "Форум" и "Последнее сообщение" и многое, много другое.

.punbb .main .container,
.punbb .section .container,
.punbb .section .formal .container,
.punbb .formal fieldset,
#viewprofile li strong, #viewprofile li div,
#setmods dd,
.punbb .post-body,
.post-box,
.punbb .post-links,
.punbb-admin #pun-admain .adcontainer,
.punbb .info-box, .punbb #pun-main .info-box .legend {background: url(ссылка на фон) #цвет repeat;
  color: #000;
  }

Этот момент лучше все же заливать фоновым цветом. Почему? Потому что резкие картники, которые обычно используют начинающие админы - режут глаз и вызывают злость. Если вы все же решились использовать фоновый рисунок, то обязательно проверьте его на соответствие по цветовому решению вашего бекграунду  и если он не подходит, то затонируйте его в фотошопе.
Старайтесь не употреблять слишком много графики, это раздражает траффиковых пользователей и порой выглядит аляписто.

Этот параметр:

/* CS1.2 */
#pun-ulinks .container {
  background: url(код картинки) #000 repeat;
  color: #000;
}

Изменит заливку фона пользовательских ссылок форума. Можно вставлять туда как картинку, так и фоновый цвет.
Вот этот параметр color: #000; отвечает за то, каким цветом будут написаны эти ссылки в спокойном состоянии.

Эти параметры

.punbb .post .container,
.punbb .post h3 {
background: url(ссылка на фон) #цвет repeat;
  color: #000;
}

.punbb .post h3 span {
background: url(ссылка на фон) #цвет repeat;
  color: #000;
  }

определяют заливку графы с именем пользователя, информацией о нем, строки с номером и временем отправки поста. Можно его заливать как фоновым рисунком, так и цветом.
color: #000; - тут прописываете цвет текста.

Чтобы окрасить колонки Тем и Сообщений нужно прописать ссылку на фон, или цвет заливки вот в этом месте:

.punbb td.tc2, .punbb td.tc3 {
  background: #цвет заливки;
  color: #000;
}

Если хотите использовать фон - выделите backgroung: и вставьте на его место - background: url(ссылка на фон)
color: #000; - тут прописываете цвет текста.

Для заливки фоном категорий используйте вот этот отрезок кода:

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background: url(ссылка на фон) #цвет заливки repeat-x;
  color: #000;
  text-align: center;
  font-size: 1.2em;
  font-family: Arbat;
  font-weight: normal;
  letter-spacing: 1px;
  }

color: #000; - это цвет текста.
text-align: center; - расположение текста названия категории
font-size: 1.2em;
  font-family: Arbat;
  font-weight: normal; - это размеры шрифта, семейство шрифтов и способ начертания.

Далее

/* CS1.4 */
.punbb .modmenu .container {
  background: url(ссылка на фон) #цвет заливки;
  color: #000;
}

Этот параметр задает фон заливки меню модератора и поля активных в данной теме.
color: #000; - это цвет текста, который будет использоватся в меню модератора, а также при отображении пользователей, которые просматривают данную тему.

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background: url(ссылка на фон) #фоновый цвет repeat-x;
  color: #fff;
  }

Этот параметр определяет как будут залиты категории в профиле, обычно его можно заливать каким-то фоновом рисунком, будет достаточно забавно смотреться.
color: #fff; - этот цвет текста, которым это будет написано. Если вы желаете изменить шрифт, то добавляйте
text-align: center; - расположение текста названия категории
font-size: 1.2em;
  font-family: Arbat;
  font-weight: normal; - это размеры шрифта, семейство шрифтов и способ начертания.

Просматривая следующий отрезок, мы видим, что этот кусочек кода

.punbb .post h3 strong {
  font-size: 0.9em;
  color: #000;
}

Определяет то, каким размером будет написано время и дату написания поста, а также его номер.
color: #000; - это цвет текста, который будет использоваться

Следующие два параметра определяют заливку цитаты и кода, а также формы быстрого и расширенного ответа. Принцип тот же, что и в предыдущих моментах, однако особое внимание нужно обратить на цвет теста, он должен быть читабельным и приятным.

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background: url(ссылка на фон) #цвет фоновой заливки;
  color: #000;
  border: 1px solid #цвет границы;
}

.punbb textarea, .punbb select, .punbb input {
  background: url(ссылка на фон) #цвет фоновой заливки;
  color: #000;
  border: 1px solid #цвет границы;
}

color: #000; - цвет текста кода, цитаты и в форме быстрого ответа.

/* CS1.8 */
#pun-navlinks .container {
  background: url(ссылка на фон) repeat;
  color: #000;
}

Этот параметр изменяет цвет фона под ссылками навигации.
Тем, кто желает, чтоб "при нажатии лапка выпускала когти" тут нужно прописать фоновый рисунок лапки в спокойном состоянии, то есть "без когтей".
color: #000; - цвет текста ссылок навигации.

.punbb th {
        color: #fff;
        background: url(ссылка на фон) #цвет фоновой заливки  repeat;
}

Этот параметр определяет как будут залита графа "Форум, Тем, Сообщений, Последнее сообщение", обычно его можно заливать каким-то фоновом рисунком, будет достаточно забавно смотреся.
color: #fff; - этот цвет текста, которым это будет написано. Если вы желаете изменить шрифт, то добавляйте
text-align: center; - расположение текста "форум, тем, сообщений, последнее сообщение"
font-size: 1.2em;
  font-family: Arbat;
  font-weight: normal; - это размеры шрифта, семейство шрифтов и способ начертания.

/* CS2 Border colours
-------------------------------------------------------------*/
#pun-title, #pun-navlinks {
        border-color: #цвет границы;
}

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3 {
  border-color: #цвет границы
  }

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: #цвет границы;
  }

/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: #цвет границы;
  }

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: #цвет границы;
  }

/* CS2.5 */
.punbb th {
  border-color: #цвет границы;
  }

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: #цвет границы;
  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: #цвет границы
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: #цвет границы
  }

.punbb .divider {
  border-color: #цвет границы
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid #цвет границы;
  }

li.pa-online {
  border-left-color: #цвет прямоугольничка слева от надписи "Активен";
  }

Эти параметры изменяют цвет и начертание границы. Границы можно заливать одним цветом, в принципе, это достаточно просто. Если хотите, можете поинспериментрировать с схожими цветами.

/* CS3 Links

-------------------------------------------------------------*/

/* 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: #000;
  }

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #000;
  }

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

/* CS3.2 */
.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: #000;
  }

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

/* CS3.3 */
#pun-navlinks a {
  color: #000;
  text-decoration: none
  }

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #000;
  text-decoration: underline
  }

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #000;
  color: #000;
  }

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

.post h3 span a:link, .post h3 span a:visited {
  font-weight: normal;
  font-size: 0.9em;
  text-decoration: none;
}

Цвета всех ссылок на форуме.
В основном заливаются одним цветом, однако, если вы хотите, чтоб "при нажатии лапка выпускала когти", то вам следует обратить внимание на вот эти пункты:

#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #000;
  text-decoration: underline;
  background: url("ссылка на фон") repeat-x;
  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background: url("ссылка на фон") repeat-x;
  color: #000;
  }

И проставить тут необходимый вам фон.

Едем далее - установка иконок

/* CS4 Post status icons
-------------------------------------------------------------*/
div.icon {
       background: url(Иконка старой темы) no-repeat;
}

Иконка нет новых сообщений

tr.inew div.icon {
        background: url(новой темы) no-repeat;
}

Иконка есть новые сообщения

tr.iclosed div.icon {
        background: url(закрыто) no-repeat;
}

Иконка закрытой темы

tr.iredirect div.icon {
        background: url(Переадресация) no-repeat;
}

Иконка форума с переадресацией

tr.isticky div.icon {
        background: url(важно) no-repeat;
}

Иконка важной темы.
Просто подставляете ссылки на ваши изображения и все.

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

.punbb .main h2 span, #pun-stats h2 span {
        background: none;
    padding-left: 10px;
    padding-top: 9px;
    padding-bottom: 8px;
    margin-left: -12px;
}

background: none; - в данном случае этот момент отключен, но если он вам нужен - просто поставьте ссылку на ваш фон.
padding-left: 10px;
padding-top: 9px;
padding-bottom: 8px;
margin-left: -12px; - расположение данного рисунка. Точно сказать - какое значение нужно - практически нереально, так что придется экспериментировать.

Также надо обратить внимание на значки около ссылки на последнее сообщение на главной странице форума. Лично я их убираю, они мне мешают, но есть те, кому они нравятся. Настроить данное изображение вы можете вот тут:

td.tcr a{
        background: transparent url(ссылка на картинку) no-repeat 0px 0px;
        padding-left: 16px;
        padding-bottom: 4px;
        pading-top: 7px;
}

Два следующих параметра я рекомендую заливать одним цветом, если у вас в качестве фона для статистики форума используется цвет. Если же у вас изображение, то задайте background: none для первого и работайте со вторым.

#pun-stats ul.container {
color: #000000;
background-color: #D3A45C;
}

#pun-crumbs2 .container, #pun-about .container {
color: #000000;
background-color: #D3A45C;
}

Вот это иконка статистики.

#pun-stats div.statscon {

color: #000000;

background url(ссылка на иконку) #цвет no-repeat 10px 10px;;
padding-left: 66px;
       }

10px 10px; - эти параметры задают отступ слева и сверху
padding-left: 66px; - а вот этот - справа. Его необходимо расчитывать по принципу - ширина иконки + как минимум 10 пискселей до начала строки "Активны".

0


Вы здесь » InsiDEUS » Глава III. Вдохновение и мастерство » Веб-дизайн и сайтостроение


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