«Witch hunt» by edwinowl

понедельник, 18 ноября 2013

23:48

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

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

Делюсь прекрасным, кто захочет взять дизайн мастера edwinowl себе, отмечаемся в комментариях.

Пишет edwinowl

Witch Hunt
посмотреть можно здесь

Судя по коду, писал я его пьяный в темноте.
Сразу предупрежу, код большой, и заменять в нем изображения лучше, используя функцию ctrl+f по названиям вставляемых картинок, правильный перечень последовательности которых дан внизу.
Не пугайтесь, одна и та же картинка может быть использована дважды (И трижды. И четырежды). Повторения обусловлены кодом.

Твиттер (аka блокнот) в левой части дневника на странице записей абсолютно функционален и может включать в себя плеер, текст или виджеты на социальные сети - в общем, все, что душе угодно.
При наведении подсвечивается. Со страницы комментариев имеет вид картинки с текстом песни El-creepo "Witch Hunt", который по желанию (и скиллу фотошопа) может быть заменен на любой другой.

Мануал по установке твиттера:
читать дальше
читать дальше

Что делать, если твиттер пропал?
читать дальше

Код не работает! Что делать?
читать дальше

Благодарности: Albert Osbourne - за моральную поддержку и то, что был моими глазами на протяжении всего процесса верстки)

