Существенное дополнение!

Код для нижеследующего будет работать только в вашем дневнике, что видно на примере этого предложения. С одной стороны, тем самым вы проявите уважение к настройкам кода ваших ПЧ не навязывая своё видение оформления дизайна и не нарушая привычную гармонию, в которой комфортнее обитать вашему ПЧ. С другой - в ленте избранного ваших ПЧ ничего из ваших красот видно не будет, и вы немного потеряете в индивидуальности ваших постов, выделяясь особенностями оформления.
Если вы всё же желаете показать своё самовыражение через собственное видение, привлекая внимание, то эту фишку можно решать так, как это было у меня раньше - прописывая код для буквицы через добавление блочного CSS-элемента непосредственно в пост:

-- Дальше --

У всех в области создания записи, её редактирования или редактирования комментария есть панель с кнопками. На эту панель, как известно, можно добавлять другие кнопки. Они позволяют обходить трудности в реализации каких-либо маленьких прелестностей непосредственно CSS-кодом. Вот только, если вы меняете дизайн дневника, и при этом атрибуты селектора вшиты непосредственно в команды кнопки, то может случится такое, как у меня на старых страницах - следы невиданных зверей остатки от прошлого дизайна. И это, мягко говоря, не совсем приятно. Чтобы при изменении кода дизайна, менялся дизайн дневника на всех страницах, коды для кнопок можно просто вшить новыми селекторами в CSS-код.

-- ДЕТАЛЬНЕЕ --

Так как этот пример получился большим, то остальное - в следующем посте.

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

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

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

--- Скрины ---


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

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

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

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

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

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

Продолжим? )
Есть ещё одна забавная вещица - картинка поверх аватара. Что на ней будет, зависит только от вашей фантазии: готишная паутина с пауком или без, штрих-код, цветочный угловой орнамент, новогодний шарик с веткой сосны или ели, etc. Как увидите, далее приведён ещё один вариант рамки, настройки которого можно менять как заблагорассудится. Итак, выглядеть это может приблизительно так, как на следующем скрине:

Вынуждена предупредить, что этого "милого баловства" я в своём дневнике не оставлю. Так что, придётся довольствоваться скрином.
Отличия от -- предыдущего поста -- :
1. В коде для селекторов ".avatar" и ".avatar img" прописываем следующее:



В этом коде:
а) всё те же параметры обрезки картинок аватар в свойствах "max-width: 116px !important; max-height:120px !important; ";
б) цвет фона - прозрачный: "background-color: rgba(0, 0, 0, 0);";
в) картинка поверх аватара в свойстве "background-image: url('/userdir/2/5/0/5/2505934/77712739.png');";
г) отключение заполнения картинкой блока под аватар (повторяемость картинки) в свойстве: "background-repeat: no-repeat; ";
д) свойство "opacity:1;" не обязательно, хотя его можно поменять, чтобы слишком светлые аватары не пестрели в тёмном дизайне, соответственно, тёмные станут ещё темнее.
е) свойство "position:relative;" - обязательно!;
ё) в свойстве прописан "z-index: -10;", чтобы картинка самого аватара была под картинкой в селекторе родителя ".avatar". По-сути, картинка аватара "ляжет" под "#wrapper". Так что, будьте осторожны с этим свойством. Или заранее пропишите "z-index" для родителя такого значения, чтобы он с вписанным в него "background-image:" располагался под потомка ".avatar img".

2. От селектора ".avatar img:hover" пришлось отказаться, поскольку задачу с ":hover" для объекта с "z-index: -10;" я пока не решила.

А в следующем посте расскажу, как сделать twitter/статусы, оторвав пост от ленты.

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

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

Как сделать багетную рамку в ancient-стиле, или любом другом, для аватар, как на скрине:


В обычном виде, прописанном в коде
прозрачностью "opacity: 0.5;" для селектора ".avatar img".

После наведения мыши на картинку аватара

Реализацию "вживую" можно посмотреть в моём избранном, перейдя по ссылке:
Да, тут ещё один "не секрет" открывается для неискушённых. Чтобы попасть в избранное платных дневников, в которых отсутствует ссылка на избранное авторов, можно просто добавить в адресную строку "/?favorite" и перейти.

