№636 Твиттер

[Lina~Hitagi]

Задумка была давно, но всё никак времени не было, и вот наконец ОНО завершилось ))



Дизайн под стандартный диз твиттера
Итак, нам требуется...

1) Логотип - static.diary.ru/userdir/8/8/6/4/886437/55841483...
ИЛИ идём сюда, вбиваем нужное нам слово на заголовок дневника, сохраняем логотип. Затем в фотошопе с помощью Image - Image Size ставим высоту (height) - 70. Жмём ОК, и сохраняем в png.
2) Аватар - static.diary.ru/userdir/8/8/6/4/886437/55877657...
ИЛИ любое изображение, но размером 48*48 (оригинальный размер авиков в твиттере)
3) ФОН- static.diary.ru/userdir/8/8/6/4/886437/55656848...
4) ЭКСТРАТОП - static.diary.ru/userdir/8/8/6/4/886437/55840685...
5) ВРАПЕР - static.diary.ru/userdir/8/8/6/4/886437/55840982...

Дизайн табличный.
Навигационная панель слева.
Заголовок - обычный 16
Текст - обычный 12
Шрифт - Times New Roman

Цвета:
Заголовок #CCCCCC Ссылки #2276BB Записи #272727 Оффтопик #999

Границы стереть.

Код с пояснениями:

