im header Social networks integrieren wie

ich würde gerne icons von den Facebook, Twitter, paypal, mail und RSS oben rechts unter die suche gringen. wenn man dan einen Icon drückt sollte das gewünschte in einem neuen fenster aufgehen.

weiss einer welche datei ich bearbeiten muss, wo ich sie genau finde. und ein paar tips zur einbindung?

vielen dank Pixelfreak

vielen dank

wo finde ich das template. gibt ja einige header.

pixelfreak

habe jetzt eine tpl angelegt mit:

<div class="additionalHeaderContent">


<a href="https://twitter.com/#!/rom_cuz_com"><img src="./images/icons/twitter.png" alt="twitter" /></a>


</div>

dann habe ich in der templates/header.tpl

<div id="header">
{include file=additionalHeaderContent}

{* --- quick search controls ---

und unter style/erweitert/erweiterte style deklarationen/ganz am schluss

/* Headercontent */


.additionalHeaderContent {
height: 60px;
position: absolute;
right: 0;
top: 40px;
width: 468px;
}

aber bekomme nix angezeigt. ich mache bestimmt was falsch. ich habe mir die header.tpl im ftp gezogen und die neue und die barbeitete wieder zurück. weil ich ACP will er noch
Templategruppen-Name und
Templategruppen-Verzeichnis wissen. aber eh ich was kaputt mache gehe ich lieber diesen weg

Pixel

und so funktioniert es:


- über FTP die html/temlates/header.tpl herunterladen und mit einem Texteditor öffnen (Notepad++)
- direkt unter <div id="header">

{include file=header_twitter}{include file=header_facebook}{include file=header_email}{include file=header_rss}{include file=header_paypal}

einsetzen

- danach für jedes einzelne div eine .tpl im Texteditor Schreiben und mit dem jeweiligen Namen der als div angegeben wurde mit der codierung UTF8 abspeichern. z.B. bei twitter heißt die .tpl header_twitter.tpl

<div class="header_twitter"><a href="https://twitter.com/xxxxxxxxxxxxxxx"><img src="./images/icons/twitter.png" alt="twitter" /></a></div>

<div class="header_rss"><a href="http://www.rom-cuz.com/index.php?page=ThreadsFeed&format=rss2"><img src="./images/icons/rss.png" alt="rss" /></a></div>

<div class="header_paypal"><a href="https://www.paypal.com/xxxxxxxxxxxxxxxxxxxxxxxx"><img src="./images/icons/paypal.png" alt="paypal" /></a></div>

<div class="header_facebook"><a href="http://www.facebook.com/xxxxxxxxxxxxxxxxxxxxxxxxx"><img src="./images/icons/facebook.png" alt="facebook" /></a></div>

<div class="header_email"><a href="mailto:xxxxxxxxxxxxx.com"><img src="./images/icons/email.png" alt="email" /></a></div>

- wenn das ganze in einem nuen Browserfenster geöffnet werden soll müsst ihr nur target="_blank" einsetzen. z.B.

<div class="header_facebook"><a href="http://www.facebook.com/xxxxxxxxxxxxxxxxxxxxxxxxx" target="_blank"><img src="./images/icons/facebook.png" alt="facebook" /></a></div>

- jetzt schiebt ihr die: header.tpl, header_email.tpl, header_facebook.tpl, header_paypal.tpl, header_rss.tpl, header_twitter.tpl mit dem FTP wieder in html/temlates rein.


- ich habe mir einen Ordner im FTP angelegt: html/Images/icons hier liegen meine icons die ihr unten auf dem Bild sehen könnt. Wenn ihr die Icons wo anders ablegt müsst ihr den pfad natürlich anpassen.


- jetzt öffnet ihr im ACP -> Darstellung -> Stile -> euren Stil -> Erweitert -> Zusätzliche CSS-Deklarationen -> und ganz am ende der letzten Deklaration tragt ihr folgendes ein:

/* Headercontent twitter */
.header_twitter {	height: 60px;	position: absolute;	right: 0;	top: 65px;	width: 218px;}
/* Headercontent facebook*/
.header_facebook {	height: 60px;	position: absolute;	right: 0;	top: 65px;	width: 178px;}
/* Headercontent email*/
.header_email {	height: 60px;	position: absolute;	right: 0;	top: 65px;	width: 138px;}
/* Headercontent rss*/
.header_rss {	height: 60px;	position: absolute;	right: 0;	top: 65px;	width: 98px;}
/* Headercontent paypal*/
.header_paypal {	height: 60px;	position: absolute;	right: 0;	top: 65px;	width: 58px;}

- danach schaut ihr wie es im Board aussieht und passt noch die genaue Position der Icons an.

P.S. habe es hin bekommen . vielen vielen dank Tom

Pixelfreak

ich habe es einzeln gemacht um besseren überblick zu behalten. für einen profi wie dich kein problem. aber für mich zur verständniss besser so. habe oben mal beschrieben wie ich es gemacht habe.

danke Tom