Разделение контента

вторник, 27 сентября 2011

07:18

все записи пользователя в сообществе D Ash

Embrace your dreams and prove your honor...

Здесь я расскажу о том, как с помощью CSS в дневнике реализовать отображение трёх различных блоков контента в ленте избранного, дневнике и режиме комментариев соответственно. Зачем это нужно? Как правило, для шлифовки сложного оформления, но могут быть и другие причины. So, let's start.

Для начала создаём в записи три блока для контента. Выглядеть они должны примерно так.

<div class="feedTrigger">контент для ленты</div>
<div class="journalTrigger" style="display:none;">контент для дневника</div>
<div class="commentsTrigger" style="display:none;">контент для записи</div>

Зачем прописывать style="display:none"? Это скроет ненужные блоки в режиме ленты избранного, где ваш CSS не действует.

Итак, всё, что осталось - описать данные классы в CSS. Можете смело использовать следующий код:

.feedTrigger {display:none;}
#Journal .journalTrigger, #JournalDraft .journalTrigger {display:block !important;}
#JournalComments .commentsTrigger, #JournalDraft .commentsTrigger {display:block !important;}
#JournalFavorite .feedTrigger, #JournalQuote .feedTrigger, #JournalDraft .feedTrigger {display:block !important;}

И всё работает. Последняя строчка нужна для того, чтобы feed контент отображался в своём избранном (чужие и свои блоки такого типа) и в своём цитатнике. Также подразумевается, что в черновиках должны быть видны вообще все варианты.

Пример: лента, дневник, запись.

@темы: Дневник, Платные сервисы, Лента избранного, CSS, Черновики (автосохранение), Записи, Новая запись, Комментарии

URL

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

Где те милые времена, когда на Халяве.Ру у меня была стра... Ши: Ну и ну! Люди, люди...ну какие же вы всё-таки управля... Сетка мертвая... Посему смотрел кино. На ДВД. Дывыс...

Комментарии

12.03.2012 в 17:36

michaelgiacchino

Спасибо

URL

25.03.2012 в 02:40

D Ash

Embrace your dreams and prove your honor...

michaelgiacchino,
You're welcome. )

URL

25.03.2012 в 08:09

quirischa

капибара

D Ash, ааааа, хватит переписываться со спамерами!..

URL

26.03.2012 в 23:02

D Ash

Embrace your dreams and prove your honor...

quirischa,
Чё, они весёлые, вежливые. Ток тихие немного. ))

URL

21.08.2012 в 02:14

UDFj

D Ash, уважаемый CSS-native-speaker, помогите, пожалуйста, разобраться, правильно ли я вас поняла на следующем примере. Возникла такая проблема. В коде CSS-дизайна я прописала, чтобы блок "запись создана" с датой и временем не отображался на странице #Journal. И, в том дневнике (те под логином автора) этот блок действительно не отображается. А вот на этой же #Journal-странице из логина другого пользователя дата и время всё-таки остались. Возможно ли, что код, любезно предоставленный вами, сработает на #Journal-странице из-под логинов других пользователей, те скроет-таки нежелательный блок полностью.

URL

21.08.2012 в 09:01

D Ash

Embrace your dreams and prove your honor...

UDFj...,
Зайдите из-под профиля другого пользователя (и\или гостя) и проверьте class того блока. Он может быть другим (вообще, вряд ли... как я понимаю, нужная вам строчка кода #Journal .postDate {display:none;}).

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

Удачи.

URL

21.08.2012 в 10:07

UDFj

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

D Ash, позволите ли вы изложить проблему детальнее сюда (с картинками) и не будет ли считаться это флудом, тк связана она не с селектором #Journal .postDate, а с div.paragraph small и с div.paragraph b. Задача состоит в отключении блока "Запись создана __.__.2012 __:__", который появляется после поднятия вынесенной отдельным блоком записи, которая, в свою очередь, часто обновляется.

URL

21.08.2012 в 11:37

D Ash

Embrace your dreams and prove your honor...

UDFj...,
offtop

URL

21.08.2012 в 15:57

UDFj

D Ash, спасибо вам огромное! ) Попробовала все простые из доступных свойств - ничего. Так как бэк статичный, ваша идея с фоном на maskInner сработает точно ) Вечером его и опробую. Еще раз благодарю, вы спасли дилетанта-любителя ))
Не хочу показаться навязчивой, и всё же, можно ли обратиться к вам с ещё одним вопросом?

