EvilEngineN10

[Update from 08.04.10] Awaiting the Gamer.ru update — TF2 style for the entire site

content auto translated from {from}

Once upon a harsh summer time…

The first idea came to my mind, and then Mr_Moxnat quickly got fired up, and we spent a month at night (well, there was a session, and we had little time) opening Gamer's source files and sifting through each individual element in pursuit of perfection. In the end, we got tired and posted the entire code, yes.

Fixes

— The number of pluses above the top plus was moved down, and now it displays correctly.

— The "favorites" button has been moved to the right.

— The code has become 14% kinder.

To better display the text in the player's card, this font was used. You don't need to install it, but it won't look as nice.

Instructions for Firefox

1. Download Stylish.

2. Go to the page via this link.

3. Install the style by clicking the "Install with Stylish" button.

Instructions for Opera

1. Go to the main page of Gamer.

2. Right-click on an empty area.

3. Download this style file, which is slightly different from the usual one.

4. Replace www.gamer.ru at the top with gamer.ru — this will apply the style truly to the whole site, thanks for this tip iXtremeFROST.

5. Settings for the site 〉〉 View 〉〉 My styles (that same css file).

6. Click Ok and then F5.

Instructions for Chrome

1. Go to the page via this link.

2. Click "Install as user script".

3. Click "Confirm" at the bottom left (or wherever they ask you).

The style is created with modern monitor widths in mind, so everyone will be pleased.

All suggestions for improvement are only accepted in the form of ready code, or we will be like buée-booée.

For those who just want to take a look at the code, you can click the "show code" button via the theme link.

A special thank you to Moxnat can be given by upvoting this post :)

Initially, there was a desire to collect 7 pluses to reach diamond, and now… But no one is complaining **:**D

post more button

128

post actions

Comments

Уже поставил! Спасибо вам!

респект за старания ))

Круто, спасибо ребят =) А будут еще какие нить разработки ?)

Это вы зря :)

помоему мало деталей в оформлении, сейчас интерфейс намного зрелещнее, за старания +

It's.. It's.. Beautiful !!!!
Суперски =)

Чертовски здорово вышло!!!

Почините плз тему ,а то брендирование все поломало.

Хорошая темка

крутая темка!!!
спс авторам!

Крута

Комментарий человека который не прочитал пост =)

Замечательный скин! Автор молодец!!

Не в то окно мб?

Это вроде первый пост который в нашем блоге набрал серебро. О_О
ХренасеXD

СПС что объяснил

@paver пробивается потому что движок браузера так устроен, что надстройки действуют, когда основной контент уже загружен. В фаерфоксе же заменяемые элементы просто не загружаются. В опере не знаю что.

Отключается в хроме следующим образом: заходите в «расширения» и там будет отдельной строкой стиль.

Кто сказал что они виноваты?

и если надоест то как ее удалить(chrome) ???

мне нравиться, только почему основная тема сайта пробивается идет загрузка страницы или просто куда-то заходишь ??

————————————————————————————————————————————

Все, что написано выше в каментах, уже не важно — качайте исправленную тему уже сейчас!

Да пожалуйста.

а чтобы звездочка была не слева, а справа, добавьте

И это не мы виноваты. >.> <.< >.>

Как будто это они виноваты

Пофиксите

Стараемся для посетителей сайтика :)

Большое спасибо )

Шикарно :)

Класс! Отлично сделано!=)

Зато, когда они уже стоят, веселее в два раза. Позовите друга или знакомого, который поставит вам скин и радуйтесь.

Ставить скины не весело

Врятли поставлю, слишком в глаза бросается, раздражать будет.

Это не предел!

333 плюса!!! :)

Классный скин! Я одобряю

Вы хорошо постарались, вышло весьма недурно, я ставлю плюс, который не имеет смысла. А вообще, я не сторонник рескинов, стилей и прочих изменений оригинала, в том числе и переводов.

О_о скин офигенный!!
Нет слов! Шик-шик!!=)

Да я плачу и режу вены от счастья , боже мой ну надо же , я так счастлив я так счастливи у меня есть ТЕПЕРЬ ВСЕ ТРИ БРАУЗЕРЫ

Кстати, появилась жуткая панель с кнопочками в разных стилях в самом низу. Чтобы убить ее, добавьте в главный код вот эту строку:

