CSS, um mittleren Balken im CB-Layout transparent zu machen

jusaca

Commander
Registriert
Apr. 2008
Beiträge
2.202
Ich kenn mich mit Webprogrammierung/Webdesign leider gar nicht aus, daher bin ich immer so nen bissel an fertige CSS-Skripte gebunden, wenn ich Webseiten für mich modden möchte.
Auf CB hab ich seit einiger Zeit dieses Theme hier: https://uso.kkx.one/style/160095 (Bild 1).
(Die Schrift dann noch von Blau in Orange umzufärben hab ich selbst hinbekommen ;))

Leider ist jetzt vor ein paar Tagen wohl was am Layout von CB umgestellt worden, jetzt habe ich mittig von der Webseite so einen balken mit monotonem grau (Bild 2).

Ich hab mit meinem begrenzten CSS-Wissen mal im Seitencode geschaut, ob ich dieses Element ausgeblendet bekomme. Leider nein :D Mit
.row {
background-color: #b71818 !important
}
bekomme ich diesen Mittelstreifen zwar eingefärbt, aber leider nicht transparent.

Kann mir jemand nen Tip geben, wie ich den Text wieder direkt auf diesem angenehm strukturierten Hintergrund angezeigt bekommen kann? =)
 

Anhänge

  • 1628014597210.png
    1628014597210.png
    1,3 MB · Aufrufe: 290
  • 1628014693800.png
    1628014693800.png
    502,8 KB · Aufrufe: 294
Haha niedlich... Wenn du das aktuelle Theme von mir willst:
CSS:
html, body, .main, .block1--default, .menu1__panel, .homepage-settings-button, .menu-content, .tooltip--member .tooltip-content, .bbcode-automerge span, .tooltip-content, .overlay, .flashMessage {
    color: #c0c0c0 !important;
    background-color: #222222 !important;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUaGhohISElJSUh9lebAAABwElEQVR4AY3Vua3gOBgGQQXZhgKYgwHJYAA0Ksu9CAh6hxbTbvFzfx6rNEGlHY6z5KvMw4s43mN2Z5fqYLzKyrfyXhXKnKBdD9n58UWW3Vlb3mOCmWoHHZbdV5lv8t7Ver6ldsfqumVAdbblxxcZVcd7QWq2Y6VsadS4ZTzFDbFa5XivqlxVUFG1Jd6k66u8x0RIOw0cXAiNW2z58bJ5r1LTQtVVuy1x2jK+yLTlxy3v5RogszEXSB0ZF4iYWLbMMUBGPDbvpRQUVUV9kvGU6ynrIe9FOqssJcQ4oqurCjV6ytmqco4SwvGeNCoJaphwSHoK13cyuuU9ZaQI0lB1qB8zT3GL2XjKueU9pR+gH0OlqvGUzHWLQ81O0Dg95L3Uj9qxKx0pr3LdYrnlvQKlUEnV/8v4Xt6bThZROwaO5QfTUyY4GCBWu8Wf/nO4ULtj/li3mE9Z47zlx/WU94Iq7RD5XuZ6ynjIGn9yr1VhFaq2NH9s4bP4Rt5j2NFO5MBXGVsmsD5v3gslYORsd8R1i1rrIUoLKLXlvVhgKH7ApToyhk21TJhbLDvdN151vEetJtKdOtYo4SmnOvhGpjpe+xuj3X723ghdygAAAABJRU5ErkJggg==) !important;
    background-clip: border-box !important;
    background-origin: padding-box !important;
    background-attachment: scroll !important;
    background-repeat: repeat !important;
    background-size: auto !important;
    background-position: left top !important;
}

.bbCodeCode code, .bbCodeInline {
    font-family: "Fira Code" !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat" !important;
}

.p, .text-ul, .text-ol {
    font-family: "Roboto" !important;
    font-size: 18px !important;
    line-height: 1.42857 !important;
    line-height: 1.618 !important;
}

