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

ewin · 24 Май 2022

*в душе не чаю что писать в начале темы

Приветствую, наверное многие видели разные оформления Форума у Администрации:

Хотел посмотреть на бласте какие нибудь оформления, но выяснилось что темы такой нету, поэтому и было решено создать самому.

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

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

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

Первое:

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 · 24 Май 2022

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

ewin · 24 Май 2022

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

зависит от твоего моника
upd: второе исправил

FeelPain721 · 24 Май 2022

ewin написал(а):
зависит от твоего моника
upd: второе исправил

тип 1920x1080 должно быть?

ewin · 24 Май 2022

FeelPain721 написал(а):
тип 1920x1080 должно быть?

ну если у тебя 1920x1080, то да

zakatov · 24 Май 2022

Как сделать на 1680х1050?

ewin · 24 Май 2022

Shirai написал(а):
Как сделать на 1680х1050?

Изменить размер изображения в пикселях онлайн - IMG online

Изменить размер фотографии в пикселях и DPI онлайн. Автоматическая обрезка обоев под размер рабочего стола.

www.imgonline.com.ua

FeelPain721 · 24 Май 2022

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

ewin · 24 Май 2022

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

открываешь код элемент, получишь id кнопок и через css меняешь цвет, пример смотри в коде который я приложил

zakatov · 24 Май 2022

ewin написал(а):
Изменить размер изображения в пикселях онлайн - IMG online

Изменить размер фотографии в пикселях и DPI онлайн. Автоматическая обрезка обоев под размер рабочего стола.

www.imgonline.com.ua

А полученное сообщение куда залить? Чтобы вставить ссылку в код

ewin · 24 Май 2022

Shirai написал(а):
А полученное сообщение куда залить? Чтобы вставить ссылку в код

заливаешь на тот же имгур и копируешь прямую ссылку, ссылку заменяешь и все

BisQwit · 24 Май 2022

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

ewin · 24 Май 2022

BisQwit написал(а):
я чутка туповатый в этом, но можно на первом коде, кнопки синие как во втором?

все стили где используется цвет #00A8FF, перекидываешь в первую

эчпочмак · 24 Май 2022

можно ли свою фотку поставить?

ewin · 24 Май 2022

VoNpEr132 написал(а):
можно ли свою фотку поставить?

да, заливаешь на имгур, копируешь ссылку и заменяешь в css

Поиск

Поиск

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

ewin

Известный

FeelPain721

Участник

ewin

Известный

FeelPain721

Участник

ewin

Известный

zakatov

zkt-team

ewin

Известный

Изменить размер изображения в пикселях онлайн - IMG online

FeelPain721

Участник

ewin

Известный

zakatov

zkt-team

Изменить размер изображения в пикселях онлайн - IMG online

ewin

Известный

BisQwit

Известный

ewin

Известный

эчпочмак

Потрачен

ewin

Известный

Похожие темы