Icon bei den Plug-In Überschriften einfügen

[Tymoon]

Hallo zusammen,
ist es schwierig bei den Überschriften der Seitenleisten-PlugIns jeweils ein unterschiedliches Icon voran einzufügen?

In welcher Datei und an welcher Stelle muss das dann ergänzt werden?
Danke
Tymoon

[garvinhicking]

Hi!

ist es schwierig bei den Überschriften der Seitenleisten-PlugIns jeweils ein unterschiedliches Icon voran einzufügen?

Nein, das kannst Du sogar shcon per CSS regeln:

Code: Select all

.serendipity_plugin_categories {
 background-image: url(/path/to/image.gif);
}

Wenn Du es per HTML machen willst kannst du die templatedatei "sidebars.tpl" anpassen und dort <img>s einfpügen.

Viele Grüße,
Garvin

[yellowled]

ist es schwierig bei den Überschriften der Seitenleisten-PlugIns jeweils ein unterschiedliches Icon voran einzufügen?

»Schwierig« ist natürlich relativ

Man kann das über CSS machen, also über die Datei style.css des verwendeten Themes. So ziemlich jede Überschrift in einem Seitenleistenplugin sollte über eine individuelle class ansprechbar sein. Für das Plugin, welches die Syndication-Plugins darstellt wäre das z.B.:

Code: Select all

<h3 class="serendipitySideBarTitle serendipity_syndication_plugin">

Die individuelle class wäre in dem Fall serendipity_syndication_plugin. Über diese kann man nun der Überschrift eine Hintergrundgrafik, also das gewünschte Icon zuweisen. Nehmen wir mal an, diese liegt als syndplug.gif im Unterverzeichnis img des Templateverzeichnisses, dann ginge das so (in der style.css des verwendeten Templates):

Code: Select all

h3.serendipity_syndication_plugin {
    background-image: url({TEMPLATE_PATH}img/syndplug.gif) left center no-repeat;
    padding-left: 10px;
}

Der padding-left-Wert sorgt dafür, dass die Überschrift vom Icon weggeschoben wird, dieser Wert sollte in etwa der Breite des verwendeten Icons entsprechen - ganz genau kann man das natürlich erst am konkreten Beispiel entscheiden.

YL

[Tymoon]

danke euch beiden erstmal.
Irgendwie habe ich aber noch einen Denkfehler. Die Änderung über das CSS war auch mein erster Gedanke, aber es sind ja die wenigsten Plugins in der CSS des Templates. Background-Color, etc. könnte ich darüber ja regeln, da dies ein übergeordnetes DIV ist. Der Inhalt liegt aber im nächsten DIV.
Der Style dafür muss ja dann irgendwo anders liegen. Jedes Plugin soll ja eine eigenes Icon bekommen, daher muss es wohl über HTML gehen. Dann dachte ich mir, dass es über die entsprechende Plugin-PHP-Datei geregelt werden müsste, aber bei dem Inhalt verstehe ich nur Bahnhof.

Wenn Du es per HTML machen willst kannst du die templatedatei "sidebars.tpl" anpassen und dort <img>s einfpügen.

Wo versteckt sich die Datei denn?
Irgendwie habe ich Tomaten auf den Augen, denn ich finde sie nicht.
Mir geht es konkret um das Template Carl02. von Carl.
Vielen Dank
Ty

[garvinhicking]

Hi Tymoon!

Jedes Plugin hat seinen eigenen, individuellen .container_serendipity_plugin_XXX über den Du jedes Plugin einzeln ansprechen kannst. Jedenfalls wenn Du ein Theme benutzt was von dem Standard s9y abgeleitet ist. Das WordPress-Theme bietet es z.B. nicht - das Carl02 Template kenne ich leider selber nicht.

Wo versteckt sich die Datei denn?

Entweder liegt die sidebars.tpl im Verzeichnis deines Ordners, wenn sie darin nicht ist wird die aus templates/default/ genommen. Die kannst du in deinen Ordner rüberkopieren und dort anpassen.

HTH,
Garvin

[Tymoon]

