Как сделать стиль для своего форума

Как сделать стиль для своего форума 360


Как сделать стиль для своего форума 877


Как сделать стиль для своего форума 523


Как сделать стиль для своего форума 876


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

Вот, собственно, и удочка! :smile:
Начинаем учиться самостоятельно превращать свой форум во что-нибудь не похожее на стандартную тему Просильвера...
И делаем из вот этого стандартного встроенного шаблона
Image

что-нибудь более жизнерадостное и наполненное красками (яркими или не очень - это уже Вам решать).

Примеры разных цветовых решений ImageImage
Первые два "дизайна" выполнены с минимальными правками. Только замена шапки, фона за форумом, фона блоков и набора иконок.

ImageImage

ImageImage


Будем считать, что Вы уже знаете,
КАК ДОБАВИТЬ ЗАДНИЙ ФОН своему форуму,
КАК ЗАМЕНИТЬ ШАПКУ ФОРУМА НА СВОЙ РИСУНОК и
КАК ЗМЕНИТЬ ФОН БЛОКОВ ФОРУМА (при условии, что Вам всё это вообще нужно).

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

Ниже я буду приводить кусочки файлов CSS (все эти файлы собраны в папке styles\prosilver\theme), отвечающих за внешний вид phpBBex. Чтобы слегка изменить цветовое решение, достаточно внести изменения в 5-6 параметров. Чтобы сделать продуманный и хорошо скомпонованный из сочетающихся цветов дизайн, придётся уделить внимание примерно 20 параметрам (и, естественно, потратить на это гораздо больше времени). Но оно того стОит, можете мне поверить. Что может быть лучше своего собственного дизайна, не похожего на другие... Это Ваше самовыражение, это визитная карточка Вашего форума, это то, что будут видеть десятки, сотни, а, может, и сотни тысяч людей. У Вас ведь большие планы? )))
Убедил? :wink:
Тогда приступаем!

Если Вы хотите видоизменить установленный по умолчанию стиль, то Вам надо будет скопировать со своего сайта папку "theme" (styles/prosilver/theme) себе на комп. В ней находятся css-файлы, некоторые из которых мы будем использовать.
После окончания всех правок, Вам надо будет заменить старые css-файлы на сервере на свои. После чего обновить темы и очистить хэш на главной странице Админки.
Если же Вы хотите использовать свой только что созданный стиль отдельно от установленного по умолчанию, то Вам надо будет скопировать со своего сайта всю папку "prosilver" (styles/prosilver) и переименовать её (например - MyStyle_01). В ней вы найдёте конфигурационный файл .cfg и три папки (в каждой из которых тоже будет свой конфигурационный файл .cfg . Так вот, в каждом из этих четырёх конфигурационных файлов вам надо будет найти три строчки:

Code: Select all name = prosilver
copyright = © phpBB Group, 2007
version = 3.0.11 и заменить в них старые данные на свои. Например:
Code: Select all name = MyStyle_01
copyright = © MyName
version = 1.0.0 и сохранить внесённые изменения.
После проведения всех правок в файлах css и их сохранения, Вы архивируете папку в формате .ZIP, заливаете её на свой сервер в папку /styles и там разархивируете. После чего из Админки форума (Админка >> Стили ) устанавливаете Ваш появившийся среди доступных новый стиль и делаете его основным.
Уфф... Вроде всё.

Теперь - Рекомендации, облегчающие жизнь в этом деле, но не являющиеся обязательными:

Перед началом экспериментов вооружимся "правильным" текстовым редактором Notepad++, в котором мы и будем открывать и сохранять css-файлы.
Для облегчения подбора цвета, порекомендую Вам воспользоваться вот этим сервисом. Поизучайте его возможности - там всё достаточно просто.
Также я постоянно пользуюсь крохотной программулькой, которая называется Pixie. Она очень облегчает жизнь любому начинающему дизайнеру-любителю.
Ну и последнее пожелание - научитесь пользоваться средствами разработки, встроенными во все современные браузеры. Это позволит Вам видеть в режиме "он-лайн", все производимые Вами изменения прямо на Вашем форуме (конечно же, виртуально). Но это очень и очень удобно. И может помочь Вам не только "в живую" посмотреть, как будет выглядеть изменяемая Вами часть оформления форума ещё до внесения правок в код, но и определять названия других нужных элементов, чтобы потом по этим названиям легко найти их в файлах.

Что нам ещё осталось принять во внимание? Наверное, только то, что во всех css-файлах используется шестизначная HTML-кодировка цветов, в которой за основу взяты 16 знаков - от 0 до 9 и первые 6 букв латинского алфавита (ЗАГЛАВНЫХ или прописных - без разницы). Но иногда, если все шесть знаков обозначения цвета являются одинаковыми (или идут попарно), то их сокращают до трёх знаков. Например обозначение белого цвета #FFFFFF Вы можете встретить в виде #FFF или #fff, а розовый цвет #DDFFAA может встретиться Вам как #DFA, #ddffaa или #dfa :wink:
Абсолютно чёрный цвет - #000000, абсолютно белый - #FFFFFF. Всё остальное - вариации этих и других 14 знаков.

Итак, из чего состоит основная часть внешнего вида стандартного стиля Prosilver в phpBBex? Давайте разбираться и творить!

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

ВАЖНО: Перед началом экспериментов, скопируйте куда-нибудь папку "theme" (styles/prosilver/theme).
Пусть будет в запасе на случай ядерной войны )) Если что, всегда сможем из неё восстановиться.