.flashMessage {
    position: fixed !important;
    top: 10vh !important;
    left: 50vw !important;
    margin-left: -25vw !important;
    width: 50vw !important;
    border-top: 3px solid #47a7eb !important;
    box-shadow: 0 0 1em rgba(0, 0, 0, .8) !important;
}

.tooltip-content {
    border-color: transparent !important;
    box-shadow: 0 0 1em rgba(0, 0, 0, .8) !important;
}

.overlay-container.is-active {
    background-color: rgba(0, 0, 0, .8) !important;
}

.bbCodeInline {
    background-color: #333 !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    padding: .15em .3em !important;
}

.article-view__h1, .text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6 {
    color: #4183C4 !important;
}

.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6 {
    border-left: 0 dashed #4183C4 !important;
    padding-left: 1em !important;
}

.text-h1 {
    border-left-width: .6em !important;
}

.text-h2 {
    border-left-width: .5em !important;
}

.text-h3 {
    border-left-width: .4em !important;
}

.text-h4 {
    border-left-width: .3em !important;
}

.text-h5 {
    border-left-width: .2em !important;
}

.text-h6 {
    border-left-width: .1em !important;
}

a {
    color: #4183C4 !important;
}

.message-footer .reactionsBar {
    padding-left: 1em !important;
}

.block1, .block1--forum {
    padding-right: 0 !important;
}

.block1--default .wrapper, .block1--breakout, .block1--breakout .wrapper, .slides, .slide, .usermenu__link, .homepage-settings__row, .table thead tr, .block1--forum, .block1--highlight, .block1--forum-footer-articles .wrapper, .teaser, .teaser__main, .block--messages .message, .message-cell.message-cell--user, .block1--forum-nav, .row--forum-nav, .p-sectionLinks, .bbCodeBlock, .reactionsBar, .bbCodeBlock-title, .block-container, .abo-box, .block1--breakout-2, .entry-nav__item, .usermenu__badge, .box--blue, .box--sidebar, .geizhals-items a, .footer1, .footer1__box:hover, .usermenu__footer, .usermenu__footer .big-button:hover, .row-13, .article-view__comments-link-2, .article-view__comments-link-2:hover, .shop-form__label, .big-button, .menu1__button:hover, .menu1, .block-row.block-row--alt, .block-header, .p-sectionLinks-list .p-navEl.is-menuOpen, .blockLink.is-selected, .blockLink:hover, .menu-linkRow:hover, .menu-row.menu-row--highlighted, .menu-header, .menu-footer, .menu-row, .memberHeader-main, .block-tabHeader, .block-footer, .button:not(.button--splitTrigger), a.button:not(.button--splitTrigger), .memberTooltip-header, .pageNav-jump, .pageNav-page, .block1--highlight .wrapper, .block1--breakout .wrapper, .big-header, .more-link, .more-link:hover, .charts__link:hover, .tags-menu__a:hover, .download-home__cats, .download-home__featured, .download-cats-a1, .download-classic, .row--download-view, .download-url__link, .download-url__link:hover, .gallery-current, .block-filterBar, .structItemContainer-group--sticky .structItem, .structItem-pageJump a, .tooltip--preview .tooltip-content-inner .tooltip-content-cover, .overlay-title, .overlay-content, .blockMessage, .toc__link:hover, .chart-row--hover .chart-item, .chart-row--hover .chart-bar-wrapper, .chart-carousel__link, .productbox__footer li, .formRow > dt, .formSubmitRow-bar, #ghbody .box10h, #gh_afilterbox, .filterbox, #ghbody #xf_table td, #ghbody #xf_table th, #ghbody #xf_table td, #ghbody #xf_table th, #ghbody tr.t2, #ghbody tr.t2 td, #ghbody #content_table td, #ghbody #content_table th, #ghbody #content_table_hdr a, #ghbody .gh_pag_act, #ghbody a.gh_pag_i, .pagination-current, .pagination-link:hover, .tabs--standalone, .block-row.block-row--clickable:hover, .block-filterBar .filterBar-filterToggle, .filterBar-menuTrigger:hover, .block1--fullwidth, .chart-toggle.chart-toggle, #ghbody #gh_proddesc_left #gh_proddesc, #ghbody div#monav > span.monav, #ghbody span.monav, #ghbody div#monav > span.monav_disabled, #ghbody .gh_bt, .blockStatus, .bbCodeBlock-expandLink, .dataList-row.dataList-row--header .dataList-cell, .block1--default, .block1--ads, .tabs__li a, .message-gradient, .message-cell.message-cell--action, .block-row.block-row--highlighted, .attachUploadList, .attachmentList .attachment, .menu-tabHeader {
    background-image: none !important;
    background-color: transparent !important;
}

