Гайд [ARZ] Оформление форума

ewin

Известный
Автор темы
675
369
*в душе не чаю что писать в начале темы
Приветствую, наверное многие видели разные оформления Форума у Администрации:
1653374291230.png

vp4UBzx.gif

qQe79Pn.gif

Хотел посмотреть на бласте какие нибудь оформления, но выяснилось что темы такой нету, поэтому и было решено создать самому.
1. Скачиваем расширение "User JavaScript and CSS"(поддерживается только браузерах на базе Chromium, *тут* написаны некоторые из них)
2. В настройках расширения нажимаем на кнопку "Add new site"

WP5JJNo.png

3. Сверху в первой колонке вводим название(по желанию), а во второй домен форума, либо прямую ссылку на определенную тему/раздел
c2bsxjG.png

4. Во вкладке CSS вставляем ваше оформление, код из примеров в спойлере ниже.
TAGACtp.png

Первое:
body {
background-image: url("https://w.wallhaven.cc/full/j5/wallhaven-j5g7pp.jpg");
background-attachment: fixed;
background-size: cover;
}

.p-body-pageContent .block:nth-child(even)::after, .p-body-sidebar .block:nth-child(even)::after{
display: none;
}

.p-body-pageContent .block:nth-child(odd)::after, .p-body-sidebar .block:nth-child(odd)::after{
display: none;
}

.p-body-pageContent .block--category:first-child .block-header::before{
display: none;
}




.button-text{
font-weight: bold;
}

.button, a.button{
color: #fff;
}

.block.block--category .block-header{
text-shadow: 0 0 1px rgb(0 242 255 / 70%);
}

.menu-tabHeader .tabs-tab.is-active{
border-color: ##ff0015;
}

.badge.badge--highlighted, .badgeContainer.badgeContainer--highlighted:after{
background: ##ff0015;
}

.tabs-tab{
color: ##ff0015;
}

.blockLink.is-selected{
color: ##ff0015;
border-left: 2px solid ##ff0015;
}

.block-tabHeader .tabs-tab:hover{
color: ##ff0015;
}