@garvin...danke für deine Mühe, aber ich peile es immer noch nicht so wirklich.
Also es wird bei der Ausgabe für jedes Plugin ein container_serendipity_plugin_xxx erzeugt.
Die Sidebar.tpl habe ich jetzt auch gefunden in templates/default, aber dort kann ich doch auch nicht individuell etwas einsetzen:

Code: Select all

{if $is_raw_mode}
<div id="serendipity{$pluginside}SideBar">
{/if}
{foreach from=$plugindata item=item}
    <div class="serendipitySideBarItem container_{$item.class}">
        {if $item.title != ""}<h3 class="serendipitySideBarTitle {$item.class}">{$item.title}</h3>{/if}
        <div class="serendipitySideBarContent">{$item.content}</div>
    </div>
{/foreach}
{if $is_raw_mode}
</div>
{/if}

In welcher Datei kann ich das <img> denn entsprechend einbinden?

[garvinhicking]

Hi!

Genau in dieser .tpl date. Aber wie gesagt, Du kannst das alles doch bereits per CSS machen?!

In der sidebars.tpl z.B.:

Code: Select all

{if $is_raw_mode}
<div id="serendipity{$pluginside}SideBar">
{/if}
{foreach from=$plugindata item=item}
    <div class="serendipitySideBarItem container_{$item.class}">
        {if $item.title != ""}<h3 class="serendipitySideBarTitle {$item.class}"><img src="/templates/img/category_icon_{$item.class}" />{$item.title}</h3>{/if}
        <div class="serendipitySideBarContent">{$item.content}</div>
    </div>
{/foreach}
{if $is_raw_mode}
</div>
{/if}

Grüße,
Garvin

[yellowled]

Irgendwie habe ich aber noch einen Denkfehler. Die Änderung über das CSS war auch mein erster Gedanke, aber es sind ja die wenigsten Plugins in der CSS des Templates. Background-Color, etc. könnte ich darüber ja regeln, da dies ein übergeordnetes DIV ist. Der Inhalt liegt aber im nächsten DIV. Der Style dafür muss ja dann irgendwo anders liegen. Jedes Plugin soll ja eine eigenes Icon bekommen, daher muss es wohl über HTML gehen.

Okay, mal sehen:

1. Das Icon wolltest Du jeweils der Überschrift eines Seitenleistenplugins zuweisen. Also ist der Inhalt egal.
2. Jedes Seitenleistenplugin hat nicht nur seine eigene Containerclass, es hat auch seine eigene Überschrift.
3. Wenn eine .container_serendipity_plugin_XXX noch nicht im style.css des betreffenden Templates steht, kannst Du sie doch einfach hinzufügen.

Verwirrung entwirrt? Dann nimmt die CSS-Codebeispiele und probiere es so einfach mal aus ...

YL

[Tymoon]

danke für eure viele Arbeit, aber ich glaube ich bin zu doof für sowas und lasse es lieber.

1. ist mir immer noch nicht klar wie das über CSS gelöst werden kann. Ich dachte man kann nur Hintergrundbilder darüber regeln, jedoch gibt es bereits ein Hintergrundbild bei SidebarTitle und bei mir wäre es ja ein Vordergrundbild vor dem Text.

2.

<div class="serendipitySideBarItem container_{$item.class}">
{if $item.title != ""}<h3 class="serendipitySideBarTitle {$item.class}"><img src="/templates/img/category_icon_{$item.class}" />{$item.title}</h3>{/if}

das erscheint mir irgendwie einleuchtend, aber ich verstehe immer noch nicht, woher die Ausgabe jetzt weiß, dass z.B. beim quicksearch_plugin jetzt das Bild Lupe.gif erscheinen soll. Muss das denn nicht im quicksearch_plugin hinterlegt werden, dass Lupe.gif das entsprechenden category_icon ist?

Ich habe wohl das ganze System noch nicht begriffen, woher sich welche Variable und warum den richtigen Inhalt zieht. Ich glaub ich muss mir das mal von jemandem live erklären lassen.
LG
Tymoon