Код:

 {..main..}<br /> html {overflow-x: hidden !important; }<br /> body {background: url("картинка№1") repeat scroll 0 0; right top fixed no-repeat !important; position: relative!important; padding: 0px !important; margin:0px !important;}<br /> .left #page-t {width: 760px;}<br /> #wrapper{ min-width:510px !important; width: 510px !important; top: 0px; float: right; padding: 150px 500px 0px 0px; margin-bottom:100px;}<br /> .paragraph {width: 500px;}<br /> #JournalComments .paragraph { width: 560px;}<br /> a:link {text-decoration: none !important;}<br /> .paragraph img {max-width:500px; !important}<br /> .postContent .postInner img{ opacity : 0.2; -moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s; transition: all 2s; padding: 0px;}<br /> .postContent .postInner img:hover { opacity : 1 !important; }<br /> {..image-posts..}<br /> #Journal .countSecond div.postContent {background: url("Картинка№2") 155px -60px no-repeat !important; min-height:160px !important; background-color: #0D0C0D !important; }<br /> #Journal .countFirst div.postContent {background: url("Картинка№3") 155px -60px no-repeat !important; min-height:160px !important; background-color: #0D0C0D !important; }<br /> .postContent { background-color: #0d0d0d !important; border-width: 1px; border-style: solid; border-color: #1f1f1f !important; padding: 20px !important; }<br /> {..display-none..}<br /> #thisDiaryLinks, #lastComments, #pchs, #myLinks, #YaSearch, #iAmQuit b, #more_login, .menuSection_title, #thisDiaryOwner_title, #subscribeEmail, #unsubscribeEmail, #tagslistlink, #postsCalendar, #rssLink, #upInChart, #myLinksLink, #myProfileLink, #albumLink, #optionsLink, #photolibLink, #myQuotLink, #Stats, #myDraftLink, #myNotepadLink, #allDiaryLink, #favListLink, #pchListLink, #communityCatalogueLink, #myCommunitiesLink, #randomDiaryLink, #diarySpiritLink, #diarySupportLink, #faqLink, #iAmQuit, .order_button, #from_form, #doNotSmile_box, #addPicture_box,#ReplaceBrDiv,#change_bg_area_comm, #vkl li, #side h1 .opac6, #writeToAuthor, #addToFav, #shsmile, #delFromFav, #myAccountLink, #referenceLink {display:none !important;}<br /> {..menu..}<br /> #myCommunityLink a { background: url("Картинка№4") no-repeat scroll 0 0 transparent !important; height: 26px !important; color: rgba(0, 0, 0, 0); line-height: 500px; margin-right: 745px !important; overflow: hidden; position:absolute; right: 0; top: 46px; width: 57px !important; z-index: 8 !important; }<br /> #myDiaryLink a { background: url("Картинка№5") no-repeat scroll 0 0 transparent !important; height: 26px !important; color: rgba(0, 0, 0, 0); line-height: 500px; margin-right: 745px !important; overflow: hidden; position:absolute; right: 0; top: 46px; width: 57px !important; z-index: 8 !important; }<br /> #writeThisDiary a { background: url("Картинка№6") no-repeat scroll 0 0 transparent !important; height: 26px !important; line-height: 500px; margin-right: 181.4px !important; overflow: hidden; position:absolute; right: 0; top: 45px; width: 60px !important; z-index: 8 !important; }<br /> #umailLink a { background: url("Картинка№7") no-repeat scroll 0 0 transparent !important; height: 26px !important; line-height: 500px; margin-right: 305.3px !important; overflow: hidden; position:absolute; right: 0; top: 46px; width: 57px !important; z-index: 8 !important; }<br /> #discussionLink a { background: url("Картинка№8") no-repeat scroll 0 0 transparent !important; height: 26px !important; line-height: 500px; margin-right: 430px !important; overflow: hidden; position:absolute; right: 0; top: 47px; width: 110px !important; z-index: 8 !important; }<br /> #mySFavLink a { background: url("Картинка№9") no-repeat scroll 0 0 transparent !important; height: 26px !important; line-height: 500px; margin-right: 585px !important; overflow: hidden; position:absolute; right: 0; top: 47px; width: 102px !important; z-index: 3 !important; }<br /> #myFavLink a { background: url("Картинка№10") no-repeat scroll 0 0 transparent !important; height: 26px !important; line-height: 500px; margin-right: 585px !important; overflow: hidden; position:absolute; right: 0; top: 47px; width: 102px !important; z-index: 8 !important; }<br /> #mainpageLink a { background: url("Картинка№11") no-repeat scroll 0 0 transparent !important; height: 26px !important; line-height: 500px; margin-right: 50px !important; overflow: hidden; position:absolute; right: 0; top: 48px; width: 57px !important; z-index: 8 !important; }<br /> {..menu-hover..}<br /> #myCommunityLink a:hover { background: url("Картинка№12") no-repeat scroll 0 0 transparent !important; color: rgba(0, 0, 0, 0); height: 150px !important; line-height: 500px; margin-right: 632.6px !important; overflow: hidden; position:absolute; right: 0; top: 0px; width: 332px !important; z-index: 3 !important; }<br /> #myDiaryLink a:hover { background: url("Картинка№13") no-repeat scroll 0 0 transparent !important; color: rgba(0, 0, 0, 0); height: 150px !important; line-height: 500px; margin-right: 632.6px !important; overflow: hidden; position:absolute; right: 0; top: 0px; width: 332px !important; z-index: 3 !important; }<br /> #writeThisDiary a:hover { background: url("Картинка№14") no-repeat scroll 0 0 transparent !important; height: 160px !important; line-height: 500px; margin-right: 61.0px !important; overflow: hidden; position:absolute; right: 0; top: 0px; width: 370px !important; z-index: 3 !important; }<br /> #umailLink a:hover { background: url("Картинка№15") no-repeat scroll 0 0 transparent !important; height: 160px !important; line-height: 500px; margin-right: 191px !important; overflow: hidden; position:absolute; right: 0; top: 0px; width: 332px !important; z-index: 3 !important; }<br /> #discussionLink a:hover { background: url("Картинка№16") no-repeat scroll 0 0 transparent !important; height: 150px !important; line-height: 500px; margin-right: 345.0px !important; overflow: hidden; position:absolute; right: 0; top: 0px; width: 273px !important; z-index: 3 !important; }<br /> #mySFavLink a:hover { background: url("Картинка№17") no-repeat scroll 0 0 transparent !important; height: 150px !important; line-height: 500px; margin-right: 480.6px !important; overflow: hidden; position:absolute; right: 0; top: 0px; width: 328px !important; z-index: 3 !important; }<br /> #myFavLink a:hover { background: url("Картинка№18") no-repeat scroll 0 0 transparent !important; height: 150px !important; line-height: 500px; margin-right: 480.6px !important; overflow: hidden; position:absolute; right: 0; top: 0px; width: 328px !important; z-index: 3 !important; }<br /> #mainpageLink a:hover { background: url("Картинка№19") no-repeat scroll 0 0 transparent !important; height: 150px !important; line-height: 500px; margin-right: -10.2px !important; overflow: hidden; position:absolute; right: 0; top: 0px; width: 216px !important; z-index: 3 !important; }<br /> {..addblocks..}<br /> #add_block1 { background: url("Картинка№20") repeat scroll 0 0; height: 109px; left: 0; position: absolute; top: 0 !important; width: 100%; z-index: 1 !important; }<br /> #add_block2 {background: url('Картинка№21') no-repeat scroll center top transparent; height: 205px !important; position: absolute; right: 777px; top: 209px; width: 209px !important;}<br /> #add_block3 {background: url('Картинка№22') no-repeat scroll center top transparent; height: 354px !important; position: absolute; right: 777px; top: 450px; width: 226px !important;}<br /> #add_block4 {background: url('Картинка№23') no-repeat scroll center top transparent; height: 354px !important; position: absolute; right: 752px; top: 462px; width: 226px !important; z-index: 5 !important; opacity: 0.0;}<br /> #add_block4:hover {background: url('Картинка№24') no-repeat scroll center top transparent; height: 354px !important; position: absolute; right: 752px; top: 462px; width: 226px !important; z-index: 5 !important; opacity: 1.0 !important;}<br /> #JournalComments #add_block5 {background: url('Картинка№25') no-repeat scroll center top transparent; height: 354px !important; position: absolute; right: 770px; top: 478px; width: 226px !important; z-index: 1 !important; }<br /> {..other..}<br /> .header h2 {display: inline-block; color: #4b4b4b !important; text-transform: uppercase; padding: 4px !important; font-family: georgia; white-space: nowrap; height: 14px; padding-right: 3px !important; left: 1px !important;margin-top: 1px !important; background-color: #0d0d0d !important; border-width: 1px; border-style: solid; border-color: #1f1f1f !important; text-shadow: 2px 0px 5px #570ef6; }<br /> .postTitle span {display: inline-block; color: #4b4b4b!important; padding: 4px !important; font-family: garamond; text-transform: uppercase; white-space: nowrap; height: 14px; padding-right: 3px !important; left: 1px !important; margin-top: 1px !important; background-color: #0d0d0d !important; border-width: 1px; border-style: solid; border-color: #1f1f1f !important; text-shadow: 2px 0px 5px #570ef6; }<br /> #commentsArea .header h2 {border-style: none; background-color: transparent !important; }<br /> {.. .count_box_a..}<br /> .count_box {color: rgba(0, 0, 0, 0); }<br /> #myDiaryLink span.count_box a { background: url('Картинка№26') !important; no-repeat; text-indent: -9999px; outline: none; height: 45px !important; overflow: hidden; position: absolute; margin-right: 725px !important; top: 15px; width: 50px;}<br /> #myDiaryLink span.count_box a:hover{ background: url('Картинка№27') !important; no-repeat !important; text-indent: -9999px !important; outline: none; height: 45px !important; overflow: hidden !important; position: absolute !important; margin-right: 722px !important; top: 15px !important; width: 60px !important; z-index: 5 !important}<br /> #umailLink span.count_box a { background: url('Картинка№26') !important; no-repeat; text-indent: -9999px; outline: none; height: 45px !important; overflow: hidden; position: absolute; margin-right: 305px !important; top: 15px; width: 50px;}<br /> #umailLink span.count_box a:hover{ background: url('Картинка№27') !important; no-repeat !important; text-indent: -9999px !important; outline: none; height: 45px !important; overflow: hidden !important; position: absolute !important; margin-right: 302px !important; top: 15px !important; width: 60px !important; z-index: 5 !important}<br /> #discussionLink span.count_box a { background: url('Картинка№26') !important; no-repeat; text-indent: -9999px; outline: none; height: 45px !important; overflow: hidden; position: absolute; margin-right: 365px !important; top: 15px; width: 50px;}<br /> #discussionLink span.count_box a:hover{ background: url('Картинка№27') !important; no-repeat !important; text-indent: -9999px !important; outline: none; height: 45px !important; overflow: hidden !important; position: absolute !important; margin-right: 415px !important; top: 15px !important; width: 60px !important; z-index: 5 !important}<br /> {..count_box_2..}<br /> #myDiaryLink span.count_box a { background: url('Картинка№26') !important; no-repeat; text-indent: -9999px; outline: none; height: 45px !important; overflow: hidden; position: absolute; margin-right: 725px !important; top: 15px; width: 50px;}<br /> #myDiaryLink span.count_box a:hover{ background: url('Картинка№27') !important; no-repeat !important; text-indent: -9999px !important; outline: none; height: 45px !important; overflow: hidden !important; position: absolute !important; margin-right: 722px !important; top: 15px !important; width: 60px !important; z-index: 5 !important}<br /> #umailLink span.count_box a { background: url('Картинка№26') !important; no-repeat; text-indent: -9999px; outline: none; height: 45px !important; overflow: hidden; position: absolute; margin-right: 305px !important; top: 15px; width: 50px;}<br /> #umailLink span.count_box a:hover{ background: url('Картинка№27') !important; no-repeat !important; text-indent: -9999px !important; outline: none; height: 45px !important; overflow: hidden !important; position: absolute !important; margin-right: 302px !important; top: 15px !important; width: 60px !important; z-index: 5 !important}<br /> #discussionLink span.count_box a { background: url('Картинка№26') !important; no-repeat; text-indent: -9999px; outline: none; height: 45px !important; overflow: hidden; position: absolute; margin-right: 365px !important; top: 15px; width: 50px;}<br /> #discussionLink span.count_box a:hover{ background: url('Картинка№27') !important; no-repeat !important; text-indent: -9999px !important; outline: none; height: 45px !important; overflow: hidden !important; position: absolute !important; margin-right: 415px !important; top: 15px !important; width: 60px !important; z-index: 5 !important}<br /> {..twitter..}<br /> #Journal #post193240575.singlePost { display: block !important; font-family: Tahoma; font-size: 11px; height: 400px !important; position: absolute; top: 204px !important; visibility: visible !important; width: 175px !important; z-index: 1; border: none !important; background: transparent !important;}<br /> #Journal #post193240575.singlePost { display: block; margin: 200px 163px 1px -210px; overflow-x: hidden; padding: 1px 1px 0; }<br /> #Journal #post193240575.singlePost .atTag {margin: 20px 0 0 0 !important; }<br /> #Journal #post193240575 .postActionLinks {margin: 0 58px 0 0 !important;}<br /> #Journal #post193240575 .postContent { background: none repeat scroll 0 0 transparent !important; border: medium none !important; box-shadow: 0 0 0 0; margin-right: 0px !important; overflow: hidden !important; padding: 5px !important; }<br /> #Journal #post193240575 .postLinksBackg {display: none!important;}<br /> #Journal #post193240575 .paragraph {padding-top: 40px !important;}<br /> #Journal #post193240575 .postDate, .countSecond .postDate {display: none!important;}<br /> #Journal #post193240575 .postTitle span {display: none!important;}<br /> #Journal #post193240575 .header h2 {border-style: none; background-color: transparent !important; }<br /> #Journal #post193240575 .postActionLinks { left: -38px !important; margin: 28px 0 10px -180px !important; }<br /> {..names..}<br /> #authorName {font-size: 14px; text-transform: uppercase; font-family: georgia; display: inline-block; color: #333334 !important; position: absolute; padding: 4px !important; white-space: nowrap; height: 15px; padding-right: 3px !important; margin-top: 233px !important; margin-left: -25px !important; background-color: #0d0d0d !important; border-width: 1px; border-style: solid; border-color: #1f1f1f !important; z-index: 100 !important; text-decoration: none;}<br /> #side h1 a {font-size: 14px !important; text-transform: uppercase; font-weight: bold !important; font-family: georgia !important; display: inline-block; color: #333334 !important; position: absolute; padding: 4px !important; white-space: nowrap; height: 15px; padding-right: 3px !important; margin-left: -52px !important; margin-top: 25px !important; background-color: #0d0d0d !important; border-width: 1px; border-style: solid; border-color: #1f1f1f !important; z-index: 100 !important; }<br /> #side h1 a:hover {font-size: 14px !important; text-transform: uppercase; font-weight: bold !important; font-family: georgia !important; display: inline-block; color: #333334 !important; position: absolute; padding: 4px !important; white-space: nowrap; height: 15px; padding-right: 3px !important; margin-left: -52px !important; margin-top: 25px !important; background-color: #0d0d0d !important; border-width: 1px; border-style: solid; border-color: #1f1f1f !important; z-index: 100 !important; text-shadow: 1px 0px 5px #570ef6; text-decoration: none;}<br /> {..links..}<br /> .postLinksBackg a {color: #A6A6A6; font-family: helvetica; font-size: 10px; opacity: 0.6; padding: 1px; text-decoration: none !important; box-shadow: 1px 0px 1px #570ef6; text-transform: lowercase; transition: all 0.5s ease 0s; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}<br /> .postLinksBackg a:hover, #favGroups a:hover { background-color: #0C0C0C; opacity: 0.5; transition: all 0.5s ease 0s; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }<br /> .comments_count_link {color:rgba(0, 0, 0, 0);}<br /> {..edit..}<br /> .upPostLink [src*="postup.gif"], .delPostLink [src*="postdelite.gif"], .editPostLink [src*="postedit.gif"],.tonotepadPostLink [src*="postdelite.gif"], .fromnotepadPostLink [src*="postdelite.gif"], .upPostLink:hover [src*="postup.gif"], .delPostLink:hover [src*="postdelite.gif"], .editPostLink:hover [src*="postedit.gif"], .tonotepadPostLink:hover [src*="postdelite.gif"], .fromnotepadPostLink:hover [src*="postdelite.gif"] {background: url('Картинка28')no-repeat;}<br /> .postActionLinks { position:relative !important; top: 10px; opacity:1 !important;}<br /> .upPostLink [src*="postup.gif"] {background-position: -30px -25px !important; padding: 25px 5px 5px 0px !important; height:0px !important; overflow:hidden !important; width:20px;}<br /> .upPostLink:hover [src*="postup.gif"]{background-position: -30px 5px !important; padding: 25px 5px 5px 0px !important; height:0px !important; overflow:hidden !important; width:20px;}<br /> .delPostLink [src*="postdelite.gif"] { background-position: -60px -25px !important; padding: 20px 8px 10px 0px !important; height:0px !important; overflow:hidden !important; width:20px;}<br /> .delPostLink:hover [src*="postdelite.gif"] { background-position: -60px 5px !important; padding: 20px 8px 10px 0px !important; height:0px !important; overflow:hidden !important; width:20px;}<br /> .delPostLink {margin-right:-5px !important;}<br /> .editPostLink [src*="postedit.gif"] { background-position: -90px -25px !important; padding: 25px 5px 5px 0px !important; height:0px !important; overflow:hidden !important; width:20px;}<br /> .editPostLink:hover [src*="postedit.gif"] {background-position: -90px 5px !important; padding: 25px 5px 5px 0px !important; height:0px !important; overflow:hidden !important; width:20px;}<br /> .tonotepadPostLink [src*="postdelite.gif"], .fromnotepadPostLink [src*="postdelite.gif"] { background-position: 0px -25px !important; padding: 25px 5px 5px 0px !important; height:0px !important; overflow:hidden !important; width:20px;}<br /> .tonotepadPostLink:hover [src*="postdelite.gif"], .fromnotepadPostLink:hover [src*="postdelite.gif"] { background-position: 0px 5px !important; padding: 25px 5px 5px 0px !important; height:0px !important; overflow:hidden !important; width:20px;}<br /> #JournalComments .postActionLinks { opacity: 1 !important; position: relative !important; top: 35px !important; }<br /> {..forms..}<br /> .submit {opacity:1.0 !important; padding: 0px 0px 4px 0px !important; height: 20px; -moz-border-radius: 15px; -wenkit-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; color:#4c4b4b !important; background-color: #0C0B0F!important; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;text-transform: lowercase;}<br /> .submit:hover {color:#4c4b4b !important; background-color:#0C0B0F !important; -moz-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; box-shadow: 0px 0px 2px #570ef6; text-transform: lowercase;}<br /> #message {color: #4c4b4b; background-color:#0C0B0F; display:block; }<br /> .code { color:#4c4b4b !important; background-color: #0C0B0F; display:block; }<br /> input.text, select, #trspisok textarea, #de#ion, #close_text, #side #search_selectbtid {color: #4c4b4b !important; background-color: #0C0B0F !important; }<br /> #forTextarea {background-color: #0C0B0F; -moz-border-radius: 10px; -wenkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; display:block; border-color: #1F1F1F !important; border-style: solid; border-width: 1px; margin-bottom: 10px !important;}<br /> {..18+..}<br /> .advertising, #bordered_advertising {display:none !important;}<br /> {..comments..}<br /> .singleComment { position: relative; padding: 1px 1px 1px 1px!important;}<br /> .singleComment .postLinksBackg {position: absolute; top: 82px; left: 95px}<br /> .singleComment .authorName a {color:#4c4b4b!important; text-transform: uppercase}<br /> .singleComment .authorName a:hover, .singleComment .postLinksBackg a:hover {text-shadow: 2px 0px 5px #570ef6; !important;}<br /> .singleComment .header {font: normal 13px Tahoma!important; left: 10px;}<br /> .singleComment .commentAuthor {margin: -5px!important; margin-bottom: -20px !important;}<br /> .singleComment .postLinksBackg {padding: 0 0 0px 0 !important; margin: -37px 0px 0px 50px !important; z-index: 3!important;}<br /> .avatar img {width:90px; height: 90px; padding: 5px 5px 5px 5px !important; background-color: #1f1f1f; box-shadow: 0px 0px 1px #570ef6; !important; opacity : 0.5; -moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s; transition: all 2s; padding: 0px;}<br /> .avatar img:hover { opacity : 1 !important; }<br /> .Attention {display: none !important;}<br /> #JournalFavorite .Attention {display: none !important;}<br /> {..text..}<br /> .quote_text { background: none repeat scroll 0 0 #212020; font: 11px Tahoma; padding: 0 2px 2px; }<br /> .LinkMore {background-color: #212020 !important;border-radius:15px; color:#4c4b4b!important; text-decoration: none!important; padding: 1px 1px 1px 1px !important;}<br /> .LinkMore:hover, .LinkMore a:hover {background-color: #212020 !important;color:#4c4b4b!important; box-shadow: 1px 0px 1px #570ef6; !important;}<br /> .atMusic span, .atMood span, .atTag span { background: none repeat scroll 0 0 #212020; }<br /> {..pagebar..}<br /> .pageBar a {color: #A6A6A6; font-family: helvetica; font-size: 11px; opacity: 0.6; padding: 1px; text-decoration: none !important; box-shadow: 1px 0px 1px #570ef6; text-transform: lowercase; transition: all 0.5s ease 0s; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin: 1px 5px 10px 5px;}<br /> .pageBar a :hover, #favGroups a:hover { background-color: #0C0C0C; opacity: 0.5; transition: all 0.5s ease 0s; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin: 1px 5px 10px 5px; }<br />