body {background: url('ФОН') 0 0 repeat-x #c0deed; padding: 0px !important;font-family: "Lucida Grande", sans-serif;font-style: normal;font-variant: normal;font-weight: 400;color: #333333;}
 #wrapper{width:763px; min-width:763px; margin: 0 auto !important;padding:0px !important;background:url('ВРАПЕР') repeat-y #fff; }
 img {filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; }
 img:hover {filter: alpha(opacity=100); -moz-opacity: 1.0; -khtml-opacity: 1.0; opacity: 1.0; }
 { --------Экстратоп------}
 #extratop {background: url('ЭКСТРАТОП') no-repeat; height:16px; width:763px; background-position: center !important;margin-top:50px }
 { --------Сам пост------}
 #page-c{ width:763px !important;margin:0 !important;padding-top:10px; }
 #page-t { width:500px !important;margin:0 !important; margin-right:250px !important;}
 .singlePost, .singleComment {padding-bottom: 10px !important; padding-left: 10px !important;}
 #Journal .postInner {padding-left:50px !important;background:url('АВАТАР') no-repeat 0 0 ;}
 #Journal .postLinksBackg {color:#F7F7F7;margin-top: 0px;width:500px !important;border-bottom:1px solid #ccc; }
 .postLinksBackg a {color:#F7F7F7 !important; }
 .postLinksBackg a:hover {color:#2276BB !important; }
 { --------Выравнивает комменты и ленту избранного------}
 #JournalComments #page-t, #JournalFavorite #page-t, #JournalQuote #page-t { width:600px !important; }
 #JournalComments #thisDiaryInfo, #JournalFavorite #thisDiaryInfo, #JournalQuote #thisDiaryInfo { width:70px !important; }
 #JournalComments .postInner, #JournalFavorite .postInner, #JournalQuote .postInner {position: relative;left: -150px !important; width:500px !important; top:-20px !important;}
 #JournalComments .postLinksBackg, #JournalFavorite .postLinksBackg, #JournalQuote .postLinksBackg {color:#F7F7F7;width:500px !important;border-bottom:1px solid #ccc; }
 #JournalFavorite .postDate, #JournalComments .postDate, #JournalQuote .postDate {position:absolute;margin-top:155px !important; color:#ccc !important; margin-left:0px;font-size:7pt !important;width:50px !important;text-align:center }
 #JournalComments .postTitle span , #JournalFavorite .postTitle span, #JournalQuote .postTitle span {position:absolute;margin-top: 120px !important; color:#ccc !important; margin-left:0px;font-size:9pt !important;width:50px !important;text-align:center; }
 #JournalFavorite #authorName, #JournalComments #authorName, #JournalQuote #authorName {position: relative; top: -10px;margin-left:190px !important; }
 #JournalFavorite #thisDiaryPhoto img, #JournalComments #thisDiaryPhoto img, #JournalQuote #thisDiaryPhoto img {position:absolute; width:30px !important; height:30px !important;margin-left:120px; }
 .avatar img {width:48px !important; height:48px !important;}
 { --------Заголовки, дата, время и кнопки редактирования и удаления------}
 .postTitle {color:#F7F7F7 !important; font-size:17pt !important; padding-top: 20px !important;line-height:1em;}
 .postDate {position:absolute;margin-top: 110px !important; color:#ccc !important; margin-left:-8px;font-size:7pt !important;width:50px !important;text-align:center }
 .postTitle span {position:absolute;margin-top: 75px !important; color:#ccc !important; margin-left:-9px;font-size:9pt !important;width:50px !important;text-align:center; }
 #Journal .postActionLinks {position:absolute; margin-top: 130px; margin-left:-10px;}
 { --------Меню верхнее------}
 #side{width:350px !important; margin-left: 410px !important;position: absolute; text-align:center; font-size:10pt;background:#fff;height:28px;top:25px; padding-right:3px !important;}
 #optionsLink a { margin-left: -25px; }
 #side li {float:left !important; padding-right:7px !important;top:-90px; position: relative;color:#2276BB !important; }
 { --------Заголовок------}
 #side h1 a {overflow:hidden; line-height:500px; display:block; background: url('ЛОГОТИП') 0 0 no-repeat; position: relative;margin-left: -420px !important;margin-top: -40px !important;top: 0px !important;width: 250px; height: 70px; }
 #iAmQuit a {position:absolute; margin-top: -11px; }
 { --------Меню боковое------}
 #authorName {position: relative; top: -10px;margin-left:120px !important; font-size:12pt !important; font-weight:lighter !important; color:#000 !important;font-weight:bolder !important;margin-left:170px; }
 #thisDiaryPhoto img {position:absolute; width:30px !important; height:30px !important;;margin-left:0px; }
 #addToFav a, #delFromFav a {position:absolute; margin-top: 100px; margin-left: 110px; width:60px !important; font-size:8pt !important; font-weight:lighter !important; }
 #writeToAuthor a {position:absolute; margin-top: 100px;margin-left: 240px; font-size:8pt !important; font-weight:lighter !important; }
 #addToFav, #delFromFav,#writeToAuthor {width:50px !important;text-align:center}
 #allDiaryLink a {position:absolute; width:200px !important; margin-top: 120px; margin-left:-142px;height:30px !important;line-height:2em;font-size:10pt !important;}
 #myProfileLink a {position:absolute; width:200px !important; margin-top: 160px; margin-left: -92px;height:30px !important;line-height:2em;line-width:50em !important;font-size:10pt !important;background: #EDFEFF}
 #myFavLink a {position:absolute; width:200px !important; margin-top: 190px; margin-left: -71px;height:30px !important;line-height:2em;font-size:10pt !important;}
 #myQuotLink a {position:absolute; width:200px !important; margin-top: 220px; margin-left:-78px;height:30px !important;line-height:2em;font-size:10pt !important;}
 #discussionLink a {position:absolute; width:200px !important; margin-top: 250px; margin-left:-85px;height:30px !important;line-height:2em;font-size:10pt !important;}
 #myFavLink a:hover, #myProfileLink a:hover, #allDiaryLink a:hover, #myProfileLink a:hover, #myFavLink a:hover, #myQuotLink a:hover, #discussionLink a:hover { background: #EDFEFF}
 #YaSearch { visibility:visible !important; position: absolute !important; left: 150px; top: 300px; width:190px !important; }
 #YaSearchForm {display:block !important;visibility:visible !important; height:25px !important; font-size:10pt !important;}
 { --------Цитаты------}
 span.quote_text {display: block; margin-left:30px;padding-left:10px; padding-right:10px !important;color: #C0DEED !important; border-left:2px dotted #C0DEED; font-style:italic !important}
 { --------Форма отправки сообщения------}
 #msg_form {width:530px !important; }
 #message, #htmlbox , #msgTitle, #postTitle, #atMusic, #atMood, #tags { border:1px solid #ccc !important;left:25px !important; color:#ccc }
 #msg_form a {color:#ccc }
 { --------Эпиграф------}
 #epigraph {position:absolute; margin-top:280px !important; margin-left: 500px !important; background: none; width:200px; border:0px solid #AA9F99; }
 #epigraph .postInner {background: none !important;}
 { --------Тэги------}
 .atTag {border-left:18px solid #C0DEED;}
 .atTag a {font-style: normal !important; font-size:7pt !important;}
 { --------Линии и заголовки в эпиграфе------}
 hr {border:1px dotted #C0DEED;height:1px}
 h1 {color:#000; font-size:10pt !important;font-weight: lighter}
 { --------Фикс счётчиков и сдвига меню------}
 #myDiaryLink .count_box {position:absolute ; top:39px !important; left:325px !important; color:#DDEEF6}
 #myDiaryLink .count_box a {position:absolute; left:0px !important;font-size:12pt !important; }
 #discussionLink .count_box {position:absolute ; top:25px !important; color:#DDEEF6}
 #discussionLink .count_box a {position:absolute ; top:0px !important;}
 #discussionLink .count_box a:hover {background: none}
 { --------Запрет на отображение------}
 #thisDiaryLinks, #more_login, #myLinks, #albumLink, #photolibLink, #bottomNav, #sortFromBegin, #sortFromEnd, #sortFromLastComment, .order_button, .urlLink, #lastComments, #pchs, .order_button, #topNav, #subscribeEmail, #unsubscribeEmail, #postsCalendar, #rssLink, #upInChart, #headlineList, #myDraftLink, #myNotepadLink, #myLinksLink, #albumLink, #photolibLink, #mainpageLink, #tagslistlink, #favListLink, #pchListLink, #communityCatalogueLink, #myCommunitiesLink, #myCommunityLink, #randomDiaryLink, #diarySpiritLink, #diarySupportLink, #faqLink, #YaSearchForm_title, #Stats,.profile, .addToQuote, .umail, .atTag span, #JournalComments .postActionLinks, .sign, #JournalComments .postTitle span, #epigraph .postActionLinks, #login_form {display:none !important;}
 
 

ПРИМЕР ЭПИГРАФА. (Эпиграф начинается с Following friends, аватары друзей и ссылки добавляются вручную)

<h1>Following friends</h1><hr>
 <table><tr>
<td><a href="http://" target=_blank><img src="АВАТАР1" class="simg" width="25px;" height="25px;"></a> </td>
<td><img src="http://avatar-gallery.ru/files/imagecache/image_avatar_tumb_100x100/iphone/001_002.jpg" class="simg" width="25px;" height="25px;"> </td>
<td><a href="http://" target=_blank><img src="АВАТАР2" class="simg" width="25px;" height="25px;"></a></td>
<td><a href="http://" target=_blank> <img src="АВАТАР3" class="simg" width="25px;" height="25px;"></a> </td>
<td><a href="http://" target=_blank><img src="АВАТАР4" class="simg" width="25px;" height="25px;"></a></td>
</tr> <tr>
<td><a href="http://" target=_blank><img src="АВАТАР5" class="simg" width="25px;" height="25px;"></a> </td>
<td><a href="http://" target=_blank><img src="АВАТАР6" class="simg" width="25px;" height="25px;"> </a></td>
<td><a href="http://" target=_blank><img src="АВАТАР7" class="simg" width="25px;" height="25px;"></a></td>
<td><a href="http://" target=_blank> <img src="АВАТАР8" class="simg" width="25px;" height="25px;"></a> </td>
</tr></table>

<h1> Introduction</h1><hr>
Welcome to [J]My Diary[/J]! 
 »» Если вы хотите добавить меня в ПЧ, прочитайте сначала <a href="http://это" target=_blank>это</a>. 
»» Если вам нравится моё творчество, не стесняйтесь, скажите об этом <a href="http://здесь" target=_blank>здесь</a>.

<h1> rules</h1><hr>
»» Не ругаться\материться.
»» Не критиковать мои работы.
»» Запрещены холивары.

Комменты?))

Comments

[*Гость_я]

аааа классно!))

[Шторм. Джонни Шторм.]

twitter is over carpacity
оно прекрасно!

Супер)

[Paula]

вау! Классно!

[Strijkova]

супер!!!

[Johnny Kash]

Лина, ты бог!
Я тебя обожаю! Боже, нет слов ))
Молодец))

[Strijkova]

*ждет пока кто нить установит чтобы посомтреть*

[Сен.]

Боже, это прекрасно )