.bbCodeBlock {
    background: #181818 !important;
}

.bbCodeBlock-expandLink a {
    text-align: right !important;
}

.reactionSummary {
    padding-right: .7em !important;
}

.carousel-nav__prev, .carousel-nav__next, .footer2-box, .article-pagenav__item {
    background-color: transparent !important;
}

.entry-nav__item, .content-list > li, .article-pagenav__item:not(:first-child), .menu1__button, .block-row.block-row--alt, .block-header, .block-body + .block-minorHeader, .menu-header, .menu-footer, .menu-row.menu-row--separated + .menu-row, .block-footer, .button:not(.button--splitTrigger), a.button:not(.button--splitTrigger), .memberHeader-main, .tooltip--member .tooltip-content, .memberTooltip-header, .pageNav-jump, .pageNav-page, .message-signature, .big-tabs, .geizhals-items a:hover, .message-attribution, .download-home__cats, .download-featured, .download-classic, .download-url, .figure__subtitle, .download-view__footer-ad, .node + .node, .structItem, .block-filterBar, .structItem-pageJump a, .tooltip--preview .tooltip-content, .overlay, .overlay-title, .chart, .formRow > dt, .block-formSectionHeader, .formSubmitRow-bar, .author__link, #ghbody ol.t10 li, #ghbody li.mkat, #ghbody .filterbox li.fltrs, #ghbody #xf_table th, #ghbody #xf_table, #ghbody #xf_table tr, #ghbody td, #ghbody #content_table td, #ghbody #content_table th, #ghbody .gh_pag_act, #ghbody .gh_pag_i, .pagination-link, .pagination-ellipsis, .pagination-current, .tabs--standalone, #ghbody div#monav > span.monav_disabled, #ghbody .gh_bt, .filterbox li.fltrs > div, .blockStatus, .dataList-row.dataList-row--header .dataList-cell, .dataList-cell, .tabs__li a, .message-cell.message-cell--action, .message.message--bordered, .attachUploadList, .attachmentList .attachment, .menu-tabHeader {
    border-color: transparent !important;
}

.ticker__body a, .toc__items a, a.mainmenu__a, .tagnav__a, .menu1__button .menu1__label, .usermenu__link, .taglist .tag, .tag-cloud .tag, .block-row.block-row--alt, .menu-row, .blockMessage, .chart-carousel__link, #ghbody td, #ghbody #content_table th, .block-row, .p-navgroup-link, .tabs__li a, .node-description {
    color: #c0c0c0 !important;
}

.box--blue .h2 a, .box--sidebar .h2 a, .box--sidebar .h2, .ticker__article-context, .tagnav__a:hover, .usermenu__link:hover, .usermenu__footer .big-button:hover, .taglist .tag:hover, .menu1__button .menu1__label:hover, .block-header, .tag-cloud .tag:hover, .charts__link:hover, .chart-carousel__link--enabled, .pagination-link a, #ghbody .gh_bt, .tabs__li a:hover, .p-navgroup-link:hover {
    color: #4183C4 !important;
}

#ghbody .av_inl.av_l, #ghbody .av_inl.av_k, #ghbody .av_inl.av_e {
    color: #222 !important;
}

