Posts by Gino Zantarelli

Hi,

erkundige Dich bitte bei Woltlab im Forum oder lese dazu auch das offizielle Handbuch von Woltlab: >>> HANDBUCH <<<

Gino ;-)

Hallo,

lese dazu auf der FAQ-Seite den Eintrag "Wie ändere ich das Hintergrundbild des Headers".

Gino

Hi,

in Rot gibt es diesen Stil leider nicht, aber es freut mich dass du den Stil für deine Version gefunden hast - viel freude damit...

Gino

Hallo liebe Kunden und Besucher von Powerstylez.com / de,

wir haben uns mit der neuen Woltlab Software, das WSC 6.1, auseinandergesetzt und nun alle kommerziellen Stile vom WSC 6.0.x.x auf die aktuelle Version WSC 6.1.x.x angepasst. Die Updates der Stile sind für die Kunden der jeweiligen Stillizenzen kostenlos im Shop zu beziehen.

Was haben wir an die neue Software hauptsächlich anpassen müssen:

- Es gibt nun neue Anmelde- u. Registrierungsseiten, diese sind komplett am Layout eines Stils angepasst worden.

- Es sind alle Templates der jeweilgen Stile aktualisiert und teilweise bereinigt worden da es gewisse Templates nun nicht mehr gibt.

- Die Ansicht der letzten Aktivitäten (recentActivity) wurde von Woltlab komplett überarbeitet und daher wieder alles neu an den jeweiligen Stil angepasst.

- Die Mitgliederseite wurde ebenfalls komplett neu gestaltet und daher sind leider auch alle speziellen Anpassungen von uns bei diversen Stilen hinfällig geworden. Wir haben aber wie immer unser bestes gegeben um die neue Mitgliederliste so angenehm wie möglich zu gestalten.

Auch weiterhin wünschen wir viel Freude an unseren Produkten

Euer Gino Zantarelli (Powerstylez.de/com)

Hallo,

der Stil Shady ist ein anderes System und müsste für den addFooter umfangreicher angepasst werden.

Gino ,-)

Hi,

du hast unten die Footernavigation entfernt, daher stimmt natürlich in allen Stilen die Grundansicht nicht mehr. Du könntest vielleicht hiermit die Stilauswahl anpassen:

.boxesFooter .styleChanger {
  bottom: -10px;
}

Gino

Hi,

hast du mal wieder ein </div> zuviel oder zu wenig drin? mehr kann ich dazu auch nicht schreiben da der Fehler ja alle Stile betrifft.

Gino

Hi,

im Stil Modern Flat sind sehr viele Fehler soweit ich das sehen kann, es wäre gut dort folgenden Code zu entfernen (wenn dann alles andere richtig angezeigt wird):

 #main > .layoutBoundary {
    display: table-row;
}

Wenn sonst solche Fehler in deinen anderen Stilen auftauchen wende dich bitte an den Stilersteller - ich bin eigentlich nicht dafür da Fehler anderer Stilersteller zu fixen, habe dafür bitte Verständnis...

Gino

Moin.

ich sehe das dieser Fehler nur bei Stilen von CLS Design auftritt weil dort folgender Code enthalten ist:

.layoutBoundary > .content:not(:last-child) {
    flex-basis: calc(100% - 330px);
    max-width: calc(100% - 330px);
    padding-left: 20px;
}

Wende Dich an den Stilersteller oder entferne in den fehlerhaften Stilen diesen Codeblock...

Quote from Andydeluxe97

CSS-Klassen muss bei dir GZcustompagecontainer das hin

Das ist nicht richtig, daher auch bitte ignorieren.

Gino

Soldele,

soweit ich das sehe ist eine Sidebar aktiviert, oder in dieser ist eine Box ausgeblendet. Überprüfe deine Einstellungen oder diverse Plugins.

Gino

Hi,

leider kann ich dir da nicht weiterhelfen - es kann an vielen liegen wie ein <div> vergessen oder zu viel zugefügt oder anderes.

Gino

Hallöchen,

du kannst mit folgenden Code die Hero-Box Mobil ausblenden:

@include screen-md-down {
#GZcustompagecontainer .herobox {
    display: none;
}
}

Gino

Moin,

