[elena1008]

04.11.2016 в 21:19

Пишет  Кареглазый Демон:

Эпиграф очень своеобразная часть дизайна, живущая своей жизнью, поэтому в его оформлении есть свои нюансы.
Допустим все картинки уменьшены под ширину ленты. Картинка использованная в эпиграфе подчинится общему правилу. А если она допустим должна быть больше и в ней присутствуют ссылки то все поедет.
Чтобы этого не случилось ширину картинкам эпиграфа лучше прописывать отдельно, соответственно под размер конкретной картинки.
#epigraph .paragraph img {max-width: 750max-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

<div id="lyboie imya"><a href="https://www.адрес страницы.ru/" target="_blank"><img src="http://elena1008.diary.ru/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B8%20%D0%BD%D0%B0%20%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%BE%D0%B1%D0%BC%D0%B5%D0%BD%D0%BD%D0%B8%D0%BA%D0%B5" /></a></div>

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

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

 #lyboie imya { position: fixed !important; top: 0right: 0z-index:1;}

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

<div id="ssylka-2"><a href="https://www.yandex.ru/" target="_blank"><img src="http://s017.radikal.ru/i405/1611/2a/1824bdd376cd.png" /></a></div><br /><div id="ssylka-3"><a href="https://twitter.com/" target="_blank"><img src="http://s018.radikal.ru/i502/1611/de/3a4e337a8515.png" /></a></div><br /><div id="ssylka-4"><a href="https://vk.com" target="_blank"><img src="http://s017.radikal.ru/i429/1611/2d/dfa657ed5887.png" /></a></div>

Настройки CSS:

 #ssylka-2 { position: fixed !important; top: 0left: 0z-index:1;}<br /> #ssylka-3 { position: fixed !important; bottom: 0left: 0z-index:1;}<br /> #ssylka-4 { position: fixed !important; top: 0right: 0z-index:1;}

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

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

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

{ ______________________ twitter-status ____________________________}<br /> #post185793319.singlePost { display: block; position: fixed; bottom: 160 right: 10 width: 220 height: 180px !important; background-color: rgba(0, 0, 0, 0.5) !important; }<br /> #post185793319.singlePost .postContent {position: relative; width: 160 height:130 background-color: rgba(0, 0, 0, 0) !important; margin: -5px 0px 0px 20 padding: 5px 10px 5px 10 overflow-x: hidden; overflow-y: scroll; }<br /> #post185793319 .postTitle.header {margin: 0px 0px 10px -210px !important; }<br /> #post185793319 .postLinksBackg, #post185793319.singlePost .atTag, #post185793319.singlePost .atTag span, #post185793319 .postDate, #post185793319 .postTitle.header span, #post185793319.singlePost div.paragraph small, #post185793319.singlePost div.paragraph b {display: none !important;}<br /> #post185793319 .postActionLinks {margin: 0 -15px 0 0 !important;}<br /> #post185793319 .upPostLink { display: block !important; position: absolute !important; top: 3px !important; right: 210px !important; }<br /> #post185793319 .delPostLink { display: block !important; position: absolute !important; top: 3px !important; right: 190px !important; }<br /> #post185793319 .editPostLink { display: block !important; position: absolute !important; top: 3px !important; right: 170px !important; }<br /> #post185793319 .tonotepadPostLink, #post179795379 .fromnotepadPostLink {display: none !important; }

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

{-------------------------твиттер-----------------------------}<br /> #post201001969.singlePost { display: block; position: fixed; bottom: -5 right: -12 width: 150 height: 210px !important; z-index:-1 !important;display: block; font:normal 90% Times, New Roman !important; color: #463929 !important; margin: 15px 10px 5px 10px !important; padding: 5px 5px 5px 5px !important; background: rgba(93, 80, 63, 0.5) !important; border: 1px dotted rgba(0,0,0,0.4);opacity : 1.0 !important;}<br /> #post201001969.singlePost .postContent {position: relative; width: 150 height:200margin: -10px 0px 0px -0 padding: 5px 10px 5px 10 overflow-x: hidden; overflow-y: scroll;opacity : 1.0 !important;display: block; font:normal 90% Times, New Roman !important; color: #000 !important; margin: 15px 10px 5px 10px !important; padding: 5px 5px 5px 5px !important; background: rgba(191, 142, 91, 0.2) !important; border: 1px dotted rgba(0,0,0,0.4);opacity : 1.0 !important;z-index:-1 !important;}<br /> #post201001969 .postLinksBackg, #post201001969.singlePost .atTag, #post201001969.singlePost .atTag span, #post201001969 .postDate, #post201001969 .postTitle.header span, #post201001969.singlePost div.paragraph small, #post201001969.singlePost div.paragraph b , #post201001969.singlePost div.strong b, #post201001969.singlePost div.sign {display:none!important;z-index:-1 !important;}<br /> #post201001969 .tonotepadPostLink, #post201001969 .fromnotepadPostLink, #post201001969 div.sign, #post1201001969 div.commentAuthor {display: none !important;z-index:-1 !important; }<br /> #post201001969.countSecond .authorName a, #post201001969.countSecond }

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

<div id="ssylka-1"><a href="http://dnevnik-kareglazii-demon.diary.ru/" target="_blank"><img src="http://s009.radikal.ru/i308/1611/64/95aa1e26c863.png" /></a></div>

Настройки CSS:

 #ssylka-1 { height: 281px !important; width: 213px !important; position: fixed !important; bottom: 0right: 0z-index:-1;}

Результат:

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