Оформление дневников, постов и профиля

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

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

У нас же нет никаких ограничений, все просто и удобно, и кроме того есть вообще уникальная функция, которую вы больше нигде не встретите — можно настроить оформление любого своего поста независимо от внешнего вида дневника, или сообщества в котором он будет размещен, и оно не потеряется если вы его переместите из одного дневника в другой. Сама концепция оформления разрабатывалась таким образом, чтобы одновременно давать широкие возможности по изменению внешнего вида, приданию ему индивидуальности и при этом быть достаточно лаконичной и легкой в использовании. По нашему скромному мнению этот баланс у нас получился… blush

Дневники


Начнем с создания дневника. Итак, создавая дневник, справа, где располагается блок оформления, вы можете увидеть сообщение что его оформление возможно только после сохранения.



В момент создания дневника вы можете только загрузить обложку, которая будет использоваться в качестве шапки дневника. Необходимо выбрать файл для загрузки, после чего нажать на кнопку «сохранить».



Разрешена загрузка в формате JPEG, или PNG, с максимальным разрешением 3000x3000px и размером не более 5 МБ. Подробнее об ограничениях при загрузке картинок можно прочитать в этом посте.

Также есть один нюанс — картинка, которую вы загружаете всегда превращается в квадрат путем обрезания по меньшей стороне. Для большинства типов современных экранов оптимальным будет разрешение 1500x1500, или максимум 2000x2000 — примерно в этом диапазоне мы и рекомендуем устанавливать шапку. Разрешение меньше 1000 может на некоторых экранах выглядеть не очень красиво, поэтому слишком маленькие изображения лучше не ставить.

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

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



Здесь, в управлении дневником справа вы увидите виджет «Оформление». Далее я коротко расскажу об основных возможностях этого виджета. В принципе большинство параметров понятны интуитивно, но основные моменты стоит осветить.

1. Смещение шапки



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

2. Фон

Следом за смещением шапки, вы можете загрузить фон дневника. Можно выбрать картинку разрешением не более 3000x3000px и размером не более 5 МБ — ограничения такие же как и у обложки дневника.



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



Обратите внимание на пункт «Положение», он позволяет определить каким образом загруженное изображение будет установлено в качестве фона.
  • «Замостить» — означает что изображение будет размножено на всей видимой области, если его размер меньше размера экрана. Это позволяет загружать даже совсем небольшие картинки, например бесшовные паттерны, или текстуры.
  • «Растянуть» — означает что изображение будет растянуто на весь экран по ширине (или ужато, если размер изображения превышает размер экрана). Короче говоря картинка займет всю видимую область. Этот вариант подойдет, если вы хотите поставить большую картинку, или фотографию по ширине всего экрана. Возможно при этом вы захотите отключить прокрутку фонового изображения (см. ниже).
  • Другие пункты в выпадающем списке в принципе понятны и без лишних пояснений. Они соответствуют различным положениям загруженного изображения на странице.

«Вернуть фон дневника по умолчанию» — отменяет загрузку и сбрасывает фон дневника в исходное состояние.

А вот пункт «Использовать только цвет фона» позволяет как бы «выключить» фоновую картинку, оставив только выбранный цвет. Потом вы в любой момент можете вернуть отображение загруженной фоновой картинки — она никуда не потеряется.

3. Непрозрачность для записей



Этот пункт позволяет делать блоки полупрозрачными, или выключить их совсем (если непрозрачность = 0%).

4. Выбор цвета



Здесь вы можете определить цвета для
  • фона (если фоновое изображение не используется, или не закрывает всю видимую область, будет применяться этот цвет)
  • текста поста (включает текст записей и некоторые вспомогательные и служебные элементы)
  • ссылок (все ссылки включая расположенные в блоках «Последние», «Теги» и др.)
  • заголовков (охватывает заголовки самих постов, заголовки внутри поста, обозначенные тегами h4-h6, и некоторые другие элементы)

Для того чтобы изменять тональность цветовой палитры, вращайте колёсико мышки. Цвет также можно задать вручную, набрав код на клавиатуре.

5. Прокрутка фонового изображения



