Ist es möglich bei verschiedenen Foren das CSS zu ändern? Weil bei ein paar ist der Header anders wegen dem "Create Thread" Button, dort with Margin-right: -185px verwendet. Bei den anderen wo der Button nicht da ist, soll es Margin-right: -20px sein. Wie geht das? Ich habe nur herausgefunden wie man beie auf einmal ändert
Verschiedene CSS
-
- WoltLab Suite 5.5
-
Jebsi -
4. Oktober 2022 um 23:36
-
-
-
-
An so etwas dachte ich auch, Problem wird sein dass vermutlich nicht jede Benutzergruppe die gleichen Rechte hat.
Ein Gast darf vielleicht in keinem Forum schreiben, ein registrierter User in 90% der Foren und Moderatoren überall. Dadurch kommt es dann immer noch zu diesem Fehler.
Mir ist keine Lösung eingefallen, am besten wäre ein Code der erst greift wenn der Button tatsächlich angezeigt wird, unabhängig des Forums oder der Gruppe.
-
Kann man sich das mal live ansehen? Das zugrunde liegende CSS hört sich für mich verbesserungswürdig an.
-
Kann man sich das mal live ansehen? Das zugrunde liegende CSS hört sich für mich verbesserungswürdig an.
Wenn du die Webseite meinst klar: https://forum.korexnetwork.net/
-
Und wo genau soll dieses margin-right sein?
Ansonsten solltest du das gesamte Element .contentHeader stylen und nicht nur .contentTitle.
-
Und wo genau soll dieses margin-right sein?
https://forum.korexnetwork.net/forum/board/18-reports/ und ein paar Foren mehr. und auch noch in den Threads selber:
-
Ersetze deinen CSS Part mal mit folgendem CSS Snippet (kleinere farbliche Anpassungen müsstest du selbst vornehmen):
Sass (SCSS)
Alles anzeigen.content { /* Variable to change border radius */ $borderRadius: 25px; background-color: $wcfContentContainerBackground; border-radius: $borderRadius; padding: 0 20px 20px; .contentHeader { background-color: $wcfHeaderBackground; border-radius: $borderRadius $borderRadius 0 0; margin: 0 -20px; padding: 15px 20px; .contentTitle { color: rgba(255,255,255,1); } .contentHeaderDescription { color: rgba(255,255,255,.6); } } > .section { border-radius: $borderRadius; } }
-
Ersetze deinen CSS Part mal mit folgendem CSS Snippet (kleinere farbliche Anpassungen müsstest du selbst vornehmen):
Was genau soll ich mit deinem Code ersetzen?
Mein CSS Code:
Code
Alles anzeigen.pageHeader{background:url(https://forum.korexnetwork.net/images/background.jpg) no-repeat center;} #pageHeaderLogo { text-align: center; } #content { background-color: #EDEDEDFF; padding: 20px; border-radius: 25px; } .contentHeader .contentTitle, .contentHeader>h1, .boxHeadline .contentTitle, .boxHeadline>h1 { font-size: 28px; color: white; background-color: #2B7DB8FF; border-radius: 25px 25px 0px 0px; padding: 15px; font-family: ubuntu; margin: auto; margin-left: -20px; margin-right: -185px; margin-top: -20px; /* border: none; */ } button.buttonPrimary, input[type="button"].buttonPrimary, input[type="submit"], .button.buttonPrimary, a.button.buttonPrimary { background-color: #2873A9FF; color: white; border-radius: 25px; /* position: fixed; */ margin-top: -9px; } button.small, input[type="button"].small, input[type="reset"].small, input[type="submit"].small, .button.small, a.button.small { /*kleine buttons*/ padding: 6px 8px; font-weight: 400; border-radius: 10px 10px 10px 10px; } .content>.section, .content>form, .sectionContainer { border: 1px solid #d4d4d4; background-color: #ededed; padding: 20px; border-radius: 25px; } .mainSite .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { font-size: 28px; color: white; background-color: #2B7DB8FF; border-radius: 25px 25px 0px 0px; padding: 15px; font-family: ubuntu; margin: auto; margin-left: -20px; margin-right: -20px; margin-top: -20px; /* border: none; */ } .siteArticle .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { font-size: 28px; color: white; background-color: #2B7DB8FF; border-radius: 25px 25px 0px 0px; padding: 15px; font-family: ubuntu; margin: auto; margin-left: -20px; margin-right: -165px; margin-top: -20px; /* border: none; */ } .mainUser .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { font-size: 28px; color: white; background-color: transparent; border-radius: 25px 25px 0px 0px; padding: 15px; font-family: ubuntu; margin: auto; margin-left: -20px; margin-right: -165px; margin-top: -20px; /* border: none; */ } .mainConv .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -225px; } .mainFaq .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -183px; } .mainMc .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -218px; } .mainMm .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -292px; } .mainPas .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -35px; } .boxesSidebarLeft .box:not(.boxBorderless), .boxesSidebarRight .box:not(.boxBorderless) { background-color: #ecf1f7; border-radius: 20px; } .mainTo .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -160px; } #todoAddButton { border-radius: 25px 25px 25px 25px; margin-top: -9px; } .contentHeader .contentHeaderNavigation .button { display: block; margin-left: 5px; margin-bottom: 5px; overflow: hidden; border-radius: 25px; text-overflow: ellipsis; margin-bottom: -9px; } .mainCh .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -171px; } .mainChAdd .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -147px; } .mainChVersion .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -348px; }
-
Was genau soll ich mit deinem Code ersetzen?
Mein CSS Code:
Code
Alles anzeigen.pageHeader{background:url(https://forum.korexnetwork.net/images/background.jpg) no-repeat center;} #pageHeaderLogo { text-align: center; } #content { background-color: #EDEDEDFF; padding: 20px; border-radius: 25px; } .contentHeader .contentTitle, .contentHeader>h1, .boxHeadline .contentTitle, .boxHeadline>h1 { font-size: 28px; color: white; background-color: #2B7DB8FF; border-radius: 25px 25px 0px 0px; padding: 15px; font-family: ubuntu; margin: auto; margin-left: -20px; margin-right: -185px; margin-top: -20px; /* border: none; */ } button.buttonPrimary, input[type="button"].buttonPrimary, input[type="submit"], .button.buttonPrimary, a.button.buttonPrimary { background-color: #2873A9FF; color: white; border-radius: 25px; /* position: fixed; */ margin-top: -9px; } button.small, input[type="button"].small, input[type="reset"].small, input[type="submit"].small, .button.small, a.button.small { /*kleine buttons*/ padding: 6px 8px; font-weight: 400; border-radius: 10px 10px 10px 10px; } .content>.section, .content>form, .sectionContainer { border: 1px solid #d4d4d4; background-color: #ededed; padding: 20px; border-radius: 25px; } .mainSite .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { font-size: 28px; color: white; background-color: #2B7DB8FF; border-radius: 25px 25px 0px 0px; padding: 15px; font-family: ubuntu; margin: auto; margin-left: -20px; margin-right: -20px; margin-top: -20px; /* border: none; */ } .siteArticle .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { font-size: 28px; color: white; background-color: #2B7DB8FF; border-radius: 25px 25px 0px 0px; padding: 15px; font-family: ubuntu; margin: auto; margin-left: -20px; margin-right: -165px; margin-top: -20px; /* border: none; */ } .mainUser .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { font-size: 28px; color: white; background-color: transparent; border-radius: 25px 25px 0px 0px; padding: 15px; font-family: ubuntu; margin: auto; margin-left: -20px; margin-right: -165px; margin-top: -20px; /* border: none; */ } .mainConv .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -225px; } .mainFaq .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -183px; } .mainMc .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -218px; } .mainMm .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -292px; } .mainPas .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -35px; } .boxesSidebarLeft .box:not(.boxBorderless), .boxesSidebarRight .box:not(.boxBorderless) { background-color: #ecf1f7; border-radius: 20px; } .mainTo .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -160px; } #todoAddButton { border-radius: 25px 25px 25px 25px; margin-top: -9px; } .contentHeader .contentHeaderNavigation .button { display: block; margin-left: 5px; margin-bottom: 5px; overflow: hidden; border-radius: 25px; text-overflow: ellipsis; margin-bottom: -9px; } .mainCh .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -171px; } .mainChAdd .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -147px; } .mainChVersion .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { margin-right: -348px; }
Das kannst du alles mit dem hier ersetzen:
Sass (SCSS)
Alles anzeigen/* ======================================================================= ** Variables ========================================================================== */ $borderRadiusValue: 25px; $ubuntuFontFamily: "Ubuntu", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif; /* ======================================================================= ** PageHeader ========================================================================== */ .pageHeader { background: url("https://forum.korexnetwork.net/images/background.jpg") no-repeat center; } @include screen-lg { .pageHeaderLogo { text-align: center; } } /* ======================================================================= ** Content ========================================================================== */ body:not(#tpl_wcf_user) .content { background-color: #EDEDEDFF; border-radius: $borderRadiusValue; padding: 0 20px 20px; .contentHeader { background-color: #2B7DB8FF; font-family: $ubuntuFontFamily; border-radius: $borderRadiusValue $borderRadiusValue 0 0; margin: 0 -20px; padding: 15px 20px; align-items: center; .contentHeaderTitle { margin-top: 0; } .contentTitle { color: rgba(255,255,255,1); margin-top: 0; } .contentHeaderDescription { color: rgba(255,255,255,.6); } .contentHeaderNavigation { margin: 0; } } > .section, > form, .sectionContainer { border-radius: $borderRadiusValue; border: 1px solid #D4D4D4FF; background-color: #EDEDEDFF; } } #tpl_wcf_user { .content { background-color: #EDEDEDFF; border-radius: $borderRadiusValue; padding: 0 20px 20px; .userProfileUserWithCoverPhoto { margin: 0 -20px; .userProfileCoverPhoto { border-radius: $borderRadiusValue $borderRadiusValue 0 0; } @include screen-md-up { .contentHeaderIcon { padding-left: 20px; .badgeOnline { left: 20px !important; } } } } .contentHeaderNavigation { padding-right: 20px; } > .section { border-radius: $borderRadiusValue; border: 1px solid #D4D4D4FF; background-color: #EDEDEDFF; } } } /* ======================================================================= ** Headings ========================================================================== */ .contentHeader .contentTitle, .contentHeader > h1, .boxHeadline .contentTitle, .boxHeadline > h1 { font-family: $ubuntuFontFamily; } /* ======================================================================= ** Sidebar boxes ========================================================================== */ .boxesSidebarLeft .box, .boxesSidebarRight .box { border-radius: $borderRadiusValue; } /* ======================================================================= ** Buttons ========================================================================== */ button.buttonPrimary, input[type="button"].buttonPrimary, input[type="submit"], .button.buttonPrimary, a.button.buttonPrimary { background-color: #2873A9FF; border-radius: $borderRadiusValue; } #todoAddButton { border-radius: $borderRadiusValue; margin-top: -9px; }
-
Vielen dank Aze. Ich hätte noch eine Frage.
In einem Thread werden Links dunkelgrau angezeigt, wie kann ich das ändern?
-
Egal habe es gefunden, musste wcfContentDimmedText verändern.
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!