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

понедельник, 16 июня 2014

22:51

трам-пам-пам

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

Когда наступает депрессия или смятение, попробуй лечь на спину на полу и подними лапы вверх. Иногда мир выглядит лучше вверх ногами.

Уважаемые мастера, нид хелп!

~~1) add_block нужно опустить вниз, на уровень экстработтома, но он не опускается через маргины. Как его опустить?~~
вопрос решён простой манипуляцией в фотошопе
~~2) bottomNav не отображается, хотя в коде её отсутствие не прописано.~~
найдена и впоследствии закрыта экстработтомом)

И ещё я уверена, что в коде есть какие-то строки, которые не несут никакой смысловой нагрузки и их можно безболезненно удалить, но я не знаю, какие. Подскажете, есть ли они?)

{---------------КАРТИНКИ------------------}
 body {padding: 0!important; background: #C0C759 url('/userdir/1/6/1/9/1619707/81299783.jpg') repeat 0 top; background-attachment: fixed;}
 #page-t {background: url('/userdir/1/6/1/9/1619707/81301390.png') repeat-y 0px top; width:831px; margin-left: -50px !important; padding: 100px 5px 20px 260px; min-height: 1300px; margin-top: 90px !important;}
 #extratop {padding: 0!important;background: url('/userdir/1/6/1/9/1619707/81300828.png') 0px bottom no-repeat; height: 380px; width: 1065px; margin-bottom:-135px; position: relative; z-index:5; margin-left: -50px;}
 #extrabottom {padding: 0!important;background: url('/userdir/1/6/1/9/1619707/81301923.png'); background-repeat: no-repeat; width: 1151px; height: 202px; margin-left: -135px; position: relative; margin-top: -156px;}
 .singlePost {background: url('/userdir/1/6/1/9/1619707/81251138.png') 50% bottom no-repeat; padding: 0px 0px 50px 0px!important;}
 #bottom_up a { display: block !important; position: fixed; bottom: 40px; right: 80px; width: 28px; height: 31px; background: url('/userdir/1/6/1/9/1619707/79711632.png') no-repeat scroll 0 0 transparent; text-decoration: none; text-align:center; text-shadow: none !important; -moz-opacity:1 !important; opacity:1 !important; filter:alpha(opacity=100); color: rgba(0,0,0,0) !important; }
 #bottom_up a:hover { -moz-opacity:1 !important; opacity:1 !important; filter:alpha(opacity=100); text-shadow: none !important;}
 #bottom_mainlink a { display: block !important; position: fixed; bottom: 82px; right: 80px; width: 28px; height: 34px; background: url('/userdir/1/6/1/9/1619707/79711715.png') no-repeat scroll 0 0 transparent; text-decoration: none; text-align:center; text-shadow: none !important; -moz-opacity:1 !important; opacity:1 !important; filter:alpha(opacity=100); color: rgba(0,0,0,0) !important; }
 #bottom_mainlink a:hover { -moz-opacity:1 !important; opacity:1 !important; filter:alpha(opacity=100); text-shadow: none !important;}
 {------------------------------------------------}
 img { max-width: 730px !important; }
 .quote_text img { max-width: 490px !important; }
 a:hover {color: #A37F15!important; text-decoration: none!important;}
 .avatar img { border: 1px solid #A37F15;}
 #message, .text {border: 1px solid #A37F15!important; padding: 5px!important;}
 #message {width: 500px!important;}
 .submit {padding: 5px!important;background: #E5D9B5!important;border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
 .submit:hover {background: #D2C49B!important;}
 .quote_text {display: block;background: #E7D9B3; padding: 10px; }
 {-------------------пост---------------------}
 #wrapper{min-width:980px!important; width:980px; padding:90px 0 0 0!important; margin-bottom:-400px!important;}
 .left #page-c {margin-left:-200px;}
 .left #page-t {margin-left:200px;}
 #postsArea {width: 730px;}
 #msg_form {width: 730px;}
 #message {width: 730px;}
 #commentsArea {width: 730px;}
 .header {font: normal 24px Times New Roman;}
 .singlePost, .singleComment {margin-bottom: 20px!important;}
 .postLinksBackg, .postLinksBackg a{font: normal 15px Times New Roman;}
 #epigraph .singlePost {background: none!important; padding: 0!important;}
 #bottomNav {display: block !important; top: 0px !important;}
 {----------------------меню--------------------}
 #side {width: 200px; text-align: left!important; padding-top: 100px; position: relative;}
 #side a {font: normal 18px Times New Roman;}
 #YaSearchForm #yaquery {width: 100px;padding: 4px 2px 4px 2px!important;}
 #side h1 {position: absolute; top: -330px;left: 100px; text-shadow: -3px 1px 2px #000000; text-align: left;width: 700px!important;white-space: nowrap!important;}
 #side h1 a {font: italic 40px Times New Roman; color: #ffffff !important; white-space: nowrap!important;}
 {------------none------------}
 .order_button, #lastComments, #headlineList,#pchs, .prevNextLinks {display: none!important;}

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

URL

пятница, 13 июня 2014

14:53

адаптация к смартфонам

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

химерная вечность

Довольно странная проблема, но попробуем.
В дизайне, который вы можете наблюдать на моем дневнике фиксированное меню, с заданным z-index: 1, и все бы хорошо и со всех ноутбуков-компьютеров все функционирует, но на смартфонах и планшетах выплывает баг: при попытке ввести новый комментарий, меню увеличивается, наползает на блок записи и перекрывает поле ввода комментария. СКРИН С ЭКРАНА СМАРТФОНА.

Я пробовал задавать отрицательный z-index меню, чтобы при увеличении оно уходило ПОД блок записи, а не поверх него, и все бы прекрасно, но в таком случае все кнопки на блоке меню перестают быть активными, никак не пойму почему.

@темы: меню, diaryCSS

URL

воскресенье, 08 июня 2014

19:47

Изменение свойств при прокрутке

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

Distrust is the way of guard, Untruth is the way of thrust.

Здравствуйте!
Нигде не могу найти ответ. Может, мне, конечно, приснилось, что я такое где-то видела, но все же...)
Допустим, у нас есть div или таблица с position: fixed; и изначально при отображении страницы у этой таблицы background-color: transparent; Далее мы прокручиваем страничку вниз, и в определенный момент у таблицы появляется фон. Подскажите, как это можно сделать?
И еще вопрос. Можно как-нибудь задать свойства одного элемента в зависимости от того, какой статус (:hover или что-то в этом роде) у другого элемента?

@темы: diaryCSS

URL

понедельник, 02 июня 2014

21:54

Изменение границ блоков

все записи пользователя в сообществе Дикий лесной эльф Лас

Осколками разных миров Острыми и цветными Собирает свое отраженье

Здравствуйте!
В css я не особо разбираюсь, поэтому прошу помощи. Постаралась сама найти ответы, но увы, почти безуспешно.

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

Разделитель для записей прописывала следующим кодом

 .bottom {background: url('/userdir/1/5/3/3/1533043/81219860.png') no-repeat; background-position:right; !important; }
 .singlePost {padding-bottom: 90px !important; background: url('/userdir/1/5/3/3/1533043/81219860.png') center bottom no-repeat;}
 #epigraph, #post0 {background: none; padding-bottom: 0px !important;}

При попытке прописать эту же картинку в последнюю строку, она либо задваивается, либо улетает в самый верх эпиграфа. За счет увеличения padding-bottom: 0px смещается не сам разделитель, а увеличивается блок эпиграфа.
Белые границы удается убрать только переходом с блочного дизайна на табличный, но тогда пропадают и внешние границы.

Подскажите, пожалуйста, как все это можно решить.

@темы: рамки и полоски

URL

11:57

Как подключить СSS?

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

Здравствуйте, при попытке подключить сервис, выходит надпись: Неверное значение периода для сервиса: "CSS. Попробовала подключить другие слуги - тоже самое. Прочитала что нужно подключить обязательный пакет услуг, не могу его найти. Вопрос: Как подключать платные сервисы?

URL

воскресенье, 01 июня 2014

16:01

Нестандартное меню

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

Когда наступает депрессия или смятение, попробуй лечь на спину на полу и подними лапы вверх. Иногда мир выглядит лучше вверх ногами.

Здравствуйте! Нужна помощь с меню)
Вот есть шаблон:

То есть сверху экстратоп, который будет соединён с обычным эпиграфом (ну, это фотошоп), и сам дневник (для этого код уже есть).
А вот как сделать меню в экстратопе как в шаблоне? Названия разделов должны быть в кругах, как и нарисовано. Сами названия - в виде картинок будут, потому что текст нестандартный. Само меню - выпадающее. Как это прописать? Я представляю, но смутно, никогда сама не работала с подобным меню. Координаты задать смогу, мне главное знать, какой в принципе код. И в настройках что ставить? Меню: сверху?

Помогите, плиз!

@темы: меню

URL

суббота, 31 мая 2014

01:09

все записи пользователя в сообществе Рэй Фостер

Доброго! Неожиданно обнаружилось, что я со своего аккаунта вижу нормальный дизайн, текст читаем на черном фоне, а посетители дневника видят полупрозрачный фон, и блок с кнопками меня почему-то оказывается в самом низу страницы, а не справа, как вижу я. Что за мистика, и как с этим бороться?

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

URL

понедельник, 26 мая 2014

00:00

Конкурс "отлови баг"

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

химерная вечность

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

@темы: Точка зрения

URL

суббота, 24 мая 2014

03:47

Выпадающее меню кодами цсс

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

Beatitudo nоn est virtutis praemium, sed ipsa virtus. | WARNING: Пишу так, как думаю. Читаю так, как написано.|

Дорогие и любимые.
Спасите, пожалуйста, идиота, мой мозг уже сдох.

решено

Мне нужно получить горизонтальное выпадающее меню цссныцми методами, а не встроенной настройкой.
Если что - да, встроенная не подходит. Совсем не подходит.

Беру для этого готовый дизайн от Тех. Но не понимаю, каким кодом в нем прописывается выпадение элементов в строчку, а не списком. Убрать этот кусок кода - и вуаля, я получу то, что нужно.

Самое обидное, что я это уже делал лет 6 тому назад. Сейчас пытаюсь повторить и НЕ ПОМНЮ.

Великий код от великого Тех.

 * html body{behavior:url("/files/csshover.htc";);}
 * html #wrapper{overflow:visible;}
 body {padding:10px !important; font-family: "Trebuchet MS",Arial,sans-serif!important; font-size:75%!important; color:#333!important; background:#ccc;}
 .postDate, .postTitle {color:#349dcb; font-size:140%!important; font-weight:700!important;}
 A {color:#006DBA!important;}
 #wrapper{ background:#fff; padding:0 !important; width:980px; min-width:980px!important; margin:0 auto !important;overflow:hidden !important;}
 #side {margin:0 !important; padding:0 !important;}
 #side .bordered {width:980px;background:#002e4b; height:91px; margin: 0 !important; padding: 0!important; position:absolute; top:10px;}
 #side li {float:left; display:block; padding-right:10px!important;}
 #side A, #side {color:#fff!important;}
 #extratop {height:130px;}
 #page-c {height:auto; margin:0!important}
 #page-t {margin:0!important}
 .singlePost {height: auto !important; height: 1em; border: 0 !important;}
 #thisDiaryLinks, #globalLinks, #thisDiaryInfo, #thisDiaryOwner, #myDiaryLinks, #lastComments, #pchs, h1 {clear:none; float:left; display:block; width:135px; height:26px; margin:0!important; }
 #thisDiaryLinks ul, #globalLinks ul, #thisDiaryOwner ul, #myDiaryLinks ul, #lastComments ul, #pchs ul{ display:none; width:960px; padding:10px 10px; position:absolute;left:0; top:90px;}
 #lastComments:hover ul, #lastComments ul:hover, #pchs:hover ul, #pchs ul:hover, #globalLinks:hover ul, #globalLinks ul:hover, #thisDiaryOwner:hover ul, #thisDiaryOwner ul:hover #globalLinks:hover ul, #globalLinks ul:hover, #thisDiaryLinks:hover ul, #thisDiaryLinks ul:hover {display:block!important;}
 #myDiaryLinks, #myDiaryLinks ul {display:block;}
 #lastComments ul li {float:left; width:450px!important; margin-right:20px; height:40px; border-bottom: 1px dashed #ddd;}
 #thisDiaryLinks ul {background:#FFAA00;}
 #thisDiaryLinks {background: # #FFAA00 no-repeat;}
 #globalLinks ul {background:#0198AC;}
 #globalLinks {background: # #0198AC no-repeat;}
 #thisDiaryOwner ul {background:#89D51C}
 #thisDiaryOwner {background: # #89D51C no-repeat;}
 #myDiaryLinks ul {background:#e33827;}
 #myDiaryLinks {background: # #e33827 no-repeat;}
 #lastComments ul {background:#AE015C;}
 #lastComments {background: # #AE015C no-repeat;}
 #pchs ul {background:#005286;}
 #pchs {background: # #005286 no-repeat;}
 #thisDiaryPhoto, #paySupportLink, #diarySupportLink, #diarySpiritLink, #myLinksLink, #upInChart, #myProfileLink, #NContent, #login_form, #mainpageLink, #pchs_title, #lastComments_title {display:none !important;}
 #extrabottom {height:5px;width:100%; background:#002e4b; clear:both;}
 #thisDiaryInfo, H1 {font-size:220%!important;margin:0!important; height:45px!important;}
 #thisDiaryInfo { width:350px;text-align:right; padding: 10px 10px 0 0!important; }
 H1 { width:610px;text-align:left!important; padding:10px 0 0 10px!important;}
 .search {width:160px !important;}
 .sign {font-size:80%; color:#666;}
 .header {color:#e33827!important;}
 #TagsList {padding:0 !important; margin:0!important; position:absolute;left:0; top:-55px;}
 #TagsList LI {border-bottom: 1px dashed #ddd; display:block; height:20px; float:left; width:140px!important; margin-right:10px!important;}
 #TagsList LI A {padding:0 !important; }
 .postLinksBackg {display:block !important; border-top: 1px dashed #ddd; border-bottom: 1px dashed #ddd; margin-top: 10px !important; padding:10px 0 !important;}
 .comments {background: # no-repeat; padding:0 0 0 20px!important;}
 .subscribe {background: # no-repeat; padding:0 0 0 20px!important;}
 .addToQuote {background: # no-repeat; padding:0 0 0 20px!important;}
 .umail, .email {background: # no-repeat; padding:0 0 0 20px!important;}
 .diary {background: # no-repeat; padding:0 0 0 20px!important;}
 .profile {background: # no-repeat; padding:0 0 0 20px!important;}
 .bordered, .menuSection {border: none !important;}
 .text, textarea, #mce_editor_0, #mceSpanFonts {font-family: "Trebuchet MS",Arial,sans-serif!important;border:#ccc 1px solid!important;color:#000!important}
 #JournalComments .singlePost div.authorName, #JournalComments .singlePost div.commentAuthor {display:none;}
 #JournalComments .singlePost div.paragraph {margin:0!important;}
 #codebuttons a {float:left;}
 #codebuttons {clear:both;}
 #mce_editor_0_parent a, #mce_editor_0_parent select {float:left;}

Решено, спасибо еще раз

Решено. Спасибо за просветление!

запись создана: 23.05.2014 в 14:49

@темы: меню

URL

вторник, 20 мая 2014

15:02

Вытащить название

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

В общем-то вопрос не новый, задавался часто, но довольно давно, может за это время кто-то нашел решение

Меню выпадающее, ширина 200px, при наведении расширяется до 800px.
Можно ли вытащить из этого блока название дневника и сделать его независимым от меню?
fixed помогает вытащить, но при наведении мышки на название все меню конечно же расширяется...

@темы: меню

URL

четверг, 08 мая 2014

12:23

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

Внутри себя я ношу океан, чтобы при встрече утопить тебя в нём (с)

Здравствуйте!

Хочу кое-что поменять в платном дизайне www.diary.ru/~design-devil1/ (по ссылке дизайн из каталога оформления).
Но самостоятельно не могу, так как не разбираюсь в CSS, а изменения там не базовые.

По катом то, что я хочу видеть в дизайне.
скриншот дизайна
Могу предоставить PSD, если это необходимо или иконки в PNG.

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

Если есть возможность помочь или советы, куда можно обратиться, буду очень рад!

URL

воскресенье, 04 мая 2014

05:39

все записи пользователя в сообществе [ Ice Bird ]

Доброночеутра)

Нашла в соо код, изменяющий форму скобок, т.к. хотела поставить вместо них другие — квадратные или вообще |, оно поставилось, но круглые никуда не делись и в итоге получаются сдвоенными: [(...)].
Как бы вообще убрать круглые?

Код был такой:
.comments_count_link:before{content:"[ ";}
.comments_count_link:after{content:" ]";}
.comments_count_link:empty {display:none;}

@темы: текст, основные блоки

URL

четверг, 01 мая 2014

22:30

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

не будь среди тех, кто стреляет по мне.

Есть какое-то волшебное кодовое слово, которое уберет запятую или покрасит ее в цвет тега?)

@темы: текст, diaryCSS

URL

вторник, 22 апреля 2014

03:20

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

Отформатировала меню, но теперь при наведение на его пункты ссылки не соответствует надписи :emn:

Например, и Цитатник, и Дискуссии и сами Настройки являются ссылками на "Настройки".

Сам дизайн стоит у меня прямо сейчас, но я на всякий случай прикладываю код для меню.

 {-----------------------------------------------------menu-----------------------------------------------------}
 #side {position:fixed; right:-996px !important; width: 990px; top:5px;-moz-transition: all 0.9s ease; -webkit-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s ease; -moz-opacity:.99 !important;opacity:.99 !important; filter:alpha(opacity=99); !important;}
 #side:hover {right:0px !important;-moz-transition: all 0.9s ease; -webkit-transition: all 0.9s ease; -o-transition: all 0.9s ease; transition: all 0.9s ease;}
 #side a, #side a:hover { text-decoration:none !important;}
 #side {background: url('/userdir/1/2/5/9/1259706/80973925.png') no-repeat; width:992px; height:105px;padding: 0px 10px; margin: 0px !important; }
 #side ul {width:990px !important;}
 .menuSection {text-align:center;}
 {-----------------------------------------------------menu-----------------------------------------------------}
 #side h1 a {font: bold 9px Arial; color: #fff !important; position: relative; top: 12px; right: -111px; display:block;text-shadow: 0px 1px 0px #000;}
 #authorName {font: bold 14px Arial; color: #fff !important; position: relative; top: -11px; right: 97px; display:block;text-shadow: 0px 1px 0px #000;}
 #tagslistlink a {font: bold 11px Arial; color: #000 !important; position: relative; top: -54px; right: 319px; display:block;text-shadow: 0px 1px 0px #fff;}
 #postsCalendar a {font: bold 9px Arial; color: #000 !important; position: relative; top: -41px; right: 424px; display:block;text-shadow: 0px 1px 0px #fff;}
 #myDiaryLink a {font: 11px Arial; color: #000 !important; position: relative; top: -28px; right: 425px; text-shadow: 0px 1px 0px #fff;}
 #writeThisDiary a {font: bold 11px Arial; color: #000 !important; position: relative; top: -44px; right: 319px; display:block;text-shadow: 0px 1px 0px #fff;}
 #myDraftLink a {font: bold 11px Arial; color: #000 !important; position: relative; top: -59px; right: 215px; text-shadow: 0px 1px 0px #fff;}
 #umailLink a {font: bold 11px Arial; color: #000 !important; position: relative; top: -74px; right: 110px; text-shadow: 0px 1px 0px #fff;}
 #myDraftLink .count_box span {font: bold 11px Arial; color: #000 !important; position: relative; top: 0px; right: 0px; text-shadow: 0px 1px 0px #fff;}
 .count_box {color: rgba(0, 0, 0, 0);}
 #myFavLink a {font: bold 11px Arial; color: #000 !important; position: relative; top: -89px; right: 5px; display:block;text-shadow: 0px 1px 0px #fff;}
 #myQuotLink a {font: bold 11px Arial; color: #000 !important; position: relative; top: -104px; right: -103px; display:block;text-shadow: 0px 1px 0px #fff;}
 #discussionLink a {font: bold 11px Arial; color: #000 !important; position: relative; top: -119px; right: -206px; text-shadow: 0px 1px 0px #fff;}
 #referenceLink a {font: bold 11px Arial; color: #000 !important; position: relative; top: -134px; right: -311px; text-shadow: 0px 1px 0px #fff;}
 #optionsLink a {font: bold 11px Arial; color: #000 !important; position: relative; top: -149px; right: -417px; display:block;text-shadow: 0px 1px 0px #fff;}
 #mainpageLink a {font: bold 9px Arial; color: #000 !important; position: relative; top: -239px; right: -312px; display:block;text-shadow: 0px 1px 0px #fff;}
 #iAmQuit a {font: bold 11px Arial; color: #000 !important; position: relative; top: -253px; right: -415px; display:block;text-shadow: 0px 1px 0px #fff;}
 {-----------------------------------------------------none-----------------------------------------------------}
 #more_login, #thisDiaryPhoto, #allDiaryLink, #YaSearch, #writeToAuthor, #subscribeEmail, #unsubscribeEmail, #addToFav, #delFromFav, #rssLink, #upInChart, #headlineList, #thisDiaryLinks, #myNotepadLink, #myLinksLink, #myProfileLink, #albumLink, #photolibLink, #myAccountLink, #favListLink, #pchListLink, #communityCatalogueLink, #myCommunitiesLink, #myCommunityLink, #randomDiaryLink, #diarySpiritLink, #diarySupportLink, #faqLink, #lastComments, #pchs, #myLinks, #Stats, #TagsList, #bottomNav, #topNav, #epigraph .postTitle, #epigraph .postLinksBackg {display:none !important;}

@темы: меню

URL

воскресенье, 20 апреля 2014

01:08

все записи пользователя в сообществе true white queen

horrorterror

На вас последняя надежда.
Собственно, сабж:
testing01.diary.ru
Третий день ищу причину, по которой у разных людей с разных браузеров (с тестового или разных аккаунтов - не важно) прыгают кнопки меню. Исключал все, что мог (разрешение, настройки аккаунта, плагины браузера, касперского и адгвард) - если ставлю расположение кнопок (hover) ровным для себя, они автоматически съезжают у других. Даже с одного аккаунта или с примерками дизайна. В чем может быть причина? Я уже всю голову себе сломал.

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

URL


Запомнить