18/03/2009 - Обновлен css-код
В связи с изменением верстки дневников в код внесены необходимые правки.
Если очень коротко, то добавляем строку: #pchs_title, #lastComments_title {display:none !important;} для корректной работы вкладок со свежими комментариями и постоянными читателями.

История версий25/07/2008 - Обновлен css-код.
Среди изменений:
1. Увеличение ширины до 980px;
2. Строка поиска;
3. Возможность задать свою картинку для каждой группы меню;
4. Приведен пример использования блока extrabottom;
5. Заложена возможность использования блока extratop.

15/03/2008 - В css внесены изменения в соответсвии с новой версткой дневников.
Тестируем, не стесняемся

Совместимость с основными броузерами ~90%.

Актуальная версия кода:

* 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; z-index:5;} #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; } #YaSearch {padding:0!important; margin:0!important;height:0!important;border:0!important;} #YaSearch A {display:none;} #YaSearchForm .submit {height:20px;} #YaSearchForm { visibility: visible !important; display: block !important; margin:0!important; width:235px; height:45px; padding:5px 10px 1px; position:absolute;right:0; top:55px;} #yaquery {color:#fff!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 ul li {float:left; width:450px!important; margin-right:20px; height:40px; border-bottom: 1px dashed #ddd;} #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; z-index:10;} #myDiaryLinks, #myDiaryLinks ul {display:block;} #thisDiaryLinks ul {background:#FFAA00;} #thisDiaryLinks {background: url('/userdir/0/3/4/0/0340/31838794.gif';) #FFAA00 no-repeat;} #globalLinks ul {background:#0198AC;} #globalLinks {background: url('/userdir/0/3/4/0/0340/31838554.gif';) #0198AC no-repeat;} #thisDiaryOwner ul {background:#89D51C} #thisDiaryOwner {background: url('/userdir/0/3/4/0/0340/31838548.gif';) #89D51C no-repeat;} #myDiaryLinks ul {background:#e33827;} #myDiaryLinks {background: url('/userdir/0/3/4/0/0340/31838550.gif';) #e33827 no-repeat;} #lastComments ul {background:#AE015C;} #lastComments {background: url('/userdir/0/3/4/0/0340/31838558.gif';) #AE015C no-repeat;} #pchs ul {background:#005286;} #pchs {background: url('/userdir/0/3/4/0/0340/31838556.gif';) #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: url('/userdir/0/3/4/0/0340/15202154.gif';) no-repeat; padding:0 0 0 20px!important;} .subscribe {background: url('/userdir/0/3/4/0/0340/15203190.gif';) no-repeat; padding:0 0 0 20px!important;} .addToQuote {background: url('/userdir/0/3/4/0/0340/15202458.gif';) no-repeat; padding:0 0 0 20px!important;} .umail, .email {background: url('/userdir/0/3/4/0/0340/15202570.gif';) no-repeat; padding:0 0 0 20px!important;} .diary {background: url('/userdir/0/3/4/0/0340/15202094.gif';) no-repeat; padding:0 0 0 20px!important;} .profile {background: url('/userdir/0/3/4/0/0340/15202054.gif';) 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;}

Это beta-версия темы оформления с условным названием TEXUS
Сверстанная почти полгода назад, она до сегодняшнего дня пылилась у меня в чулане из-за технической несовместисти с @дневниками.
За цветными горизонтальными полосками скрываются основные элементы меню.
Все просто, компактно и, одновременно, всегда под рукой.
Поддерживается всеми основными браузерами.

2DO list:
Меню сообществ
Поиск
Список любимых ссылок

PS.: Стиль каждый использует на свой страх и риск. Код распространяется as is - как есть.
Я оставляю за собой право не отвечать на вопросы типа "А как сделать... ?" - для этого есть DiaryCSS

Если стиль Вам все-таки понравился или оказался полезен при создании собственного дизайна — можете поставить действующую ссылочку на этот пост где-нибудь в своем эпиграфе.
Ну или черкнуть пару строк в комментариях ;-)

запись создана: 20.06.2007 в 03:54