Автор - Adel Kаminski
При перепечатке всего урока или его части активная видимая ссылка на фриарт https://photoshop.bestbb.ru обязательна.
Это мой первый урок по css, поэтому заранее извиняюсь за ошибки, неточности и неясности.
В этом уроке я научу вас собирать свой стиль mybb. Я дам только основы, не рассказывая, как создавать графику, как делать отдельные навороты - это не цель моего урока и при желании вы самостоятельно найдете интересующую вас информацию в интернете. Например, советую всем пользоваться справочником http://htmlbook.ru/css, где дается подробное объяснение всех css-свойств.
Итак, в этом уроке я расскажу принцип сборки таких дизайнов:
Что у них общего? У таких дизайнов нестандартная шапка, выходящая за пределы основной таблицы форума, а также есть низ. Ну и плюс таким способом проще всего собирать дизайны с рамками.
Начинать создавать дизайн я рекомендую с макета. Создаете в фотошопе документ 1600х1000, при помощи инструмента прямоугольник ("U") делаете по центру основное тело форума и делаете набросок того, как должен выглядеть форум. Помните, что ваш макет должен легко делиться на три части - шапку, фон и низ:
Если рассмотреть на конкретном примере, то вот:
Правда, в моем примере фон сделан заливкой - так при сборке не возникнет проблем со стыками. А если вы задумали фон картинкой, то нужно либо делать бесшовник высотой с саму шапку, либо шапку и низ обрабатывать ластиком по нижнему и верхнему краям соответственно, убирая стык, и сохранять в png формате.
Итак, предположим, вы уже сделали это, разрезали ваш макет с помощью кропа на три части и получили шапку, фон и низ, а также сделали иконки форума (старые сообщения, новые сообщения, закрытая тема, важная тема - итого 4 штуки) и картинки категории. Начинаем сборку.
Создаем тестовый форум на сервисе mybb, на нем мы будем ставить все наши эксперименты. Только когда вас устроит результат, будете переносить готовый стиль на ваш основной форум.
Заходим Администрирование>>Свой стиль. Ставим галочку на ДА в пункте "Хотите ли Вы использовать собственный стиль оформления?" и сохраняем. Начинаем работать с чистым кодом стиля.