Liste mit Glyphe "#"

Amsterdam

Hallo Forum, ich würde gerne ein paar Verbesserungen an einigen Stellen meiner Seite vornehmen, z.B. habe ich gerade in meiner css bei Auflistung ein Bild von einem hashtag (#) als symbol.
Ich würde gerne das Bild wieder rauskicken und es mit dem echten Schriftzeichen # ersetzen. Wie ist der code? Ich kriege es so nicht hin

list-style-type: #

oder auch
list-style-type: (#)

oder auch
list-style-type: ("#")

dies alles funktioniert nicht.
[size=10]
Desweiteren habe ich zum Glück die Verlinkungen nun von Post-Tiles zu den Artikeln hin gekriegt. Allerdings tauchen sie immer doppelt auf oben im Browser. Das muss mit den Permalinks zusammen hängen. Ich habe diese von

Custom .../%pagename%
auf Custom ...../%pagename%/%postname%/ gestellt.

Kann ich auch /%pagename%postname%/ schreiben, oder wie muss ich das machen?

Dankeschönst für Euer Feedback, ich hoffe meine seite lädt gut?![/SIZE]

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Gsi

# als Zeichen geht nicht.

Guggsdu da:
http://de.selfhtml.org/css/eigenschaften/listen.htm

;-)

Melewo

Zitat von Gsi

# als Zeichen geht nicht.

Geht nicht mit HTML und CSS, mit JS lässt sich aber zumindest die Ausgabe in der Darstellung dahingehend beeinflussen, wobei jedoch eigentlich nur die Listenpunkte unterdrückt und nicht wirklich geändert werden.

HTML:

HTML

<ul>
  <li>Punkt 1</li>
  <li>Punkt 2</li>
  <li>Punkt 3</li>
  <li>Punkt 4</li>
  <li>Punkt 5</li>
  <li>Punkt 6</li>
  <li>Punkt 7</li>
</ul>

JS:

Code

<script type="text/javascript">
window.onload = function() {


    var doc = document.getElementsByTagName("li");
    document.getElementsByTagName("ul")[0].style.listStyle = "none";


    for (var i = 0; i < doc.length; i++) {
        var inhalt = doc[i].firstChild.nodeValue;
        doc[i].firstChild.data = "# " + inhalt;
    }
}
</script>

Alles anzeigen

Ausgabe:

Code

# Punkt 1
    # Punkt 2
    # Punkt 3
    # Punkt 4
    # Punkt 5
    # Punkt 6
    # Punkt 7

Amsterdam

Kann ich das echt nicht mit css hinkriegen?? Danke Malewo, was Du da vorschlägst ist also ein Javascript. Ich bin kein code mensch und daher weiß ich nicht, was ich da konkret machen muss, bzw. wo ich das einfügen muss - kannst du das noch dazu schreiben? Ich kann´s ja mal ausprobieren.

Melewo

Na ja, Tutorials veröffentliche am liebsten auf meinen eigenen Seiten und gebe in Foren nur Hinweise. Und das wäre ja mit den Kommentaren schon beinahe ausreichend für ein kleines Tutorial, wenn ich da jetzt noch viel erläutern würde.

HTML

<!DOCTYPE html>
<head>
<title>Testlisten</title>
</head>


<body>
<!-- Bei mehr als einer Liste, die gewünschte Liste über ID ansprechen. -->
<!-- Im Beispiel soll nur die zweite Liste angesprochen werden. -->
<ul id="Liste1">
  <li>Punkt 1</li>
  <li>Punkt 2</li>
  <li>Punkt 3</li>
  <li>Punkt 4</li>
  <li>Punkt 5</li>
</ul>


<ul id="Liste2">
  <li>Punkt 1</li>
  <li>Punkt 2</li>
  <li>Punkt 3</li>
  <li>Punkt 4</li>
  <li>Punkt 5</li>
</ul>




<script type="text/javascript">
"use strict";
/* 
Falls nicht bekannt, ob window.onload bereits von einem anderen 
Script verwendet wird, lieber addEventListener benutzen.
*/
if (window.addEventListener) {
    window.addEventListener("load", aendereListenpunkte, false);
}
else if (window.attachEvent) {
    window.attachEvent("onload", aendereListenpunkte);
}
function aendereListenpunkte() {


    var doc = document.getElementById("Liste2").getElementsByTagName("li");
    document.getElementById("Liste2").style.listStyle = "none";


    for (var i = 0; i < doc.length; i++) {
        var inhalt = doc[i].firstChild.nodeValue;
        doc[i].firstChild.data = "# " + inhalt;
    }
}
</script>
</body>
</html>

Alles anzeigen

Amsterdam

Danke für deine Großzügigkeit, Malewo, aber ich weiß immer noch nicht wohin damit von daher....

Melewo

Zitat von Amsterdam

von daher....

Du meinst, Du kennst/erkennst immer noch nicht das primitivste Grundgerüst einer Webseite?
Oder wie soll man das verstehen?

HTML

<!DOCTYPE html>
<head>
<title>Grundgerüst einer Webseite</title>
</head>


<body>
<h1>Grundgerüst einer Webseite</h1>
...
</body>
</html>

Alles anzeigen

Und Du weist immer noch nicht, wie man in so einem Grundgerüst eine CSS oder JS Datei einfügt?
Von daher solltest Du Dich als erstes ein wenig mit HTML und CSS auseinandersetzen, bevor Du ohne jegliches Grundwissen etwas verändern möchtest.

Melewo

So, noch einmal, damit es leichter verständlich ist. Wie eine JavaScript Datei in WP eingebunden wird, dürfte eigentlich klar sein. Entweder in die header.php oder in die footer.php und dabei möglichst in keiner neuen Datei, sondern in eine bereits vorhandene, die nur um ein neues Script erweitert wird.

Die zweite Möglichkeit besteht darin, JavaScript mit einer Funktion hinzuzufügen, zum Beispiel mit Hilfe eines Plugins.

Die dritte Möglichkeit und diese würde ich nutzen, falls ein JavaScript nur auf vereinzelten Seiten benötigt wird und deshalb nicht in allen Seiten im Footer zur Verfügung stehen muss, JS direkt in den Beiträgen einzubinden, in denen eine Funktion benötigt wird. Wie diese Einbindung erfolgt, wird eigentlich auf dieser Seite beschrieben

http://codex.wordpress.org/Using_Javascript

und unterscheidet sich somit kaum bis nicht von der Einbindung in HTML-Webseiten. Die Einbindung in header.php oder in der footer.php unterscheidet sich ebenfalls nicht von der Einbindung in HTML-Webseiten. Was einige zuweilen vergessen, was beim Browser ankommt, ist keine WP oder PHP Seite, was beim Browser ankommt, dass sollte immer einer validen HTML-Webseite entsprechen, gleich von welchem System die für die Auslieferung aufbereitet wird.

Bei der Einfügung in der Textansicht ist bei WP dennoch auf eine Kleinigkeit zu achten. Eine Zeile wie

Code

<script type="text/javascript" src="/mein-script.js"></script>

würde der Editor beim Wechsel zwischen den Ansichten wieder entfernen. WP scheint hier eine zugehörige Funktion zu erwarten, die eigentlich erst im Beitrag aufgerufen wird. Durch einen Kommentar lässt sich eine Funktion jedoch andeuten und WP entfernt die Zeile nicht mehr.

Nun als Beispiel ein Artikel, der drei Listen enthält, die an Stelle der Listenzeichen unterschiedliche Vorzeichen erhalten sollen. Eine Liste einzubinden, sollte dabei keine Probleme bereiten.

HTML

<ul id="liste_1">
    <li>11 Abs 1</li>
    <li>12 Abs 2</li>
    <li>13 Abs 3</li>
    <li>14 Abs 4</li>
    <li>15 Abs 5</li>
</ul>
<ul id="liste_2">
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
    <li>Punkt 4</li>
    <li>Punkt 5</li>
</ul>
<ul id="liste_3">
    <li>Vermerk 1</li>
    <li>Vermerk 2</li>
    <li>Vermerk 3</li>
    <li>Vermerk 4</li>
    <li>Vermerk 5</li>
</ul>

Alles anzeigen

Direkt unter der Liste kann nun das JavaScript eingebunden werden, welches selbstverständlich erreichbar sein muss und im Beispiel in der Datei listenpunkte.js gespeichert wurde. Wie bereits erwähnt, ein beliebiger Kommentar ist bei der Einbindung erforderlich, der Editor würde ansonsten die Zeile beim Wechsel wieder löschen.

HTML

<!-- Binde Listenpunkte ein -->
<script type="text/javascript" src="http://www.example.com/wordpress/intern/listenpunkte.js"></script>

Nun noch das eigentliche JavaScript, welches ohne Script-Tags in einer JS Datei (zum Beispiel listenpunkte.js) gespeichert wird.

Code

"use strict";


if (window.addEventListener) {
    window.addEventListener("load", aendereListenpunkte, false);
}
else if (window.attachEvent) {
    window.attachEvent("onload", aendereListenpunkte);
}
function aendereListenpunkte() {


    var liste_1 = document.getElementById("liste_1");
    var liste_2 = document.getElementById("liste_2");
    var liste_3 = document.getElementById("liste_3");


    var doc_1 = liste_1.getElementsByTagName("li");
    var doc_2 = liste_2.getElementsByTagName("li");
    var doc_3 = liste_3.getElementsByTagName("li");


    liste_1.style.listStyle  = "none";
    liste_2.style.listStyle  = "none";
    liste_3.style.listStyle  = "none";
    liste_1.style.marginLeft = "-15px";
    liste_2.style.marginLeft = "-15px";
    liste_3.style.marginLeft = "-15px";


    for (var ia = 0; ia < doc_1.length; ia++) {
        var inhalt_1 = doc_1[ia].firstChild.nodeValue;
        doc_1[ia].innerHTML = "&sect; " + inhalt_1;
    }
    for (var ib = 0; ib < doc_2.length; ib++) {
        var inhalt_2 = doc_2[ib].firstChild.nodeValue;
        doc_2[ib].firstChild.data = "# " + inhalt_2;
    }
    for (var ic = 0; ic < doc_3.length; ic++) {
        var inhalt_3 = doc_3[ic].firstChild.nodeValue;
        doc_3[ic].innerHTML = "&raquo; " + inhalt_3;
    }
}

Alles anzeigen

Das Script wurde in diesem Fall für drei Listen ausgelegt, die unterschiedliche Vorzeichen als Ersatz für die Listenzeichen erhalten sollen, kann aber beliebig gekürzt oder erweitert werden, um es den jeweiligen Erfordernissen anzupassen.
Wichtig, die Listen müssen sich über eine eindeutige ID ansprechen lassen. Die Verwendung von firstChild.data würde im ersten und dritten Beispiel & in & verwandeln und somit das Entity sichtbar ausgeben, ist aber in anderen Anwendungsfällen innerHTML gegebenenfalls vorzuziehen.

Ausgabe:

Code

§ 11 Abs 1
    § 12 Abs 2
    § 13 Abs 3
    § 14 Abs 4
    § 15 Abs 5


    # Punkt 1
    # Punkt 2
    # Punkt 3
    # Punkt 4
    # Punkt 5


    » Vermerk 1
    » Vermerk 2
    » Vermerk 3
    » Vermerk 4
    » Vermerk 5

Alles anzeigen

So Amsterdam, damit dürftest Du nun etwas anfangen können. Und wenn nicht, dann lerne erst einmal HTML.

Amsterdam

Danke (ich ignoriere mal den Unterton dieser Ausführungen).

Melewo

Zitat von Amsterdam

ich ignoriere mal den Unterton dieser Ausführungen

Darfst Du, ich ignoriere ja auch die hörbaren Untertöne.

Zitat von Amsterdam

Danke für deine Großzügigkeit

Doch um bei anderen Tönen zu bleiben, habe nun ein Tutorial fertig. Und ja, ich teste und schreibe daran einen vollen Tag und ab und an auch mehr als einen Tag. Etwas Arbeit ist da schon enthalten und es ist nun einmal etwas anderes, ob man ein Tutorial schreibt, einige Stunden testet und einige Stunden schreibt und ab und an von beiden auch ein paar Stunden mehr, oder ob man nur mal schnell eine Frage im Forum beantwortet:

http://www.coder-welten.com/listen-individ…ript-gestalten/

Wobei, ab und an habe ich mich auch schon in einzelne Fragen aus Foren verbissen, doch dann war das in allen Fällen etwas, was ich selbst unbedingt lernen wollte.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Liste mit Glyphe "#"

Jetzt mitmachen!