Итак, последовательность:
1. Сначала определиться с тем, до какого размера нужно задать обрезку аватар, чтобы они вмещались в фиксированный размер внутренних границ рисованных рамок. Например, у меня задано 116х116, что означает, что все аватары большего размера будут автоматически обрезаны до указанного размера снизу и справа. Для селектора ".avatar img" свойство обрезки лучше не задавать, т.к. картинка аватары будет растягиваться и искажаться, как в кривом зеркале.

2. В фотошопе сделать рамку или воспользоваться желаемым шаблоном, предварительно вставив в центр листа аватар с параметрами 120х120, чтобы потом подогнать размеры рамки под её внутренние границы. Уменьшить размер изображения или холста до необходимых. Внутреннюю часть рамки можно очистить от заливки, сделав "место" прозрачным. Сохранить для веб-устройств в .png формате с сохранением прозрачности. Полученное изображение будет больше размеров аватары - багет ведь. После загружаем рамку в БИ и продолжим работать с кодом.

3. Код:



Разберём сам код:
Селектор ".commentAuthor":
1. Свойства "display: block; position: absolute;" - обязательны, т.к. отрывают весь блок (первое) и позволяют обтекать его так, как будто других элементов на странице нет (второе). Свойством "left: 710px;" задано позиционирование, которое выводит весь блок за пределы "wrapper".
2. В свойствах "min-width: 150px; min-height:150px;" прописаны размеры самой картинки рамки. И сделано это для того, чтобы даже для тех постов в избранном, у авторов которых нет аватар, отображалась пустая рамка. Если не задавать, будет вылазить кусок картинки рамки.
3. Если остальное будет не понятно, с удовольствием растолкую "что к чему".

Селектор ".avatar":
1. Свойство "position: relative;" - обязательно.
2. В первых двух свойствах "max-width: 116px !important; max-height:116px !important; height: 116px !important; " - прописана обрезка, в последнем - максимальная высота самого блока для аватары.
3. В свойстве "margin: 17px auto !important;" задан отступ от верхней границы блока аватары до рисунка самого аватара ровно на ширину багета. Т.е., его подбираем ручками или померяем линейкой в фотошопе.
4. Свойство "overflow:hidden;" - скроет обрезанное.
5. Мне захотелось, чтобы картинки маленьких аватар были не в зияющем пустотой проёме рамки, а на некотором "зачернённом стекле" что ли, потому в свойстве "background-color: rgba(0, 0, 0, 0.7);" прописан черный фон с прозрачностью в 0.7.
Решить задачу с центрированием аватара по вертикали мне не удалось. Во всяком случае, как это реализовать средствами CSS я не знаю.

Селекторы ".avatar img" и ".avatar img:hover":
Свойства для них задают "поведение" в обычном состоянии и после наведения мышки на картинку аватара.

Селекторы ".sign" и ".sign:hover":
Форматируют подпись под аватарой до и после наведения мыши. О чём можно убедиться, ещё раз заглянув в моё избранное по ссылке выше.

Селекторы "#JournalComments .sign, #JournalDraft .commentAuthor":
Возникла проблема, когда на странице с комментариями моя тяжёлая рамка вместе с красивой, и всё же, довольно объёмной подписью под аватарой сильно растягивали страницу с комментариями работаю с ноута, почти всегда. Пришлось на этих страницах отключить отображение подписей. Как это смотрится, можно глянуть --- ТУТ ---

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

Простывшая авторица дневника сделала всё, что было в её силах,
и теперь пьёт чай с лимоном.


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

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

22:47 

Доступ к записи ограничен

Закрытая запись, не предназначенная для публичного просмотра

21:32


Всем известным мне Максимилиа́ннам и Максими́лианам и Максимам...
Чувственным и благородным. Прекрасным дамам и Доблестным рыцарям.



В вас души не чаю...


@настроение: 990

@темы: Тысяча цветрных хрустальных шариков

21:41 

Доступ к записи ограничен

Закрытая запись, не предназначенная для публичного просмотра

20:13 

Доступ к записи ограничен

Закрытая запись, не предназначенная для публичного просмотра

15:37



  8 месяцев, как не курю временно.
  Ещё один переливающийся хрустальный шарик.












@настроение: 993

