Начало работы
В CSS работа происходит непосредственно с элементами, которые мы хотим изменить, задаем им дополнительные свойства и значения. Оформление на нашем сайте ограничено только уже готовым количеством элементов, но даже так, если наловчиться, возможно обойти эти рамки.
Для начала работы вам необходимо найти эти самые элементы и сделать это довольно просто. Однако, стоит упомянуть, что в конце гайда будет приложен файл с кодами, и при желании вы можете перейти сразу к пункту "Задаём свойства".
Функция для просмотра кода присутствует в каждом браузере, и для её использования достаточно выделить нужный нам текст курсором, нажать по нему ПКМ и выбрать в списке “Просмотреть код элемента”.
Важно: Надпись, вид и расположение панели может варьироваться в зависимости от браузера.
Заранее выделив элемент, нас сразу перенаправит на нужный код, отвечающий за него. Однако, некоторые элементы не получится выделить таким способом, поэтому искать их мы будем по обратной схеме. На скриншоте справа вы можете увидеть, что меню разделено на две большие панели. При наводке курсором на строки верхней панели вы сможете увидеть, как какие-то из частей страницы подсвечиваются. В примере сейчас выделен заголовок.
В нижней панели находятся названия определённых элементов. Если в верхней мы зачастую будем находить названия, отвечающие за целые блоки, то внизу мы увидим составляющие этих блоков. При необходимости, вы даже можете вносить изменения в эту панель, наглядно увидев изменения, но для сохранения прогресса вам всё же придётся скопировать готовый код и вставить его в графу “Пользовательский CSS” в редакторе страницы.
Задаём свойства
Вы нашли элемент и хотите изменить его. Для этого потребуется либо задать ему новое свойство, либо изменить уже готовые значения (Проще всего это сделать прямо в панели). Для примера возьмём всё тот же заголовок. Как мы можем понять по скриншоту, за него отвечает .p-title-value
Вписываем .p-title-value в графу “Пользовательский CSS”, обязательно ставим точку в начале если её нет, и используем фигурные скобки для открытия и закрытия кода. Не забываем после свойства ставить точку с запятой. Для поиска возможных свойств вы можете воспользоваться справочником.
Изменим заголовку цвет на оранжевый, увеличим в размерах и отцентрируем от левого края, по итогу получив такой код.
.p-title-value {
color: #FFA600;
font-size: 30px;
margin-left: 40%;
}
Пока ничего непонятно, поэтому разберём его. Мы внесли три разных свойства и задали им значение.
Color - цвет текста.
Для изменения цветов рекомендуем использовать один из способов ниже:
1. Наименование цвета.
orange;
white;
blue;
2. По шестнадцатеричному коду цвета.
#FFA600;
#FFFFFF;
#0000FF;
3. В модели RGBA, где последняя цифра - это степень прозрачности (1 = 100% > 0.5 = 50%)
rgba(255, 165, 0, 1);
rgba(255, 255, 255, 1);
rgba(0, 0, 255, 1);
Font-size - размер текста
Margin-left - отступ от левой части к правой
Здесь в одном случае используется px (Расш. pixel) и % в другом. Разница между ними в том, что настройка в пикселях позволяет более точно настроить нужное нам, и как никак лучше подходит к тексту, когда как процентное соотношение более быстрое и удобное в этом плане. Существуют и другие возможные значения, но ими пользуются куда реже.
Результат
Разбираем сайт
Шрифты
Если вы хотите изменить шрифт на любой другой, то понадобится использовать либо шрифты из числа предложенных, либо загрузить их самостоятельно. Для этого в пользовательское css нужно вставить следующее:
Разбираем сайт
Шрифты
@import url('-'); /* вместо тире вставляем ссылку на шрифт */
html {
font-family: '-', serif; /* вместо тире прописываем название шрифта */
}
Для поиска шрифта рекомендуем использовать сервис.
Здесь вы сразу сможете подобрать нужный шрифт и получить на него ссылку для импорта и полную строку font-family.
После добавления вышепредставленного кода на странице сменится шрифт, но скорее всего шрифт самого наполнения вашей анкеты/квенты и др. останется прежним. Для того, чтоб изменить шрифт и в самом наполнении анкеты, вставьте следующий код:
.message-body {
font-family: '-'; /* вместо тире вставьте название шрифта, которые вы указали выше */
}
Сохранив страницу с этими двумя кодами вы полностью смените шрифт.
Основной лист
Общая информация
В начале создания листа персонажа вы заполняете базовую информацию о персонаже. Если же вы хотите скрыть её и написать то же самое ниже, к примеру, чтобы на первом месте была картинка персонажа, то подойдёт следующий код.
.message-fields.message-fields--before {
display: none; /* Display выступает многоцелевым свойством, но чаще всего оно используется для полного скрытия элементов. Для этого действия мы прописываем значение none, и в будущем может вам пригодиться, если вы хотите скрыть часть элемента */
}
Если же вы не хотите скрывать этот элемент, а только изменить цвет, то при присваивании свойства color у вас будет изменяться только правая часть текста. Связано это с тем, что за левую часть отвечает совсем другой элемент.
.pairs.pairs--columns.pairs--fixedSmall dt {
color: #000000;
}
Задний фон контента
Теперь отредактируем всю часть с листом о нашем персонаже. На этом слое используется несколько элементов. Начнём с того, который занимает большую область.
.p-body-inner {
background: transparent; /* Делает фон полностью прозрачным */
border-left: none; /* Скрывает левую рамку */
border-right: none; /* Cкрывает правую рамку */
}
У него мы скрыли только визуально, чтобы он не мешался, и нам было проще работать с его внутренними элементами. В противном случае, нам бы пришлось редактировать и его, а сам лист был бы больших размеров.
Важно: если бы мы скрыли этот элемент через свойство display: none (Технически, это временное удаление элемента), то и всё внутри него тоже бы исчезло, а значит и весь лист пришлось бы пересоздавать.
Контейнер с юзером и контентом
.message-inner {
background-color:#1f1f1f80 /* Цвет фона. Последние две цифры - это процент прозрачности (80%). Однако, если вы хотите сделать панель полностью прозрачной, придётся также воспользоваться элементом ниже */
flex-direction: column; /* перемещает колонку с автором на верх страницы */
}
Основной блок сообщения
Это большое пространство, в котором расположен весь написанный вами текст. Это может быть текст анкеты, описания гильдии, отчета и многое другое. Для изменения используем следующий код:
.block--messages .message, .block--messages .block-row {
background: #23294069;
}
Сейчас этот код делает фон прозрачным и весь ваш текст окажется просто на картинке заднего основного фона всей страницы. Это может быть неудобно, если вы не предполагали размещать текст на основном фоне всей страницы. Потому вы можете не дописывать последние две цифры цвета (они отвечают за прозрачность) или использовать картинку, которая станет фоном всего блока, на котором расположен текст. Для этого используем background: url(-); где вместо тире вставляем ссылку на нужную картинку. Рекомендуем поиграться с функциями
Верхняя навигация по сайту
Представляет из себя полоску с кнопками “Главная”, “Сообщество”, “Что нового” и “Пользователи”. Также сюда относится и то, что находится в правой стороне этой полоски, а именно: кнопка вашего аккаунта, личных сообщений, уведомлений и поиска по сайту. Изменяется благодаря следующему коду:.p-nav {
background: transparent; /* задает полоске навигации прозрачный фон, если вы хотите поменять его цвет, замените transparent на название или на шестнадцатеричный код html (#ffffff). Можете вовсе удалить эту строку и тогда полоска будет иметь дефолтный синий цвет */
margin-bottom: 20px; /* задает отступ полоски навигации от низа, также не обязательное значение, но уже на ваше усмотрение, количество пикселей можно менять, установить значение в 0 или вовсе удалить строку. В таком случае, как и в случае с 0, полоска навигации останется на дефолтном месте */
}
Вы можете задать полосе задний фон, не трогать ее вовсе или исхитряться с ней на свое усмотрение. Быть может это будет не совсем удобно, но полосу можно и вовсе скрыть, написав в области волнистых скобок display: none;.
Поднавигация сообщений и поиск по форуму
Представляет из себя полоску с навигацией ниже навигации по сайту, содержит кнопки “Новые сообщения”, “Поиск тем”, “Отслеживаемое” и другие. Для изменения используем следующий код:
.p-sectionLinks {
background: transparent;
margin-bottom: 40px;
}
Здесь все абсолютно аналогично верхнему описанию, полоску тоже можно скрыть через display: none;.
Левая панель юзера
В оригинальном оформлении это длинная темно-синяя полоса с левой стороны, которая является задним фоном под аватаркой и всем пространством, которое примыкает к основному блоку. Для изменения используется следующий код:.message-cell.message-cell--user, .message-cell.message-cell--action {
background: transparent;
border-right: none;
}
Стрелочка юзера
Наверняка во время пользования форумом вы могли заметить маленькую стрелку, указывающую на автора темы. Если вам необходимо её отсутствие, то вы можете воспользоваться кодом ниже.
.message-userArrow {
display: none;
}
Аватарки пользователей
Для взаимодействия с аватарками используем следующий код:
.avatar img:not(.cropImage) {
border: 4px ridge gray;
}
border - задает рамку вокруг аватара, в данном случае в 4 пикселя.
После пикселей вы видите элемент ridge, он придает этой рамке объемный вид, заменить можно на другие, для этого поищите другие варианты, самым часто используемым типом является solid - это простая, сплошная линия.
gray - цвет линии, изменяется на ваше усмотрение.
Звания пользователей
Для того, чтоб изменить внешний вид небольших квадратиков, отображающих звание пользователя, используем следующий код.
.userBanner {
border: 2px ridge gray !important;
}
Вы можете обратить внимание, что цвет у этой длинной панели немного темнее. background: transparent; делает ее прозрачной, но под ней находится основной фон блока справа. Если присмотреться внимательней, то блоки разделены тонкой полосой, которая благодаря border-right: none; исчезает.
Логотип-ссылка Aviana
.p-header-logo.p-header-logo--image {
background: url('https://{ссылка}') center no-repeat; /* Вставляем желаемую ссылку вместо слова в коде. Фигурные скобки убирать необязательно */
}
.p-header-logo.p-header-logo--image img {
opacity: 0; /* Убирает изначальное лого */
}
Итог
Помните, что изменить вид страницы можно как угодно, и если вы поймёте способ работы и проявите смекалку, то даже сможете обойти существующие ограничения, получив возможность создавать привлекательные своим необычным оформлением листы. Не бойтесь экспериментировать!
Полезные ссылки:
Справочник по CSS - http://htmlbook.ru/css
HTML Color colors (Цвета в HTML) - https://html-color-codes.info/old/colorpicker.html
Google шрифты - https://fonts.google.com
Со временем статья будет дорабатываться. Если вы обнаружили ошибку или хотите что-то добавить, можете смело отписать в комментариях или в личные сообщения на форуме.
Выражается благодарность:
Vishes - соавтор
Cybborgus - предоставление кодов
Последнее редактирование:
