Quelltext der Seite IEView Tutorial

Aus Deskmodder Wiki
← IEView Tutorial
Du bist aus dem folgenden Grund nicht berechtigt, diese Seite zu bearbeiten:
Diese Aktion ist auf Benutzer beschränkt, die einer der Gruppen „Administratoren, Wiki“ angehören.
Du kannst den Quelltext dieser Seite betrachten und kopieren.
[[Kategorie:Miranda]]

IEView ist ein Nachrichtenfenster Plugin für Miranda , mit dem man das Nachrichtenfenster seinen Bedürfnissen entsprechend anpassen kann. Das kann man entweder mit vorgefertigten Templates erreichen oder man kann sich mit ein bisschen Css und Html Kenntnissen ein Template selber erstellen.


==Benötigte Programme ==


&raquo; [http://sourceforge.net/project/showfiles.php?group_id=94142&package_id=100076/ Miranda  ]  

&raquo; [http://miranda.or.at/miranda-general/tabsrmm-20-and-clist-nicer-08-released// Tabsrmm]

&raquo; [http://addons.miranda-im.org/details.php?action=viewfile&id=1788 IEView]


Und wenn es geht, bitte immer die aktuellste Version nutzen. 

==Installation== 

1.Installiert Miranda exe oder entpackt die Miranda zip datei in C:\Programme (oder an ein anderen Beliebigen Ort eurer Wahl). 

2.Nun geht ihr in den Miranda Plugin Ordner (C:\Programme\Miranda \IMplugins) und packt die Tabsrmm (_unicode).dll, tabsrmm_icon.dll und 
die IEView.dll in den Ordner. 

3.Startet nun Miranda und kontrolliert im Reiter "Plugins" ob das Tabsrmm- und IEView Plugin aktiviert ist. 
(3.1 Wenn die beiden Plugins noch nicht aktiv sind, bitte einen Haken vor den Plugins setzten und Miranda  neustarten.)

[[Bild:Mir1.jpg]]

4. In den Einstellungen von Miranda ( Rechtsklick auf das Miranda Systray Symbol -> Einstellungen ) setzt Ihr nun bei Nachrichtensitzung -> Nachrichtenfenster -> Nachrichtenverlauf -> " IEView als Standard verwenden" einen hacken. 

[[Bild:Mir2.PNG]]

5.Ladet nun eure Templates (*.ivt , die css datei ist in der *.ivt datei normaler 
weise schon verlinkt/eingebunden). IEView unterstützt seit der Version 1.0.3.0 auch bbcodes.

[[Bild:Mir3.PNG]]

[[Bild:Mir4.PNG]]

6. Smileys: 
IEView hat seine eigene Smiley Engine.Daher kann es zu Problemen mit dem Plugin SmileyAdd kommen. Seit Version 1.0.1.7 von IEView 
unterstütz es auch den Smiley Button, dadurch wird SmileyAdd überflüssig und kann Deaktiviert oder gelöscht werden. *.asl datein werden unterstützt.


[[Bild:Mir5.PNG]]

Wenn alles geklappt hat kann man die Smileys über den Button sehen:

[[Bild:Mir6.PNG]]

==Spezielle Tags==
 
 %base% - base URL 
 %name% - contact's name or user's name (depends on context) 
 %time% - event's time 
 %date% - event's date 
 %text% - event's text 
 %cid% - contact's ID or user's ID (depends on context) 
 %avatar% - link to contact's picture file or user's picure file (depends on context) 
 %avatarIn% - link to contact's picture 
 %avatarOut% - link to user's picture 
 %nameIn% - contact's name 
 %nameOut% - users's name 
 %proto% 

und 
<pre>
 <!--HTMLStart--> 

 <!--MessageIn--> 

 <!--hMessageIn--> 

 <!--MessageOut--> 

 <!--hMessageOut--> 

 <!--File--> 

 <!--hFile--> 

 <!--URL--> 

 <!--hURL--> 

 <!--Status--> 

 <!--hStatus--> 

 <!--MessageInGroupStart--> 

 <!--MessageInGroupInner--> 

 <!--MessageInGroupEnd--> 

 <!--hMessageInGroupStart--> 

 <!--hMessageInGroupInner--> 

 <!--hMessageInGroupEnd--> 

 <!--MessageOutGroupStart--> 

 <!--MessageOutGroupInner--> 

 <!--MessageOutGroupEnd--> 

 <!--hMessageOutGroupStart--> 

 <!--hMessageOutGroupInner--> 

 <!--hMessageOutGroupEnd-->

</pre>

==Vorhandene Templates verändern ==

Ich möchte aber darauf eingehen, wie man kleine Veränderungen an vorhandenen Templates vornehmen kann. Denn meistens gefällt das Template vom Design her schon, aber die Farben oder Grafiken gefallen nicht. Ich selber, habe jetzt als Basis zur Erklärung das IEView Template [http://addons.miranda-im.org/details.php?action=viewfile&id=2437 Dynamic von Torti] genommen. Auch wenn es ein super schönes Template ist, passt es einfach nicht zu meinem momentanen Desktop Style.

Bei mir sieht das Template am Anfang so wie die obere Grafik aus und soll am Ende so wie die untere Grafik aussehen.

[[Bild:Ieview1.jpg|left|thumb|200px|Bitte klicken für Vollansicht]]  
<br style="clear:both" />
[[Bild:Ieview2.jpg|left|thumb|200px|Bitte klicken für Vollansicht]] 

<br style="clear:both" />
===Hintergrund des Nachrichtenfensters ändern ===

Als erstes möchte ich als Basis den Hintergrund des Templates ändern. Dafür gehe ich zu der Klasse <span style="color:blue">'''#body'''</span>. Dort suche ich dann den Eintrag:<span style="color:blue">background: #ECECEC url(img/back.gif) repeat fixed;</span> Wie zu sehen ist, wurde in diesem Template schon ein Hintergrund eingestellt. Die Hintergrund Datei liegt in dem Template Ordner in einem extra Ordner der img heißt.

[[Bild:Ieview3.jpg|left|thumb|200px|Bitte klicken für Vollansicht]]  
<br style="clear:both" />

In diesem img Ordner liegt auch die Hintergrund Datei die back.gif heißt. Nun packe ich meine Grafik Datei die ich nutzen möchte in den img Ordner in der auch schon die back.gif liegt.

Nun kann man sich überlegen ob man die neue Datei in back.gif umbenennt oder ob man einfach den Image Namen in der Css Datei ändert. Ich mache das zweite, da ich eine jpg und keine gif Datei nutze. Das sieht dann in der Css so aus: <span style="color:blue">background: #ECECEC url(img/d.jpg) repeat fixed;.</span>

===Schriftart und Schriftfarbe verändern . So wie das generelle Vorhandensein des Scrollbalken ändern===

Das ändern der Schriftart und der Schriftfarbe ist eigentlich ganz einfach. Ich selber nutze am liebsten die Schriftart Calibri. Also ändere ich immer noch in der <span style="color:blue">'''#body'''</span> Klasse diesen Eintrag:<span style="color:blue">font-family: 'Trebuchet MS';</span> in <span style="color:blue">font-family: 'Calibri';</span>. Das heißt, ich ändere einfach nur den Namen der Schriftart.

[[Bild:Ieview4.jpg|left|thumb|200px|Bitte klicken für Vollansicht]]  
<br style="clear:both" />

Genauso einfach geht es auch mit der Farbe der Schrift. Da ändere ich den Eintrag:<span style="color:blue">color: #EBEBE4;</span> in <span style="color:blue">color: #000;</span>. Wer nicht ganz genau weiß wie die html Farbwerte von zb seinem Wallpaper sind, kann das ohne Probleme mit einem Colorpicker herausfinden. Die Schriftartgröße könnt ihr über diesen Eintrag: <span style="color:blue">font-size: 8pt;</span> ändern. Einfach die Größe eintragen die Ihr wünscht. Ich habe jetzt die 10 pt genommen, weil es für meine Augen besser ist. 

Viele Templates haben die Eigenart an sich, das von Anfang an der Scrollbalken zu sehen ist. Nur wozu? Mir reicht es aber doch, das er da ist wenn ich auch erst genug geschrieben habe um zu scrollen. Und das geht auch ganz einfach. Ich füge einfach <span style="color:blue">overflow:auto;</span> in die Body Klassen ein. Das auto bewirkt, das der Scrollbalken erst erscheint wenn auch etwas zum Scrollen da ist. Eine Übersicht über die Overflow Werte findet Ihr zb auf [http://www.css4you.de/overflow.html Css4you.de].

===Die Hintergrundfarbe und Rahmenfarbe der Nachrichten Boxen ändern.===

Bei mir sind die Einträge in der <span style="color:blue">'''#box'''</span> Klasse vorhanden. Dort habe ich einmal den Eintrag: <span style="color:blue">border: 1px solid #99CDD8;</span> für die Rahmenfarbe. Ich möchte die Rahmen aber in der Farbe weiß haben, daher ändere ich den Eintrag in: <span style="color:blue">border: 1px solid #fff;</span>. 

[[Bild:Ieview5.jpg|left|thumb|200px|Bitte klicken für Vollansicht]]  
<br style="clear:both" />

Genauso mache ich es mit dem Hintergrund, aus <span style="color:blue">background: #3D3D38;</span> wird bei mir <span style="color:blue">background: #fff;</span>. Das war es dann auch schon mit der Hintergrundfarbe und den Rahmen. Mehr Informationen über die Border Werte findest du [http://www.css4you.de/borderproperty.html hier.]

===Hintergrundfarbe der Header ändern, Grafik im Header ändern und die Schriftfarbe- und Größe ändern.===

Für die Header ( Da wo der Nickname, die Uhrzeit ect steht ) gibt es mehrere Klassen.

<span style="color:blue">#in-head </span>» Eingehende Nachricht
<span style="color:blue">#out-head </span>» Ausgehende Nachricht
<span style="color:blue">#file-head </span>» Eingehende Datensendung
<span style="color:blue">#url-head </span>» Eingehende Urlsendung
<span style="color:blue">#status-head </span>» Status Wechsel
<span style="color:blue">#in-ghead </span>» Eingehende Nachricht ( Gruppierung )
<span style="color:blue">#out-ghead </span>» Ausgehende Nachricht ( Gruppierung )

Alle diese Klassen kann man verändern wie man mag. Ich zb habe einfach nur die Hintergrundfarbe, die Images links neben den Nicknames geändert und die Font Eigenschaften geändert.

[[Bild:Ieview6.jpg|left|thumb|200px|Bitte klicken für Vollansicht]]  
<br style="clear:both" />

In der Vollansicht ist zu sehen was ich geändert habe.

===Eigenschaften der Url Darstellung ändern.===

Um das aussehen der Links zu ändern, nehme ich mir die Klassen <span style="color:blue">a</span> und <span style="color:blue">a.hover</span> vor. Das sind jetzt die, die in dem Dynamic Template vorhanden sind. Es gibt aber auch noch andere Link Klassen, wie a:link, a:visited, a:active.

[[Bild:Ieview7.jpg|left|thumb|200px|Bitte klicken für Vollansicht]]  
<br style="clear:both" />

So das war es denn. Jetzt habe ich das Template so verändert wie ich es gerne haben wollte.

Ganz wichtig, probiert einfach aus. Ändert einfach mal die Farben, Padding Einstellungen ect. So seht Ihr was sich am Template verändert. Solange Ihr nur an der Css Datei herumwerkelt, könnt Ihr nichts an Miranda kaputt machen.

Da ich dieses Tutorial für Anfänger gemacht habe, gehe ich natürlich nicht auf das Einfügen von Avataren usw ein. Wer noch weiterführende Fragen hat, kann diese gerne [http://www.deskmodder.de im Forum] stellen.

==Hier gibt es Templates und Emoticons==

&raquo;  [http://browse.deviantart.com/customization/skins/im/miranda/?order=5 Deviantart.com]

&raquo;  [http://addons.miranda-im.org/ Miranda-im.org]


Ich wünsche Euch jedenfalls viel Spaß mit dem Tutorial und hoffe, das es doch etwas hilfreich ist.
Zurück zur Seite IEView Tutorial.
Abgerufen von „https://www.deskmodder.de/wiki/index.php?title=IEView_Tutorial“
No categories
Quelltext der Seite IEView Tutorial

Deskmodder.de unterstützen

Korrekturhinweis?

Windows 11 Themen

Windows 10 Themen

Unsere Deskmodder.de News-App

Aktuelle Inhalte

Sonstiges

Werkzeuge