.ticker-group, a.ticker__update, .usermenu__footer .big-button:hover, .article-view__comments-link-2:hover, .footer2-box:hover, .blockLink.is-selected, .blockLink:hover, .menu-linkRow:hover, .button:not(.button--splitTrigger):hover, a.button:not(.button--splitTrigger):hover, .pageNav-jump:hover, .pageNav-page:hover > a, .more-link:hover, .tags-menu__a:hover, .download-url__link:hover, .block--category .block-header a, .structItem-pageJump a, .structItemContainer-group--sticky a, .overlay-title, .toc__link:hover, .chart-row--hover .chart-item, .chart-carousel__link--enabled:hover, .article-pagenav__item:hover, .author__link, #ghbody .gh_pag_act, #ghbody .xf_msel, #ghbody .xf_sel, .pageNav-page.pageNav-page--current a, .pagination-current, .pagination-link:hover, .block-filterBar .filterBar-filterToggle, #ghbody div#monav > span.monav_disabled, #ghbody div#monav > span.monav, #ghbody span.monav:hover a, #ghbody .gh_bt:hover, #ghbody #xf_table .xf_sel .xf_v, .blockStatus, .bbCodeBlock-expandLink a, .tabs__li a[aria-selected=true], .nestable-handle:hover .fa-bars, .block-row.block-row--highlighted, .message-userTitle > b {
    color: #f2610d !important;
}

.article-pagenav__prev {
    background-position: right !important;
}

.button.button--scroll, a.button.button--scroll {
    background: rgba(255, 255, 255, .1) !important;
}

.menu1__panel {
    border: 1px solid #343434 !important;
}

.block-body + .block-minorHeader {
    margin-top: 2em !important;
}

.block--category {
    margin-top: 4em !important;
}

@media (min-width: 45em) {
    .tags-menu {
        border: 1px solid #343434 !important;
        color: #c0c0c0 !important;
        background-color: #222 !important;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUaGhohISElJSUh9lebAAABwElEQVR4AY3Vua3gOBgGQQXZhgKYgwHJYAA0Ksu9CAh6hxbTbvFzfx6rNEGlHY6z5KvMw4s43mN2Z5fqYLzKyrfyXhXKnKBdD9n58UWW3Vlb3mOCmWoHHZbdV5lv8t7Ver6ldsfqumVAdbblxxcZVcd7QWq2Y6VsadS4ZTzFDbFa5XivqlxVUFG1Jd6k66u8x0RIOw0cXAiNW2z58bJ5r1LTQtVVuy1x2jK+yLTlxy3v5RogszEXSB0ZF4iYWLbMMUBGPDbvpRQUVUV9kvGU6ynrIe9FOqssJcQ4oqurCjV6ytmqco4SwvGeNCoJaphwSHoK13cyuuU9ZaQI0lB1qB8zT3GL2XjKueU9pR+gH0OlqvGUzHWLQ81O0Dg95L3Uj9qxKx0pr3LdYrnlvQKlUEnV/8v4Xt6bThZROwaO5QfTUyY4GCBWu8Wf/nO4ULtj/li3mE9Z47zlx/WU94Iq7RD5XuZ6ynjIGn9yr1VhFaq2NH9s4bP4Rt5j2NFO5MBXGVsmsD5v3gslYORsd8R1i1rrIUoLKLXlvVhgKH7ApToyhk21TJhbLDvdN151vEetJtKdOtYo4SmnOvhGpjpe+xuj3X723ghdygAAAABJRU5ErkJggg==) !important;
        background-clip: border-box !important;
        background-origin: padding-box !important;
        background-attachment: scroll !important;
        background-repeat: repeat !important;
        background-size: auto !important;
        background-position: left top !important;
    }
}

.block--messages .message, .message-cell.message-cell--user, .block1--forum-nav, .block-container {
    color: #c0c0c0 !important;
    border-color: transparent !important;
}

.bbCodeBlock, .reactionsBar {
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
}

