twitter/статус

[UDFj]

Тех, кому интересно узнать предысторию, заметим, что в трактовке авторицы этой записи, попрошу отнестись снисходительно к вступительному слову, поскольку дама надеется, что ей удалось выписать изложение в фактах без "растекашися собственным неинтересным мнением по древу". Итак.
Всё началось с появлениея "twitter"-записи в дневнике -- Jägerhustler --, которая заполнялась текстом под скроллинг, т.е. не растягивала запись до размеров бука в несколько а.л. (коммент.авт.). Как стало понятно позже, в такой "scroll"-пост можно вписывать мысли, цитаты, отражающие сиюминутные настроения. И вот, как-то автор вышеупомянутого дневника заметил, что было бы гораздо удобнее, если бы этот пост был зафиксирован на странице и оторван от общей ленты записей в виде отдельного блока. Приблизительно в таком ракурсе я поняла идею, обозначенную [J]Ловчий->[/J] - автором того самого дневника. В его же дневнике можно посмотреть и на пример реализации - внизу страницы справа блок с текстом. Да и в своём пока удалять не буду. Но...

Откройте картинки в новом окне и увидите изображение с 20" и приблизительно с 15".
- 1 - В обычном полупрозрачном варианте.

- 2 - Мышка наведена на запись.

- 3 - 15" прокрутка записей на ленте не меняет положения твитт-поста.

Стоит сразу отметить, что приведённый ниже код отличается от кода в дневнике Jägerhustler, так как он оптимизирован и немного упрощён. Все настройки очень существенно зависят от дизайна.
Далее пойдёт речь о реализации идеи в код.

-- I --

Создаём пост. Можно с заголовком, например, "twitter\status". БЕЗ!:

-- комментариев,
-- тем,
-- музыки,
-- настроения,
-- аватар.

Смотрим в адресной строке номер поста, например:

И скопируем его куда-нибудь.

-- II --

Вставляем в код своего дизайна такой код:

{ ______________________ twitter-status ____________________________}
 #post185793319.singlePost { display: block; position: fixed; bottom: 160px; right: 10px; width: 220px; height: 180px !important; background-color: rgba(0, 0, 0, 0.5) !important; }
 #post185793319.singlePost .postContent {position: relative; width: 160px; height:130px; background-color: rgba(0, 0, 0, 0) !important; margin: -5px 0px 0px 20px; padding: 5px 10px 5px 10px; overflow-x: hidden; overflow-y: scroll; }
 #post185793319 .postTitle.header {margin: 0px 0px 10px -210px !important; }
 #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;}
 #post185793319 .postActionLinks {margin: 0 -15px 0 0 !important;}
 #post185793319 .upPostLink { display: block !important; position: absolute !important; top: 3px !important; right: 210px !important; }
 #post185793319 .delPostLink { display: block !important; position: absolute !important; top: 3px !important; right: 190px !important; }
 #post185793319 .editPostLink { display: block !important; position: absolute !important; top: 3px !important; right: 170px !important; }
 #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-радиостанции), важные ссылки, какие-нибудь картинки-гиффки, фото любимой собаки-кошки-хомячка или человека, - всё на что вашей фантазии хватит.
ВАЖНО! Не забывайте периодически поднимать запись, нажав на соответствующую кнопку. Иначе уйдёт на следующую страницу дневника и с первой исчезнет.
Надеюсь, ничего существенного не упустила. Если есть чего добавить, буду очень благодарна )
И уж простите великодушно, что все детали не расписаны до мельчайших подробностей. Всё-таки подобные решения и их воплощения ориентированы на тех, кто хоть самую чуточку разбирается в CSS. поверьте, мои познания очень скромны
Особую благодарность хочу выразить  D Ash за терпеливое понимание и компетентное консультирование по вопросу отображения сего элемента на других страницах дневника пользователя. Да, это было давно, но я помню )

Теперь у меня ступор. Не знаю, о чём ещё писать.

