Woltlab Suite im Blog optik

Invisible · Feb 4th 2018

Hallo liebe Community,

ich bin neu hier und kämpfe mich gerade mit Woltlab durch.

Aktuell nutze ich das Standard Template und würde dieses gerne nur ein wenig anpassen, als ein neues Template zu nutzen, da mir besonders die Icon, etc. sehr gut gefallen.

Eine Frage hätte ich jedoch zum Thema Design:
Wie kann ich die Darstellung des Forums anpassen, dass diese in einem Blog und nicht über die gesamte Breite des Bildschirms gestreckt wird?

Mit Blog meine ich natürlich, dass das Forum nur im Center ist und links und rechts Platz ist und man somit bspw. ein Bild als Hintergrund einfügen könnte.

Im Voraus bedanke ich mich für eure Hilfe und wünsche euch ein schönes Wochenende!

Beste Grüße

Björn

Canna · Feb 4th 2018

In den Stileinstellungen kannst du eine feste Breite angeben angeben.

Hasching_LA · Feb 4th 2018

Vieleicht findest du hier was

Invisible · Feb 4th 2018

Quote from Keks12

Vieleicht findest du hier was

Danke Keks12, aber wie gesagt, möchte ich kein Template kaufen.

Quote from Canna

In den Stileinstellungen kannst du eine feste Breite angeben angeben.

Gibt es da eine bestimmte Einstellung, damit die Seite auch responsive bleibt?!

Canna · Feb 4th 2018

Soweit ich weiss, wird die feste Breite nur auf Desktop Geräten verwendet. Der Rest wird dann automatisch an die volle Breite angepasst.

Hasching_LA · Feb 4th 2018

Quote from Invisible

Danke Keks12, aber wie gesagt, möchte ich kein Template kaufen.

Na ja CLS hat auch Stiles die nichts kosten ZB. https://www.cls-design.com/fil…hp/Entry/206-WS-3-x-Nero/ und https://www.cls-design.com/fil…ntry/202-WS-3-0-Altitude/

Invisible · Feb 4th 2018

Quote from Canna

Soweit ich weiss, wird die feste Breite nur auf Desktop Geräten verwendet. Der Rest wird dann automatisch an die volle Breite angepasst.

Ok, das ist natürlich sehr praktisch, danke.

Weißt du auch welche Breite man bei diesem Blog Style standardmäßig wählt?

Quote from Keks12

Na ja CLS hat auch Stiles die nichts kosten ZB. https://www.cls-design.com/fil…hp/Entry/206-WS-3-x-Nero/ und https://www.cls-design.com/fil…ntry/202-WS-3-0-Altitude/

Oh. Das wusste ich gar nicht. Danke Keks12.
Werde mir mal beide Stiles in Ruhe anschauen.

Canna · Feb 4th 2018

Das ist unterschiedlich. Je nachdem.

norse · Feb 4th 2018

Kostenlose Stile gibt es natürlich nicht nur bei CLS, sondern in großer Anzahl auch auf diversen anderen Seiten und hier im Pluginstore.

Gruß norse

Invisible · Feb 6th 2018

Ich werde mir alle Vorschläge mal angucken, vielen Dank.
Bis auf ein paar Kleinigkeiten gefällt mir das Standard Template immer noch am besten. Bzw. möchte ich auf die Ansicht der Foren (Text, Icon und Farbe) nicht verzichten, da mir das sehr gut gefällt.

Daher würde es mich freuen, wenn mir jemand mit einem Code helfen kann, wie ich die Blog Optik hinbekomme?!

Das Header müsste ich auch noch ändern, da dort mein Logo rein soll.
Oder meint ihr, dass es einfacher und sinniger ist, ein anderes Template zu nutzen? Auch, wenn ich die Forenoptik behalten möchte.

Grischabock · Feb 6th 2018

Passe einfach die Farben etwas an und so hast du deine Block Optik. Einfach mal im Stile schauen und rumprobieren.

norse · Feb 6th 2018

Quote from Invisible

wie ich die Blog Optik hinbekomme?

Was soll denn bitte diese Blog-Optik sein? Es wird Dir kaum gelingen, mit Hilfe von CSS ein Forum wie eine vollkommen anders strukturierte Anwendung aussehen zu lassen.

Gruß norse

Invisible · Feb 6th 2018

Das ist das Problem, wenn man statt "Block" "Blog" schreibt.

Ich bedanke mich bei allen antwortenden. Meine Frage hat sich mittlerweile beantwortet!

norse · Feb 6th 2018

Vielleicht magst Du uns mal erleuchten, worum es nun wirklich ging und wie Du Dein Ziel erreicht hast, damit dieses Thema zumindest ansatzweise einen Sinn hat? So ist es nämlich für niemanden wirklich informativ und hilfreich.

Gruß norse

Grischabock · Feb 6th 2018

Ich denke er meinte einen main border als abgrenzung.

Würde ich jetzt unter block verstehen.

Fu55el · Feb 10th 2018

meinst du das so ?

falls ja dann

CSS

/*body*/
html, body {
    background-color: rgba(255, 255, 255, 0); // weiss
}

/*Header*/
.pageHeaderContainer {
    z-index: 100;
    padding-top: 100px; // abstand nach oben
    background-color: rgba(58, 109, 156, 0);
}

div#pageHeaderFacade {
    background-color: $wcfHeaderBackground;
}

.searchBarOpen .pageHeaderSearch {
    display: block;
    z-index: 100;
    padding-top: 90px;
}

.interactiveDropdown {
    position: fixed;
    top: 100px !important;
}

.pageNavigation {
    max-width: $wcfLayoutMaxWidth;
    min-width: $wcfLayoutMinWidth;
    width: 100%;
    margin: 0 auto;
}

/*Content*/
#main {
    background-color: $wcfContentBackground;
}

#main,.pageHeaderContainer, .pageFooterCopyright, .boxesFooterBoxes, .boxesFooter {
    max-width: $wcfLayoutMaxWidth;
    min-width: $wcfLayoutMinWidth;
    width: 100%;
    margin: 0 auto;
}


/*Footer*/
.pageFooterCopyright {
    background-color: $wcfContentBackground;
    padding-bottom: 50px; //abstand nach unten
}

div#pageFooterCopyright.pageFooterCopyright > .layoutBoundary {
    background-color: $wcfFooterCopyrightBackground;
    margin-top: -20px;
    padding-bottom: 10px;
}

Display More

falls du das HeaderPanel auch einrücken möchtest dann vor :

Code

 #main,.pageHeaderContainer, .pageFooterCopyright, .boxesFooterBoxes, .boxesFooter {
    max-width: $wcfLayoutMaxWidth;
    min-width: $wcfLayoutMinWidth;
    width: 100%;
    margin: 0 auto;
}

noch ein

Code

.pageHeaderPanel,

nach unten bekommst du das HeaderPanel mit

Code

div#pageHeaderPanel {
    position: absolute;
    top: 50px;
}

sieht dann so aus

Invisible · Feb 11th 2018

Klasse, danke!

Fu55el · Feb 11th 2018

Nichts zu danken dafür ist das Forum ja da weiterhin viel Erfolg

Woltlab Suite im Blog optik

Participate now!

Share

Similar Threads

Hilfestellung - Linksammlung (Einrichten, Anpassung etc.)

Tags