.button.button--primary, a.button.button--primary{
background: linear-gradient(##ff0015, ##ff0015);
}

.button.button--primary:hover, a.button.button--primary:hover, .button.button--primary:focus, a.button.button--primary:focus{
background: linear-gradient(##ff0015, ##ff0015);
}

.menu-linkRow.is-selected, .menu-linkRow:hover, .menu-linkRow:focus{
color: ##ff0015;
}

.fr-toolbar{
border-top-color: rgb(0, 168, 255);
}

.fr-toolbar{
border-top: 2px solid ##ff0015;
}

.block-tabHeader .tabs-tab.is-active{
color: ##ff0015;
border-color: ##ff0015;
}

.messageNotice{
border-left: 2px solid ##ff0015;
}

.messageNotice:before{
color: ##ff0015;
}

.messageNotice:not(.messageNotice--highlighted) a, .messageNotice:not(.messageNotice--highlighted) a:hover{
color: ##ff0015;
}


.bbCodeBlock{
border-left: 2px solid ##ff0015;
}

.bbCodeBlock-title{
color: ##ff0015;
}

.button.button--scroll, a.button.button--scroll{
background: linear-gradient(##ff0015, ##ff0015);
}

.bbCodeBlock-expandLink a{
color: ##ff0015;
}

.message-newIndicator{
background: ##ff0015;
}

.p-navEl-link p-navEl-link--splitMenu {
opacity: 0;
}

.menu-content:before{
background: linear-gradient(
-270deg
, ##ff0015 0%, ##ff0015 100%);
}

.tabs--standalone .tabs-tab.is-active{
color: ##ff0015;
border-color: ##ff0015;
}

.tabs--standalone .tabs-tab:hover{
color: ##ff0015;
}

.p-nav-list .p-navEl.is-selected:after{
background: linear-gradient(
-270deg
, ##ff0015 0%, ##ff0015 100%);
}

.p-nav-list .p-navEl.is-selected{
color: ##ff0015;
}

.button.button--link, a.button.button--link{
background: ##ff0015;
}
.js-thHolidaysSnowstormCanvas{
opacity: 0;
}

.block-body .block-minorHeader.uix_threadListSeparator:before{
background: linear-gradient(-270deg, ##ff0015 0%, ##ff0015 100%);
}

.button.button--cta, a.button.button--cta{
background: ##ff0015;
border-color: ##ff0015;
background-color: ##ff0015;
}

.button.button--cta:hover, a.button.button--cta:hover, .button.button--cta:focus, a.button.button--cta:focus{
background: ##ff0015;
border-color: ##ff0015;
background-color: ##ff0015;
}

.button--cta{
background: ##ff0015;
border-color: ##ff0015;
background-color: ##ff0015;
}



.p-nav {
opacity: 0.95;
}
.block-container {
opacity: 0.95;
}
.p-footer {
opacity: 0.95;
}
.button.button--cta, a.button.button--cta {
opacity: 0.95;
}
.buttonGroup {
opacity: 0.95;
}
.button--scroll ripple-JsOnly button {
opacity: 0.95;
}
.button--scroll ripple-JsOnly button {
opacity: 0.95;
}
.pageNav-main {
opacity: 0.95;
}
.pageNav-jump {
opacity: 0.95;
}
.tabPanes {
opacity: 0.95;
}
.menu-content {
opacity: 0.95;
}
.overlay {
opacity: 0.95;
}
span[itemprop="name"] {
text-shadow: 1px 0 1px #22242b,
0 1px 1px #22242b,
-1px 0 1px #22242b,
0 -1px 1px #22242b;
}
span[class="hScroller-scroll is-calculated"] {
background-color: #22242b;
opacity: 0.95;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.p-body-header .p-title-value {
text-shadow: 1px 0 1px #22242b,
0 1px 1px #22242b,
-1px 0 1px #22242b,
0 -1px 1px #22242b;
}
.block-minorHeader {
background-color: #22242b;
opacity: 0.95;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}

.a .uix_logo {
background-image: url("https://emkfriedrichsdorf.de/sites/default/files/icons/YouTub..");
background-attachment: fixed;
}
Второе:
body {
background-image: url("https://cdn.statically.io/img/i.pinimg.com/originals/09/24/4c/09244c7f7dd4d17b0484370f32db6641.gif");
background-attachment: fixed;
background-size: cover;
}

.button-text{
font-weight: bold;
}

.button, a.button{
color: #fff;
}

.block.block--category .block-header{
text-shadow: 0 0 1px rgb(0 242 255 / 70%);
}

.menu-tabHeader .tabs-tab.is-active{
border-color: #00A8FF;
}

.badge.badge--highlighted, .badgeContainer.badgeContainer--highlighted:after{
background: #00A8FF;
}

.tabs-tab{
color: #00A8FF;
}

.blockLink.is-selected{
color: #00A8FF;
border-left: 2px solid #00A8FF;
}

.block-tabHeader .tabs-tab:hover{
color: #00A8FF;
}

.button.button--primary, a.button.button--primary{
background: linear-gradient(#00A8FF, #00A8FF);
}

.button.button--primary:hover, a.button.button--primary:hover, .button.button--primary:focus, a.button.button--primary:focus{
background: linear-gradient(#00A8FF, #00A8FF);
}

.menu-linkRow.is-selected, .menu-linkRow:hover, .menu-linkRow:focus{
color: #00A8FF;
}

.fr-toolbar{
border-top-color: rgb(0, 168, 255);
}

.fr-toolbar{
border-top: 2px solid #00A8FF;
}

.block-tabHeader .tabs-tab.is-active{
color: #00A8FF;
border-color: #00A8FF;
}

.messageNotice{
border-left: 2px solid #00A8FF;
}

.messageNotice:before{
color: #00A8FF;
}

.messageNotice:not(.messageNotice--highlighted) a, .messageNotice:not(.messageNotice--highlighted) a:hover{
color: #00A8FF;
}


.bbCodeBlock{
border-left: 2px solid #00A8FF;
}

.bbCodeBlock-title{
color: #00A8FF;
}

.button.button--scroll, a.button.button--scroll{
background: linear-gradient(#00A8FF, #00A8FF);
}

.bbCodeBlock-expandLink a{
color: #00A8FF;
}

.message-newIndicator{
background: #00A8FF;
}

.p-navEl-link p-navEl-link--splitMenu {
opacity: 0;
}

.menu-content:before{
background: linear-gradient(
-270deg
, #00A8FF 0%, #00A8FF 100%);
}

.tabs--standalone .tabs-tab.is-active{
color: #00A8FF;
border-color: #00A8FF;
}
.tabs--standalone .tabs-tab:hover{
color: #00A8FF;
}

.p-nav-list .p-navEl.is-selected:after{
background: linear-gradient(
-270deg
, #00A8FF 0%, #00A8FF 100%);
}

.p-nav-list .p-navEl.is-selected{
color: #00A8FF;
}

.button.button--link, a.button.button--link{
background: #00A8FF;
}

.js-thHolidaysSnowstormCanvas{
opacity: 0;
}

.block-body .block-minorHeader.uix_threadListSeparator:before{
background: linear-gradient(-270deg, #00A8FF 0%, #00A8FF 100%);
}

.button.button--cta, a.button.button--cta{
background: #00A8FF;
border-color: #00A8FF00;
background-color: #00A8FF;
}

.button.button--cta:hover, a.button.button--cta:hover, .button.button--cta:focus, a.button.button--cta:focus{
background: #00A8FF;
border-color: #00A8FF00;
background-color: #00A8FF;
}

.button--cta{
background: #00A8FF;
border-color: #00A8FF00;
background-color: #00A8FF;
}

.p-nav {
opacity: 0.95;
}
.block-container {
opacity: 0.95;
}
.p-footer {
opacity: 0.95;
}
.button.button--cta, a.button.button--cta {
opacity: 0.95;
}
.buttonGroup {
opacity: 0.95;
}
.button--scroll ripple-JsOnly button {
opacity: 0.95;
}
.button--scroll ripple-JsOnly button {
opacity: 0.95;
}
.pageNav-main {
opacity: 0.95;
}
.pageNav-jump {
opacity: 0.95;
}
.tabPanes {
opacity: 0.95;
}
.menu-content {
opacity: 0.95;
}
.overlay {
opacity: 0.95;
}
span[itemprop="name"] {
text-shadow: 1px 0 1px #22242b,
0 1px 1px #22242b,
-1px 0 1px #22242b,
0 -1px 1px #22242b;
}
span[class="hScroller-scroll is-calculated"] {
background-color: #22242b;
opacity: 0.95;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.p-body-header .p-title-value {
text-shadow: 1px 0 1px #22242b,
0 1px 1px #22242b,
-1px 0 1px #22242b,
0 -1px 1px #22242b;
}
.block-minorHeader {
background-color: #22242b;
opacity: 0.95;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}

.a .uix_logo {
background-image: url("https://emkfriedrichsdorf.de/sites/default/files/icons/YouTub..");
background-attachment: fixed;
}
Третье:
body {
background-image: url("https://i.imgur.com/W0khxMT.giff");
background-attachment: fixed;
background-size: cover;
}

.menu li {
display: inline-block;
background-color: #5B5B5B;
margin-top: 13px;
margin-right: 3px;
margin-bottom: 3px;
margin-left: 3px;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
opacity: 1;
border-radius: 6px;
}

input {
color: #E3E3E3;
border-radius: 6px;
background-color: #5B5B5B;
margin-top: 13px;
margin-right: 3px;
margin-bottom: 3px;
margin-left: 3px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
/* border-left: 2px solid #03A4FF; */
/* border-right: 2px solid #03A4FF; */
/* border-bottom: 2px solid #0076BB; */
/* border-top: 2px solid #59C3FF; */
font-size: 15px;
font-family: 'main';
}

.p-nav {
opacity: 0.95;
}
.block-container {
opacity: 0.95;
}
.p-footer {
opacity: 0.95;
}
.button.button--cta, a.button.button--cta {
opacity: 0.95;
}
.buttonGroup {
opacity: 0.95;
}
.button--scroll ripple-JsOnly button {
opacity: 0.95;
}
.button--scroll ripple-JsOnly button {
opacity: 0.95;
}
.pageNav-main {
opacity: 0.95;
}
.pageNav-jump {
opacity: 0.95;
}
.tabPanes {
opacity: 0.95;
}
.menu-content {
opacity: 0.95;
}
.overlay {
opacity: 0.95;
}
span[itemprop="name"] {
text-shadow: 1px 0 1px #22242b,
0 1px 1px #22242b,
-1px 0 1px #22242b,
0 -1px 1px #22242b;
}
span[class="hScroller-scroll is-calculated"] {
background-color: #22242b;
opacity: 0.95;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.p-body-header .p-title-value {
text-shadow: 1px 0 1px #22242b,
0 1px 1px
#22242b,
-1px 0 1px #22242b,
0 -1px 1px #22242b;
}
.block-minorHeader {
background-color: #22242b;
opacity: 0.95;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}

.a .uix_logo {
background-image: url("https://emkfriedrichsdorf.de/sites/default/files/icons/YouTub..");
background-attachment: fixed;
}

body { color: #ebc895; } a { color: #fff; }

РАБОТАЕТ НА BLASTHACK
 
Последнее редактирование:

FeelPain721

Участник
42
5
Какой размер картинки должен быть для заднего фона чтобы не было пиксельно? Вторая кста не работает, гифка отвалилась похоже
 

ewin

Известный
Автор темы
675
369
  • Нравится
Реакции: zakatov

FeelPain721

Участник
42
5
1653384824102.png

в оригинале, кнопки форумы, новые сообщения, создать тему, красного цвета, их же по идее можно как то поменять?
 

ewin

Известный
Автор темы
675
369
Посмотреть вложение 149418
в оригинале, кнопки форумы, новые сообщения, создать тему, красного цвета, их же по идее можно как то поменять?
открываешь код элемент, получишь id кнопок и через css меняешь цвет, пример смотри в коде который я приложил
 

zakatov

zkt-team
Проверенный
1,670
495
А полученное сообщение куда залить? Чтобы вставить ссылку в код
 

BisQwit

Известный
449
124
я чутка туповатый в этом, но можно на первом коде, кнопки синие как во втором?
 

эчпочмак

Потрачен
790
330
Обратите внимание, пользователь заблокирован на форуме. Не рекомендуется проводить сделки.
можно ли свою фотку поставить?