Белое "тело" форума - #wrap Image
файл - common.css
Code: Select all #wrap {
   padding: 0 20px;
   min-height: 100%;
   margin: 0 auto;
   background-color: #FFFFFF;
   box-shadow: 0 0 15px #CCCCCC;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
} , где:
background-color: #FFFFFF; / 1 - Собственно само белое «тело» форума/
padding: 0px 20px; / 2 - ширина правой и левой окантовки /
box-shadow: 0px 0px 15px #CCCCCC; / 3 - Серый цвет и толщина тени справа и слева от «тела» форума/ Окошко поиска - #search-box Image
файл - colours.css
Code: Select all #search-box {
   color: #FFFFFF;
}

#search-box #keywords {
   background-color: #FFF;
}

#search-box input {
   border-color: #0075B0;
}

,где:
#search-box {
color: #FFFFFF; / - Цвет поля блока поиска/

#search-box input {
border-color: #0075B0; / - цвет окантовки поля Поиска/

Задний фон, Шапка и текст на "теле" форума - body ImageImage
Файл - common.css
Code: Select all body {
   background-image:url("{T_THEME_PATH}/images/fondo.jpg");
   background-attachment:fixed;   
   / Text-Sizing with ems: http://www.clagnut.com/blog/348/ /
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #536482;
   background-color: #EEEEE7;
   /font-size: 62.5%;          This sets the default font size to be equivalent to 10px /
   font-size: 10px;
   height: 100%; , где:
background-image:url("{T_THEME_PATH}/images/fondo.jpg"); /фон за форумом (если Вы его поставили) /
background-attachment:fixed; /фиксация фона за форумом (если Вы его поставили) /
color: #536482; /цвет текста на «теле» форума/ Главная панель меню - #main-menu Image
файл mainmenu.css
Code: Select all / главное меню /
#main-menu
{
   height:25px;
   border: 1px solid #ccc;
   background-color: #f0f0f0;
   font-weight: bold;
} , где:
height:25px; - / (1) высота панельки главного меню/
border: 1px solid #ccc; - / (2) серая окантовка панельки главного меню /
background-color: #F0F0F0; - / (3) цвет самой панельки главного меню/
font-weight: bold; - / (4) выбран жирный шрифт / Code: Select all / пункты меню /
#main-menu li > a
{
   background: none;
   border-color: transparent;
   text-decoration:none;
   color:#000;
} , где:
color:#000; - / (4) Черный цвет шрифта пунктов Главного меню/ Главная панель меню - #main-menu Image
файл - mainmenu.css
Code: Select all / выделенные пункты меню /
#main-menu li:hover > a
{
   border-color: #4282b5;      /цвет окантовки при наведении мышки/
   background-color: #F7F7FF;      /цвет поля при наведении мышки/
   text-decoration:none;
   color: #000;  /Черный цвет шрифта пунктов Главного меню при наведении мышки/
}
Code: Select all #main-menu li
{
   border-left: 1px solid #ffffff;       /Левый кант (белый) /
   border-right: 1px solid #d8d8d8;      /Правый кант (серый) /
} Названия тем - a.topictitle Image
файл - colours.css
Code: Select all a.topictitle {
   color: #105289;
}

/ a.topictitle:visited { color: #368AD2; } /

a.topictitle:hover {
   color: #BC2A4D;
}

, где:
color: #105289; / (1) Синий цвет шрифта в названиях активных тем/
color: #BC2A4D / (2) Красный цвет шрифта в названиях активных тем при наведении мышки/ Code: Select all ul.topiclist li {
   color: #4C5D77;
} , где:
color: #4C5D77; / (3) цвет шрифта даты и времени последнего поста /
Этот же мелкий шрифт используется почти по всему форуму
Для наглядности я поменял цвет этого шрифта на ярко-фиолетовый:
Image Ссылки на форумы - a.link Image
файл - colours.css
Code: Select all /     
--------------------------------------------------------------
Colours and backgrounds for links.css
-------------------------------------------------------------- /

a:link   { color: #105289; }
a:visited   { color: #105289; }
a:hover   { color: #D31141; }
a:active   { color: #368AD2; }

, где:

a:link { color: #105289; } / (1) Синий цвет шрифта ссылки на форумы/
a:visited { color: #105289; } / (1) Синий цвет шрифта ссылки на посещённые форумы/
a:hover { color: #D31141; } / (2) Красный цвет шрифта ссылки на форумы при наведении мышки/
a:active { color: #368AD2; }[/code]

Названия форумов в списке форумов - a.forumtitle Image
файл - colours.css
Code: Select all / Links for forum/topic lists /
a.forumtitle {
   color: #105289;
}

/ a.forumtitle:visited { color: #105289; } /

a.forumtitle:hover {
   color: #BC2A4D;
}

a.forumtitle:active {
   color: #105289;
}

, где:
a.forumtitle {
color: #105289; / (1) Синий цвет шрифта ссылки на форумы в списке форумов/
a.forumtitle:hover {
color: #BC2A4D; / (2) Красный цвет шрифта ссылки на форумы в списке форумов при наведении/
a.forumtitle:active {
color: #105289; / (1) Синий цвет шрифта ссылки на активные форумы в списке форумов/ СТАТИСТИКА и две полоски Image
файл - colours.css
Code: Select all h3 {
   border-bottom-color: #CCCCCC;
   color: #115098;
} , где:
border-bottom-color: #CCCCCC; /серый цвет двух полосок /
color: #115098; /Синий цвет слова СТАТИСТИКА/ Нижняя панель - .navbar Image
файл - colours.css
Code: Select all .navbar {
   background-color: #cadceb;
} , где:
background-color: #cadceb; /Цвет Нижней навигационной панельки/ Разделительная линия - li.row ImageImage
файл - colours.css
Code: Select all li.row {
   border-top-color:  #FFFFFF;
   border-bottom-color: #00608F;
} , где:
border-top-color: #FFFFFF; /Верхняя (белая) часть разделительной линии/
border-bottom-color: #00608F; /Нижняя (синяя) часть разделительной линии/ Фоновая "зебра" - .bg1 и .bg2 Image
файл - colours.css
Code: Select all .bg1   { background-color: #ECF3F7; }
.bg2   { background-color: #e1ebf2;  }
.bg3   { background-color: #cadceb; } , где:
.bg1 { background-color: #ECF3F7; } /Светлая часть «зебры»/
.bg2 { background-color: #e1ebf2; } /Чуть более тёмная часть «зебры» / Фон списка форумов - ul.forums Image
файл - colours.css
Code: Select all ul.forums {
   background-color: #eef5f9;
   / background-image: url("{T_THEME_PATH}/images/gradient.gif"); /
} , где:
background-color: #eef5f9; - /Фон списка форумов/ Цвет надписи "по активности..." - h3 span.extra Image
файл - common.css
Code: Select all h3 span.extra {
   color: #ccc;
   font-size: 0.9em;
   text-transform: lowercase;
   margin-top: 2px;
   float: right; , где:
color: #ccc; - /Цвет надписи «(по активности за 10 минут)» /
Собственно, освоив только эти нехитрые "премудрости", Вы сможете без особых проблем менять основную часть внешнего вида Вашего форума.
И примите во внимание, что этот обзор - весьма поверхностный.
Более глубокие изменения потребуют от Вас не только умения менять цвета и подменять одни файлы другими, но и знания hlml, css и php.

Как сделать стиль для своего форума 3


Как сделать стиль для своего форума 936


Как сделать стиль для своего форума 446


Как сделать стиль для своего форума 839


Как сделать стиль для своего форума 22


Как сделать стиль для своего форума 505


Как сделать стиль для своего форума 50


Как сделать стиль для своего форума 672


Как сделать стиль для своего форума 352


Как сделать стиль для своего форума 783


Как сделать стиль для своего форума 156


Как сделать стиль для своего форума 980


Как сделать стиль для своего форума 895


Как сделать стиль для своего форума 766


Как сделать стиль для своего форума 736



Похожие новости:

  • Жар птица своими руками с бумагой
  • Как сделать чтобы тебя пожалели
  • Как сделать обтачку для горловины платья
  • Подарок на день в влюбленных своими руками
  • Как сделать флешку с erd commander