@CSS — стилизация дневников — @дневники: асоциальная сеть

четверг, 04 августа 2011

21:05

Изменение стандартных названий

все записи пользователя в сообществе you want to sleep

Я несу пиздец. (c)

Мм, подскажите пожалуйста, можно ли изменить название пунктов меню (цитатник, черновики и прочее) на другие надписи (не картинкой)?
По поиску нашел {content: 'bla-bla';}, но не видит.

О, разобрались. спасибо vykos и ссылке

Пример на ссылке "настройки"

#optionsLink a:before {content:"Options"}
#optionsLink .count_box {dispay: inline !important; }
#optionsLink span {display: none; }

*То что курсивом, меняется на нужное.
**На заголовках меняется через раз, подробнее разбираться можно по ссылке выше.

@темы: текст, меню, diaryCSS, Дизайн

URL

09:35

не открываются дневники

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

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

вообще ничего не открывается! ни дневники, ни сообщества! Пробовала с разных компъютеров и браузеров! к примеру когда открываю появляется вот это: /var/www/code/www.diary.ru/php/userdir/4/7/9/1/479156/thumb Failed create /var/www/code/www.diary.ru/php/userdir dir или вот:
/var/www/code/www.diary.ru/php/userdir/6/8/8/1/688176/thumb Failed create /var/www/code/www.diary.ru/php/userdir dir , ну и так далее... Исправте, а? Пожалуйста!

@темы: дневники

URL

воскресенье, 31 июля 2011

16:20

помогите,я здесь совсем новенбкая

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

ебата и хуета

как поменять диз? я например хочу посставить своюю картинку.
в настройках не получается какой туда нужно код вставлять или что?

URL

суббота, 30 июля 2011

21:24

все записи пользователя в сообществе Ten-Ho

Эх, Тенши все таки ты эстет))) © nivero

Вот такой нубский вопрос - можно кого-нибудь попросить в помощь чтоб склепали из визуального - код? Бишь с меня - как должно выглядеть, а с желающего помочь - написать сие?
или тут только умные вопросы? >_<

@темы: Дизайн

URL

четверг, 28 июля 2011

13:21

все записи пользователя в сообществе синяк на пятке

Как сделать название дневника из двух слов в одну строчку? Навигационная панель справа.

URL

00:41

Меняющийся фон

все записи пользователя в сообществе Чарльз Блау

Go hard or go home

Привет!
Можно ли как-нибудь реализовать меняющийся фон у дневника? Чтобы при каждом посещении/обновлении фоновая картинка случайно выбиралась бы из некоторого набора.

@темы: фоновые картинки, diaryCSS

URL

вторник, 26 июля 2011

12:16

все записи пользователя в сообществе Janusz Cienkowski

Uwaga! Dobry pies, ale ma słabe nerwy.