hast du den CSS-Code IN der Seite im Style-Bereich UNTEN eingefügt? leider kann ich Dir da ansonsten nicht weiterhelfen, du hast sicher etwas falsch entfernt oder zugefügt. Das schöne ist du kannst deine Seite wieder zu einem früheren Zeitpunkt herstellen und dann neu bearbeiten.

Gino

Hi,

das Bild kannst du Mobil so zentrieren:

@media (max-width: 768px) {
#GZcustompagecontainer .image.left {
    float: none;
    display: block;
    text-align: center;
}
}

Eine Leerzeile kannst du IMMER mit einem <br> machen, desto mehr du davon einfügst umso mehr Leerzeilen.

Zum Button:

Da der Button eigentlich weiter nach unten leiten soll zum Ankerpunkt 1 und dafür nicht verwendet wird funzt dieser auch nicht. Es muss aus dem Buttoncode das nav-link entfernt werden, also:

<a href="DEIN SEITENLINK" class="button buttonPrimary hero" data-id="anchor1">

Gino

Moin zusammen,

hier ein kleiner Tip wie man mit CSS FontAwesome-Icons ganz einfach in Forenkategorien einfügen kann, der Code zeigt anhand Beispiel die ersten 4 Icons:

.wbbBoardNodeContainer .wbbBoardNodeContainer__headline::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 600;
  text-shadow: none;
  font-size: 19px;
  padding-right: 5px;
  vertical-align: -1px;
}
.wbbBoardNodeContainer:first-child .wbbBoardNodeContainer__description {
    font-size: var(--wcfFontSizeSmall);
    margin-left: 28px;
}
.wbbBoardNodeContainer:first-child .wbbBoardNodeContainer__headline::before {
  content: "\f118";
}
.wbbBoardNodeContainer:nth-child(2) .wbbBoardNodeContainer__headline::before {
  content: "\f59c";
}
.wbbBoardNodeContainer:nth-child(3) .wbbBoardNodeContainer__headline::before {
  content: "\f5a4";
}
.wbbBoardNodeContainer:nth-child(4) .wbbBoardNodeContainer__headline::before {
  content: "\f586";
}

Selbstverständlich lässt sich das ganze beliegig erweitern mit den Selektor :nth-child(4) wo eine fortlaufende Nummer eingetragen wird, eine Liste verfügbarer FontAewesome-Icons findet ihr hier: https://fontawesome.com/search?o=r&m=free

Euer Gino

Hallo zusammen,

wer optisch die Reaction-Anzeigen aufpolieren möchte (die ja doch sehr lieblos sind...), hier eine fertige Lösung von mir für die Reaction Button zur freien Verfügung:

/* ================================================================ Reaction Button Mod by Gino Zantarelli */

.messageGroupList .columnSubject > .statusDisplay .topReactionShort {
    background-color: var(--wcfContentBorderInner);
    border-radius: 30px;
    margin-top: 3px;
    padding: 1px 5px 1px 5px;
    line-height: 1.28;
    color: var(--wcfContentText);
    min-height: 24px;
}
.messageGroupList .columnSubject > .statusDisplay .topReactionShort img.reactionType {
    width: 16px;
}
.messageGroupList .columnSubject > .statusDisplay .topReactionShort .reactionCount {
    font-size: 10px;
    vertical-align: 2px;
}
.reactionSummary .reactionCountButton {
    background-color: var(--wcfContentContainerBorder);
    padding: 2px 12px 2px 8px;
    border: 3px solid var(--wcfContentContainerBackground);
    margin-left: -17px;
    border-radius: 30px;
    line-height: 22px;
}
.reactionSummary .reactionCountButton:first-child {
    margin-left: 0px;
}
.reactionSummary .reactionCountButton:first-child:last-child {
    padding: 2px 8px 2px 8px;
}
.reactionSummary .reactionCountButton:last-child {
    padding: 2px 8px 2px 8px;
}

Und so schaut es dann aus:

Ich hoffe Euch spricht das ganze an, sieht auf jeden Fall besser aus als die bisherige Ansicht..

Euer Gino

Hallo zusammen,

