CSS

Маленькая относительно полезная и легкая в использовании памятка по CSS элементам чистого чарлиста.
Советую пробовать !important для некоторых cвойств, если они кажутся нерабочими. Например color: red!important;
Рекомендую к просмотру:
1. Для знакомства с CSS -Оформление листов от Симбирска
2. Сайт HTMLbook -Список CSS свойств, их описание.
3. Поисковик -Вы всегда можете загуглить "Как сделать тень текста css" или "Ксс обводка картинки" вместо того чтобы молить о помощи.
4. Полезные ссылки -Список полезных ссылок от Хестии.
5. Установка шрифта -Для самых маленьких и хорошеньких.
6. Готовое оформление/Пример чарлиста -Пример хорошего оформления. Весь код данного чарлиста закомментирован (Т.Е. Разбавлен подсказками) и вы можете взять его за основу, а после перекрасить и заменить некоторые картинки для создания чего-то своего.
7. Как посмотреть чужой код чарлиста? -Лайфхак, совет и подсказка.
Развивайтесь и будьте счастливы.
Если у вас есть время и желание помочь - пожалуйста, скиньте мне в дискорд названия отсутствующих здесь элементов или другие полезные ссылки.
Автор: AcoStar
AcoStar#7819



.content.bg-base-img


Наилучшее решение:

.sidebar { display: none; }
.wp-block.article.post .article-title

.article-subtitle


.content .post .testimonial

.article-image img.info-list --Все полоски в чарлисте

Отдельные части этих полосок:

.col-sm-4 - Стандартная часть

 Заполняемая часть - .col-sm-8          




















.wp-block.default > .wp-block-body h2


.content .post .wp-block
.content .post .portrait -- Этот блок отдельно

.content .post .background -- Предыстория персонажа отдельно

.content .post .additional -- Дополнительное отдельно









.wp-block.default > .wp-block-body h2
.content .post
a[href^="/charlist"] > img

.body-bg-8

{ background: url(" ФОН ")
 no-repeat fixed; background-size: cover; }





.col-sm-10 --Весь блок с авторством и датами
.meta-info strong --Автор, создано, обновлено
.meta-info tag --Даты, ссылка на автораspan.likes.likes-entity i --Иконка лайка
.meta-info a tag --Ссылка на автора отдельно от остальногоspan.badge.like-num --Кружок с лайками
.fa-thumbs-o-up --Цвет ненажатого лайка отдельно    
.fa-thumbs-up --Цвет нажатого




.bg-base-img  --Так же подействует на .content.bg-base-img


h2.comment-count
 .comment-author a img --Аватарка  .comment-author a span --Приписка и ник .comment-author a span.text-red-mid --Ник отдельно
.comment-meta -- Цвет даты и кол-ва лайков .comment-date --Дата отдельно
span.comment-meta-left span.like-num -- Кол-во лайков отдельно span.comment-meta-left i.fa-thumbs-o-up.fa-2 -- Сам лайк
.bg-white --Или .comment-bodya.link-edit --Редактировать

a.link-reply --Ответить
   a[href*="#addcomments"]




.redactor-toolbar --Полоска .redactor-toolbar li a --Цвет кнопок


.redactor-editor


 .redactor-editor { border: none; }  --Советую добавить


















.body-wrap footer { visibility: hidden; } --Скрывает этот блок.


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

Как подглядеть чужой код?
В первую очередь помните, что простое воровство чужого кода без разрешения автора и использование его без какого-либо редактирования сильно попадает под плагиат. Если берете код - переделывайте на свой лад и так, чтобы красиво.
Находясь на любой странице (Т.Е. Чарлист/Гильдлист и т.д.) вы можете нажать правой кнопкой мыши в свободном месте и выбрать пункт Просмотр кода страницы (Ctrl+U в Chrome). В отдельно открывшейся вкладке с кодом страницы нажмите CTRL+F и выполните поиск по слову <style> (Вместе со скобочками, да). Вся кучка кода, что вы видите далее, это то, что пользователь ввел в поле для CSS. Разбирайтесь в интересных вам моментах или воруйте фишки, но не забывайте о своей честной репутации.

Powered by Froala Editor

Автор: Весёленький acostar2 Создано: Nov 20, 2018 1:27:42 PM Обновлено: Jul 1, 2020 6:46:24 AM Уникальных просмотров: 959 Тег: Без привязки

ВОЙДИТЕ НА САЙТ, чтобы оставлять комментарии.