Eigene Grafiken als Forum-Icons

  • Für ein Update auf WSC 3.1 fehlen mir noch ein paar wichtige Plugins die ich auch weiterhin gerne benutzen würde. Eins davon ist folgendes:


    Leider scheint es so, dass es das Plugin nicht für WSC 3.1 geben wird. Zumindest reagiert Tim Düsterhus nicht auf die Anfragen in den Kommentaren. Von SoftCreatR scheint es ein ähnliches Plugin zu geben. Dieses ist aber für WSC 3.0. und wird, laut Aussage des Entwicklers, nicht für WSC 3.1 verfügbar sein. Von daher würde es mich riesig freuen wenn sich das mal jemand anschaut und sich eventuell die Arbeit macht um so ein Plugin für WSC 3.1 zu entwickeln.

  • Die Portierung habe ich vorerst abgesagt, ja. Grund dafür ist, dass ich aktuell keine Chancen sehe, eigene Icons in den Dialog zu bekommen. Das ist bei unserer hauseigenen Erweiterung anders, da diese für genau einen solchen Zweck vorbereitet ist. Diese lässt sich allerdings nicht ohne Weiteres in das WSC 3.1 integrieren bzw. so integrieren, dass der Original-Dialog übergangen wird. Sicherlich ist das irgendwie möglich, allerdings zu aufwändig, um dazwischen geschoben werden zu können. Zumal der Icon-Upload in der WSC 3.0-Version der Erweiterung ja auch noch nicht vollständig implementiert ist.

  • Es kann sich ja jeder wünschen, was er für sinnvoll hält, aber ist es nun wirklich so aufwändig, die bekannte CSS-Lösung zu verwenden? Ein Forenicon wird doch nun nicht regelmäßig ausgetauscht, sondern es muss nach abgeschlossener Erstanpassung lediglich hin und wieder vielleicht mal eines hinzugefügt werden.





    Gruß norse

  • die bekannte CSS-Lösung

    Meinst du das hier:


    Foren Icons ändern


    So wie ich das sehe, ist das einmal ein Icon für die ungelesenen Foren und ein Icon für die gelesenen Foren. In meinem Forum gibt es aber ein paar mehr Icons die gewechselt werden müssen:


    http://www.gta-talk.de/index.p…0fd268b4ad75203fedfd2b21e


    Ja, das ist vielleicht eine einmalige Sache. Aber gerade für so Leute wie mich, die so gut wie keine Ahnung von CSS haben, wäre so ein Plugin halt sehr hilfreich.

    Q - WWG1WGA

  • So wie ich das sehe, ist das einmal ein Icon für die ungelesenen Foren und ein Icon für die gelesenen Foren.

    Du kannst auch für jedes Forum ein eigenes Icon via CSS einbinden. Dein Plugin macht letztendlich wahrscheinlich auch nichts anderes.


    Edit:

    Ein kurzer Blick auf deine Foren-Icons zeigt z.B. folgendes CSS für das erste Icon. Der Code wird halt von deinem Plugin erstellt worden sein. Am Ende ist es aber nur ganz normales CSS. Sowas kann man auch selbst schreiben und einfügen.


    CSS
    .wbbBoardList li[data-board-id="5"] > .wbbBoard > .icon.icon-folder-close-alt, .wbbSubBoards li[data-board-id="5"] > .icon.icon-folder-close-alt {
    background-image: none;
    }
    .wbbBoardList li[data-board-id="5"] > .wbbBoard > .icon.icon-folder-close-alt::before, .wbbSubBoards li[data-board-id="5"] > .icon.icon-folder-close-alt::before {
    content: "\f129";
    color: #1cdc35;
    }

    Edited 2 times, last by ReeN ().

  • So, und nun kommen wir zu dem Problem. Ich habe die Forenicons jetzt alle mit folgendem Code in's Forum eingefügt:

    CSS
    .wbbBoardList .wbbBoardContainer.wbbDepth2[data-board-id="8"] > .wbbBoard > .icon32:before {
    content: url(../images/Flavius/GTA-V-Logo1.png);
    }

    Das funktioniert auch. Die Icons liegen auf dem Server und sind 32x32 Pixel groß. Wenn ich ein größeres Icon benutze, beispielsweise 60x60 Pixel, werden die im Forum logischerweise auch größer. Das Problem an der ganzen Sache ist einfach, dass mir die Icons extrem unscharf angezeigt werden. Benutze einen WQHD Monitor. Mit dem Plugin für WBB 4.1 war das kein Problem. Dort habe ich einfach ein 60x60 Pixel großes Icon hoch geladen und es wurde auf 32x32 Pixel skaliert, sodass es auch auf 4k Monitoren noch scharf war.

    Q - WWG1WGA

  • Binde die Grafiken mal als background-image ein und nicht als content. Dann vielleicht ein background-size, um die Größe zu regeln. Dann kannst du auch größere Grafiken nutzen, wenn du willst und wie werden trotzdem passend eingebunden.


    content nimmst du für FontAwesome Icons und für Grafiken nimmst du background-image.

  • Dann müsste ich die Standard Icons noch ausblenden lassen, richtig? Und welchen Wert nehme ich für background-size? Einfach eine 32 dahinter bringt bei mir nichts


    CSS
    .wbbBoardList .wbbBoardContainer.wbbDepth2[data-board-id="8"] > .wbbBoard > .icon32:before {
    background-image: url(../images/Flavius2/GTA-V-Logo2.png);
    background-size: 32
    }


    Edit:


    CSS
    .wbbBoardList .wbbBoardContainer.wbbDepth2[data-board-id="8"] > .wbbBoard > .icon32:before {
    background-image: url(../images/Flavius2/GTA-V-Logo2.png);
    background-size: cover;
    }

    So zumindest die eigene Grafik hat jetzt die richtige Größe. Obwohl sie ein bisschen größer sein könnten. Mit 40px werden die Grafiken aber leider abgeschnitten. Wie bekomme ich das denn hin und wie blende ich das Standard Icon aus?



    Q - WWG1WGA

    Edited once, last by MenikoBlue ().

  • Ersetze mal background-image zu content


    Code
    .wbbBoardList .wbbBoardContainer.wbbDepth2[data-board-id="8"] > .wbbBoard > .icon32:before {
     content: url(../images/Flavius2/GTA-V-Logo2.png);
    background-size: cover;
    }
  • Ersetze mal background-image zu content


    Code
    .wbbBoardList .wbbBoardContainer.wbbDepth2[data-board-id="8"] > .wbbBoard > .icon32:before {
    content: url(../images/Flavius2/GTA-V-Logo2.png);
    background-size: cover;
    }

    Binde die Grafiken mal als background-image ein und nicht als content. Dann vielleicht ein background-size, um die Größe zu regeln. Dann kannst du auch größere Grafiken nutzen, wenn du willst und wie werden trotzdem passend eingebunden.


    content nimmst du für FontAwesome Icons und für Grafiken nimmst du background-image.

    Q - WWG1WGA

  • Habe jetzt nochmal versucht ein bisschen zu basteln und komme nicht weiter.


    CSS
    /*Forenicons*/
    .wbbBoardList .wbbBoardContainer.wbbDepth2[data-board-id="8"] > .wbbBoard > .icon32:before {
    background-image: url(../images/Flavius2/GTA-V-Logo2.png);
    background-size: 45px;
    }


    Mit content: none;wollte ich das FontAwesome-Icon ausblenden lassen. So werden aber beide Icons ausgeblendet. Auch habe ich es nicht hinbekommen, dass die eigene Grafik größer dargestellt wird ohne abgeschnitten zu werden :(

    Q - WWG1WGA

  • sollte das nicht so eingebunden werden.

    Dann ist aber das Problem, dass ich die Icons auf hochauflösenden Bildschirmen nicht scharf bekomme.

    Binde die Grafiken mal als background-image ein und nicht als content. Dann vielleicht ein background-size, um die Größe zu regeln. Dann kannst du auch größere Grafiken nutzen, wenn du willst und wie werden trotzdem passend eingebunden.


    content nimmst du für FontAwesome Icons und für Grafiken nimmst du background-image.

    Q - WWG1WGA

  • Was für ne Geburt :D Sorry Leute und danke für eure Geduld. Mit dem Code von SoftCreatR hat es jetzt geklappt. Ich habe zusätzlich versucht mit margin-right den Abstand zwischen der Grafik und dem Text (News) zu erhöhen:


    CSS
    .wbbBoardList .wbbBoardContainer.wbbDepth2[data-board-id="8"] > .wbbBoard > .icon32:before {
    background-image: url(../images/Flavius2/GTA-V-Logo2.png);
    content: "";
    background-size: 45px;
    display: block;
    width: 45px;
    height: 45px;
    margin-right: 20px;
    }


    Leider funktioniert das so nicht. Was spricht den Abstand denn an?

    Q - WWG1WGA

  • Der Abstand passt jetzt auch. Nun habe ich versucht mit margin-leftnoch den Abstand vom linken Rand zur Grafik zu verringern.




    da tut sich komischerweise nichts. Auch wenn ich beispielsweise -20px eingebe.

    Q - WWG1WGA