.header, .subheader, .footer2, .toc__link--current-page {
    background: rgba(24, 24, 24, .8) !important;
}

.message-signature {
    margin-top: 2em !important;
    opacity: .4 !important;
    transition: opacity 250ms ease-in-out;
}

.message-signature:hover {
    opacity: 1 !important;
}

.header.header--1.header--2, .subheader {
    border-bottom: 1px solid #343434 !important;
}

.footer2 {
    border-top: 1px solid #343434 !important;
}

.table tbody tr:nth-child(2n+1), #ghbody .xf_tr:nth-child(odd), #ghbody tr.t1, #ghbody tr.t1 td {
    background: rgba(24, 24, 24, .6) !important;
}

.message-userArrow, .menu hr, .memberHeader-separator, .formRowSep {
    display: none;
}

@media (min-width: 62.5em) {
    .article-view, .block1--top, .block1--top:before, .block1--abo-box, .related-list {
        background: transparent !important;
    }

    .related-list {
        column-rule-color: transparent !important;
    }
}

a.mainmenu__a:hover {
    color: #4183C4 !important;
    background-color: transparent !important;
}

@media (min-width: 62.5em) {
    .support-us {
        color: #c0c0c0 !important;
    }
}

@media (min-width: 45em) {
    .row-13 {
        border-color: transparent !important;
    }
}

.box-white, .footer1, .article-view__footer {
    border-color: transparent !important;
}

.box--blue a, .box--sidebar a, .geizhals__title {
    color: #c0c0c0 !important;
}

@media (min-width: 62.5em) {
    .subheader:before, .tagnav {
        background: transparent !important;
    }
}

@media (min-width: 45em) {
    .header-wrapper {
        background: transparent !important;
    }
}

.block-row.block-row--separated + .block-row {
    border-top-color: transparent !important;
}

.alert.is-unread {
    border-left: 3px solid #47a7eb !important;
    background: #47a7eb10 !important;
}

.alert.is-unread:hover {
    background: #47a7eb20 !important;
}

.fr-box.is-preview {
    background: transparent !important;
    border-color: transparent !important;
}

.fr-box.is-preview .fr-toolbar {
    background: #121212 !important
}

.block1--forum, .block1--forum .wrapper, .block1--top .wrapper, .block1--top .wrapper::before, .block1--top::before, .block1--breakout-2, .block1--breakout-2 .wrapper {
    background: transparent !important;
}
Wenn dich nur der graue Hintergrund interessiert, kopier dir die letzten drei Zeilen.
CSS:
.block1--forum, .block1--forum .wrapper, .block1--top .wrapper, .block1--top .wrapper::before, .block1--top::before, .block1--breakout-2, .block1--breakout-2 .wrapper {
    background: transparent !important;
}

Mal sehen, da userstyles.org ja quasi tot ist, könnte ich das auch mal etwas modernisieren, ggf. auf Github setzen.
 
  • Gefällt mir
Reaktionen: jusaca
Ah, so setzt man den background also korrekt auf transparent, wieder was gelernt :daumen:
Danke, jetzt siehts wieder klasse aus =)

Yuuri schrieb:
Mal sehen, da userstyles.org ja quasi tot ist, könnte ich das auch mal etwas modernisieren, ggf. auf Github setzen.
Verstehe ich aber gar nicht, ich fand die Seite immer klasse. Aber bei der aktuellen Performance ist sie tatsächlich einfach nicht mehr nutzbar... ;/
 
jusaca schrieb:
Verstehe ich aber gar nicht, ich fand die Seite immer klasse. Aber bei der aktuellen Performance ist sie tatsächlich einfach nicht mehr nutzbar... ;/
Irgendwann wurde die Extension Adware, wodurch dann auch Stylus entstand. Wahrscheinlich irgendwann um den Dreh hat man dann auch Lust an der Seite verloren und wollte lieber Kohle damit machen. Wer weiß... Stylus ist jedenfalls Extension-technisch ein besserer Ersatz ohne Adware.
 
Zurück
Oben