Тьфу... мой фэйл, простите :)

В связи с добавлением конпки Фэйворит, небольшой апдейт:
Добваьте в конец главного кода, до последней закрывающей фигурной скобки.
Выглядеть в итоге должно, например, вот так:

Для тех, кому ну ваще ни в какую не ясно куда что вставлять — вот весь код, сидите и выделяйте:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("gamer.ru") {
body { background:rgb(193, 161, 138) !important; }
/* кастомный потолок */
#top {background-image:url('http://randomusername.narod.ru/top_clean_light_wide15.jpg') !important}
/* верх */
#header1 { background:url(http://randomusername.narod.ru/top2.jpg) !important; opacity:1}
/* лагатипчег */
#logo { background:none !important; padding:10px 15px 0 !important; z-index:600 !important } /* pizdetz */
#logo h1, #logo a { display:block; background:url('http://randomusername.narod.ru/logosmall3.png') !important; width:240px !important; height:147px !important; }
/* хренька с цифрой над словом лента */
#item_lenta div { background:url(http://randomusername.narod.ru/shitty.png) !important; width:24px !important; height:24px !important; position:absolute; top:57px; left:13px; font-size:8px !important; font-weight:bold; color:#fff; text-shadow: black 1px 1px 10px}
/* кнопки главных разделов */
#menu_main { padding-left:65px !important; z-index:800 !important; }
#item_main a, #item_main span { background:url(http://randomusername.narod.ru/main.png) no-repeat !important; width:76px !important; z-index:800 !important }
#item_main span.sel { left:-12px;}
#item_game a, #item_game span { background:url(http://randomusername.narod.ru/games.png) no-repeat !important; width:47px !important; z-index:800 !important }
#item_game span.sel { left:-25px;}
#item_people a, #item_people span { background:url(http://randomusername.narod.ru/ppl.png) no-repeat !important; width:53px !important; z-index:800 !important }
#item_people span.sel { left:-20px;}
#item_lenta a, #item_lenta span { background:url(http://randomusername.narod.ru/lenta.png) no-repeat !important; width:61px !important; z-index:800 !important }
#item_faq a, #item_faq span { background:url(http://randomusername.narod.ru/help.png) no-repeat !important; width:75px !important; z-index:800 !important }
#item_faq span.sel { left:-18px/*-33px;*/}
/* заменяем лампочку на огнемет */ /* ooh, this is bad D; */
#menu_main span.sel { background:url(http://randomusername.narod.ru/flames.png) right top no-repeat !important; padding-top:100px !important; width:184px !important; height:144px !important; z-index:600 !important; opacity:0.2 }
/* кнопка весь топ */
#top_company_sidebar .company .all, .new_tops1 a.all { background:url(http://randomusername.narod.ru/alltop.png) no-repeat !important; width:77px !important; height:22px !important; padding-bottom:8px !important; }
/* юзерская карточка */
/* шрифт меняется на ТФ2 Секондари */
#header .head_au {font-family:'tf2 secondary';}
#user_card .mail_envelope span.messages_counter { font-family:'arial' !important; color:#f00 !important; } /* число новых писем — красный ариал */
/* шрифт подгоняется по размеру, еще меняется цвет */
#header .login a { font-size:16px; color:rgb(91, 40, 28) !important } /* username style */
#header b { font-size:32px !important; color:rgb(91, 40, 28) !important; text-align:center !important } /* plvl */
#header { font-size:16px !important; }
#header mark, #header span { color:rgb(193, 161, 138) !important } /* enegry points, rank color */
/* задник меняется на чуть более крутой, много презервативов и смазки */
.head_au2 { background:none !important; }
.head_au { background:none !important; }
.enter { background:none !important; padding-top:20px !important; padding-left:8px !important; }
.enter span.green { background:none !important; }
.head_au1 { background-image:url('http://randomusername.narod.ru/topbubble9.png') !important; width:286px !important; margin-top:-8px !important; margin-left:20px !important; }
.login { margin-left:0px !important; margin-top:-2px !important; } /* юзернейм */
.mark { margin-left:4px !important; } /* level and enegry */
.mark1 { text-align:center !important;} /* наместничество */
.enter { margin-left:-116px !important; margin-top:6px !important; } /* профиль выйти */

/* кнопки клана и личной переписки */
.clan_avatar { background:url('http://randomusername.narod.ru/flag.png') no-repeat !important; width:108px !important; height:87px !important; margin-left:39px !important; margin-top:-30px !important; }
.clan_avatar img {opacity:0 !important; width:80px !important; height:65px !important; float:right !important;}
#user_card {width:350px !important; } /* для флажка пошире */
.mail_envelope { background:url('http://randomusername.narod.ru/mail.png') no-repeat !important; width:97px !important; height:64px !important; margin-left:-50px !important; margin-top:-32px !important; }
.mail_envelope img { opacity:0 !important; width:80px !important; height:50px !important; float:left !important; }
/* кнопка действия со мной */
#actions_with_me { opacity:0; margin-left:12px !important; margin-top:3px !important; }
.mark1 { background:url('http://randomusername.narod.ru/iwant2.png') no-repeat !important; margin-left:-10px !important; margin-top:-3px !important; z-index:506 !important; }
/* левый блок */
/* компании */
#top_company_sidebar .header h3 { background:none !important; opacity:0 !important; }
.left_side_block #top_company_sidebar { padding-top:20px !important; }
#top_company_sidebar .header { background: url(http://randomusername.narod.ru/10comp.png) !Important; margin-top:-20px !important; height:64px !important; margin-bottom:0px !important;}

/* свежие каменты */
.air_sidebar_header {margin-top:34px !important; opacity:0; }
.air_sidebar {background: url(http://randomusername.narod.ru/newComments5.png) no-repeat !important; }
.air_sidebar div.tr, .air_sidebar div.tl, .air_sidebar div.br, .air_sidebar div.bl { background:none !important; } /* убираем края */
/* средняя полоска мозаикой */
#center {background-image:url('http://randomusername.narod.ru/bg.png') !important; }
.fon_in {background-image:url('http://randomusername.narod.ru/bgsqare.png') !important; }
.back {background-image:url('http://randomusername.narod.ru/bgsquare.png') !important; }
/* надписи внизу */
.agreement_rules_links { margin-left:-260px !important; margin-top:-20px !important; position:relative !important; }
.copy .counters { margin-left:210px !important; margin-top:-26px !important; }
.copy .counters li {display:inline-block !important; padding:0 !important; margin:10px !important; width:74px !important; opacity:0.6;}
.copy div span { margin-left:-20px !important; margin-top:30px !important; }
.copy div { margin-top:-218px !important; }
/* кастомный пол, ок */
#bottom {background-image:url('http://randomusername.narod.ru/bottom100502.jpg') !important}
/**********/
/* плюшки */
/**********/
/* бар энергии */
.enargy span.level { background:#0f6fcf !important;}
/* полоска экспы */
.my_avatar div span { background:rgb(241, 129, 73) !important; width:6px !important }
/* Медаль «рекомендовано редакцией» */
span.recommended_by_editor_medal {height:28px !important; display:inline-table; background: url(http://randomusername.narod.ru/medal_red-blu.png) no-repeat !important; }
.recommended_by_editor_medal img {opacity:0; background: url(http://randomusername.narod.ru/medal_red-blu.png) !important;}
/* плюсы */
/* блоговые плюсы */
.place .vote { background: url(http://randomusername.narod.ru/plusmed6.png) no-repeat !important; margin: 5pt -3pt 0px !important; width:48px !important; height:48px !important; z-index:50;}
.place .voted { background: url(http://randomusername.narod.ru/plusmed6used.png) no-repeat !important; margin: 5pt -3pt 0px !important; width:48px !important; height:48px !important; z-index:50;}
/* #voice .x_vote_rating {margin:20px 0 0 0 !important; } */
.place .voice span { display:block; margin-bottom:2px !important; padding:1px 0 0 0 !important; margin-left:7px !important; color:white !important; text-shadow: black 0px 0px 3px; }
/* постовые плюсы */
.vote_new { background: url(http://randomusername.narod.ru/plussmall6.png) center top no-repeat !important; height:24px !important; margin:4px 0 0 -32px !important; }
.voted_new { background: url(http://randomusername.narod.ru/plussmall6used.png) center no-repeat !important; height:24px !important; margin:4px 0 0 -32px !important; }
.vote_bottom_new { background: url(http://randomusername.narod.ru/plussmall6.png) center top no-repeat !important; }
.voted_bottom_new { background: url(http://randomusername.narod.ru/plussmall6used.png) center top no-repeat !important; }
/* фаворите */
.favorite-button-inside-post {padding-top:40px !important;}
/* .vote_rating { margin: -15px 0 0 5px !important; padding:0 0 0 0 !important; color:white !important; } */
/*.voted_new .vote_rating {margin-top:24px;}*/
/* иконки топовых игр */
.place .name h5 span.first { background: url(http://randomusername.narod.ru/1stplace4.png) left no-repeat !important; height:122px !important; padding-left:76px !important; margin-left:26px !important; z-index:-20 !important; }
.place .name h5 span.second { background: url(http://randomusername.narod.ru/2ndplace2.png) left top no-repeat !important; height:72px !important; padding-left:76px !important; margin-left:26px !important; }
.place .name h5 span.third { background: url(http://randomusername.narod.ru/3rdplace3.png) left top no-repeat !important; height:40px !important; padding-left:76px !important; margin-left:26px !important; }
/* заголовок первой главной таблицы */
.crown1 { background:url(http://randomusername.narod.ru/hallmark.png) !important; width:60px !important; top:-14px !important; left:20px; }
.crown2 { background:url(http://randomusername.narod.ru/gibus.png) !important; width:42px !important; height:40px !important; top:-16px !important; }
.sword1 { background:url(http://randomusername.narod.ru/lament.png) !important; width:88px !important; height:50px !important; top:-20px !important; left:-6px !important; }
.ten_games1 h3 {padding-left:90px !important; }
.ten_gamers1 h3 {padding-left:80px !important; }
/* полосочка поиска — 1 */
/* .search_sidebar {background:url(http://randomusername.narod.ru/search1.png) left bottom no-repeat !important; } */
/* полосочка поиска — 2 */
.search_sidebar.search_sidebar { background:url(http://randomusername.narod.ru/searchBubble2.png) left bottom no-repeat !important; height:173px !important; width:276px !important; margin:-53px 0 -50px -28px !important; }
.search_sidebar h3 {display:none !important;}
/* окошко ввода и кнопочка */
.search_sidebar input.search1 { margin:90px 0 0 20px !important; }
.search_sidebar input.search2 { height:24px !important; width:24px !important; margin:86px 0 0 5px !important; }
/* скрываем ненужные картинки */
#content { background:none !important; }
#search_sidebar { background:none !important; }
#search_sidebar .search_header { background:none !important; }
.main_box .col_left .left_side_block { background:none !important; }
.left_side_block div.tr, .left_side_block div.tl, .left_side_block div.br, .left_side_block div.bl { background:none !important; } /* убираем рамочку */

/* новые каменты зеленые */
.new_comments_count {color:#090 !important; }

/* кнопка новый пост */
.add_post {background:url(http://randomusername.narod.ru/newpost2.png) no-repeat !important; width:128px !important; height:58px !important; margin-left:32px !important; }
.add_post img {opacity:0; }
#new_post_link {background:url(http://randomusername.narod.ru/newpost2.png) no-repeat !important; width:128px !important; height:58px !important; padding-bottom:50px !important; }
#new_post_link img {opacity:0; }
/* корзина */
.basket2 { background:url(http://randomusername.narod.ru/scraptext.png) left top no-repeat !important; width:80px !important; height:90px !important; padding-top:0px !important; margin-top:16px !important; margin-right:16px !important; font-size:0px !important; }
/* кнопка подробное описание */
.more { bottom:16px !important;}
#game_description_toggler {background:url(http://randomusername.narod.ru/description.png) no-repeat !important; height:30px !important; margin-bottom:10px !important; padding-bottom:10px !important; }
#game_description_toggler img {opacity:0;}
/* */
.sub_menu div, .sub_menu.search_result div, .sub_menu { background:rgb(246,231,222) !important; }
}
/* фиксит некоторые баги, только для главной страницы! */
@-moz-document url("http://www.gamer.ru/") {
.search_sidebar.search_sidebar { margin:-66px 0 -50px -28px !important; }
}

http://www.gamer.ru/games/972-blog-administratsii/posts/46406 Апдейт произошел, ждем подгонку стиля ^_^

Ждем стиль ME2, и Diablo III ;)
^_^

Жаль, что выше бриллианта ничего нет :)

Ура брилиант!
Этот пост такого заслуживает! =)))
Поздравляю!

ого 302... Круто!
На +2

Да уж, о_О это точно.

12 lvl » 14 lvl Щ_Щ
Всем спасибо за плюсы, приятного вам пользования!

Хм, у меня какие-то странности со шрифтом TF2 Secondary. Пока стояла более старая версия, все выглядело так:
С новой версией отображается лучше, но уровень почему-то превращается в третий о_О

За отличною работу вручаю EvilEngineN10 брильянт!

http://lmgtfy.com/?q=mozilla+firefox Гуманитарная помощь :)

Главное не палиться.....

Видимо среди аудитории гру нет извращенцев кто сидит с IE)))

Ну, давайте же, скупердяи! Сделайте пост бриллиантовым!

"No! Cart moves wrong way!"
Больше плюсов, больше! :)

О, нет, что вы)

Осталось ещё сделать для Сафари и полный комплект будет. Я надеюсь, что никто IE не считает браузером :)

Шикарная тема!!
Спасибо авторам!!

название темы напомнило картинку

Мега клева.
Плюсанул

Эмм… Мы подумаем (@_©)

ололол
с нетерпением жду исчо стилей!

Я так и знал что можно как-то исправить. Спасибо за помощь.

Удачи, терпения и спасибо)

Упс, зэт воз нот медисин >_>

Удачно разобраться в !импортантах)

пасиба, уже ставлю )

Молодцы! Хорошо поработали. )

Ежику - спасибо, ежику - привет!
:)

Посту - плюс, мохнатому - привет!

                                          Спасибо всем за приятные отзывы! :)
Надеюсь, что не ошибаюсь.
     В мозиле нажмите на иконку с буквой "s" в правом нижнем углу - вылезет список, где снизу должен быть стиль, который легко включается и отключается.
     В опере отключается все так же, как и включалось Настройки для сайта 〉〉 Вид 〉〉 Моя таблица стилей. Только теперь нужно оставить пустой "Моя таблица стилей".
     В хроме нужно найти в верхнем правом углу иконку ключа, нажать на нее. Там должен быть раздел "расширения" - там все и отключается.

Спасибо @EvilEngineN10 и @Mr_Moxnat. Я уже ковыряю код, чтобы переделать под себя.

Благодарю!

Делал для вконтакта стили, этот просто супер. Даже не ожидал что нет глюков, типо не видного текста и т.п. плюс Вам!

поставил, супер! спасибо огромное)

Это круто. Вот бы такую под ME2 сделать : )

Кстати, можно как-нибудь сделать чтобы поиск по блогу назывался поиском по блогу? Просто в блоге он ищет по блогу, но картинка "Поиск по сайту".

Буду пробовать такое с Crysis 2 замутить)
А авторам желаю бруллианта)

Спасибо за оперу.
Чтобы нормально применялось к поддоменам,- подотрите www. и оставьте просто gamer.ru и нажмите OK, чтобы ко всем поддоменам применялось (можно это сделать хоть на этой странице, эт роли не играет)

Великолепно! Извините, а как этот скрипт выключать-включать? ИЛи это уже навсегда?

Вау, круто =) а под сафари хоть каким-нибудь боком можно будет сделать? =) респект

++

Большое спасибо =)

Починил кривоугольник поиска в Опере, нужно скачать снова файл с кодом. Там была маленькая ошибка, несовместимая с Оперой.
Опера устанавливает стиль для одного определенного сайта, который считается всеми поддоменами, то есть username.gamer.ru — отдельно взятый сайт, на него не будет распространяться стиль такой же, что и на www.gamer.ru. Тут уже надо что-то придумать.

Учиться веб-дизайну — одно, а изучать ЭТО — совсем другое)

Обязательно изучу код, так как сам начал учиццо веб-дизайну ^_^

Это мог бы и одни, но в двоем и веселее и работа быстрее шла, я уверен :)

К сожалению, не работает в опере на субдоменах
lactuk.gamer.ru

Спасибо за инструкцию к опере.
Но у меня есть небольшие проблемы.
Наверно, тему надо подгонять к кажому разрешению экрана. :(

Ооооо , ребят , огромное вам спасибо , стиль для оперы (Opera) отлично подошел !
"Все грамматические ошибки являются авторским стилем изложения материала."

А вот теперь можно для Хрома и Оперы!

Пасиба, а то я не понял как туда сохранять стили :)

Все намного проще!
http://userstyles.org/styles/32771

Нифига себе апдейт 0_0 плюс)))

Если кто хочет установить эту тему на Оперу, то делаем следующее:
Создаем файл с расширениеем css, например gamer.css.
Копируем код из под спойлера в этот файл.
Заходим на Gamer.ru, кликаем правую кнопку мышу, выбираем настройки для сайта, переходим во вкладку ВИД, Там есть строка моя таблица стилей, вот выбираемтам файл, который создали ранее, те gamer.css, нажимаем ОК.
Обновляем страницу!
Вуаля!!!

Ребята, вы молодцы!

Нужно-б так сделать с каждой игрой :)

Это такие, необязательные картинки)) Сначала должен был быть огнемет, заменяющий лампочку, но когда он совсем перестал получаться задуманным образом, было решено оставить его нерабочим. Сёрч один это старый поиск, он не нужен теперь. Иногда забываешь удалять невлияющие ни на что кусочки кода, особенно когда сессия, 4 ночи и никто не поможет ;)

Замечательно. Правда у меня не все отображает, я решил посмотреть в чем проблема :), и увидел что 4 картинки нету на сервере :)

http://randomusername.narod.ru/shitty.png
http://randomusername.narod.ru/flames.png
http://randomusername.narod.ru/bgsqare.png
http://randomusername.narod.ru/search1.png

Но вы парни сделали все гениально 5+.

Превосходно сделали...+

Парни, обещайте, если получите брульянт, то схимичите и на оперу что-то похожее, ок?

хорошо сделано!+

Я разрыдался бы от счастья, но у меня хром. Поэтому рыдаю от несчастья.

Ура, принципиально новая вещь!

Фотошоп-кун одобряет. Круто сделали

супер! на хром бы...

Поддерживаю.
В полне не плохо. Надеюсь вы дороботаете его до конца.

брендирование ведь платное =\

Молодцы ребята !
"Все грамматические ошибки являются авторским стилем изложения материала."

Это может и один человек сделать, не то что два. Сам развлекался когда-то (в том же ЖЖ). Но это не отменяет того факта, что отлично сделано.
Кстати, благодарить надо еще и тех, кто делал дизайн gamer.ru. Ибо не расставь они везде классы, было бы гораздо сложнее. ;)

Круто, хороше сделали, очень! Жаль не для оперы, но надежда умирает последней. Творие еще, парни. ;)

молодцы=) хорошо сделали, тоже было желание потворить чтонить такое..., но все времени нету)