@темы: Тысяча цветрных хрустальных шариков

  Я читаю гороскопы. В основном перед событиями, требующими ответственности, собранности, принятия непростых решений. И читаю исключительно как наставления, то есть их предостерегающую часть. В большинстве таких "предреканий" есть и хорошее, обнадёживающее и в некотором смысле поднимающее настроение, и какие-то маленькие замечания, как обереги. Вот они то меня интересуют. Обычно в них упомянуты все наиболее распространённые невзгоды и ненастья, сваливающиеся на людей земных и их плечи. И сразу для двух знаков... Вот подумалось сейчас: две родины, два знака, два мира,.. почему единственно важный счёт не оплачен? Как так получилось?.. Просто его не было в перечне для меня. Не предусмотрено. Было время, вспыхнуло и засияло сомнение "А может я ошиблась?..". Увы, нет.
  Не могу загадывать желание для себя. И всё же. Сбудется ли этот, во всём зависит только от нас самих. Дать ли ему полную силу, отпустив натянутые удила, или щёлкнуть кнутом, погоняя и чуть натянуть на себя, чтобы залётные помнили, в чьих руках бразды, и были спокойны за дорогу под копытами.
  Такие... люди...


@настроение: 994

@темы: Тысяча цветных хрустальных шариков

23:26

22:33

  Лето где-то там... раскачивается на качелях у берегов ласкового солнышка.
  С начала недели окончится завидный летний отпуск, даже при том, что по документам я всё ещё должна буду отдыхать. Нравится мне моя работа - во время отпуска хожу на неё, когда захочу или когда заблагорассудится. Хорошее последнее слово. Очень много задач, проблем и судеб, которые предстоит решать незамедлительно, безотлагательно и сиюминутно "ещё вчера".
  В ближайшие четыре месяца мне исключительно важен ровный эмоциональный фон внутри. Несколько дней, и это меньше, чем неделя у одного из самых древних богов, осталось для становления на твёрдую основу в себе, оттачивание и шлифовка, сворачивание внешних проявлений. Несколько дней на то, чтобы стать надеждой и опорой, закончить начатые проекты, ввести в стратегию развития на пять лет, сформулировать концепцию, расставить приоритеты. Подвести итоги и встретить осень с 16 часовым рабочим днём, короткими снами-перебежками, с выдержкой и достоинством. Они - все кто за мной, - должны быть уверены, что я могу всё, даже чудо. Чего бы мне это не стоило. Когда с улыбкой, а когда и с поразительным спокойствием на ухоженном лице без малейших следов усталости, смятения или нерешительного замешательства. Теперь они стоят за моей спиной и пойдут туда, куда направлюсь.
  Всё для того, чтобы в нынешних условиях хотя бы за ближайшие года два расплатиться с подругой, благодаря которой у меня есть свой дом - маленький, с мерцающим по вечерам видом из окна, уже совсем родной и такой милый, радушный и просто мой дом.
  Я не ухожу, просто стану больше жить своей жизнью, рассудком а не сердцем.
  И у меня ещё 995 цветных хрустальных шариков! )


@настроение: 996

@темы: Тысяча цветных хрустальных шариков

22:25

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


Завтра будет больше...


@настроение: 997

@темы: Тысяча цветных хрустальных шариков

23:44

Чуть не пропустила...

  Не дословно, но приблизительно так: «Нам пора. Мы скоро за тобой придём... Вообще-то мы уже пришли. Будь наготове». И что-то ещё. Тот сон стоило записать утром, сразу. После тех слов разлилось умиротворением предощущением перехода.
  Читая "улыбаешься" поймать себя на мысли, что и в самом деле улыбаюсь в тот самый момент.


@настроение: 998

@темы: Тысяча цветных хрустальных шариков

22:38

Это может быть что-то красивое... Вот как...

Giovanni Boldini - Джованни Болдини

Portrait of the Marchesa Luisa Casati with a Greyhound, 1908

Mademoiselle de Nemidoff

Consuelo, Duchess of Marlborough, with Her Son Ivor Spencer-Churchill, 1906

Portrait of Princess Marthe-Lucile Bibesco, 1911

Portrait of Mrs. Howard Johnston, 1906

Portrait of Madame E. L. Doyen, 1910

