Кому не нравится дизайн - инструкция как сделать лучше

basterr
На сайте с 24.11.2005
Offline
719
5929

Устанавливаете плагин Stylus. Тыкаете на него. Тыкаете на "создать стили для searchengines.guru"

Туда вставляете

* {
    font-family: sans-serif !important;
}
body {
    background: #ccc;
    padding: 20px;
}
.top-block {
    display: none;
}
.page-header {
    background: #222;
    border-bottom: solid 6px #333;    
}
.page-header, .page-footer {
    max-width: 1280px;
    margin: 0 auto;
}

.main-content {
    display: flex;
    flex-direction: row-reverse;
    max-width: 1280px;
    margin: 0 auto;
    background: #f0f0f0;
}

.main-content__column-mid {
    margin: 0;
    border-left: 0;
    max-width: 980px;
}

.main-content__column-left {
    position: relative;
    width: 260px;
    float: left;
    padding: 20px 20px 20px 40px;
    border-left: solid 1px #e3e3e3;
    min-width: 280px;
}

.page-header__menu-item_selected a {
    background-color: #333;
    -webkit-tap-highlight-color: transparent;
}

.middle-block {
    display: none;
}
.topics-list__item:nth-child(2n+1) {
    background: #e6e6e6;
}

Получится вот это.

дизайн

Не мое, автор - flacon2000


SeVlad
На сайте с 03.11.2008
Offline
1609
#1
basterr:

Устанавливаете плагин Stylish. Тыкаете на него. Тыкаете на "создать стили для searchengines.guru"

Туда вставляете

Получится вот это.

Не мое, автор - flacon2000


Не знаю чем напрягает меню слева (как по мне - так удобнее), но мои стили приглушают яркий белый и шрифт поправляют.
.top-block {
    display: none;
}
    
.middle-block.middle-block_comments {
    display: none;
}
    .topics__container {
    margin: 0 0 16px;
}
    
body {
    background-color: #eee;
    font-family: Tahoma,Arial,Helvetica,sans-serif;
}
    h1 {
    font-family: Tahoma,Arial,Helvetica,sans-serif;
}
.fquote {
    background-color: #fff;
}





Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Связь со мной через http://wp.me/P3YHjQ-3.
slavegirl
На сайте с 25.06.2012
Offline
388
#2
basterr:

Устанавливаете плагин Stylus.

А я через uBlock эти стили поредактировала, он такое тоже умеет. Лишние дополнения тормозящие устанавливать совсем не обязательно.

https://t.me/joinchat/RKtR6f68OwU1NzM6  ❤️‍🔥  Сарказм is my orgazm
basterr
На сайте с 24.11.2005
Offline
719
#3
Королева пиратов:

А я через uBlock эти стили поредактировала, он такое тоже умеет. Лишние плагины тормозящие устанавливать совсем не обязательно.

а как через него?

вообще, я рад что хоть какое-то решение нашлось. если у кого еще какой диз есть кидайте.


slavegirl
На сайте с 25.06.2012
Offline
388
#4
basterr:

а как через него?

Когда-то начиталась учебных инструкций по нему, у меня заготовки есть на все случаи жизни теперь. Вот так в нём стили редактируются (парочка примеров):

searchengines.guru##.popup-menu__profile-link:style(text-transform: none !important)
searchengines.guru##.main-content:style(width: 60%; margin: auto !important)
searchengines.guru##.fquote:style(background: #252829)

Вот такое получается пока, но там ещё "затемнятор" включён у меня:




basterr
На сайте с 24.11.2005
Offline
719
#5

во. так получше. как-то бы еще один коммент от другого отделить и желательно цветом.

* {
    font-family: sans-serif !important;
}
body {
    background: #ccc;
    padding: 20px;
    
    
    font-family: Tahoma,Arial,Helvetica,sans-serif;
}
    h1 {
    font-family: Tahoma,Arial,Helvetica,sans-serif;
}
.fquote {
    background-color: #fff;
}
.top-block {
    display: none;
}
.page-header {
    background: #222;
    border-bottom: solid 6px #333;    
}
.page-header, .page-footer {
    max-width: 100%;
    margin: 0 auto;
}

.main-content {
    display: flex;
    flex-direction: row-reverse;
    max-width: 100%;
    margin: 0 auto;
    background: #f0f0f0;
}

.main-content__column-mid {
    margin: 0;
    border-left: 0;
    max-width: 80%;
}

.main-content__column-left {
    position: relative;
    width: 20%;
    float: left;
    padding: 20px 20px 20px 40px;
    border-left: solid 1px #e3e3e3;
    min-width: 20%;
    background-color: #ccc;
}

.page-header__menu-item_selected a {
    background-color: #333;
    -webkit-tap-highlight-color: transparent;
}

.middle-block {
    display: none;
}
.topics-list__item:nth-child(2n+1) {
    background: #e6e6e6;
}

.middle-block.middle-block_comments {
    display: none;
}
    .topics__container {
    margin: 0 0 16px;
}
    
диз


Хаагенти
На сайте с 11.11.2007
Offline
148
#6
Королева пиратов:

А я через uBlock эти стили поредактировала, он такое тоже умеет. Лишние дополнения тормозящие устанавливать совсем не обязательно.

Спасибо, что напомнили.

Мои фильтры uBlock (для экрана 1920x1080 с блокировкой рекламы)

||searchengines.guru/fz/

searchengines.guru##.top-block

searchengines.guru##.fquote:style(background:#cccccc)

searchengines.guru##.main-content:style(width:70%; margin:auto!important)

searchengines.guru##.popup-menu__profile-link:style(text-transform:none!important)

Продам имярекам злого джинна египетских царей, фактически отдам рабочую урну мудрости ума (акростих, читать начальные буквы)
SeVlad
На сайте с 03.11.2008
Offline
1609
#7
basterr:

как-то бы еще один коммент от другого отделить и желательно цветом.


Там есть полоска.

Но если хочется можно добавить как-то так:

.comment:nth-child(2n+1) {
    background-color: #f5f5f5;
    margin-bottom: 2em;
}


Только я бы не рекомендовал сильно изменять внешний вид.


dakter
На сайте с 08.02.2012
Offline
161
#8
Да хрен с ним, с дизайном. С таким функционалом как сейчас, это дерьмо полное. Я второй день захожу не интересующие темы посмотреть, в них и так уже почти не пишут, а поугорать над комментами.
SeVlad
На сайте с 03.11.2008
Offline
1609
#9

Кому настогадило кликать в меню чтобы увидеть разделы и быстро перемещаться меж ними можно добавить

.sidebar-menu__sub-list {
    display: block;
    padding: 0px;
}

и все разделы будут сразу развернуты.

Zevss
На сайте с 23.03.2008
Offline
385
#10
basterr:

во. так получше. как-то бы еще один коммент от другого отделить и желательно цветом.


Спасибо, получше конечно, но блин...


Продаются сайты с доходом, недорого https://www.maultalk.com/topic356667.html

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий