Webmasterok : Меняем дизайнSpaces. Сами.17 Мая 2014
Предполагается что вы хотя бы чуть-
чуть знаете английский и CSS-
разметку.
Понадобится:
1) FF / Chrome
2) Stylish
3) Немного (на самом деле много)
времени
Не буду описывать весь процесс
установки, можно при желании найти
готовый скрипт (даже для другого
сайта) и отредактировать.
Ниже приведённый код работает
только для FF27 и для нестабильной
версии вёрстки (песочница). Хотя по
идее и в остальных случаях должно
работать. Верхняя панель со словами
(не иконки!), боковая: мои разделы
первые (друзья, мои дневник), далее
разделы сайта. Нижняя панель:
включено всё.
Делаем полосу вверху страниц:
body { border-top: 3px solid #
2c7869 !important;
}
Меняем градиент на верхней и нижних
панелях.
Сделать просто градиент можно
сделать здесь: http://
www.colorzilla.com/gradient-editor/
.menu_wrap, .new_bg, .touch_
menu .tm_link { background: linear-
gradient(to bottom, #39c3a8 0%, #
14a185 100%) !important;
}
Настройки границ ссылок панелей
навигации
#navi table a, #left_nav ul li.new_bg
a, .touch_menu .tm_link .tm_link_
inner { border-left: none !important;
border-top: transparent 1px solid !
important;
border-right: #a4ceb5 1px dotted !
important; /* разделитель между
ссылок */
border-bottom: #18a589 1px solid !
important;
}
Поведение ссылок панелей навигации
при наведении на них (а также при
клике и выделении)
#navi a:focus, #navi a:hover, #navi
a:active, .touch_menu .tm_
link:hover .tm_link_inner {
border: 1px transparent solid !
important;
background-color: #338272 !
important;
}
#navi table a:hover, .touch_
menu .tm_link:hover .tm_link_inner {
border-left: none !important;
border-top: transparent 1px solid !
important;
border-right: transparent 1px
dotted !important;
border-bottom: #18a589 1px solid !
important;
}
Тоже самое для логотипа:
#main_logo_link:focus, #main_logo_
link:hover, #main_logo_link:active
{ background-color: #338272 !
important;
border-top: 2px transparent solid !
important;
border-bottom: 2px transparent
solid !important;
border-right: 2px transparent solid !
important;
}
(ага, тут можно дублирование убрать,
но мне лень)
Скрываем текст Spaces возле логотипа
.h-logo > img:not(.logo_image)
{ display: none !important;
}
Скрываем логотип (иконку) возле
текста
.logo_image { display: none !
important;
}
Ставим свой логотип вместо
стандартного
У меня вот такой стоит: https://
dl.dropboxusercontent.com/u/51329949/
spaces/Png.png
Путь к файлу редактируйте на свой
(можно и ссылку)
.h-logo:after { content:url(file://d:/
dir/dir/file.png) !important;
position: relative;
top: -3px;
left: 10px;
}
Убираем поле ввода для виджета
микроблог и исправляем баг, который
вызывает второе правило
/* fix mail textarea bug */ textarea
[name='texttT'] {
display: block !important;
}
/* hide diary textarea */
.blue_wrap_block.overfl_hid textarea
{
display: none;
}
Уменьшаем размер отступов в форуме
.blue_wrap_block.overfl_hid
{ padding-top: 3px;
}
И ещё
.att_it { padding: 6px !important;
}
Меняем цвет текста уведомлений
(цифры 1, 2, 3 возле "Почта", "Жур",
"Лента".
.newevent { color: #edf0d4 !
important;
padding: 1px;
}
"Личные" уведомления, только когда
пишут в ответ (журнал)
.newevent_imp { color: #f4fe99 !
important;
padding: 1px;
}
Убираем закругления у вкладок,
кнопок, аватарок, номеров страниц и
вообще всего. Всё квадратное.
.tabs_block .tab_item:first-
child, .tabs_block .tab_item:last-
child, .round_corners, .att_
it, .button_block input, .form_
button, .friends_access_list,
input.main_submit[type="submit"],
input.main_submit[type="button"]
, .search_page_block .go,
input.green_button[type="submit"]
, .edit_button, .avatar_wrap a, .avatar_
wrap a:after, .avatar_wrap a img, .for_
avatar img, .for_avatar:after, .left_
nav_search_input, .reg_text_
input, .pagination .page_links
a, .pagination .page_
links .current, .page_links
input.page_choose, .adv_user_link
{ border-radius: 0px !important;
}
Делаем более светлый цвет счётчиков
на личной странице (например:
Дневник (123) - вот эти цифры в
скобках и есть счётчики, меняем их
цвет)
.light_text { color: #8a8a8a;
}
.light_text > .arrow_link.neutral_
link.m {
color: #8a8a8a;
}
Меняем разделители боковой панели
на более мягкие и приятные
#left_nav ul li { border-top: 1px solid
#e8eff1;
border-bottom: 1px #c4cfd3 solid;
}
Сдвигаем на 2 пикселя все элементы
боковой панели
#left_nav ul li > a > span:not(.ava)
{ position: relative;
left: -2px;
}
Меняем элементы боковой панели
местами
4 элемент списка > 1 элемент [мои
разделы]
#left_nav > ul > li:nth-of-type(4)
{ position: relative;
top: -104px;
background: #bec9d2 !important;
height: 20px;
border-bottom: 1px solid #a7b0b8;
}
3 элемент списка > 2 элемент [ссылка
на себя и ава]
#left_nav > ul > li:nth-of-type(3) {
position: relative;
top: -15px;
border-top: 1px transparent solid;
border-bottom: 1px #bbc8cc solid;
}
2 элемент списка > 3 элемент [поиск]
#left_nav > ul > li:nth-of-type(2)
{ position: relative;
top: 84px;
border-top: 1px solid #e8eff1;
border-bottom: 1px #cdd7db dotted;
}
Меняем "три точки" [ссылка с правой
стороны возле "Мои сообщества" и
"Разделы сайта"]
Можно использовать это: https://
dl.dropboxusercontent.com/u/51329949/
spaces/Png2.png
(сохранить отдельно и исправить
ссылку в коде)
#left_nav > ul > li > a > img { display:
block;
-moz-box-sizing: border-box;
background: url(file://link) no-
repeat;
width: 30px;
height: 25px;
padding-left: 30px;
position: relative;
top: -5px;
left: 10px;
}
Что-то фиксило внизу страницы, не
помню )
div.bottom_fix > div > div,
div.bottom_fix > .stnd_padd { display: none;
}
div.bottom_fix td:not(.footer_tr) {
width: 0px !important;
}
Переносим " Вы в песочнице!" на верх
страницы, чтобы было видно когда где
находишься
.row3 { position: absolute !important;
display: inline-block !important;
top: 0% !important;
}
Изменяем градиенты синих кнопок
input.main_submit[type="submit"],
input.main_submit[type="button"]
{ background: linear-gradient(to
bottom, #5d7680 0%, #65818c 100%)
!important;
border: 1px #65818c solid;
}
input.main_submit[type="submit"]
:hover, input.main_submit
[type="button"]:hover {
background: #4b6362 !important;
border: 1px #3a5251 solid;
}
Уменьшаем отступы в списках
.list_item, .stnd_padd,
div.backlink, .title_block, .friends_
access_list, .error, .error_block, .list_
item .error_block, .busi, .pinkBlock
{ padding: 8px 10px 6px 10px;
}
Меняем цвета категорий в анкете (и
ещё где-то цепляет)
.light_blue_bg { background: #
d9ede5 !important;
}
.blue_border_bottom {
border-bottom: 1px solid #c5dad3;
}
Меняем белые кнопки
.myc-button_link { border: #d2d2d2
1px solid !important;
}
.myc-button_link, .form_button {
background: linear-gradient(to
bottom, #f6f8f9 0%, #ededed 100%) !
important;
}
.myc-button_link:hover, .myc-
button_link:active, .form_
button:hover, .form_button:active {
background: linear-gradient(to
bottom, #ececec 0%, #dddddd 100%)
!important;
}
}
Исправляем кривое выделение ника
при ответе
b { font-weight: 600 !important;
}
Уменьшаем отступы:
.oh.slb.pad_t_a { padding-top: 5px;
}
.clear.pad_t_a {
padding-top: 3px;
}
Делаем растягиваемые поля ввода,
фиксим кривой скрипт spaces:
.textarea { resize: vertical !important;
overflow: hidden !important;
overflow-y: scroll !important;
overflow-x: hidden !important;
height: 100% !important;
}
Исправляем _кривую_ вёрстку
боковой панели - отступы изначально
не ровные
.comm_ava, .icon_block_wrap
{ margin: 0px 6px 0px 0px;
}
Добавляем размеры аватарок - теперь
даже "кривые" аватарки (например у
мудаков с аватаркой 1х1 съезжает
блок) отображаются правильно
.left.for_avatar { width: 41px;
height: 41px;
}
.avatar_wrap {
width: 40px;
height: 40px;
}
---
Пока что всё, если этот дневник
наберёт достаточную популярность,
то сделаю нормальный css, который у
всех будет работать с пк.
(flat_page.png - макет спакес из фш,
который делал сам, на него и
ориентировался)
(скриншот #2 - результат как будет
выглядеть)
Категория: Полезные коды

Hack 9 Авг 2014
Granat, .aut или .auts

Granat 16 Июня 2014
подскажи какой див отвечает за. ОБСУЖДЕНИЯ, УВЕДОМЛЕНИЯ новые комы В ВЕРХУ, В НИЗУ