Эта галочка в самом конце формы включает/выключает прокрутку фона. Вы можете сразу посмотреть как будет выглядеть поведение на странице установив/сняв ее.

После завершения настройки необходимо нажать на кнопку «сохранить». Изменение перечисленных настроек оформления происходит независимо от основных настроек дневника, поэтому никаких другие кнопки сохранения нажимать не обязательно (если не было других изменений).

Обратите также внимание на эту кнопку в виде крестика: если настройки оформления применяются, то она позволяет их сбросить. Аккуратней, т.к. после ее нажатия все сбросится и восстановить настройки будет невозможно.



Посты


Вы можете настроить внешний вид любого своего поста. Если вы модератор, или администратор дневника, вы также имеете доступ к редактированию, а значит и к оформлению постов.

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

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

Вот пример такого оформления: так выглядит дневник, а так пост.

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

Сохранение настроек оформления также происходит независимо от содержимого поста.

Профиль


Нужно перейти на вкладку «Оформление» в настройках профиля.



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

Кстати эти настройки полностью определяют внешний вид:
  • ленты ваших постов, например artlab.club/profile/noname/created/topics/
  • ленты избранного, например artlab.club/profile/noname/favourites/topics/
  • и даже ваших личных сообщений, причем в личных сообщениях это оформление будете видеть только вы relaxed так что если хотите, вы можете задать настройки исключительно для своего удобства


Спасибо, что дочитали до этой строчки smile
Если есть вопросы — прошу в комментарии!

17 комментариев

Женя Павлова
Круто)) Надо попробовать! blush
Топот Котов
Спасибо)) Обязательно попробуйте wink
Екатерина
Классные возможности, отличное объяснение!
Топот Котов
Спасибо, Екатерина!)
ovaleeva
  • ovaleeva
просто море возможностей!
Avina
  • Avina
Подскажите, пожалуйста, как поменять превью для поста? Я загрузила в пост много картинок поштучно и мини-галерею. Превью было выбрано автоматом из мини-галереи. А как-то можно поставить на превью другую картинку, которая не входит в мини-галерею?
Топот Котов
Если к посту добавлена минигалерея, то превью будет взято из нее: либо первая картинка, либо та, которую вы выберете. Чтобы взять ту, которой там нет… тут в общем-то работает простое правило — либо в качестве превью берется самая первая картинка из поста, либо выбранная картинка из минигалереи. Чтобы поставить какую-то конкретную, можно ее добавить в галерею. Ничего страшного если она уже была добавлена в каком-то месте в публикацию.
Есть еще такая заметка про создание превью: artlab.club/about/prevyu-k-postam.html
Avina
  • Avina
Спасибочки! Я видела посты, у которых в превью было сразу несколько картинок. Например вот: Никак не пойму, как это делается…
Топот Котов
А это минигалерея так показывается при просмотре конкретного дневника (а содержимое поста под катом).
Avina
  • Avina
Не очень поняла… Я думала, что только одна картинка может показываться в превью поста.
Топот Котов
Превью, которое в лентах — на главной, в подписках, избранном, и т.д. — одно. А на скриншоте не превью, а минигалерея в конце поста.
Avina
  • Avina
Может мы друг друга не поняли… Я хотела спросить, как так сделано, что в ленте не отображается превью, а отображается мини-галерея? Как тут на 5 и 6 посте: artlab.club/diary/letta-art/
Топот Котов
В дневниках (как по приведенной ссылке), как и внутри отдельного поста вообще нет превью, оно есть только в лентах (главная, избранное, подписки, и т.д.). При этом минигалерея там всегда выводится.
Avina
  • Avina
Теперь поняла smile Спасибо!
Kancerina
  • Kancerina
Отличные возможности, здорово все описано! Для меня в этом есть особая привлекательность, так как не люблю «по умолчанию» и предпочитаю настраивать все под себя. Офигительный процесс, есть в нем что-то творческое.
Iryna Danyliuk
Девочки помогите, ну никак не могу шапку сделать… и 1500 на 1500, и 3000*3000 пробовала все бестолку…
Топот Котов
Я не девочки, но могу помочь. =) Напишите в чем проблема, поподробнее, что именно делаете, что получается. Можно в личку, можно здесь.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.