fwe77 wrote:Also, ich habe eine Grafik (Sprechblase) gebastelt und darin sollten dann die entsprechende Zahl an Kommentaren stehen. Aber ich denke Bilder sagen manchmal mehr als Worte
Geht so
Aber gut, damit kann man anfangen.
Vor allem ist mir gerade selbst aufgefallen, dass ich gestern vollkommen umsonst schon mal angedacht habe, wo man überall die doppelte Kommentaranzeige aus dem Code nehmen muss - muss man gar nicht, man schaltet einfach in den theme options von BP die Anzeige der Kommentare im Eintragsfuß ab, fertig.
Das haben wir gut gemacht in BP.
Zunächst mal willst Du Dir die Zahl der Kommentare "extrahieren". Das ist sehr, sehr simpel:
Code: Select all
<div class="no-of-comments">{$entry.comments}</div>
(Die class kann man latürnich auch anders nennen. Wichtig ist nur, dass dieses div [welches ebensogut ein span oder p sein könnte, ganz nach Laune] eine class zugewiesen bekommt. Keine id.)
Aber das gibt uns
nur die Zahl - man will ja aber, dass das Ganze verlinkt wird:
Code: Select all
<div class="no-of-comments">
<a href="{$entry.link}#comments">{$entry.comments}</a>
</div>
Schon schön. Aber was ist, wenn man mal einen Artikel mit deaktivierten Kommentaren posten will? Dann soll da ja nix stehen. Geht auch:
Code: Select all
{if $entry.has_comments}
<div class="no-of-comments">
<a href="{$entry.link}#comments">{$entry.comments}</a>
</div>
{/if}
(Kommentare, die sich in Popup-Fenstern öffnen, spare ich mir - das benutzt ohnehin kein Mensch mehr.)
So. Und wohin nun damit?
Vor den eigentlichen Eintragstext (in der entries.tpl von BP in Zeile, Momentchen, 135), nämlich so:
Code: Select all
<div class="entry-content serendipity_entry_body">
{if $entry.has_comments}
<div class="no-of-comments">
<a href="{$entry.link}#comments">{$entry.comments}</a>
</div>
{/if}
{$entry.body}
[...]
Nun müssen wir natürlich den ganzen Kladderadatsch noch nach rechts rüberzurren. Wo man das im CSS genau macht, hängt ein wenig davon ab, wie man sein BP sonst so umgebaut hat. Hat man ein eigenes Colorset angelegt, gehört es in die $COLORSET_style.css. Wenn nicht, ist es am besten in der user.css aufgehoben, die man ggf. noch anlegen und aktivieren müsste, wenn man bislang keine benutzt hat. In beiden Fällen ist übrigens das CSS (aber
nur das CSS!) updatesicher verpackt.
Das oben erzeugte div muss auf die Seite gefloated werden, wo es stehen soll, in Deinem Fall nach rechts:
Code: Select all
.no-of-comments {
background: url('{TEMPLATE_PATH}img/$BILD} top left no-repeat;
float: right; /* oder eben left, wenn die Box links stehen soll */
height: $HÖHE_IN_PX;
margin: 0 0 5px 5px; /* bzw. 0 5px 5px 0 wenn die Box links steht */
width: $BREITE_IN_PX;
}
margin muss ggf. angepasst werden, da muss jeder für sich die besten Werte finden. Evtl. möchte man hier lieber Werte in em oder %, kommt ein wenig auf das Drumherum an.
$BILD ersetzt Du durch den Namen der Bilddatei, welche Du nach /templates/bulletproof/img/ kopiert hast, also beispielsweise sprechblase.png oder so. Auch die ist vor Updates sicher.
$HÖHE_IN_PX und $BREITE_IN_PX gibt die Dimensionen der div-Box an - Breite sollte bei gefloateten Elemente idealerweise immer angegeben werden, Höhe macht hier durchaus auch Sinn. Beides würde ich den Dimensionen des Hintergrundbildes anpassen.
Gehen wir mal davon aus, dass Du eine Datei sprechblase.png hast, die 40x40 Pixel groß ist, dann sieht das so aus:
Code: Select all
.no-of-comments {
background: url('{TEMPLATE_PATH}img/sprechblase.png} top left no-repeat;
float: right;
height: 40px;
margin: 0 0 5px 5px;
width: 40px;
}
Nun könnte es noch sein, dass man eigentlichen Link"text" (also die Zahl der Kommentare) formatieren will, das ginge dann über:
Code: Select all
.no-of-comments a {
color: #f00;
font-size: 1.25em;
text-decoration: none;
}
Oder wie auch immer es zum Template passt - natürlich kann man auch noch die Pseudoklassen für links (a:hover, a:visited etc. pp.) ausgestalten bzw. sollte man eigentlich auch - wobei es bei solchen Links, die grafisch unterlegt werden, oft eher störend ist. Aber ansonsten wendet BP hier halt die Standardformatierungen für Links an, das kann ins Auge gehen. Möglich, dass hier das eine oder andere !important nötig wird, um Formatierungen zu überschreiben.
Puh.
Nun zum Haken: Das Ganze ist ungetestet, sprich: Ich habe es nicht praktisch ausprobiert, schon gar nicht cross-browser. Das darfst Du machen
Es könnte zudem sein, dass dieser Code Probleme macht, wenn im Eintragstext ebenfalls gefloatete Bilder etc. pp. stehen, schwer abzuschätzen. Aber im Groben und Ganzen
müsste es so gehen.
YL