heute möchte ich Euch den neuen Premiumstil "Shady" vorstellen, welcher in einem freundlichen Dunkelgrau sowie leichten Abrundungen daherkommt und mal wieder sehr viel zu bieten hat, vor allen mit zwei tollen Eigenentwicklungen die so keiner bietet...

Der Stil besitzt eine Zeit/Datumsanzeige, einen Klappheader (Scroll header), hat feine Scanlines im Hintergrund, Sonderbutton im Userpanel (Adminpanel & Logout), Social Links unter dem Header und 12 farbliche Anpassungen die man vor allen nun SELBER auswählen kann (siehe den Button rechts unter dem Header).Ich habe daran ein paar Tage gesessen und die Lösung basiert auf Java-Basis mit Cookiehinterlegung im Browser für den Nutzer, damit man später beim neu einloggen auch wieder die Farbe hat wie ausgewählt. Es ist also wichtig das der verwendete Browser Cookies zulässt!

Hier ein kleines Video dazu wo man auch die animierten Userpanel-Button & den Klappheader in Aktion sehen kann:

colorchangeshadydemo.mp4

Das nächste Highlight ist die ausklappbare Message Sidebar in Beiträgen welche sehr praktisch ist bei vielen Beiträgen in einem Thread - dadurch wird nicht alles sooo lang gezogen, auch hier ein kleines Video dazu:

messagesidebardemo.mp4

Es gibt natürlich Tonnen von optischen Anpassungen von mir wie komplett umgestaltete Memberlist, Terminlisten, Protokolllisten, exklusives User Popup und vieles, vieles mehr das zwar im ersten Moment nicht auffällt aber sehr ansprechend für Nutzer ist. Mehr Bilder könnt ihr Euch gerne im Shop ansehen,,,

Der Preis von 26.50€ ist für diese Spitzenarbeit noch günstig ausgefallen, vor allen mit unserem einzigartigen Farbwähler !

Viel Freude wünscht Euch der Gino

Hallo zusammen,

seid ihr es auch leid das man Mobil im Seitenmenü schnell die Übersicht verliert auf welcher Seite man gerade ist? Da ja alles clean gehalten und nicht mal farblich ein Akzent gesetzt wurde habe ich in meinen Stilen ab WSC 6 diese praktischen Pfeile eingebaut mit CSS - da möchte ich gerne mit Euch teilen & auch Woltlab an´s Herz legen...

@include screen-md-down {
.pageMenuMainItemLabel, .pageMenuMainItemLink {
    padding: 0px 10px 0px 25px;
}
.pageMenuMainItem[data-depth="1"] .pageMenuMainItemLabel, .pageMenuMainItem[data-depth="1"] .pageMenuMainItemLink {
    padding-left: 25px;
}
.pageMenuMainItemLink[aria-current="page"]::before {
    content: "\f105 \f105";
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    font-size: 10px;
    width: 10px;
    margin-right: 5px;
    letter-spacing: -2px;
    margin-top: 3px;
    margin-left: -15px;
}
}

Und so sollte es dann aussehen:

Natürlich kann man sich die Pfeile farblich selber einfach anpassen:

.pageMenuMainItemLink[aria-current="page"]::before {
    color: red;
}

Viel Freude an dieser kleinen, aber netten Verbesserung wünscht Euer Gino ...

Hi,

dein Hintergrundbild ist dafür völlig ungeeignet da zu Gelb / Orange, du könntest mit Filter arbeiten:

#GZcustompagecontainer .herobox {
  background-color: var(--wcfContentContainerBackground);
  background-image: linear-gradient(to bottom, rgba(89, 135, 184, 0.5) 0%, rgba(89, 135, 184, 0.5) 100%), url("https://borderline-forum.eu/images/startseite/startseite_borderline.jpg");
  background-size: cover;
  background-position: center;
  border-radius: var(--wcfBorderRadiusContainer);
  margin-left: 0px;
  margin-right: 0px;
  padding: 40px 0;
  text-align: center;
  min-height: 600px;
  display: grid;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

Gino

Quote from Shalin

ich habe noch eine andere Frage, gibt es irgendwie die Möglichkeit, FA Symbole einzusehen die ich dann verwenden kann?

Siehe auf der Startseite den Abschnitt Betreff FontAwesome (Scrollpoint 26) & klicke auf die besagten Links am Anfang des Textes.

Gino