с WTF

вторник, 16 апреля 2013

01:38

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

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

Эквилибриум_1
Вид:
на главной странице | на странице комментариев

Фон: страницы, враппера; + разделитель, экстратоп

НастройкиШаблон: блочный, колонка меню слева
Цвет ссылок: #818181 (проставляется в обычных настройках)
На блоке записей цвет серый, меняется на синевато-голубой с точечным подчёркиванием; в меню фон ссылок меняется на чёрный; название дневника и ник автора голубовато-серые, меняются на светло-серый
Записи: #5d7f8d
Оффтопа: #62645c
Границы бесцветны.
Для корректного отображения надписей необходим шрифт SirClive

Остальное:
• название дневника перенесено в экстратоп;
• скролл при полноразмерных изображениях;
• цитаты в рамке;
• меняющийся на крест курсор;
• вспыхивающие при наведении аватары;
• форма перелогинивания прозрачная и специально заужена (не работает в IE)

Код:

#wrapper{min-width:890px!important;width:890px;margin: -5px auto !important; margin-bottom: -5px!important; padding: 2px !important; background: url('ФОН ВРАППЕРА') ;}
 #page-c{width:740px !important; padding: 0 !important; margin: 0 !important; }
 #page-t {margin:0 !important}
 body {background: url('ФОН СТРАНИЦЫ'); padding:0!important; background-attachment: fixed; no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
 #extratop{ background: url('ЭКСТРАТОП'); no-repeat; float:center; margin-top: 0px !important; width:890px; height: 190px;}
 #side{width:150px !important;margin:0 !important;}
 #side ul{ margin: 2px 0; padding: 0; list-style: none;}
 #side ul li { border-top: 1px solid #333; border-bottom: 1px solid #111; }
 #side ul li a { padding: 5px; display: block; color: #496779; text-decoration: none; }
 #side ul li a:hover {background: #050505;}
 #side h1 a{position:absolute; top: 80px; width:890px; text-align: center !important; font-size: 30px; font-family: 'SirClive'; font-weight: normal; color:#577e90 !important;}
 #authorName { font: 18px Georgia; color: #556670 !important;}
 .authorName {font-family: 'Georgia'; font-size: 15px!important; font-weight: bold!important;}
 #side h1 a:hover, #authorName:hover {color: #a6a6a6 !important; text-decoration: none !important;}
 a {text-decoration: none !important; }
 a:hover {color: #668ead; border-bottom: dotted; border-width: 1px; }
 #side a:hover {border-bottom: none!important;}
 a:hover{cursor: crosshair;}
 #umailLink .count_box {position:absolute; margin: -21px 0 0 50px;}
 #umailLink .count_box a {margin: -21px 0 0 10px;}
 #myDiaryLink .count_box {position:absolute; margin: -21px 0 0 95px;}
 #myDiaryLink .count_box a {margin: -21px 0 0 5px;}
 #discussionLink .count_box {position:absolute; margin: -21px 0 0 80px;}
 #discussionLink .count_box a {margin: -21px 0 0 10px;}
 .postDate {line-height: 15px; }
 .paragraph div, .paragraph img {overflow: auto !important;}
 .postActionLinks {margin-top: -10px; }
 .postLinksBackg {background: url('РАЗДЕЛИТЕЛЬ') no-repeat 100% 100%; height:25px;}
 .postLinksBackg.prevnext {background: none !important; margin-bottom: -20px; }
 .postDate { font-family: 'SirClive'; font-size: 18px!important; font-style: normal!important; color: #556670!important;}
 .postTitle { font-family: Georgia; font-size: 17px; font-weight: bold!important; color: #4d636a!important;}
 .postTitle span { font-family: Georgia; font-size: 15px; font-weight: normal!important; color: #758080;}
 #addCommentArea_title { font: 18px 'SirClive'; font-style: normal!important; color: #556670; text-align:right!important;}
 .avatar img,.avatarNew img {max-width:110px !important; max-heght:110px !important; display: block; position: relative; border: 8px solid #000; filter:alpha(opacity=100) !important;-moz-opacity:.50 !important;opacity:.50 !important; -moz-opacity: 1.9; -khtml-opacity: 1.9; opacity: 1.9; }
 .avatar img:hover,.avatarNew img:hover { display: block; position: relative; border: 8px solid # 000!important; filter:alpha(opacity=100);-moz-opacity:1.0 !important;opacity:1.0 !important; -moz-opacity: 1.9; -khtml-opacity: 1.9; opacity: 1.9; transition: 0.7s ease-in-out; -o-transition: 0.7s ease-in-out; -moz-transition: 0.7s ease-in-out; -webkit-transition: all 0.7s ease-in-out;}
 .sign {font-size: 11px; color: #465866; text-align:center!important;}
 .urlLink {font-size: 10px!important;}
 .atTag span, .atMusic span, .atMood {font-size: 12px!important;}
 .quote_text {font-style: normal!important; font-size: 14px; font-weight: Arial; display: block; margin: 2px; padding: 4px; border: 1px dashed #363c43;}
 #myCommunitiesLink, #myLinks, #headlineList, #rssLink, #myLinksLink, #upInChart , #lastComments, #diarySpiritLink, #paySupportLink, #faqLink, #fallDiaryLink, #sortOrder, #topNavLinks, #communityCatalogueLink, #myCommunity, #favListLink, #myCommunity, #pchListLink, #randomDiaryLink, #allDiaryLink, #diarySupportLink, #unsubscribeEmail, #pchs, #subscribeEmail, #myNotepadLink, #mySFavLink, #commentsArea_title {display:none!important;}
 #Journal .Attention {display: none !important;}
 #epigraph .postLinksBackg {display: none;}
 #login_change {background-color: transparent; border: 1px solid #050505!important; width:115px!important; }
 #log_pass_r td {display: block; height: 25px!important; width:0px!important;}

Эквилибриум_2
Вид:
на главной странице | на странице комментариев

Фон: страницы, блока записей и формы перелогинки, поля ввода записи, меню

НастройкиШаблон: блочный, меню верхнее
Цвет ссылок: #d25f6a (проставляется в обычных настройках)
На блоке записей – карминно-красный, меняется на лилово-фиолетовый на белой подложке и с точечным подчёркиванием; в меню – оранжевые; название дневника карминно-красное, менется на белый; ник автора меняется на лилово-фиолетовый
Цветa
Заголовка: #f58c51
Ссылок: #d25f6a
Записи: #624c6c
Оффтопа: #9063b0
Границы бесцветны
Для корректного отображения надписей необходим шрифт Arkhive

Остальное:
• верхнее позиционированное меню;
• название дневника между эпиграфом и верхним меню;
• скролл при полноразмерных изображениях;
• выход и форма перелогинивания зафиксированы ближе к правому верхнему углу (в зависимости от разрешения монитора их положение может меняться)

Код:

#wrapper{min-width:860px!important;width:860px; margin: -5px auto!important; padding:0 !important;overflow:visible !important; }
 #page-c{width:860px !important; padding: 0px !important; margin: 0 !important; }
 #page-t {background: url('ФОН БЛОКА ЗАПИСЕЙ'); margin-top: -70px !important; padding-right:0px !important; margin-bottom: -10px !important; -moz-border-radius-topleft: 30px; -moz-border-radius-topright: 30px; -moz-border-radius-bottomright: 30px; -moz-border-radius-bottomleft: 30px; -webkit-border-radius: 30px 30px 30px 30px; border-radius: 30px 30px 30px 30px; -webkit-box-shadow: 0px 0px 30px #ffffff; -moz-box-shadow: 0px 0px 30px #f7e0ab; box-shadow: 0px 0px 30px #f7e0ab; -moz-border-radius: 30px; border-radius: 30px;}
 body {background: url('ФОН СТРАНИЦЫ') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-attachment: fixed; }
 #extratop{ background: transparent; no-repeat; float:center; margin-top: 0px !important; width:860px; height: 185px;}
 #side {background: url('ФОН МЕНЮ'); position: absolute; margin-top:-190px !important; width:860px !important; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 30px; -moz-border-radius-bottomleft: 30px; -webkit-border-radius: 0px 0px 30px 30px; border-radius: 0px 0px 30px 30px;}
 #side h1 a{position:absolute; width:860px; top: 80px; text-align: center !important; font-weight: normal; font-family: Arkhive; font-weight: bold; font-size: 30px; color: #ff27cb7 !important;}
 #side h1 a:hover {color: #ffffff !important; text-decoration: none !important; background: none !important; border-bottom: none !important;}
 #authorName span {position:fixed; top: 220px; left: 10px; font-weight: normal; font-size: 14px; }
 #thisDiaryPhoto img {position:absolute; left: -1030px; top: 70px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px!important;}
 #side li {float:left !important; padding-left:10px !important}
 .menuSection, #thisDiaryOwner, #thisDiaryLinks, #myDiaryLinks, #globalLinks {display: inline;}
 .menuSection #thisDiaryLinks, #myDiaryLinks, #thisDiaryOwner, #globalLinks { padding-left:20px; }
 #thisDiaryLinks_title {display:block; width:50px; height:20px; line-height:15px; overflow:visible; font-family: Arkhive; font-size: 22px; font-weight: bold; color: #f58c51;}
 #thisDiaryLinks ul {background-color: #ffffff; position: absolute; width:230px !important; padding-top:2px !important; left:0px !important; -moz-column-count: 2; top: 20px; left: 2px; heigth: 5px; text-decoration: none; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;}
 #thisDiaryLinks {position:absolute; left: 125px; top:10px; }
 #thisDiaryOwner_title {display:block; width:100px; height:20px; line-height:15px; overflow:visible; font-family: Arkhive; font-size: 22px; font-weight: bold; color: #f58c51;}
 #thisDiaryOwner ul {background-color: #ffffff; position: absolute; width:270px !important; padding-top:2px !important; left:0px !important; -moz-column-count: 2; top: 20px; left: 2px; heigth: 5px; text-decoration: none; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;}
 #thisDiaryOwner {position:absolute; left: 270px; top:10px; }
 #myDiaryLinks_title, #myCommunityLink_title {display:block; width:90px; height:20px; line-height:15px; overflow:visible; font-family: Arkhive; font-size: 22px; font-weight: bold; color: #f58c51;}
 #myDiaryLinks ul {background-color: #ffffff; position: absolute; width:325px !important; padding-top:2px !important; left:0px !important; -moz-column-count: 2; top: 35px; left: 2px; heigth: 5px; text-decoration: none; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;}
 #myDiaryLinks {position:absolute; left: 420px; top:10px; }
 #globalLinks_title {display:block; width:100px; height:20px; line-height:15px; overflow:visible; font-family: Arkhive; font-size: 22px; font-weight: bold; color: #f58c51;}
 #globalLinks ul {background-color: #ffffff; position: absolute; width:120px !important; padding-top:2px !important; left:0px !important; -moz-column-count: 2; top: 35px; left: 2px; heigth: 5px; text-decoration: none; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px;}
 #globalLinks {position:absolute; left: 605px; top:10px; }
 .postDate {background-color: #ffffff!important; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px}
 #JournalComments .postDate {background: none !important;}
 .paragraph div, .paragraph img {overflow: auto !important;}
 a:link {text-decoration: none}
 a:visited {text-decoration: none}
 a:active {text-decoration: none}
 a:hover {color: #d65bbd; border-bottom: dotted; border-width: 2px; background-color: #ffffff;}
 .header span, .header h2 {font-family: 'Georgia'; font-style: italic; color: #f1584a;}
 .authorName {font-family: 'Georgia'; font-size: 15px !important; font-weight: bold !important; font-style: italic !important;}
 .avatar img {display: block; margin: 0px; padding: 2px; text-align:center !important; -moz-border-radius-topleft: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; -webkit-border-radius: 8px 8px 8px 8px; border-radius: 8px 8px 8px 8px; background-color:#ffffff; border: 2px dotted #de8c5e; padding: 3px; }
 .sign {font-size: 11px; color: #cd7050;}
 #message {background: url('ФОН ПОЛЯ ВВОДА ЗАПИСИ'); -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; -webkit-border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px!important;}
 #btSubmit {position:relative; top: -5px; left: 10px; padding: 3px; width:100px!important; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; -webkit-border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px!important;}
 #Stats img {-moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; -webkit-border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px !important;}
 #myCommunitiesLink, #myLinks, #authorAlbum, #albumLink, #headlineList, #rssLink, #myLinksLink, #upInChart, #lastComments, #diarySpiritLink, #paySupportLink, #faqLink, #fallDiaryLink, #sortOrder, #topNavLinks, #communityCatalogueLink, #favListLink, #pchListLink, #randomDiaryLink, #allDiaryLink, #diarySupportLink, #unsubscribeEmail, #pchs, #subscribeEmail, #myNotepadLink, .top #bottomNav, #bottomNav, #myProfileLink, #epigraph .postLinksBackg {display:none !important;}
 #iAmQuit b { position:fixed; top: 220px; right: 10px; font-size: 12px;}
 #login_change { position:fixed; top: 245px; right: 5px; background: url('ФОН ФОРМЫ ПЕРЕЛОГИНКИ'); border: none; width:160px!important; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px !important;}
 #more_login a{ position:fixed; top: 222px; right: 70px;}
 #Journal .Attention {display: none !important;}

@темы: Тёмные, Светлые, CSS, Дизайн для платного дневника, Готовые, Сложные

URL

Поделиться

я так долго собиралась и совершенно без всяких намеков с ... вещи просто офигенные!..:-) Типа, ладно, с появлением клиента для отправки мессаг, пр...

Вчера проказница-жизнь шутила на тему параллели водка-Куб... Твари, обитающие в морской пучине, претерпевают бесчислен... Изготовление туалетной бумаги с рисунком или логотипом кл...

Комментарии


Запомнить

с WTF

Дизайномания