Wie "Contributors" stylen?

Habe in meinem Testpodcast die Anzeige der “Contributors” zum Laufen gebracht: http://blogtui.cogneon.de/?podcast=testpodcast-1. Im Gegensatz zu anderen Podcasts (z.B. Freakshow: http://freakshow.fm/fs144-desperate-mode) sieht die Tabelle aber nicht so hübsch aus und es fehlen die Links zu Twitter, Web, Amazon etc.

Was ist hier noch zu tun?

1 Like

Bei Menü Episode im Untermenü Contributors können dolche sachen wie amazonwishlist eingetragen werden

1 Like

Danke für den Tipp, aber bei mir gibt es dort weder Amazon, noch Twitter, noch App.net … Muss man diese Profilfelder noch irgendwo konfigurieren?

1 Like

Nein, du findest so etwas wie Amazone, PayPal, Auphonic Donations in den Contributers Settings unter Donations.
Unter Social sämtliche Netzwerke.

1 Like

Danke! War mein Fehler, hatte in den Settings vergessen “Social & Donations” zu aktivieren. Jetzt taucht es auf.

1 Like

Wie die Links eingefügt werden, wurde ja bereits geklärt. Wie man das Erscheinungsbild der Tabelle ändert, leider noch nicht.
Genau da stehe ich aktuell auch an. Bei mir sieht die Contributors Auflistung noch nicht wirklich ansprechend aus. Die beiden rechten Spalten sind leer und könnten demnach entfernt werden. Dafür könnten dann die Links/Icons mehr in die Breite verteilt werden, was auch der Darstellung auf mobilen Geräten (hochkant) dient. Doch wie?

In der Auflistung der Podlove Shortcodes lassen sich (auf mein Problem kaum passende) Parameter finden. Wo und wie dieser verändert werden können, ist mir nicht klar.

Vielen Dank im Voraus für eure Hilfe!

1 Like

Ich würde sagen, da musst du mit CSS ran. Im Wordpress Backend unter Design -> Custom CSS kannst du du das Aussehen von allem, was irgendwie über CSS ansteuerbar ist ( = alles :smile:) anpassen.

Hier ein paar Beispiele aus meinem Style.

/* Contributors: Keine Spaltentrenner */
table.podlove-contributors-table td {
  border-left: 0px;
  border-right: 0px;
}

/* Contributors: Tabellenhintergrund */
table.podlove-contributors-table th, td {
  background: white; /* Fallback */
  background: rgba(255, 255, 255, .1);
  border: 0px;
  padding: 0px;
}

Um die Namen von CSS-Klassen herauszufinden, nutzt du am besten gängige Web Developer Tools wie einen im Browser schon eingebauten Inspector oder 3rd Party Plugins, wie z.B. Firebug. Damit kannst du mit der Maus über deine Seite fahren und dir anzeigen lassen, welche Eigenschaften die Regionen darunter besitzen.

2 Like

Ansonsten gibt es noch den http://customplayer.webgeplapper.de mit dem das geht.

Siehe dazu auch den zugehörigen Thread

3 Like

Danke @pommes für den Hinweis. Ich werde das mal ausprobieren und sehen, ob das so tut, wie ich will.

@Sven: Ich versuche die Contributors zu verändern, nicht den Player.

Edit: Habe mir das nun ansehen wollen. Unter Design gibt es keinen Menüpunkt Custom CSS. Dafür einen Editor fürs Theme. Da wiederum gibt’s die style.css Datei. Darin habe ich aber nichts in der Art gefunden. Via “Plugins” lässt sich ein weiterer Editor finden. Dort sind bzgl. Podlove Podcast Publisher einige Dateien (meist .php) hinterlegt. Sollte ich die von @pommes genannte Stelle da suchen?

1 Like

Bei mir schaut das so aus. Evtl ist das je nach Theme unterschiedlich. Glaub ich aber eigentlich nicht.

Danke für die Rückmeldung. Das sieht bei mir definitiv anders aus:

Aber halb so wild. Wichtiger ist die Frage, welche CSS Datei hier verändert wird. Wenn ich weiss, wie sie heisst, kann ich sie bei mir suchen und anpassen. Oder - falls möglich - eine erstellen.

Na die wirds auch tun. Es kann halt sein, dass die bei einem Theme Update überschrieben wird. Also solltest du dir deine Anpassungen vorher sichern. Ob es funktioniert kannst du ja einfach testen, indem du eins meiner Beispiele testweise da reinpackst.

