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

1. На данной странице постарался собрать для вас наиболее распространенные стили, которые помогут в оформлении вашего чарлиста или статьи. В каждый код, разумеется, вы можете добавить нужное или, наоборот, что-то удалить. (Ссылка по картинке)

2. Далее последует сайт на котором вы сможете подобрать нужную цветовую палитру для ваших материалов. Для этого есть мириада различных сайтов, но от себя могу посоветовать https://colorscheme.ru/color-converter.html. Удобно в использовании, а сам сайт имеет большой ряд полезных функций, таких как предпросмотр выбранных цветов на шаблонной странице. Кроме того, выбранный вами оттенок вы сразу же можете скопировать в CSS-код.

Например добавив цвет к блокам "Портрет", "Предыстория" и "Дополнительно":

.wp-block.default.no-border.shadow-5 {color: rgba(247, 42, 42, 1);}

3. Существуют множество сайтов, где вы можете наглядно поиграться со стилями и подобрать для себя что-то приемлимое. Один из таких сайтов - https://css3gen.com/. Удобно и просто. Выбираете нужный раздел из списка и крутите слайдеры до тех пор, пока объект не покажется вам визуально привлекательным, а далее просто копируете готовый код внизу.
Так, например, мы можем выбрать вкладку "Box Shadow Generator", покрутить настройки и скопировать код внизу.
В нашем случае код выглядит вот так:

-webkit-box-shadow: 13px 13px 8px 0px rgba(50, 50, 50, 0.75);	
-moz-box-shadow:    13px 13px 8px 0px rgba(50, 50, 50, 0.75);	
box-shadow:         13px 13px 8px 0px rgba(50, 50, 50, 0.75);

А теперь добавим эту тень, например, к аватарке персонажа в чарлисте:

.avatar-lg.image-responsive {
-webkit-box-shadow: 13px 13px 8px 0px rgba(50, 50, 50, 0.75);	
-moz-box-shadow:    13px 13px 8px 0px rgba(50, 50, 50, 0.75);	
box-shadow:         13px 13px 8px 0px rgba(50, 50, 50, 0.75);
}

4. Из такого же плана CSS генераторов существует сайт http://css3generator.com/. Он немного сложнее в использовании, в нем нет слайдеров и приходится прописывать значения в ручную, но он же и обладает большим функционалом. Особенностью является то, что сайт изначально предоставляет стандартный "квадрат" и до перезагрузки страницы все ваши изменения сохраняются, тем самым можно комбинировать различные тени, округления углов и т.д. и сразу же наглядно видеть результат.
С помощью этого сайта я, например, сделал вот такую прокрутку текста для панели "Дополнительно" в чарлисте.

.wp-block.default.no-border.shadow-5.additional {
overflow: auto;
min-width: 50px;
min-height: 200px;
max-height: 100px;
}

5. Теперь немного посложнее. Для красоты можно добавить некоторым элементам анимацию при наведение курсора. С этим может помочь сайт https://daneden.github.io/animate.css/, который на примере текстовой строки показывает различные вариации простых анимаций. Пример такой анимации можно посмотреть у меня в профиле на сайте, наведя мышкой на аватарку.
И, разумеется, код:

.col-md-4:hover {
animation:swing 0.5s;
}

P.S. Для тех, кто хорошо владеет фотошопом и хочет просто вставить PNG картинку с готовым "вшитым" оформлением в свою статью, предлагаю код на удаление всех элементов со страницы. Ссылка.

Для того чтобы оформить страницу нужна определенная идея. Например: изменить цвет цитаты персонажа, убрать какую-нибудь лишнюю надпись или рамку. Если говорить упрощенно, то вся страница состоит из отдельных элементов. Так как же найти нужный элемент для редактирования? Сделать это довольно просто, даже без углубленных знаний в CSS.
Для примера редактирования страницы будем использовать Google Chrom’i’e, однако в других браузерах все выглядит примерно также.  1. Сначала сформулированная идея: очень не хочется видеть этот красный флажок «Закрыт» над чарлистом, вот бы визуально его убрать. Страница от этого не станет общедоступной, но визуально попробуем устранить плашку.   2. Жмем правой кнопкой мыши на нужный элемент, в нашем случае на красный флаг, и у нас выпадает меню. Щелкаем на «Посмотреть код».   3. Как видишь, наш элемент закрыл оранжевый прямоугольник, а значит мы, возможно, нашли нужный нам элемент. Справа открылась панель с кодом страницы, где этот блок автоматически выделен. Здесь указан атрибут class, который связан с HTML-элементом. Этот то class нам и нужен. Здесь указано, что выделенный нами class имеет название «ribbon-left red», намекая на то, что данный элемент отвечает за «левую красную ленточку».   4. Однако не спешим. Ленточки то может быть две! Одна – «Закрыт», а вторая «В разработке». Что это значит? Это значит то, что обе эти ленточки на чем-то крепятся. Безусловно, если мы используем для кода «.ribbon-left.red», то это будет отчасти правильно и красная ленточка исчезнет, зато останется некрасивое пустое пространство вместо нее. Огрооомное пустое пространство, что будет отделять верх чарлиста от имени персонажа. Значит, нам следует найти тот самый родительский элемент, на котором покоятся сразу две ленточки: правая и левая. Убрав его – мы уберем и ненужное пустое пространство.
Справа сверху, над выделенным кодом, подозрительно возвышается еще один class и, если аккуратно навести эту строку мышкой, можно визуально увидеть расположение этого элемента. Огромная оранжевая плашка прямо на месте ленточек, да еще и с названием «ribbon-container». Уже похоже на правду. Если такой большой элемент убрать, то все дочерние пропадут вместе с ним. В том числе и наша красная лента.   5. Отлично! Проверяем на практике нашу догадку. Копируем название класса «ribbon-container» и вставляем в наше окно для CSS-стилей. Не забываем добавить изменение стиля для этого класса. В нашем случае мы хотим полностью убрать его, поэтому код выглядит как: .ribbon-container { display: none }   6. Получилось! Элемент начисто убран из чарлиста. Помните, что в некоторых случаях придется действовать методом научного тыка, нашего любимого разумеется, подставлять различные классы и, в конце концов, нужный элемент будет найден, а там можно будет продолжить работу по его оформлению. Не стесняйтесь щелкать как на нужный текст, так и на пространство возле него и экспериментируйте.  

Спасибо просветителю Ezil’y за эти бесценные знания.
Для начала заходим на сайт fonts.google.com и выискиваем нужный нам шрифт. Перед всеми нижеизложенными процедурами следует убедиться, что шрифт поддерживает русский язык [1]. Приглянулся шрифт? Щелкаем на красный крест [2] и внизу появляется черная полоска. Разворачиваем ее.     Теперь копируем ссылку из кода [3] и открываем ее в новой вкладке. Открываем ее в новой, поскольку код на предыдущей вкладке нам еще пригодится.  
Итак, мы открыли ссылку и теперь копируем все содержимое страницы [4], а после вставляем в нашу графу для CSS в чарлисте/отчете [5]. Все, шрифт добавлен.     Однако, чтобы шрифт отображался необходимо добавить стиль для куска текста, блока и т.д.      Для примера установим новый шрифт для всего текста внутри статьи. Открываем обратно ссылку со шрифтом на google и копируем код [3.1]. В данном случае это font-family: 'Pacifico', cursive; Добавляем данный код в графу для CSS и проверяем: p {font-family: 'Pacifico', cursive;}      Готово. Наслаждаемся новым шрифтом!