Portrait of the Countess Zichy, 1905

Portrait of Elizabeth Wharton Drexel, 1905

Portrait of Gladys Deacon, 1905-1908

Countess de Rasty Seated in an Armchair

The Divine in Blue

Spanish Dancer at the Moulin Rouge, 1905

Moving to the Bois de Boulogene

The Amazon with Puppy




Осталось привести в порядок планету...


@настроение: 999

@темы: Тысяча цветных хрустальных шариков

21:17

Что же, посмотрим...

  Всегда удивляюсь, этой удивительно тёплой, улыбчивой и внимательной... нет.. нет в нашем языке слова, с красивым звучанием на кончике, которым можно было бы назвать её не упоминая имени. "Женщина" звучит грубо, совсем близко от мужского. "Дама", к тому же заимствованное, - без летящей лёгкости под поступью, хоть и также уверенно предстаёт исполнительной, ответственной и приветливо несуетливой. Интеллигентность без столетнего налёта аристократизма. "Леди", "сударыня", "сеньора" не опишут даму в возрасте королевы и не совсем подходят по такому случаю для благородного обращения лучистому очарованию под звон колокольчиков. Мне кажется именно так она встречает всех посетителей в деканате.
  "Свет-душа", пожалуй, и всё что женственно. Ну вот,.. снова это слово, теперь хоть без "щ".
  А ещё голос иволги, обитающей где-то в платанах нашего внутреннего дворика...
Всё-всё, по чуть-чуть...


@темы: Тысяча цветных хрустальных шариков

00:42 

Доступ к записи ограничен

Закрытая запись, не предназначенная для публичного просмотра

04:54 

Доступ к записи ограничен

Закрытая запись, не предназначенная для публичного просмотра

14:47


  Новый диджей ABCLounge приятно удивляет композициями на свой вкус - невесть как обретёнными сокровищами. открывает разные «Правила жизни». И не предписания, и для себя брать что-либо, скорее напомнить себе о ярком и светлом другими словами. Интерес к тем кто прожил жизнь насыщенную и открытую, как сказали бы многие. От остальных же нет любопытственного ожидания и предвкушения обретения оставшихся предсказуемо скучных 5 заповедей, как от "обычных людей", громогласно отрицаемых чудаком Аланом Муром, и таких же по сути, как я. Выбор известных лиц произволен, скользящее внимание к акценту под портретом на сиюминутное кредо. Не зацепило второе, и от фотографии остаётся угловатое ощущение неумелого, небрежного наброска. Совсем немного женственных и мягких, временами говорящих "нет", и не отстаивающих мелочное до самоуничижения. Нет и всё. Есть мужественные, есть ребячливые за смехом и идиотской улыбкой скрывающие боль, говоруны, убеждённые, что своей многословностью не говорят о себе ничего. Личности, характеры, халтурщики в чём-то, или художники. Редки изысканные слова о жизни и наблюдениях. Чем сложнее, тем метафоричнее, контрастнее с парой-тройкой попаданий в сердцебиение или в тёмную застойную глубь разума. Ищут немногие. Они же понимают, что обрести сложнее, чем потерять, и ещё труднее сохранить и уберечь. Учусь. Стараюсь. Получается ломко. Но я учусь, я хочу сохранить.
Андрей Платонов ©
  Несимпатичное лицо с "говорящими" глазами и морщинками-следами улыбчивой мудрости. Несомненно всплывают сравнения с ранними впечатлениями. Потом мысль, что хороши такие странички с почти не "приглаженными" фразами-урывками, вместо натянутых биографий с картинками и редкими удачно отобранными афоризмами, коих, впрочем, богатство у великих творческих личностей. Ещё немного и он с ретушированной, и без того чёрно-белой фотографии, не отпускает с парковой скамеечки под густыми кронами видевших инакоговорящих. Андрей Платонович, вы сегодня моё впечатление и этому мимолётному знакомству быть памятью.

«... — Это я: я прожил жизнь.»
«Люди живут не любовью, не восторгом, не экстазом, а особым чувством тихой привязанности и привычки друг к другу,..»

Эсквайр, благодарствую.
Жизнь прекрасна!


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

20:06 

Доступ к записи ограничен

Закрытая запись, не предназначенная для публичного просмотра