23:34 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Эпиграф очень своеобразная часть дизайна, живущая своей жизнью, поэтому в его оформлении есть свои нюансы.
Допустим все картинки уменьшены под ширину ленты. Картинка использованная в эпиграфе подчинится общему правилу. А если она допустим должна быть больше и в ней присутствуют ссылки то все поедет.
Чтобы этого не случилось ширину картинкам эпиграфа лучше прописывать отдельно, соответственно под размер конкретной картинки.
#epigraph .paragraph img {max-width: 750px;max-height: auto;}
На эпиграф также распространяются правила обводки, полу прозрачности, тени и прочих изысков из общей ленты. Убираются они отдельной строкой.
#epigraph .paragraph img { border: none!important; opacity : 1.0 !important; box-shadow:none!important;}
Кстати подобные манипуляции лучше проводить и со смайликами. (Здесь прозрачность уменьшена)
#shsmile, #atTagBox, .smile { border: none!important; opacity : 0.4 !important; box-shadow:none!important;}
Может показаться что с эпиграфом одни проблемы, но это не так. Первая закрепленная запись дает уникальную возможность прописывать ссылки, которые в структуре дайров не предусмотрены, визуализировать их картинками и закреплять в любом месте. Единственный минус в том, что все это отображается только на главной странице дневника (как и сам эпиграф). Однако это благодатная почва для смелых экспериментов.
Реализуется при помощи двух несложных строчек кода, одна из которых прописывается в настройках, там где "Эпиграф, фото, список ПЧ", а вторая добавляется в CSS код оформления.
Допустим вам хочется растащить по углам оформления кнопки соцсетей. Если использовать для этих целей картинку с полупрозрачной подложкой и прописывать ссылки координатами она перекроет меню и ленту записей, к тому же не подстроится под экран. Как быть?
1. Вставляем в эпиграф новый id

Присмотритесь к подчеркнутому

2. Теперь новому id прописываем свойства так, как если бы он был стандартным пунктом дайровского меню:

Например:
Эпиграф, фото, список ПЧ:

Настройки CSS:

В результате получаем:

Можно пойти дальше и совместить эти знания с еще одной идеей. Она не моя, подробно описана здесь, как и множество других, за что авторице процветания, счастья и всяческих благ.
Опишу создание подобия твиттера в дневнике, для чего процитирую пост из вышеупомянутого дневника:
Все настройки очень существенно зависят от дизайна.
Далее пойдёт речь о реализации идеи в код.
-- I --
Создаём пост. Можно с заголовком, например, "twitter\status". БЕЗ!:
-- комментариев,
-- тем,
-- музыки,
-- настроения,
-- аватар.
Смотрим в адресной строке номер поста, например:

И скопируем его куда-нибудь.
-- II --
Вставляем в код своего дизайна такой код:

-- III --
Ничего пока не сохраняя, в этом коде сначала меняем все "185793319" на номер своего поста (см.картинку). Будьте очень осторожны! Следите за тем, чтобы пробелы либо их отсутствие после номера записи обязательно оставались на месте!
-- IV --
Сначала покажу на рисунке, что придётся менять, учитывая особенности вашего дизайна и вкусов:

-- V --
А теперь разберём сам код по-селекторно (т.е. по-строчно):
1) селектор #post185793319.singlePost - основная оболочка твитта:
-- тег bottom: отступ от нижней границы страницы, может быть заменён на top:, если твитт вешать наверху страницы;
-- тег right: отступ от правой границы страницы, может быть заменён на left:, если твитт вешать слева;
-- теги width: и height: задают ширину и высоту основной оболочки поста;
-- тег background-color: прописывает цвет фона и его прозрачность (последнее - четвёртое число) для этой оболочки.

2) селектор #post185793319.singlePost .postContent - содержимое записи и её параметры оформления повторяющиеся теги не расписываю, о них всегда можно спросить, например, меня:
-- тег margin: по сути отступ от заголовка и границ "предка-родителя";
-- тег padding: отступы до внутренней части - текста. NB! - коварный тег, очень коварный! фу-фу-фу!

3) селектор #post185793319 .postTitle.header - формат заголовка.
4) селектор #post185793319 .postActionLinks - блок с кнопками редактирования записи, её удаления и прочее.
5) селекторы #post185793319 .upPostLink, #post185793319 .delPostLink, #post185793319 .editPostLink - селекторы кнопок редактирования, в которых задаётся их позиционирование.


Вообще говоря, такими постами можно "обвешать" всю страничку дневника, набив в них любимую музыку (например, у меня в дневнике в "оторванном", правда, эпиграфе висят internet-радиостанции), важные ссылки, какие-нибудь картинки-гиффки, фото любимой собаки-кошки-хомячка или человека, - всё на что вашей фантазии хватит.
ВАЖНО! Не забывайте периодически поднимать запись, нажав на соответствующую кнопку. Иначе уйдёт на следующую страницу дневника и с первой исчезнет.
Думаю суть понятна. В моем случае пост с твиттер статусами выглядит так:


Симпатично, но хочется эффектный бэкграунд. И тут встает вопрос как его прописывать? Если через дополнительные блоки картинка останется висеть на всех остальных страницах, что не есть хорошо. И выйти из положения мне как раз помогли дополнительный id и манипуляции с эпиграфом:
Эпиграф, фото, список ПЧ:

Настройки CSS:

Результат:

Картинка исчезает вместе с постом твиттера со всех страниц кроме главной.
Помимо всего прочего все эти манипуляции с дополнительными ссылками никак не влияют на текстовое содержимое эпиграфа, то есть он у вас останется где ему и положено, в начале ленты записей.
запись создана: 04.11.2016 в 21:19

Вопрос: Полезно?
1. Да. 
44  (100%)
2. Нет. 
0  (0%)
Всего: 44

@темы: как это сделано, возможности CSS, Кареглазый Демон, CSS

Комментарии
2016-11-04 в 21:54 

Энтони Крафт
Шикарно получилось :red:

2016-11-04 в 22:49 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
Энтони Крафт, благодарю) Лишь бы на пользу пошло)

2018-01-30 в 03:58 

Нэко
🎇 fiel de miel 🎇
Слушайте, это вот совсем великолепно))) Пост по заявке! изображение изображение изображение
Спасибо вам большущее, пока что для меня этот урок слишком сложный (не поняла почти ничего из объяснений про новый id), но я УВЕРЕНА, что разберусь рано или позно и ещё краше сделаю свой дайрик *__* лайк

Кстати, как-нибудь, если хотите, зайдите на досуге взглянуть, ВО ЧТО я сейчас превратила свой дизайн с помощью Ваших уроков!!! Просто я очень довольна тем, как мой дневник выглядит, и радуюсь при мысли, что это сделала сама)) С помощью массы советов и инструкций чртг

2018-01-30 в 09:36 

Кареглазый Демон
Ко мне на "ВЫ", шепотом и с придыханием...
А этот пост как оказалось уже был. Я перебрал те что были по теме "как это сделано" и везде где было по смыслу добавил "возможности CSS". Так что пройдитесь по этому тегу, возможно найдете еще полезного.
Посмотрел) Очень симпатично. Продолжайте в том же духе)

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

Original Designs бесплатники, CSS и уроки по созданию оформлений.

главная