Twitter Style (White)

May 01, 2011 08:10

У меня есть Twitter, которым я практически не пользуюсь. А вот недавно набрела на сервис, который упрощает до невозможности манипуляции с оформлением twitter'a. Вдохновило))

Проверено в Mozilla 4.0, Opera 11.01, Safari 5.0, Chrome 8.0, IE 7 и выше (не подгонялся под IE 6 и более ранние версии).

Стиль: Flexible Squares.

Заголовок и подзаголовок: есть.

Сайдбар: справа.

Примечание: скругленных углов в IE всех версий не будет.




fullsize image // demo



1. Выбираем стиль журнала Flexible Squares.

2. Сайдбар справа!

3. Заходим в "Настроить свой стиль".

4. Выбираем Custom Css.

5. В Custom stylesheet вставляем приведенный ниже код.

/* Layout by Zharkova Asya http://zharkovaa.com or http://asya-asia.livejournal.com */

html {background:#fff url('http://www.ljplus.ru/img4/a/s/asya_asia/tw_bg_small.jpg') no-repeat top left fixed;}
body {background:url('http://www.ljplus.ru/img4/a/s/asya_asia/tw_bg_big.jpg') no-repeat top right fixed;text-align: center;color: #444;font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;; margin: 0; }
a, a:link, a:visited {color: #aad3ea;text-decoration: none;}
a:hover {color: #aad3ea;text-decoration: underline;}

p, td, blockquote {
font-size: 11px;
}

code, kbd, pre, tt {
font-family: inherit;
}
#content{width: 85%;margin:0 auto; margin-top:40px; //margin-top:100px; background:url('http://www.ljplus.ru/img4/a/s/asya_asia/tw_bg.png');border:none;padding: 0;
-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; min-width:960px; max-width:1200px;}
#maincontent { margin-top: 0; font: inherit; background:#fff; color: #444;border:none;margin-right: 480px;text-align: left;
-moz-border-radius: 0px 0px 0px 10px; -webkit-border-radius: 0px 0px 10px 0px; -khtml-border-radius: 0px 0px 10px 0px; border-radius: 0px 0px 10px 0px;}
#sidebar {padding-top: 0;margin-top: -171px;background: none;border:none;font:inherit;color: #fff;width: 480px;float: right;text-align: left;
-moz-border-radius: 0 10px 0 0; -webkit-border-radius:0 10px 0 0; -khtml-border-radius:0 10px 0 0; border-radius: 0 10px 0 0;}
#header {padding: 10px 0px 20px 0px;margin-right: 480px;text-align: left; font:inherit;letter-spacing:0;border:none;background:#fff;color: #444;}
#footer {text-align: center; font:inherit; letter-spacing: 0;background: none;color: #5d5d5d;border:none;z-index: 100;clear: both; text-transform:uppercase;}

/* header -- links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:visited {color: #aad3ea;}
div#footer a, div#footer a:link, div#footer a:visited {color:#f0b8f0;}
div#header a:hover {color: #aad3ea;text-decoration: underline;}
div#footer a:hover {color:#f0b8f0; text-decoration:underline;}

ul.navheader{padding: 0px;margin: 0px;background:#f4f4f4;padding:20px;margin:10px;
-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; position:relative; top:60px; }
ul.navheader li {display: inline;padding: 0 3px 0 3px; text-shadow:1px 1px 1px #fff;}
.title {font:inherit;line-height: 200%;position:relative; top: -90px; left:20px; font-size:20px; font-weight:100;}
.subtitle{font:inherit; position:relative; top: -90px; left:20px; font-size:14px;}

/* sidebar */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{color: #f3ccda;}
div#sidebar a:hover {color: #f3ccda;text-decoration: underline;}
.defaultuserpic {display:none;}
.sbarheader {padding: 0;}
.sbarbody {padding: 0 10px; margin:0 10px;}
.sbarbody2 {padding: 0 10px 10px 10px; border-bottom:1px solid #5d5d5d; margin:0 10px;}
#sidebar_tags {border-bottom:1px solid #5d5d5d; margin:0 10px;}
#sidebar_summary li.sbaritem {margin: 0;padding: 3px 0;border-bottom: none;}
#sidebar_linklist { border-bottom:1px solid #5d5d5d; margin:0 10px; }
table.calendar {display:none;}
#sidebar_calendar li.sbartitle {display:none;}
ul.sbarlis{padding-left: 0px;margin-left: 0px;list-style: none;}
li.sbaritem, .tagcloud{ padding-left: 15px; list-style: none; }
li.sbartitle{padding-left: 0;list-style: none;border:none;background:none;margin-bottom: 10px;margin-top: 10px; font-size:16px; color:#bababa;}

/* maincontent */
.subcontent {border-top:1px solid #eee;}
.subcontent:hover {background:#f6fafc;}
.entry {margin: 0;padding: 10px;background:none;color: #444;font:inherit;text-align: left; border:none; }
.entry ul li{padding-left: 5px;margin-left: 15px;}
.entry ol li{padding-left: 5px;margin-left: 15px;}
.userpic {position: relative; float: left;background:none;padding: 0; margin: 10px; z-index: 15; border:none; }
.userpicfriends { position: relative; float: left; padding: 0; margin: 10px; text-align: center; border:none; background:none!important; font:inherit; z-index: 15; color:#999; }
.userpicfriends img, .userpic img {width:50px; height:50px;}
.userpicfriends font, .userpic font {color:#999}
.date { line-height: 200%; top: 5px;color: #999;font:inherit; text-align:right;}
.subject {font-weight: bold;padding: 10px;color: #000000;font:inherit; font-size:20px; text-transform:uppercase;}
.subject a, .subject a:link, .subject a:visited, .subject a:hover {color: #000000;/*color: #ffffff;*/text-decoration: none;}
.subject a:hover { color: #aad3ea;}
.datesubject {background:none;padding: 5px;}
.currents, .currentmood, .currentmusic {font:inherit;}
.comments {font:inherit;text-align: right;background: #f4f4f4; padding: 10px 20px; position: relative;top: 15px; color:#f4f4f4;
-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;}
div.comments a, div.comments a:link, div.comments a:visited{color: #aad3ea; text-shadow:1px 1px 1px #fff;}
div.comments a:hover {color: #aad3ea;text-decoration: none;}

/* maincontent -- entry, reply pages */
.datesubjectcomment {background:none;padding: 5px;margin-top: 20px;}
.userpiccomment {position: relative;background:none;top: -30px;left: -25px;padding: 0; margin: 10px 10px -20px 10px;z-index: 15;float: left;border:none; width:50px; height:50px;}
.box {border:none;padding: 10px;clear: left;}
input, textarea {font:inherit;background: #f4f4f4; padding: 10px 20px; color:#444; border:none; margin:20px 0;
-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;}
input:hover {background:#e1e0e0;}
textarea.textbox {width: 95% !important;}
.reply {position: relative;margin: 20px 30px 10px 30px;padding: 25px 10px 10px 10px;text-align: left;font:inherit;line-height: 125%;background:none; color: #444; }
.replytosubject {font-weight: normal;}
.commentreply {position: relative;margin: 10px;font:inherit;color: #444;}
.commentbox { padding: 10px; margin: 10px; background:none; border:none; border-top:1px solid #ebebeb; }
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #aad3ea;}
.datesubjectcomment a:hover {color: #aad3ea; text-decoration:underline;}
.commentboxpartial {border:none;padding: 10px;margin: 10px;background:none;}
.commentinfo {background:none;margin-top: 10px;width: 100%;}
table {border:none!important;}

/* maincontent -- year/achive pages */
ul.year {text-align: center;padding: 40px 0;}
ul.year li {display: inline;}
table.yeartable {margin-left: auto;margin-right: auto;}
table.yeartable td.yeardate, table.yeartable td.yearday {border:1px solid #eee; padding:5px;}
table.yeartable td.yearday {background: #f6fafc;text-align: center;}
td.yearmonth {border-style: none;}

/* footer */
ul.navfooter{ padding: 0px;margin: 0px;}
ul.navfooter li {display: inline;margin: 0 5px 0 5px;}
.clearfoot {clear: both;}

/* misc */
.clear {height: 15px;}
.skiplinks {text-align: center; color:#fff;}
.headerimage {/* for formatting header image */}
.separator{/* for formatting separators between entries */height: 0px;}
* html div.subcontent {/* fixes an IE reply page bug */ height: 1%;clear: none;}
* html div.box#commentform {/* fixes an IE reply page bug */position: absolute; border:none;background:none;}

#lj_controlstrip {min-width:960px!important; background:url('http://www.ljplus.ru/img4/a/s/asya_asia/cstrip_bg.png')!important; height:55px; position:fixed;}
#lj_controlstrip_userpic {display:none;}
#lj_controlstrip a, #lj_controlstrip a b {color:#bababa! important; text-decoration:none; text-transform:none; font-weight:100; font-size: 12px;}
#lj_controlstrip a:hover{color:#fff!important; text-decoration: none !important;}
#lj_controlstrip_statustext {color:#fff! important; font-weight:bold;}
#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border:0; }
#lj_controlstrip input {background:#666; padding: 3px 5px; color: #a9a9a9; text-align:left;
-moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}
#lj_controlstrip input:hover {background:#757575;}
#lj_controlstrip_search_input_text {color:#a9a9a9 !important; background:#666!important; margin:0 10px!important; padding:4px 5px!important;}
#lj_controlstrip_search_input_text:hover {background:#757575!important;}
#lj_controlstrip select {background:#666!important; border:none!important; padding:3px 5px; color:#a9a9a9;}
#lj_controlstrip select:hover {background:#757575!important;}
#ups_search {padding:3px;}
.ups_searchbox {position:relative; top:-20px;}
div.ContextualPopup div.Inner {color: #a9a9a9 !important;padding: 7px;width: 210px;text-align: left; background:#666 !important; border:none;
-moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:active, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {text-decoration: none !important;font-weight: 100;color: #fff! important;}
div.ContextualPopup .Userpic {width:40px; height:40px;position:relative; right:5px;}
.ljtags {margin-top:20px;}

6. Ставим кредит в профиль или сайдбар

Дизайн журнала:

С сайдбаром в 250px

/* Layout by Zharkova Asya http://zharkovaa.com or http://asya-asia.livejournal.com */

html {background:#fff url('http://www.ljplus.ru/img4/a/s/asya_asia/tw_bg_small.jpg') no-repeat top left fixed;}
body {background:url('http://www.ljplus.ru/img4/a/s/asya_asia/tw_bg_big.jpg') no-repeat top right fixed;text-align: center;color: #444;font: 13px/1.5 Helvetica Neue,Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif;; margin: 0; }
a, a:link, a:visited {color: #aad3ea;text-decoration: none;}
a:hover {color: #aad3ea;text-decoration: underline;}

p, td, blockquote {
font-size: 11px;
}

code, kbd, pre, tt {
font-family: inherit;
}
#content{width: 85%;margin:0 auto; margin-top:40px; //margin-top:100px; background:url('http://www.ljplus.ru/img4/a/s/asya_asia/tw_bg.png');border:none;padding: 0;
-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; min-width:960px; max-width:1200px;}
#maincontent { margin-top: 0; font: inherit; background:#fff; color: #444;border:none;margin-right: 250px;text-align: left;
-moz-border-radius: 0px 0px 0px 10px; -webkit-border-radius: 0px 0px 10px 0px; -khtml-border-radius: 0px 0px 10px 0px; border-radius: 0px 0px 10px 0px;}
#sidebar {padding-top: 0;margin-top: -171px;background: none;border:none;font:inherit;color: #fff;width: 250px;float: right;text-align: left;
-moz-border-radius: 0 10px 0 0; -webkit-border-radius:0 10px 0 0; -khtml-border-radius:0 10px 0 0; border-radius: 0 10px 0 0;}
#header {padding: 10px 0px 20px 0px;margin-right: 250px;text-align: left; font:inherit;letter-spacing:0;border:none;background:#fff;color: #444;}
#footer {text-align: center; font:inherit; letter-spacing: 0;background: none;color: #5d5d5d;border:none;z-index: 100;clear: both; text-transform:uppercase;}

/* header -- links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:visited {color: #aad3ea;}
div#footer a, div#footer a:link, div#footer a:visited {color:#f0b8f0;}
div#header a:hover {color: #aad3ea;text-decoration: underline;}
div#footer a:hover {color:#f0b8f0; text-decoration:underline;}

ul.navheader{padding: 0px;margin: 0px;background:#f4f4f4;padding:20px;margin:10px;
-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; position:relative; top:60px; }
ul.navheader li {display: inline;padding: 0 3px 0 3px; text-shadow:1px 1px 1px #fff;}
.title {font:inherit;line-height: 200%;position:relative; top: -90px; left:20px; font-size:20px; font-weight:100;}
.subtitle{font:inherit; position:relative; top: -90px; left:20px; font-size:14px;}

/* sidebar */
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{color: #f3ccda;}
div#sidebar a:hover {color: #f3ccda;text-decoration: underline;}
.defaultuserpic {display:none;}
.sbarheader {padding: 0;}
.sbarbody {padding: 0 10px; margin:0 10px;}
.sbarbody2 {padding: 0 10px 10px 10px; border-bottom:1px solid #5d5d5d; margin:0 10px;}
#sidebar_tags {border-bottom:1px solid #5d5d5d; margin:0 10px;}
#sidebar_summary li.sbaritem {margin: 0;padding: 3px 0;border-bottom: none;}
#sidebar_linklist { border-bottom:1px solid #5d5d5d; margin:0 10px; }
table.calendar {display:none;}
#sidebar_calendar li.sbartitle {display:none;}
ul.sbarlis{padding-left: 0px;margin-left: 0px;list-style: none;}
li.sbaritem, .tagcloud{ padding-left: 15px; list-style: none; }
li.sbartitle{padding-left: 0;list-style: none;border:none;background:none;margin-bottom: 10px;margin-top: 10px; font-size:16px; color:#bababa;}

/* maincontent */
.subcontent {border-top:1px solid #eee;}
.subcontent:hover {background:#f6fafc;}
.entry {margin: 0;padding: 10px;background:none;color: #444;font:inherit;text-align: left; border:none; }
.entry ul li{padding-left: 5px;margin-left: 15px;}
.entry ol li{padding-left: 5px;margin-left: 15px;}
.userpic {position: relative; float: left;background:none;padding: 0; margin: 10px; z-index: 15; border:none; }
.userpicfriends { position: relative; float: left; padding: 0; margin: 10px; text-align: center; border:none; background:none!important; font:inherit; z-index: 15; color:#999; }
.userpicfriends img, .userpic img {width:50px; height:50px;}
.userpicfriends font, .userpic font {color:#999}
.date { line-height: 200%; top: 5px;color: #999;font:inherit; text-align:right;}
.subject {font-weight: bold;padding: 10px;color: #000000;font:inherit; font-size:20px; text-transform:uppercase;}
.subject a, .subject a:link, .subject a:visited, .subject a:hover {color: #000000;/*color: #ffffff;*/text-decoration: none;}
.subject a:hover { color: #aad3ea;}
.datesubject {background:none;padding: 5px;}
.currents, .currentmood, .currentmusic {font:inherit;}
.comments {font:inherit;text-align: right;background: #f4f4f4; padding: 10px 20px; position: relative;top: 15px; color:#f4f4f4;
-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;}
div.comments a, div.comments a:link, div.comments a:visited{color: #aad3ea; text-shadow:1px 1px 1px #fff;}
div.comments a:hover {color: #aad3ea;text-decoration: none;}

/* maincontent -- entry, reply pages */
.datesubjectcomment {background:none;padding: 5px;margin-top: 20px;}
.userpiccomment {position: relative;background:none;top: -30px;left: -25px;padding: 0; margin: 10px 10px -20px 10px;z-index: 15;float: left;border:none; width:50px; height:50px;}
.box {border:none;padding: 10px;clear: left;}
input, textarea {font:inherit;background: #f4f4f4; padding: 10px 20px; color:#444; border:none; margin:20px 0;
-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px;}
input:hover {background:#e1e0e0;}
textarea.textbox {width: 95% !important;}
.reply {position: relative;margin: 20px 30px 10px 30px;padding: 25px 10px 10px 10px;text-align: left;font:inherit;line-height: 125%;background:none; color: #444; }
.replytosubject {font-weight: normal;}
.commentreply {position: relative;margin: 10px;font:inherit;color: #444;}
.commentbox { padding: 10px; margin: 10px; background:none; border:none; border-top:1px solid #ebebeb; }
.datesubjectcomment a:link, .datesubjectcomment a:visited {color: #aad3ea;}
.datesubjectcomment a:hover {color: #aad3ea; text-decoration:underline;}
.commentboxpartial {border:none;padding: 10px;margin: 10px;background:none;}
.commentinfo {background:none;margin-top: 10px;width: 100%;}
table {border:none!important;}

/* maincontent -- year/achive pages */
ul.year {text-align: center;padding: 40px 0;}
ul.year li {display: inline;}
table.yeartable {margin-left: auto;margin-right: auto;}
table.yeartable td.yeardate, table.yeartable td.yearday {border:1px solid #eee; padding:5px;}
table.yeartable td.yearday {background: #f6fafc;text-align: center;}
td.yearmonth {border-style: none;}

/* footer */
ul.navfooter{ padding: 0px;margin: 0px;}
ul.navfooter li {display: inline;margin: 0 5px 0 5px;}
.clearfoot {clear: both;}

/* misc */
.clear {height: 15px;}
.skiplinks {text-align: center; color:#fff;}
.headerimage {/* for formatting header image */}
.separator{/* for formatting separators between entries */height: 0px;}
* html div.subcontent {/* fixes an IE reply page bug */ height: 1%;clear: none;}
* html div.box#commentform {/* fixes an IE reply page bug */position: absolute; border:none;background:none;}

#lj_controlstrip {min-width:960px!important; background:url('http://www.ljplus.ru/img4/a/s/asya_asia/cstrip_bg.png')!important; height:55px; position:fixed;}
#lj_controlstrip_userpic {display:none;}
#lj_controlstrip a, #lj_controlstrip a b {color:#bababa! important; text-decoration:none; text-transform:none; font-weight:100; font-size: 12px;}
#lj_controlstrip a:hover{color:#fff!important; text-decoration: none !important;}
#lj_controlstrip_statustext {color:#fff! important; font-weight:bold;}
#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_search { border:0; }
#lj_controlstrip input {background:#666; padding: 3px 5px; color: #a9a9a9; text-align:left;
-moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}
#lj_controlstrip input:hover {background:#757575;}
#lj_controlstrip_search_input_text {color:#a9a9a9 !important; background:#666!important; margin:0 10px!important; padding:4px 5px!important;}
#lj_controlstrip_search_input_text:hover {background:#757575!important;}
#lj_controlstrip select {background:#666!important; border:none!important; padding:3px 5px; color:#a9a9a9;}
#lj_controlstrip select:hover {background:#757575!important;}
#ups_search {padding:3px;}
.ups_searchbox {position:relative; top:-20px;}
div.ContextualPopup div.Inner {color: #a9a9a9 !important;padding: 7px;width: 210px;text-align: left; background:#666 !important; border:none;
-moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:active, div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited {text-decoration: none !important;font-weight: 100;color: #fff! important;}
div.ContextualPopup .Userpic {width:40px; height:40px;position:relative; right:5px;}

бесплатные обложки для ЖЖ, цвет: белый, flexible squares

Previous post Next post
Up