Altes Design "übernehmen"

  • Den würde ich mir gerne mal anschauen. Muss ich mich wirklich für einen einmaligen Download erstmal dort anmelden?

    Guten Morgen und ein Frohes Neues Jahr LeWou

    wenn deinen Zweirad-Junkies der Sinn nach Gräulichem Steht,

    hat Felix | D1strict mit Seinem Style "Grayer" so ziemlch dass,

    was Dir Vorschwebt. Fast Ohne Anpassung auf Die WSC 5.3.0/5.3.1 zu Nutzen

    woltlab.com/pluginstore/file/3286/

    Läuft unter Meiner Seite http://www.edwinmueller.de Ohne Probleme.

    Danke dir, aber der ist mir dann doch etwas zu düster. Ich suche mehr so etwas luftig-graues :P

  • Okay, ich habs geschnallt. Die Werte stehen unter wcf1_style_variable.... dort kann ich sie dann per SQL ändern.

    Oder ich bearbeite vor dem Import des Styles die Variables.xml

    Danke soweit mal.

  • Aber wie bekomme ich den Inhalt dieser Styles ins ACP?

    Gar nicht, dieser Weg ist nicht vorgesehen aus der Datei etwas zurück ins ACP zu schreiben.

    Ist das so schwer zu verstehen oder hab ich einfach nur einen grundsätzlichen Denkfehler?

    Ja, das ist ein Denkfehler. Du willst Dateien ändern, aber das darf man hier eben nicht. Du änderst keine Dateien für Styleänderungen, sondern tatsächlich ausschließlich im ACP, sonst nirgends.

    Dass ich irgendwelche Anpassungen und Erweiterungen unter individuellen CSS etc. hinterlegen kann, das ist mir alles klar.

    Warum machst du das dann nicht auch einfach so?

    Die Werte stehen unter wcf1_style_variable.... dort kann ich sie dann per SQL ändern.

    Auch das solltest du nicht per SQL machen.

    Oder ich bearbeite vor dem Import des Styles die Variables.xml

    Und auch das nicht.

    Wie geschrieben, alle Styleänderungen machst du im ACP. Grundlegende Farben änderst du über den Editor und was damit nicht geht (und am besten auch nur das) änderst du mit der Ergänzung von individuellem CSS. Das ist der vorgesehene und updatesichere Weg. Und das klappt hervorragend.

    Den alten Style kannst du so gesehen nicht "übernehmen". Nur auf manuellem Wege in dem du die Farben eben im ACP einträgst und das ist eigentlich so gelöst, dass dann vieles schon ganz gut zusammen passt, ohne jede Farben für jedes Element einzeln eintragen zu müssen.

    Liebe Grüße
    Susi

  • $wcfContentContainerBackground isses nicht, das hatte ich schon getestet.

    Gibts irgendwo ein Tutorial, wo die Handhabung genauer beschrieben ist? Ich finds etwas mühsam, diese ganzen Variablen von Hand zu Fuß zwecks Trial&Error durchzuklicken...

  • Und wie soll ich das Design dann nach meinen Vorstellungen umsetzen, wenn ich nichtmal weiss, was ich wo verstellen muss? Haben die das absichtlich so als Blackbox aufgebaut, dass man halt "irgendein" Style nimmt und gut ist?

  • Nun, wenn man den Standardstil anpasst, ist es recht einfach. Da kannst du die "Direktauswahl" verwenden und einfach an die Stellen klicken, die du verändern möchtest.

    Allerdings sind bei manchen Stilen, Änderungen über CSS bzw. SCSS gemacht worden, die evtl. nicht Variable sind. Da hilft es nur, über F12 den bestimmten Bereich auszuwählen und zu schauen, welche Klasse oder ID dort angesprochen worden ist. Und dann selbst mit CSS Hand anlegen.


    Haben die das absichtlich so als Blackbox aufgebaut, dass man halt "irgendein" Style nimmt und gut ist?

    Davon gehe ich nicht aus. Man muss ich dort nur "reinfuchsen".

  • Das ist einfach mit CSS lösbar, wenn man sich damit beschäftigt und einarbeitet.

    Die Klassen findest du auch mit Hilfe deines Browsers. F12 drücken (FF oder Chrome z.B.), dann auf den Pfeil links oben in der Ecke klicken und dann das Element auf deiner Seite auswählen. Dann siehst du den html Code links und rechts das zugehörige CSS. Du kannst in dem CSS Kasten deine Anpassungen machen bis es passt und siehst die Selektoren, die du anpassen musst/kannst. Da muss man sich schon ein wenig rein fuchsen, bis man es versteht, aber es ist an sich sehr logisch und es gibt zahlreiche Seiten im Netz, die alles erklären.

    Zu beachten ist, dass CSS für Cascading Stylesheets steht, das also ineinander verschachtelt ist. Die Regel ganz unten überschreibt die weiter oben. Mit einer Änderung kann es sein, dass du nicht nur das gewünschte Element änderst, sondern auch andere. Dann musst du für den speziellen Fall vielleicht noch eine Klasse dazu nehmen. Solange man im html Klassen findet, ist das aber alles änderbar, erst, wenn Klassen im html fehlen muss man ggf. an die Templates ran. Je nach dem wie weit man sich eben vom Standard entfernen will oder kann.

    Um CSS kommt man heutzutage bei keiner Website mehr drum herum. Das ist so wie man früher eben auch ein wenig html können musste, um am Forum etwas zu ändern. Aber auch hier wächst man mit seinen Aufgaben :) . Das Gute daran ist, dass du es auch für alle anderen Webseiten nutzen kannst. Es ist kein Spezial Woltlab Know-How.

    Liebe Grüße
    Susi

  • Speziell bei Stilen von Gino gibt es auch zu beachten, dass einige Farben direkt im CSS definiert sind und nicht unbedingt auf die Farbpalette zurückgegriffen wird. Das wird in dem von dir angesprochenen Fall womöglich auch so sein.

  • Sorry Leute, ich seh den Wald vor lauter Bäumen nicht ;(


    Wie heissen die Variablen dahinter bzw. wo stell ich diese Farben ein?

    Der Contentbereich wird unter ERWEITERTE EINSTELLUNGEN > Individuelles CSS und SCSS an folgender Stelle angepasst (ab Zeile 194):

    Code
     .main > div .content:not(span) {
        background-color: #1b1c1c;
        border-radius: 3px;
        padding: 20px;
    }

    Die Hintergrundfarbe des Message Content wird von der Farbpalette abgegriffen mit der Farbe der Sidebar (ab Zeile 602):

    Code
    .messageSidebarOrientationLeft .messageSidebar + .messageContent {
        background-color: $wcfSidebarBackground;
        padding: 20px;
        border-radius: 3px;
    }

    Achtung:

    Dieser Stil ist NICHT ein Standardstil der klassisch angepasst wird, wie der Name Core MODDED schon aussagen sollte sind hier Anpassungen drin die NICHT dem Standard entsprechen!

  • Dank an alle... dann werd ich mal loslegen... Das ACP hab ich mir natürlich schon angeschaut, und auch das Style Editing... mir ging es eglt. hauptsächlich darum, ob ich in irgendeiner "text" Datei ein "ersetze das dunkle Dunkelblau durch ein feines und dezentes Dunkelgrau" machen kann oder ob ich das alles per klicki bunti, Farbe für Farbe, usw... usf... ihr versteht schon, was ich meine

    Wenn du es mit Bordeigenen Mitteln Versuchen möchtest, Unter der Adresse https://www.arnoedwinmueller.de/

    habe ich mal angefangen den WoltLab© Standard Stile Umzubauen. Ist zwar ein wenig Arbeit, aber es ist Immerhin Möglich.

    Und es ist im Grunde recht Einfach Einzurichten. :saint:

    Mit Besten Grüßen, ArnoEdwin Begnadigt.           I write as I learned it, and because I can't do better, allow me ;)

  • Der Contentbereich wird unter ERWEITERTE EINSTELLUNGEN > Individuelles CSS und SCSS an folgender Stelle angepasst (ab Zeile 194):

    Code
     .main > div .content:not(span) {
        background-color: #1b1c1c;
        border-radius: 3px;
        padding: 20px;
    }

    Die Hintergrundfarbe des Message Content wird von der Farbpalette abgegriffen mit der Farbe der Sidebar (ab Zeile 602):

    Code
    .messageSidebarOrientationLeft .messageSidebar + .messageContent {
        background-color: $wcfSidebarBackground;
        padding: 20px;
        border-radius: 3px;
    }

    Achtung:

    Dieser Stil ist NICHT ein Standardstil der klassisch angepasst wird, wie der Name Core MODDED schon aussagen sollte sind hier Anpassungen drin die NICHT dem Standard entsprechen!

    Merci Gino Zantarelli

    Wo kann ich das Padding für den Header einstellen. Find ich nicht. Ich hätte das Logo gerne direkt auf den Zellenrand.

  • Wo kann ich das Padding für den Header einstellen

    Versuch mal .pageHeaderFacade > .layoutBoundary anzusprechen und dort mit dem Wert für padding-top und padding-bottom zu spielen.


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Wen Du den letzten verbliebenen Abstand auch noch entfernen möchtest, hilft vermutlich .pageHeaderLogo > a {padding: 0;}.

    Wie schaffe ich es, da selbst drauf zu kommen?

    Ich nutze dazu die Entwicklertools (Rechtsklick -> Element untersuchen) des Browsers.


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!