Здравствуйте.
После применения фиксированной высоты к side в неизвестные дали ушел authorName и не желает возвращаться даже если кусок про высоту убрать.

 #side {text-aligh: center; !important; width: 310px; height:15px; !important; position: relative; left: 381px; top: -20px;}
 #thisDiaryLinks ul, #myDiaryLinks ul, #thisDiaryOwner ul, #globalLinks ul, #myLinks ul, #pchs ul, #lastComments ul{background: url('/userdir/2/9/9/0/299032/65289662.png'); #e8e7e7; }
 #thisDiaryOwner_title {display:block; width:145px; height: 58px; line-height:220px; overflow:hidden; background: url('/userdir/2/9/9/0/299032/70639714.png') -1px 15px no-repeat;}
 #thisDiaryOwner{position:absolute; top: -2px;left: -110px;z-index:0;}
 #thisDiaryOwner ul{right:0px; width:140px !important; padding-top:-5px !important;top: 70px;}
 #myDiaryLinks_title {display:block; width:185px; height:69px; line-height:250px; overflow:hidden; background: url('/userdir/2/9/9/0/299032/70639716.png') 2px 15px no-repeat;}
 .menuSection ul {background:# repeat-x; !important;}
 #myDiaryLinks {position:absolute; top: -2px;left: 75px;z-index:0;}
 #myDiaryLinks ul { right:0px; width:180px !important; padding-top:0px !important;top: 70px;}
 #globalLinks_title {display:block; width:178px; height:58px; line-height:250px; overflow:hidden; background: url('/userdir/2/9/9/0/299032/70639718.png') 2px 4px no-repeat; }
 #globalLinks {position:absolute; top: 10px;left: 329px;z-index:0;}
 #globalLinks ul{right:30px; width:140px !important; padding-top:-5px !important;top:55px;}
 #side h1 a {position:absolute; left:-20px; top:-480px; display:block !important; width:360px !important; height:23px !important; line-height:190px !important; overflow:hidden !important; background: url('/userdir/2/9/9/0/299032/70639436.png') 2px 4px no-repeat !important;}
 #authorName{position:absolute; left:-98px; top:-55px; display:block !important; width:153px !important; height:19px !important; line-height:150px !important; overflow:hidden !important; background: url('/userdir/2/9/9/0/299032/70639469.png') 2px 4px no-repeat !important;}

Вопрос следующий: как вернуть имя на законное место, не увеличивая отступление между экстратопом и эпиграфом?

@темы: меню

URL

суббота, 23 июля 2011

11:29

Поиск по дневнику

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

ПОдскажите пожалуйста, как сделать, чтобы поиск по дневнику был виден постоянно, а не открывался по ссылке?
Конструкция: #YaSearchForm {visibility:visible !important;}
Не работает

@темы: меню, diaryCSS, основные блоки, платный сервис, Дизайн

URL

пятница, 22 июля 2011

10:35

все записи пользователя в сообществе Project: UnMEI

Reckless

Добрый день.
В настоящее время только-только начинаю разбирать стили и то, как из писать здесь, в дневниках, хотя общее представление о CSS имеется (до этого был написан код и сделан дизайн для платформы mybb), и вот уже на самыхъ начальных этапах сталкиваюсь с проблемой:
все основные элементы смещаются относительно центра примерно на 10 пикселей влево, причем во всех браузерах кроме эксплорера. Есть подозрение, что это как-то связано со скролл-баром и его шириной. Не могли бы Вы подсказать, в чем проблема, и как ее решить?

Код:

 body {background: #8aa1b8 url('/userdir/2/6/9/4/2694576/70533550.jpg') center center repeat fixed; padding: 0 0 0 !important; }
 #wrapper {width: 850px !important; position: absolute; padding: 0 0 0 !important; }
 #extratop {width: 850px; height: 400px; position:fixed; position: center center; }
 #page-c {position: top center; }
 #extratop {background: url('/userdir/2/6/9/4/2694576/70533638.png') no-repeat; }

Появился еще один вопрос. И хотелось бы получить если не ответ, то ссылку на место, где можно почерпнуть необходимую информацию.
Имеется шапочка для дневника следующего формата:

Хотелось бы сделать из нее меню такого типа, чтобы при наведении на лестницу слов слева, направо, в горизонтальную строчку появлялись пункты меню, написанные таким же шрифтом, но меньшего размера на прозрачном фоне. Возможно ли это сделать, а если да, то как?

запись создана: 18.07.2011 в 15:42

@темы: меню, основные блоки, Дизайн

URL

четверг, 21 июля 2011

22:27

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

порнушных дел мастер

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

@темы: меню

URL

00:18

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

Ходят слухи, что он, танцуя по небу разит мечом словно ветер, что даже во тьме звёздный свет отражается от его меча солнечным днём

Подскажите как прописать стиль только для 8 версии ие.

Какие ограничения есть при сохранении цсса?
(помимо удаления комментарий, вырывания слов sсript, frame, http:, обратных слешей и обрезания до 65356 символов, если вписано больше)

@темы: diaryCSS, Дизайн

URL

воскресенье, 17 июля 2011

21:57

И вновь за помощью

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

Склероз - прекрасная болезнь! Ничего не болит и каждый день - новости.(c)

Все еще пытаюсь заменить название дневника на изображение, все блоки сменились, а этот вот артачится, отдельно картинка отдельно текст. Если размер уменьшать до нуля( надписи) то просто картинка без ссылки=_=

 #side h1 {position:absolute;top:80px; left:320px}
#side  h1 {width:340px; height:250px; font-size: 1px !important; background: url('/userdir/7/5/1/4/751493/70514453.png'); 2px 4px no-repeat;}

@темы: меню

URL

20:21

все записи пользователя в сообществе горган

Не грусти пацан, что не поехал в пятницу на посёлок, пускай грустит тот, кого там не ждут.

Здравствуйте.
1.Не получается переименовать ссылку "написать у себя". Все соседние ей удалось по однотипному шаблону, эта не реагирует даже с !important.

 .quote_post a:after {content: "quote post" !important;}
 .quote_post a span {display: none !important;}

2.Для ссылок "следующая/предыдущая" внизу есть отдельные значения? Потому что я нашла только общее .pages_str
3.Ссылки "следующая/предыдущая" в посте так же не переименовываются. After/before работает, но на display:none не реагирует.

 .prevPostLink a:after {content: "туда";}
 .prevPostLink a span {display: none !important;}
 .nextPostLink a:after {content: "сюда";}
 .nextPostLink a span {display: none !important;}

4.Можно ли каким-нибудь кодом заменить значок собачки у ника пользователя на любую другую иконку?

@темы: текст, Дизайн

URL

16:49

Размер изображений

все записи пользователя в сообществе you want to sleep

Я несу пиздец. (c)

Доброго времени суток, а нельзя ли как-нибудь увеличить возможный размер загружаемой картинки? (больше чем у платного сервиса)
Или может кто-нибудь знает, как можно сильно сжать размер png картинки без особой потери качества?

@темы: фоновые картинки, платный сервис

URL

00:02

последние коментарии

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

Склероз - прекрасная болезнь! Ничего не болит и каждый день - новости.(c)

не подскажите код для этого блока меню?

и + как правильно заменить имя и название дневника вместо подписи на картинки. Они у меня заменяются но перестают быть ссылками=_= и возможно ли это Оо

Ну и еще вопрос если можно вот код

.top #authorName {margin-top:420px !important;margin-right:150px !important;display:block; width:500px; height:130px; font-size: 1px !important; background: url('/userdir/7/5/1/4/751493/70514497.png'); 2px 4px no-repeat;}
 #thisDiaryOwner {position:absolute;top:250px !important; left: 60px;}
 #thisDiaryOwner_title {display:block; width:275px; height:160px; font-size: 0px !important; background: url('/userdir/7/5/1/4/751493/70514094.png'); 2px 4px no-repeat;}
 #myDiaryLinks {position:absolute;top:250px !important; left: 305px;}
 #myDiaryLinks_title {display:block; width:360px; height:135px; font-size: 0px !important; background: url('/userdir/7/5/1/4/751493/70514348.png'); 2px 4px no-repeat;}
 #globalLinks{position:absolute;top:250px !important; left:690px;}
 #globalLinks_title {display:block; width:250px; height:153px; font-size: 0px !important; background: url('/userdir/7/5/1/4/751493/70514370.png'); 2px 4px no-repeat;}
 #thisDiaryOwner,#myDiaryLinks,#globalLinks{text-align:center;font-family: "AGReverance"; font-size:20px !important; }
 .top .menuSection ul, .top #thisDiaryPhoto, .top #sign{background-color:#3a3424;border: 1px double #9f7900;}
 #side h1 {position:absolute;top:80px; left:320px}
 #side h1{display:block; width:500px; height:200px; font-size: 1px !important; background: url('/userdir/7/5/1/4/751493/70514453.png'); 2px 4px no-repeat; }
 #thisDiaryPhoto {display:none}

Все картинки работают нормально, а вот та которая заменяет название дневника, работать не хочет =_= размер в один пиксель я себе для наглядности устанавливала)

запись создана: 16.07.2011 в 23:32

@темы: меню

URL

суббота, 16 июля 2011

12:19

Заглавная буква

все записи пользователя в сообществе Кошмаринка

Мне говорили - похожа на мандаринку

Подскажите, пожалуйста, как сделать, чтобы первая буква каждого поста (не комментария) была большой и отличного от остального текста шрифта и цвета. Буду благодарна за ответ или ссылку на запись, где такое уже обсуждалось.

@темы: текст, diaryCSS, Дизайн

URL

пятница, 15 июля 2011

17:38

Альтернатива MORE

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

Veni, vidi, vici.

Достаточно давно уже обещал сделать эту штуку. Наконец добрался.

Итак, идея в том, чтобы сделать аналог MORE, которые оставался бы свёрнутым при просмотре одиночного поста (комментариев).

Объяснение того, как работает. Для тех, кто хочет понять.

Готовый код и инструкции к применению.

Готовый код и инструкции к применению.

.panelIn {width:300px; height:300px; padding:20px; border-radius: 30px 15px; -moz-border-radius: 30px 15px; box-shadow: 0 0 15px #222; -webkit-box-shadow:box-shadow: 0 0 15px #222; -moz-box-shadow: 0 0 15px #222; background: url('/userdir/1/9/2/4/1924297/70496636.png'); display:none; position:absolute; overflow:auto; left:-170px; top:-170px; border:1px solid #111; color:#ccc; text-shadow: 0 0 1px #ccc; z-index:200 !important;}
.panelOut {position:relative; display:inline !important; text-shadow: 0 0 3px #93a3da; color:#93a3da;}
.panelOut:hover {cursor:pointer; text-shadow: 0 0 9px #93a3da;}
.panelOut:active .panelIn, .panelIn:hover {display:block; cursor:default !important;}

Сразу говорю, код адаптирован под мой днев, поэтому, перед тем как применять, не поленитесь слегка подогнать его под себя. Кроме того, в .panelIn прописан background. Либо замените его на какой-нибудь цвет, либо залейте изображение к себе в БИ и измените ссылку (если вам нужно то же, что у меня - оно тут). Иначе не получится, парсер CSS чистит ссылки на изображения из чужих БИ.

Это вставляйте в пост:

<div class="panelOut">название ссылки<div class="panelIn">содержимое вложения</div></div>

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

Пример 1. "Предисловие" и "первая глава".
Пример 2. Любой пост дневника.

@темы: текст, diaryCSS, Дизайн, Мысли вслух

URL

09:51

Иллюзия анимации

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

Veni, vidi, vici.

Нет, речь, разумеется, не о гиф. Но о спрайтах.

Идея проста. Берём несколько блоков, вкладываем друг в друга, привязываем на одно место (через position:absolute и position:relative (или position:absolute \ position:fixed) на внешнем), прописываем отношения по hover'ам. Загвоздка в том, что hover не срабатывает просто при появлении блока под курсором, статус проверяется при движении мышью. На практике, если цель - заставить чуть более плавно, чем обычно, выплыть (появиться фейдом, загореться или ещё что) какой-то элемент в дизайне дневника, это не будет проблемой, потому что попиксельно мышь никто не двигает. Ещё один момент - реагирует css быстро (по мере продвижения курсора на каждый пиксель (при быстром движении - на каждый шаг, там он больше 1px)), а значит лучше бы иметь систему вложенных блоков побольше (чтобы было больше кадров) (что можно сделать искуственно в эпиграфе или посте, но при проработке дизайна днева не получится, ведь приходится придерживаться изначально заданных кол-ва и структуры блоков).

По поводу отношений между вложенными блоками. Вариант первый - при наведении на первый блок (скажем, q1) мы прослеживаем его hover и применяем стиль ко вложенному блоку (например, q2) (q1:hover q2{...}), потом также к последующему и т.п. до последнего (при этом в конце анимация остановится). Вариант второй - изначально видны все, но при наведении они скрываются (я в примере просто сводил height и width к 1px, но можно придумать что интереснее, с тем же clip'ом, скажем (забавно, но display:none не сработал)); при этом, "анимация" циклична, но тут один большой фейл - hover в данном случае (разумеется) проходит через все уровни сразу, и вылетают, соответственно, по сути рандомные кадры.

Об изображении. Как уже говорил, тут целесообразно использовать спрайты. Т.е. большое изображение, состоящее из маленьких кадров (пример). При навешивании background'а мы просто двигаем это самое изображение. Так мы сразу его кэшируем, что весьма удобно, ибо избавляет от хлопот с предварительным кэшингом. В моём примере я не убирал отработавшие фреймы (т.е. всё видно одновременно). На деле, чтобы убрать их достаточно снять bg на hover'е (qX:hover {background:none;}).

Кроме того. Не обязательно закручивать эту штуку именно с bg и спрайтами, можно по тому же принципу hover'ов на вложенных блоках прописывать разные стили (позицию, размеры, прозрачность, сглаженность углов... что угодно, в общем) на разных элементах.

На практике ещё нигде не применял, но небольшой пример сделал. Тут.

Как-то так. Надеюсь, кому-нибудь пригодится\покажется интересным. Придумаю что ещё интересное (по этому или другому поводу) - отпишу где-нибудь тут.

@темы: фоновые картинки, diaryCSS, основные блоки, платный сервис, Мысли вслух

URL


Запомнить