Während Sie das Aussehen des Audioplayers im Tumblr-Dashboard nicht ändern können, können Sie das Aussehen des Audioplayers in Ihrem eigenen Blog mit den Tumblr-Themen- und Anpassungsoptionen ändern. Sie benötigen etwas Erfahrung mit HTML und CSS, da Sie Ihr Tumblr-Theme ändern müssen, um die Größe des Audioplayers zu ändern. Wie der Audioplayer genau modifiziert wird, variiert etwas zwischen den Themes, da jeder Entwickler Tumblr-Themes anders schreibt. Die Tumblr-Variablen für Audio-Posts sind jedoch immer gleich, was das Auffinden des zu ändernden CSS vereinfacht.
Öffnen Sie die Anpassungsseite für Ihr Tumblr-Theme. Klicken Sie auf den Link "HTML bearbeiten". Diese befindet sich rechts neben der Miniaturansicht Ihres Tumblr-Themes, direkt unter dem Namen des Themas.
Drücken Sie "Strg-F", um eine Suche zu starten, und geben Sie "{block:audio}" ein. Dies führt Sie zu dem Teil des Themes, in dem der Ersteller die Einstellungen für Audio-Beiträge vorgenommen hat. Bestimmen Sie, welche CSS-Klasse der Entwickler verwendet hat, um den Audioplayer zu dimensionieren. Wenn sich der Beitrag beispielsweise in einem div-Element befindet, sehen Sie das Attribut 'class="audio-player", wobei "audio-player" der Name der Klasse ist.
Suchen Sie nach dem Klassennamen mit einem Punkt davor, z.B. ".Audio-Abspielgerät; Audio-Player; Musikabspielgerät". Der Punkt vor dem Namen gibt an, wie ein CSS-Stylesheet eine Klasse identifiziert. Diese Suche führt Sie zum rechten Teil des Stylesheets, um es zu bearbeiten. Es sieht ungefähr so aus, wobei die Klammern mit CSS ausgefüllt sind:
.Audio-Abspielgerät; Audio-Player; Musikabspielgerät {}
Einige Designs verwenden extern verlinkte Stylesheets, die Sie nicht bearbeiten können. Diese sehen so aus:
Wenn dies bei Ihrem Theme der Fall ist, fügen Sie dem Tag, das den Audioplayer modifiziert, das Attribut "style" hinzu. Auf diese Weise können Sie Ihr eigenes CSS hinzufügen, ohne das vorhandene Stylesheet zu ändern. Ein Tag kann sowohl ein "class"-Attribut als auch ein "style"-Attribut haben. Das würde ungefähr so aussehen:
Geben Sie die Eigenschaft "width:" entweder in die Klasse innerhalb des Stylesheets oder in das style-Attribut für das enthaltende Tag ein. Wenn das Stylesheet bereits eine "width"-Eigenschaft hat, ändern Sie diese; fügen Sie keinen zweiten hinzu. Sie können die Höhe auch mit der Eigenschaft "height" bestimmen. Wenn Sie das Stylesheet ändern, würde Ihr CSS etwa so aussehen:
.audio-player { width:100px; Höhe: 25px; }
Wenn Sie dem Tag die Änderungen am Attribut "style" hinzugefügt haben, lautet die Syntax:
Klicken Sie auf "Vorschau aktualisieren", um zu sehen, wie sich diese Änderungen auf Ihr Design auswirken. Designs können komplex sein und Änderungen werden möglicherweise nicht so angezeigt, wie Sie es erwarten. Es kann mehrere Versuche dauern, bis der Audioplayer genau so ist, wie Sie es möchten.
Klicken Sie auf "Speichern", wenn Sie bereit sind, die Themenänderungen in Ihrem Blog zu übernehmen.
Tipps
Wenn Sie Musik von einer anderen Quelle posten, z. B. einer Soundcloud-Wiedergabeliste, können Sie die Größe des Audioplayers in diesem Code ändern. es wird nicht durch Ihre Tumblr-Einstellungen geändert.
Warnungen
Dieser Artikel bezieht sich auf Designoptionen, die im Januar 2014 verfügbar waren; Optionen können sich mit zukünftigen Updates der Tumblr-Website ändern.
