Zum Hauptinhalt springen
OpenID

Neu

  • ElkArte - Erste Schritte erklärt dir in leicht verständlichen Anleitungen die Administration und Benutzung eines ElkArte-Forums, leicht verständlich und doch umfassend.

Thema: Boardicons und dergleichen (2457-mal gelesen) Vorheriges Thema - Nächstes Thema

0 Benutzer und 1 Gast betrachten dieses Thema.
  • Jorin
  • [*][*][*]
  • Administrator
Antw.: Boardicons und dergleichen
Antwort #15
Du schaffst das schon!  :)

Antw.: Boardicons und dergleichen
Antwort #16
Man braucht die sechs gewünschten Grafiken, benennt sie entsprechend und lädt sie in das Verzeichnis "images /_light" hoch. Die Grafik "board_icons.png" muß man in der index_light.css auskommentieren, desgleichen die Positionen der einzelnen Grafiken. Statt dessen schreibt man je eine Anweisung für die neuen Hintergrundgrafiken hinein.

.category_boards .board_icon, .board_key:before {
background-repeat: no-repeat;
/*background-image: url(../../images/_light/board_icons.png);*/
}
/*.on_board {background-position: 0 0;}*/
.on_board {background-image: url(../../images/_light/on.png);}
/*.on2_board {background-position: -72px 0;}*/
.on2_board {background-image: url(../../images/_light/on2.png);}
/*.off_board {background-position: -144px 0;}*/
.off_board {background-image: url(../../images/_light/off.png);}
/*.redirect_board {background-position: -216px 0;}*/
.redirect_board {background-image: url(../../images/_light/redirect.png);}
/*.new_some_board:before { background-position: -300px -14px;}*/
.new_some_board:before {background-image: url(../../images/_light/new_some.png);}
/*.new_none_board:before { background-position: -372px -14px;}*/
.new_none_board:before {background-image: url(../../images/_light/new_none.png);}
/*.new_redirect_board:before { background-position: -444px -14px;}*/
.new_redirect_board:before  {background-image: url(../../images/_light/new_redirect.png);}


Ich versuche gerade im Theme "BeSocial" (von der EA-Version 1.1.3) die Board Icons auszutauschen.
Allerdings finde ich in der index_besocial.css nicht diesen Teil oder einen ähnlichen zum auskommentieren. Wo versteckt sich der?:

.category_boards .board_icon, .board_key:before {
background-repeat: no-repeat;
/*background-image: url(../../images/_light/board_icons.png);*/

Gefunden habe ich ab Zeile 1938 nur das. Dort könnte ich ja dann etwas wie .on_board {background-image: url(../../images/_light/on.png);} drunter eintragen(?) :

	.on_board, .on2_board {
background-position: -300px -14px;
}

.off_board {
background-position: -372px -14px;
}

.redirect_board {
background-position: -444px -14px;
}
ElkArte version: 1.1.3 / Theme: verändertes BeSocial!

  • Ruth
  • [*]
Antw.: Boardicons und dergleichen
Antwort #17
Das bezog sich noch auf die "alte" ElkArte-Version und auf die light-Variante.
"BeSocial" hab ich mir noch nie wirklich angeschaut.

Unter der 1.1. funktioniert der Austausch der Boardicons so über die Anweisungen für die Hintergrundpositionen nicht mehr komplett - zumindest nicht in der Light-Variante. Ich hatte das versucht, es aber nicht vollends hinbekommen.

Zum Austausch der SVG-Boardicons hab ich jetzt was ähnliches gemacht, was im Prinzip auch funktioniert, bis auf die "Legende" unten auf dem Boardindex (da wo erklärt wird, was die Boardicons bedeuten) Diese Icons sollten deutlich kleiner dargestellt, haben aber die gleiche Größe. Dafür habe ich noch gar keine Lösung gefunden...und das schaut ziemlich bescheiden aus. ;)

Ich setze dir mal den gegenwärtigen Code rein, den ich meiner custom.css-Datei diesbezüglich habe, vielleicht kannst du  ja damit was anfangen:

.board_icon {
        display: block;
        float: left;
        margin-top: 5px;
}
.board_key:before {
        display: block;
        float: left;
        height: 24px;
        width: 30px;
        content: "";
}
.category_boards .board_icon, .board_key:before {
background-repeat: no-repeat;}

.i-board-redirect::before{content: url(../../images/_light/redirect.png);}
.i-board-new::before {content: url(../../images/_light/on.png);}
.i-board-sub::before {content: url(../../images/_light/on.png);}
.i-board-off::before {content: url(../../images/_light/off.png);}

