Bildgrafiken als Überschrift

Man sieht es immer öfter, es werden als Überschriften exotische
Schriftarten verwendet. Grafische Überschriften mit TYPO3...

...Die Frage lautet nur, wie macht man das?

Es ist ganz einfach, um in TYPO3 Bilder als Überschrift zu verwenden
bedarf nur wenig Typoscript.

Ich gehe jetzt keine genaue erklärung zum TS ein, ich habe
marks gesetzt dort könnt ihr lesen was, etwas bedeutet.

Es gibt ein paar dinge die Ihr beachten müsst.

  1. Ihr brauch die Schriftart als font Datei
  2. Legt einen Ordner am Server an wo die Font Datei ist
  3. Hintergrundfarben anpassen, am besten "learningByDoing
Typoscript code (klick mich)

#############################################
# H1 CONFIGURATION                          #
#############################################

tempHeader = COA

tempHeader {

  10 = IMG_RESOURCE

  10.stdWrap.wrap = <h1 class="imageheader" style="background-image: url('|')">

  10.file = GIFBUILDER

  10.file {



     10 = TEXT

     10 {

              text =

         fontSize = 50            #Schriftgröße

         offset = 5,18             #Abstand der Schrift, einzug, und höhe

         fontColor = #26383D    #Farbe...

         niceText = 1

     }

     

     20 = TEXT

     20 {

         text.current = 1

         fontSize = 50

         fontFile = fileadmin/fonts/SCHRIFT.ttf   #Pfad zum Font


         offset = 0,40

         fontColor = #ffffff

         niceText = 0

     }

     

     XY = 620,160        #Breite und höhe des Tags
   

     transparentColor = #000

     backColor = #000

  }

  

  20 = TEXT

  20.current = 1
  20.wrap = |</h1>


}

lib.stdheader.10.1 < tempHeader #10.1, der 2te einser steht für Layout 1!

Step II

Das Tolle an den Bildern ist, der normale Text den Ihr auswählt /
reinschreibt verschwindet nicht, das bedeutet Ihr habt TEXT und
Bild noch vorhanden.

Damit sich normaler Text und Bild nicht überlappen, fügt ihr
einfach den gewünschten H2/H3 etc. was auch immer Code
ein.

CSS Code (klick mich)

h2.imageheader {

   overflow: hidden;

   height: 26px;

   text-indent: 999em;

   white-space: nowrap;

   background-repeat: no-repeat;

}

CSS Datei uploaden, und Fertig!

Wichtig ist, das Ihr für jede weitere überschrift ledeglich
die letzte Zeile ändern müsst, für Layout 2 ändert Ihr einfach
im Typoscript 10.2

Mit der Schriftgröße und OFFset müsst Ihr Spielen, jede Schrift
ist anders.

Das wars soweit, ich wünsche euch viel Erfolg!