URL

21.08.2012 в 16:04

D Ash

Embrace your dreams and prove your honor...

UDFj...,
спасибо вам огромное! )
You're welcome. )

Не хочу показаться навязчивой, и всё же, можно ли обратиться к вам с ещё одним вопросом?
Можно.

URL

21.08.2012 в 21:16

UDFj

D Ash, вопрос )

URL

21.08.2012 в 21:54

D Ash

Embrace your dreams and prove your honor...

UDFj...,
ответЕсли я всё понял правильно - проблема в том, что его физически нет в коде тех страниц. По сути, как работает веб. Сначала язык сценариев (PHP, C#, Perl,..) генерирует HTML код в соответствии с прописанным алгоритмом, значениями из БД (MySQL,..) и переданными переменными if any. HTML в свою очередь подгружает (если прописано) CSS и JS. CSS отвечает за внешнюю сторону аспекта, JS - за динамику. Т.е., грубо говоря, CSS определяет, как страница выглядит, а JS - как реагирует на действия пользователя. Важно, что интерпретирует HTML, CSS и JS браузер, и, соответственно, запуская один и тот же код под разными браузерами, мы видим разные результаты. Что мы имеем в дайри? Где-то за сайтом есть прописанные скрипты, которые генерируют страницы. Кроме того, большая часть CSS также прописана изначально. К JS доступа нет вообще. Всё, что мы можем сделать - это добавить свой кусок CSS. Хорошая сторона заключается в том, что CSS с годами развивается, и, соответственно, сейчас это куда больше, чем просто сдвиги, цвета и бордюры. При желании, с помощью CSS и окна, открывающиеся по клику, можно написать, и текст в страницу добавить.

Итак, theory aside. Если кода поста на странице нет - CSS не поможет ему появиться.

Что по этому поводу можно сделать? Создать аналогичный пост, только средствами чисто CSS. Использовать селекторы :after (или :before), аккуратно спроектировать всё и повесить на всех страницах. К сожалению, таким образом в дайри можно вписать только текст (при парсинге юзерского CSS все символы "<" и ">" меняются на "#", и способа обойти это я не нашёл), но и там есть поле для фантазии (можно, скажем, собирать этот пост по кускам разных блоков, и юзать часть как контейнеры для картинок, а другую часть - для текста). Чтобы понять, что вообще можно использовать, надо читать код страницы (тот же Chrome для этого вполне подходит... или Firebug под Firefox). Но вообще, на каждой странице всегда забиты 10 блоков, #add_block1 ~ #add_block10, + #extratop, #extrabottom и ещё целая куча пустых няшек, которые можно найти и использовать.

В общем, такие дела. Удачи.

PS Как правило, !important - элемент необязательный. Нужен он только в том случае, если где-то в другой части CSS кода уже указан данный параметр, причём у того куска CSS права выше (например, путь к элементу указан точнее или там доступ по id, а тут по классу (у id права больше)).

URL

21.08.2012 в 23:36

UDFj

D Ash, вы - бог! ) благодарю за интересный развёрнутый и, самое главное, понятный ответ! )) Жаль, что...

URL

22.08.2012 в 04:38

D Ash

Embrace your dreams and prove your honor...

UDFj...,
offtop

URL

22.08.2012 в 20:36

UDFj

D Ash, спасибо за очередную идею и советы, добрый человек ))

URL

22.08.2012 в 21:07

D Ash

Embrace your dreams and prove your honor...

UDFj...,
You're welcome.

URL


Запомнить

Разделение контента

@Секреты и хитрости