#posting_icons .icon {
    vertical-align: middle;
    width: 3em;
}
#posting_icons .buttonlist {
    padding: 5px 5px 0 0;
}
  • Zuletzt geändert: 26. April 2018, 21:07 von Ruth

Antw.: Boardicons und dergleichen
Antwort #18
Erst mal danke für deine Antwort!

Ich habe in meiner custom.css den nachfolgenden Teil einfach mal mit deinem Code überschrieben (ab ca. Zeile 1932). Natürlich in dem dann das "light" gegen "besocial" ausgetauscht und meine neuen Icons auch in den Images-Ordner hochgeladen.
Leider hat sich im Forum aber nichts getan. Es werden noch die alten Icons angezeigt.
Ich sehe mir das morgen noch mal genauer an.

	.board_icon {
width: 25px;
height: 25px;
position: relative;
top: -5px;
}

.on_board, .on2_board {
background-position: -300px -14px;
}

.off_board {
background-position: -372px -14px;
}

.redirect_board {
background-position: -444px -14px;
}
ElkArte version: 1.1.3 / Theme: verändertes BeSocial!

  • Ruth
  • [*]
Antw.: Boardicons und dergleichen
Antwort #19
Wenn in deiner custom.css oder in der besocial.css so etwas enthalten ist, dann muss es noch auskommentiert werden:

.category_boards .board_icon, .board_key:before {
/*background-image: url(../../images/_light/board_icons.png);*/
        background-repeat: no-repeat;}
 /*
.on_board {background-position: 0 0;}
.on2_board {background-position: -72px 0;}
.off_board {background-position: -144px 0;}
.redirect_board {background-position: -216px 0;}
.new_some_board:before {background-position: -300px -14px;}
.new_none_board:before {background-position: -372px -14px;}
.new_redirect_board:before {background-position: -444px -14px;}*/

In der icons_svg.css befindet sich dies hier:

/* Board icons */
.i-board-redirect::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3ClinearGradient id='brdGrd' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%235FA77B'/%3E%3Cstop offset='35%25' stop-color='%23539442'/%3E%3Cstop offset='60%25' stop-color='%23539442'/%3E%3Cstop offset='100%25' stop-color='%235FA77B'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23brdGrd)' d='M24 20v-4H14v-4h10V8l6 6zm-2-2v8H12v6L0 26V0h22v10h-2V2H4l8 4v18h8v-6z'/%3E%3C/svg%3E");
}

.i-board-new::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3ClinearGradient id='brdGrd' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%235FA77B'/%3E%3Cstop offset='20%25' stop-color='%23539442'/%3E%3Cstop offset='80%25' stop-color='%23539442'/%3E%3Cstop offset='100%25' stop-color='%235FA77B'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23brdGrd)' d='M26 30l6-16H6L0 30zM4 12L0 30V4h9l4 4h13v4z'/%3E%3C/svg%3E");
}

.i-board-sub::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3ClinearGradient id='brdGrd' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%235FA77B'/%3E%3Cstop offset='25%25' stop-color='%23539442'/%3E%3Cstop offset='80%25' stop-color='%23539442'/%3E%3Cstop offset='100%25' stop-color='%235FA77B'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23brdGrd)' d='M18 8l-4-4H0v26h32V8H18zm-2 19l-7-7h5v-8h4v8h5l-7 7z'/%3E%3C/svg%3E");
}

.i-board-off::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23aeaeae' viewBox='0 0 32 32'%3E%3Cpath d='M26 30l6-16H6L0 30zM4 12L0 30V4h9l4 4h13v4z'/%3E%3C/svg%3E");
}

Das musste ich nicht auskommentieren, da es automatisch von meiner custom_light.css überschrieben wird. Aber vielleicht muss man das mit besocial, da die Dateien in unterschiedlicher Reihenfolge geladen werden.
  • Zuletzt geändert: 27. April 2018, 07:39 von Ruth

Antw.: Boardicons und dergleichen
Antwort #20
Einen Codeblock, wie den ersten, finde ich nicht. Nur etwas ähnliches, aber da haben meine Änderungsversuche bis jetzt noch nichts gebracht.

In der icons_svg.css habe ich die Zeilen auskommentiert. Das hat zumindest schon mal die alten Icons von der Indexseite entfernt.

Momentan probiere ich auch das hier aus. Das wäre eine alternative. Entweder kann ich damit dann viele verschiedene Icons einfügen, für jedes Board ein anderes, oder man kann damit ja auch nur dasselbe für alle nehmen:
https://www.elkarte.net/community/index.php?topic=4896.0
ElkArte version: 1.1.3 / Theme: verändertes BeSocial!