[Алонсо Кехана]

Супер!!

[Lina~Hitagi]

Аааа, всем спасибо огромное-огромное, я старалась <З

[Грайне]

Lina~Izumi вы потрясающая.) очень здорово.

[Yaoma]

ого как здорово!! ух ты ** утащила в избранное!

[[TrusT]]

Красотааааа *___*

[switch off]

потрясающе *о*

[floaty]

Lina~Izumi
Очень здорово!

[Джей молча пьет кефир]

потрясающе

[Lina~Hitagi]

Спасибо всем ))) На деле оказалось с счётчиком (Дискуссии - 1 и мой дневник - 1) ещё небольшая проблемка, фиксю... )

[[luchik]]

отлично!
в цитатник и может быть когда-нибудь воспользуюсь

[La_mignonne]

молодец

[Lina~Hitagi]

Ура, счетчики пофиксены. Теперь счётчик новых комментов в своём дневнике (мой дневник-1) отобразается около ника (правый верхний угол), а счётчик дискуссий ниже слова "Дискуссии".
Спасибо огромное <З Буду рада если кто поставит))

[Pandaco]

Линочка, ты богиня ** Он офигенен, просто офигенен.

[Winter Soldier]

вау это просто шикарно

[Ver/o/nika]

Боже, это прекрасно!!! Носить!!!

[сияющий пиздец]

афигеть! =)) очень здорово, просто отлично =)

[Alier]

аааа, шикарно!!!!можно тоже взять носить?

[Nekkochka Gisich]

наверно ооооочень долго трудились. классно получилось )

[Lina~Hitagi]

Конечно, берите, буду рада ^^
Если будут траблы пишите, мало ли, ибо везде практически абсолютное позиционирование... Ну а так вроде тестила и избранное и цитатник и комменты, всё должно быть норм)

[[IRVIN]]

о, это просто любовь!

[Lina~Hitagi]

Nekkochka Gisich Со вчерашнего дня. я просто задрот )))
На днях хочется очень реализовать идею подкинутую  Hi]{ari, диз в стиле чата дюрары,, ибо хватит уже над соцсетями измываться ^^``

[Лис, которого приручил Маленький Принц]

Lina~Izumi , вау)) просто супер, ты молодчинка))

//будешь мне над моим дизом помагать, а то я в цсс такой лох)) ХД/