Оформление твиттера, как и его код в примере в моём дневнике поменялся и теперь не совсем соответствует описанию. Однако, идея всё та же самая. Фоном прописана картинка, как в блоках меню. Пришлось поменять отступы и позиционирование. Добавлен :hover в первый селектор. Ладно, пусть пока повисит. Как-никак, а другой вариант реализации.

Когда разберусь с "темами записей" в меню, опишу как это делается. А пока нет ни решимости ни вдохновения браться за эту задачу. Она мне мозг напрягает! Чё делать-то? Думай, голова, думай!

запись создана: 27.02.2013 в 03:29

@настроение: Оставить что-то, надеюсь, полезное.

@темы: без подтекста, CSS, деперсонализировано!, CSS-примеры

Comments

[смольник]

Не могу прочитать с телефона,увы

[UDFj]

Милый, чего уж тебе читать о сотворении оторванного от основной ленты поста? )
У тебя такой пост уж сколько лет? Сейчас в нём плеер с плей-листом "Sex".
Правда, пост на второй страничке твоего дневничка.
Переделать что ли свой дизайн?..

[смольник]

Понимаешь, у pda много странной специфики) Или я так расслабил свой мозг, что он сонно утоп в здешних деревенских снегах)

[UDFj]

Ловчий-> Понимаешь, у pda много странной специфики)

А скажи-ка, милаш, в чём специфика. Может как-то удастся учесть эти особенности при сотворении дизайнов.

Или я так расслабил свой мозг, что он сонно утоп в здешних деревенских снегах)

Возможность вот так расслабиться, провалившись в снежный пух доверия, - и есть то, что даёт тебе сил, поддерживает и укрепляет на бо́льшие свершения. Наслаждайся, малыш.. )

[смольник]

Скажу, что одна из специфики pda полное игнорирование любого дизайна)
Нагулялся, что даже устал)

[UDFj]

Скажу, что одна из специфики pda полное игнорирование любого дизайна)

Ты это специально, да? Пользуешься моим неведением? )

Нагулялся, что даже устал)

Одна из самых приятных усталостей. У тебя солнышко уже зашло или переливается сонно лучиками?

[смольник]

Милая, я честно не стебусь, попробуй переключиться на pda и все увидишь)
Солнце есть даже сейчас, но уже так розово и сиренево

[UDFj]

Милая, я честно не стебусь, попробуй переключиться на pda и все увидишь)

Это возможно и с ноута, да? И как это сделать?

Солнце есть даже сейчас, но уже так розово и сиренево

И ты сохранил оттенки настроения вечернего неба?

[смольник]

Это возможно откуда угодно, просто из профиля или с главной нажми в меню "дневники", там увидишь.
Оттенки я не сохранил, я уже такой сонный...поползу теперь, наконец, тюленить)

[UDFj]

Это возможно откуда угодно, просто из профиля или с главной нажми в меню "дневники", там увидишь.

Я так делать больше не стану. Ужас.

поползу теперь, наконец, тюленить)

Приятного отдыха, милый.

[смольник]

А почему - ужас?) Да, никакой эстетики, но с телефона очень удобно, "нетяжело" при малых скоростях и щадит трафик.
Мне лениво тюленить, вот незадача. Я стал мало читать, какой-то беспокойный.

[UDFj]

с телефона очень удобно, "нетяжело" при малых скоростях и щадит трафик

Мой телефон не потянет даже это. Планшет, при всех его возможностях, использую в основном как читалочку с богатой аудиотекой. Хорошо, конечно, что наконец-то узрела сие )

Мне лениво тюленить, вот незадача. Я стал мало читать, какой-то беспокойный.

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

[смольник]

Мой тянет, только когда я не туплю и подключаю модем, тогда за три сотни еще месяц мобильного инета. А то я за третьи сутки спустил, кажется, сотен пять.
Я не возбужлен, скорее, растрепан и несобран, раздражает.
Пойду, милая, а то еще денег спущу и без связи останусь)

[UDFj]

Я не возбужлен, скорее, растрепан и несобран, раздражает.

В баньку бы тебя...

Пойду, милая, а то еще денег спущу и без связи останусь)

Малыш,..