Молодцы)))

Наизусть надо знать
C:\Windows\Fonts

сделал бы кто нить стиль left 4 dead лучше, а этот ПО КАЧЕСТВУ МЕГО

Супер. Я уверен администрация может сделать потом это оформление и без Stylish'a!
А ведь это можно использовать как шаблон для модификации других блогов... :)

в какую папку шрифт кидать на windows 7 ?

Есть тут люди, которые помогут этим БОГАМ портировать стиль на другие браузеры? Сам пользуюсь Лисой, бегу ставить

Красиво, ток не для хрома (

а вы точно люди?
сколько вы работали над ним?

И правда красота! Я бы так не сомг, нету у меня таланта программирования :D
+1 естевственно =)
Хотя не поставлю ибо не на фаерфоксе =(

Господи, это прекрасно!
Кланяюсь вам в ноги!
Одно маленькое замечание:
разбавить бы чем-нибудь персиковый фоновый цвет в центре.
а так- превосходно. Уже поставил.
Splendid!

Хорошие ребята)

Вы мои герои. Может администрация потом оформление или фон блогу официально добавит, как уже браузеркам сделали, раз все готово? Если, конечно ничьим правам не противоречит =)

Это сделали 2 человека?!

Да, это мощно. Поставлю себе, пожалуй.

Так это и есть то, чему так удивился хэви? =)
Установил, выглядит весьма приятно.

Это круто. Очень круто.

Что-то мне подсказывает, что стиль может понравиться не только любителям тимки.