In der Art wirst du da auch nichts drin finden.
Wenn du genau das Stylesheet suchst, in dem jetzt bereits Contributor Styles enthalten sind, musst du tatsächlich im Podlove Plugin schaun. Da bin ich aber der falsche, der dir da weiterhelfen kann. Falls die style.css jedoch später geladen wird, kannst du die Styles ja darin überschreiben.

Kennt niemand ein Standardvorgehen, wenn ein Theme keine custom css-Datei bietet?

Ich empfehle https://wordpress.org/plugins/simple-custom-css/

1 Like

Vielen Dank @pommes für die Klärung. Habe den Code nun in die style.css (im Child Theme) kopiert und (fast) alles scheint zu klappen.

Das 6. Social Icon pro Contributor wird in der Tabelle immer eine zweite Zeile beginnen. Da ist rechts wohl zwangsläufig Platz reserviert für (von mir nicht gebrauchte) Amazon-Wunschlisten, Flattr-Buttons etc…

Ein kleiner Schönheitsfehler bleibt:
Am rechten Rand fehlt der Rahmen. Hier live zu sehen. Wenn wer dafür noch eine Lösung hätte, wäre die Baustelle hier endlich beendet und ich überglücklich. :smiley:

Edit:
Auch nach längerem Pröbeln und Vergleichen ist mir noch nicht klar, warum am linken Rand noch immer eine Trennlinie eingeblendet wird. Weiter verstehe ich auch nicht, weshalb bei mir die Avatare rund ausgeschnitten sind. Hier wäre ich für jegliche Hilfe dankbar.

Edit 2:
Ich muss das Thema leider wieder aufwärmen. Ich habe noch immer nicht herausgefunden, weshalb bei mir die Avatare der Contributors rund ausgeschnitten sind. Wo kann ich das ändern, damit auch bei mir die Avatare - wie überall sonst auch - quadratisch dargestellt werden?

Das mit den Avataren rührt von Twenty Fifteen.

Folgende Stelle in der style.css ist dafür verantwortlich:

/**
* 14.0 Media
*/

.site .avatar {
	border-radius: 50%;
}
1 Like

Danke @Sven für die rasche Antwort! Hat geholfen!
Den “border-radius” einfach auf 0% stellen, dann hat man quadratische Avatare.

Was mich auch interessieren würde: Wie kann man die Contributoren so verlinken, dass man auf sie klicken kann und dann alle Episoden erhält, wo diese/r Contributor noch auftaucht?

Entweder baust Du Dir eine Gästeliste auf der alle Gästinnen auftauchen (dazu hätte ich hier was fertiges in Github, das so aussieht) oder Du baust für jede Contributorin eine eigene Seite, auf der Du aufbauend auf diesem Code die Episoden mit ihr ausgibst. Hier mal ein Beispiel für den Aufruf einer einen Contributorin, allerdings ohne deren Episoden. Von hier aus solltest Du es selbst schaffen. :slight_smile:

Dafür musst du in Wordpress im Podlove-Menü auf Templates klicken und das entsprechende Template bearbeiten oder ein neues anlegen.

Ich habe mir folgendes Template gebaut, um einerseits auf einer Übersichtsseite alle Episoden mit einem Contributor anzuzeigen und andererseits bei den einzelnen Episoden alle anderen Episoden mit dem Contributor anzuzeigen.

{% set option = {
    scope: 'podcast'
}|merge(option) %}

{# other contributor episodes except trailers #}
{% if option.scope == 'episode' %}
    {% set thisepisode = episode.post.ID %} {# using Wordpress post id as unique identifier #}
{% else %}
    {% set thisepisode = 0 %}
{% endif %}
{% for episode in contributor.episodes|filter(episode => episode.type != "trailer" and episode.post.ID != thisepisode) %}
    {% if loop.first %}    
        <p class="contributor-episodes">
            {% if option.scope == 'episode' %}
	            {% if loop.length == 1 %}There's one other episode
	            {% else %}Other episodes 
	            {% endif -%}
	        {% else %}
	            Episodes
	        {% endif %}
            with {{ contributor.nickname }}:</p>
        <ul class="contributor-episodes episodes-list">
    {% endif %}
	<li><a href="{{ episode.url }}">{{ episode.title }}</a></li>
    {% if loop.last %}    
        </ul>
    {% endif %}
{% endfor %}

Auf der Episoden-Seite kannst du das dann einbinden mit:
[podlove-template template="name deines templates" scope="episode"]
Auf einer Übersichtsseite scope weglassen oder z.B. auf podcast setzen.
Oder du bindest es in ein anderes Template ein mit:
{{ include("name deines templates") }}