Typo3 fT3BLOG Seite anlegen

Typo3 | typo3 hello world Seite anlegen

fT3BLOG Seite anlegen

Seite erstellen

WEB > List || Neue Seiten erstellen > Verweis drauf klicken und auf "New TYPO3 site" ziehen

• Allgemein:
  • Namen vergeben neue Hauptseite
• Verhalten
  • Sonstige
    • Als Anfang der Website benutzen aktivieren

Domäne

1. WEB > List || neue Hauptseite auswählen || Neuen Datensatz erstellen > Systemdatensätze > Domäne
2. Domäne angeben!

SYSTEM

für System relevante Konfigurationen legen wir einen eigenen Ordner an!

WEB > List || neue Hauptseite auswählen || Neuen Datensatz erstellen > Neue Seite erstellen > Seite (in)

• Typ: Ordner
• Seitentitel: fT3BLOG_SYSTEM
• Dokument speichern und schließen

felogin konfigurieren

Website-Benutzer und Benutzergruppe anlegen

Benutzerordner

WEB > List || fT3BLOG_SYSTEM auswählen || Neuen Datensatz erstellen > Neue Seite erstellen > Seite (in)

• Typ: Ordner
• Seitentitel: fT3BLOG_SYSTEM
• Dokument speichern und schließen

Benutzergruppe

WEB > List || fT3BLOG_SYSTEM auswählen || Neuen Datensatz erstellen > Systemdatensätze > Website-Benutzergruppe

• Allgemein
  • Gruppenname: fT3BLOG_grp
• Optionen
  • An Domäne binden: domain.tld
• Dokument speichern und schließen

Benutzer

WEB > List || fT3BLOG_SYSTEM auswählen || Neuen Datensatz erstellen > Systemdatensätze > Website-Benutzer

• Allgemein
  • Benutzername: fT3BLOG_user
  • Passwort: Passwort
  • Benutzergruppe: fT3BLOG_grp auswählen
• Dokument speichern und schließen

Blog Container erstellen

Achtung hier für muss Typo3_Extensions#t3blog t3blog installiert sein!

WEB > List || fT3BLOG_MENU_TOP auswählen || Neuen Datensatz erstellen > Neue Seite erstellen > Seite (in)

• Allgemein
  • Typ: Standard
  • Seitentitel: fT3BLOG Blog
• Erscheinungsbild
  • Benutze als Container
    • Enthält Erweiterung: T3Blog
• Dokument speichern und schließen

nun sollte unter T3BLOG > Beiträge || der neue fT3BLOG Blog zur Auswahl stehen || im Zweifel Cache löschen, ausloggen und wieder einloggen!

folgendes Widget sollte auch eingefügt werden, wäre aber noch disskussion würdig ob es schön ist

WEB > List || fT3BLOG Blog auswählen || Neuen Datensatz erstellen > Neues Inhaltselement erstellen > Zum Aufrufen des Assistenten  hier klicken!
* 1: Typ des Inhaltselements auswählen: Blog Widget Auswahl auswählen
* 2: Position auswählen: in Spalte Normal platzieren
* Reiter Plugin:
** General Setup
*** Blog Widget: Blog list -- die Blog list Anzeige
*** Widget starting point: fT3BLOG Blog Seite auswählen
* Dokument speichern und schließen

Content Elemente erstellen

fT3BLOG_MENU_TOP erstellen

WEB > List || neue Hauptseite auswählen || Neuen Datensatz erstellen > Neue Seite erstellen > Seite (in)

• Typ: Verweis
• Seitentitel: fT3BLOG_MENU_TOP
• Verweismodus: Erste Unterseite der aktuellen Seite
• Dokument speichern und schließen

Blog Seite Seite erstellen

Achtung hier für muss Typo3_Extensions#t3blog t3blog installiert sein!

WEB > List || fT3BLOG_MENU_TOP auswählen || Neuen Datensatz erstellen > Neue Seite erstellen > Seite (in)

• Allgemein
  • Typ: Standard
  • Seitentitel: Blog
• Dokument speichern und schließen

WEB > List || fT3BLOG Blog auswählen || Neuen Datensatz erstellen > Neues Inhaltselement erstellen > Zum Aufrufen des Assistenten hier klicken!

• 1: Typ des Inhaltselements auswählen: Blog Widget Auswahl auswählen
• 2: Position auswählen: in Spalte Normal platzieren
• Reiter Plugin:
  • General Setup
    • Blog Widget: Blog list -- die Blog list Anzeige
    • Widget starting point: fT3BLOG Blog Seite auswählen
• Dokument speichern und schließen

Kontakt Unterseiten erstellen

WEB > List || fT3BLOG_MENU_TOP auswählen || Neuen Datensatz erstellen > Neue Seite erstellen > Seite (in)

• Typ: Standard
• Seitentitel: Kontakt
• Dokument speichern und schließen

WEB > List || Kontakt auswählen || Neuen Datensatz erstellen > Neues Inhaltselement erstellen > Seiteninhalt

• Überschrift: Kontakt
• Text: Kontaktdaten angeben .....
• Dokument speichern und schließen

... nach Belieben weitere Unterseiten anlegen

fT3BLOG_MENU_FOOTER erstellen

analog wie fT3BLOG_MENU_TOP, hier statt Kontakt vllt eine Impressum Seite erstellen

Sitemap Unterseiten erstellen

WEB > List || fT3BLOG_MENU_FOOTER auswählen || Neuen Datensatz erstellen > Neue Seite erstellen > Seite (in)

• Typ: Standard
• Seitentitel: Sitemap
• Dokument speichern und schließen

WEB > List || Sitemap auswählen || Neuen Datensatz erstellen > Neues Inhaltselement erstellen > Zum Aufrufen des Assistenten hier klicken!

• 1: Typ des Inhaltselements auswählen: > Spezielle Elemente > Sitemap
• 2: Position auswählen: in Spalte Normal platzieren
• Allgemein
  • Überschrift: Sitemap
• Dokument speichern und schließen

fT3BLOG_CONTENT_LEFT erstellen

WEB > List || neue Hauptseite auswählen || Neuen Datensatz erstellen > Neue Seite erstellen > Seite (in)

• Allgemein
  • Typ: Standard
  • Seitentitel: fT3BLOG_CONTENT_LEFT
• Dokument speichern und schließen

WEB > List || fT3BLOG_CONTENT_LEFT auswählen || Neuen Datensatz erstellen > Neues Inhaltselement erstellen > Zum Aufrufen des Assistenten hier klicken!

• 1: Typ des Inhaltselements auswählen: Blog Widget Auswahl auswählen
• 2: Position auswählen: in Spalte Normal platzieren
• Reiter Plugin:
  • General Setup
    • Blog Widget: Archive -- die Überschriften im Archiv
    • Widget starting point: fT3BLOG Blog Seite auswählen
• Dokument speichern und schließen

fT3BLOG_CONTENT_RIGHT erstellen

WEB > List || neue Hauptseite auswählen || Neuen Datensatz erstellen > Neue Seite erstellen > Seite (in)

• Allgemein
  • Typ: Standard
  • Seitentitel: fT3BLOG_CONTENT_LEFT
• Dokument speichern und schließen

Anmeldeformular mit felogin

Anmeldeformular mit felogin

WEB > List || fT3BLOG_CONTENT_RIGHT auswählen || Neuen Datensatz erstellen > Neues Inhaltselement erstellen > Zum Aufrufen des Assistenten hier klicken!

• 1: Typ des Inhaltselements auswählen: Formulare > Anmeldeformular
• Reiter Plugin:
  • Speicherort Benutzer: user Ordner auswählen
  • Abmeldeformular nach erfolgreicher Anmeldung zeigen
• weitere Optionen
• Dokument speichern und schließen

Blog Widget Tagcloud

WEB > List || fT3BLOG_CONTENT_RIGHT auswählen || Neuen Datensatz erstellen > Neues Inhaltselement erstellen > Zum Aufrufen des Assistenten hier klicken!

• 1: Typ des Inhaltselements auswählen: Blog Widget Auswahl auswählen
• 2: Position auswählen: in Spalte Normal platzieren
• Reiter Plugin:
  • General Setup
    • Blog Widget: Tag cloud -- die Überschriften im Archiv
    • Widget starting point: fT3BLOG Blog Seite auswählen
• Dokument speichern und schließen

nach Belieben können weitere Blog Widget's hier platziert werden

Template

WEB > List || neue Hauptseite auswählen || Neuen Datensatz erstellen > Systemdatensätze > Template

Reiter Allgemein

• Template-Titel vergeben
• Konstanten:

fT3BLOG_CONTENT_LEFT_ID = 
fT3BLOG_CONTENT_RIGHT_ID = 

fT3BLOG_MENU_TOP_ID = 
fT3BLOG_MENU_FOOTER_ID = 

fT3BLOG_OWNER = Frederick d. Maus
fT3BLOG_DESCRIPTION = Bilder von Frederick
fT3BLOG_URL = http://domail.tld
fT3BLOG_HEADER = <a id=top href=""><img src="fileadmin/pfad/zum/logo.jpg" class="logo" alt="" /></a>
fT3BLOG_FILE_CSS = fileadmin/pfad/zum/fT3BLOG.css
fT3BLOG_FILE_HTML = fileadmin/pfad/zum/fT3BLOG.html 
fT3BLOG_FILE_ICO = fileadmin/pfad/zum/favicon.ico

• Setup:

<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/typoscript/xhtml_setup_06.ts">
#############################################
# MENU
lib.fT3BLOG_MENU_TOP = HMENU
lib.fT3BLOG_MENU_TOP {
	special = directory
	special.value = {$fT3BLOG_MENU_TOP_ID} 
	wrap = < ul > |</ul >
	1 = TMENU
	1.NO = 1
	1.NO.linkWrap =  | |*| | | 
}
lib.fT3BLOG_MENU_FOOTER = HMENU
lib.fT3BLOG_MENU_FOOTER {
	special = directory
	special.value = {$fT3BLOG_MENU_FOOTER_ID} 
	wrap = < ul > |</ul >
	1 = TMENU
	1.NO = 1
	1.NO.linkWrap =  | |*| | | 
}

#############################################

# Um ein Seitenobjekt zu erzeugen, wird die Variable page erzeugt und mit dem Typoscript-Objekttyp PAGE belegt. 
page = PAGE
page.typeNum = 0
page.stylesheet = {$fT3BLOG_FILE_CSS}
page.shortcutIcon = {$fT3BLOG_FILE_ICO}

page.meta.AUTHOR = {$fT3BLOG_OWNER} 
page.meta.DESCRIPTION = {$fT3BLOG_DESCRIPTION}
page.meta.KEYWORDS.field = keywords
page.meta.KEYWORDS.ifEmpty = nometa

#Indizieren der Webseite aktivieren z.B. für Suche
page.config.index_enable = 1
page.config.index_metatags = 1

# Für die Speicherposition 10 der Variable page wird der Typoscript-Objekttyp TEMPLATE zugewiesen. 
page.10 = TEMPLATE

page.10.marks.fT3BLOG_CONTENT_LEFT = CONTENT
page.10.marks.fT3BLOG_CONTENT_LEFT {
	table = tt_content
	select.pidInList = {$fT3BLOG_CONTENT_LEFT_ID}
}

# Damit wird dem Marker fT3BLOG_CONTENT_MIDDLE der Seiteninhalt aus der Hauptspalte (Normal) zugewiesen alternativ styles.content.getLeft, styles.content.getRight.
page.10.marks.fT3BLOG_CONTENT_MIDDLE < styles.content.get

page.10.marks.fT3BLOG_CONTENT_RIGHT = CONTENT
page.10.marks.fT3BLOG_CONTENT_RIGHT {
	table = tt_content
	select.pidInList = {$fT3BLOG_CONTENT_RIGHT_ID}
}

page.10.marks.fT3BLOG_MENU_TOP < lib.fT3BLOG_MENU_TOP
page.10.marks.SEARCHTOP < lib.search    
page.10.marks.fT3BLOG_MENU_FOOTER < lib.fT3BLOG_MENU_FOOTER

page.10 {
	# Dem Template wird ein Typoscript-Objekttyp FILE zugewiesen. 
	template = FILE
	# In dieser Zeile wird angegeben, wo sich die HTML-Templatedatei befindet. 
	template.file = {$fT3BLOG_FILE_HTML}
	# Mit dieser Anweisung wird Typo3 nur die Bereiche rendern, die sich innerhalb des Subparts DOKUMENT befinden. 
	# f3BLOG.html <!-- ###DOKUMENT### begin --> hier wird gerendert <!-- ###DOKUMENT### end -->
	workOnSubpart = DOKUMENT
	marks {
		fT3BLOG_HEADER = TEXT
		fT3BLOG_HEADER.value = {$fT3BLOG_HEADER}
	} # Ende Marks
} # Ende Page

# config {
	config.linkVars = L
	config.sys_language_uid = 0
	config.language = de
	config.locale_all = de_DE.utf-8
	config.htmlTag_langKey = DE
	config.cache_period = 10
	config.baseURL = {$fT3BLOG_URL}
	config.index_externals = 1
	config.index_metatags = 1
# }

#############################################
# Plugins
page.headerData.10 < plugin.tx_kestats_pi1

plugin.tx_indexedsearch._DEFAULT_PI_VARS.lang = 0

plugin.tx_t3blog_pi2.tagCloud {
	maxColor = #000000
	minColor = #555555
	renderingAlgorithm = lin
	minFontSize = 10
	maxFontSize = 30
	sortBy = tag	
}
plugin.tx_t3blog_pi2.tagCloud.item.wrap = |  

Quellen:

• Erstellung von Templates in Typo3

Reiter Optionen

• Wurzelebene aktivieren

Reiter Enthält

• Statische Templates Einschließen
  • CSS Styled Content (css_styled_content)
  •  !nicht notwendig! T3BLOG - main configuration (t3blog)
  •  !nicht notwendig! T3BOG blog2page - output to the page (t3blog)
  • T3BLOG functionnalitys on your website (t3blog) --- für den T3Blog
  • Default TS (form) --- für manche Formulare z.B. Inhaltselement Typ Formular
  •  !nicht notwendig! Static Info tables (static_info_tables)
  • SmoothGallery (rgsmoothgallery) --- Extension
  • Page browser (pagebrowse)

HTML Template f3BLOG.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="language" content="de">
	</head>
	<body>
        	<!-- ###DOKUMENT### begin -->
		<div id="site">
			<div id="fT3BLOG_HEADER">###fT3BLOG_HEADER###</div>
			<div id="fT3BLOG_UNDERHEADER"> 
				<div id="fT3BLOG_MENU_TOP">###fT3BLOG_MENU_TOP###</div>
				<div id="topsearch">###SEARCH###</div>
			</div>
			<div id="main">
				<div id="fT3BLOG_CONTENT_LEFT">###fT3BLOG_CONTENT_LEFT###</div>
				<!--TYPO3SEARCH_begin-->
					<div id="fT3BLOG_CONTENT_MIDDLE">###fT3BLOG_CONTENT_MIDDLE###</div>
				<!--TYPO3SEARCH_end-->
				<div id="fT3BLOG_CONTENT_RIGHT">###fT3BLOG_CONTENT_RIGHT###</div>
						
			</div>
			<div id="fT3BLOG_MENU_FOOTER">###fT3BLOG_MENU_FOOTER###</div>
		</div>
		<!-- ###DOKUMENT### end -->
	</body>
</html>

CSS f3BLOG.css

body {
	margin: 0;		padding: 0;
	color: #000000;		background-color: #cccccc;
	font-size: 12px;	font-family: Arial,sans-serif;
}

div#site {
	background-color: white;
	border: 1px solid #177272;
	margin-left: auto;		margin-right: auto;
	height: auto;
   	clear: both;
  	width: 980px;
}
div#site > div#fT3BLOG_HEADER {
	border-bottom: 2px solid #177272;
	background-color: #ffffff;
	width: 980px;		height: 120px;
	text-align: right;
}

div#site > div#fT3BLOG_UNDERHEADER {
  border-bottom: 2px solid #177272;
  background-color: #ffffff;
  width: 980px;
  height: 24px;
}

div#site > div#fT3BLOG_UNDERHEADER > div#fT3BLOG_MENU_TOP{
  width: 730px;
  float:left;
}

div#site > div#fT3BLOG_UNDERHEADER > div#fT3BLOG_MENU_TOP > ul {
  margin:0px;
  padding-top:5px;
  padding-left:17px;         /* Innenabstand */
  font-size: 12px;
  font-weight:bold;
}

div#site > div#fT3BLOG_UNDERHEADER > div#topsearch{
  padding-left: 805px;
}
.searchbox-sword {
  width:135px;
}




div#site > div#main {
  width:980px;  /* width:1150px; */
  float:left;
  background-color: white;
}

div#site > div#main > div#fT3BLOG_CONTENT_LEFT {
  padding:0px;
  margin:0px;
  width:170px;
  min-height:800px;
  color: black;
  float:left;
  text-align:left;
  min-height:400px;
  background-color: white;
}

div#site > div#main > div#fT3BLOG_CONTENT_LEFT * div#archive > h3 {
	display:none
}
div#site > div#main > div#fT3BLOG_CONTENT_LEFT * div#archive > ul.archive {
	padding-left:10px;
	list-style-type: none;
	list-style-position:inside;
} 
div#site > div#main > div#fT3BLOG_CONTENT_LEFT * div#archive > li.year, ul.months, li.month, ul.entries, li.blogentry{
	padding-left:0px;
	list-style-position:inside;
	list-style-type: none;
}
div#site > div#main > div#fT3BLOG_CONTENT_LEFT * div#archive > ul.archive > li.year{
	font-size: 14px;
	font-weight:bold;
}
div#site > div#main > div#fT3BLOG_CONTENT_LEFT * div#archive > ul.archive > li.year > ul.months > li.month {
	padding-top:5px;
	font-size: 12px;
	font-style:italic;
}
div#site > div#main > div#fT3BLOG_CONTENT_LEFT * div#archive > ul.archive > li.year > ul.months > li.month > ul.entries {
	padding-top:5px;
}
div#site > div#main > div#fT3BLOG_CONTENT_LEFT * div#archive > ul.archive > li.year > ul.months > li.month > ul.entries > li.blogentry{
	padding-bottom:5px;
	font-weight:normal;
	font-style:normal;
}
div#site > div#main > div#fT3BLOG_CONTENT_LEFT * div#archive > ul.archive  * a.toggle, span.postnum{
	display:none
}


div#site > div#main > div#fT3BLOG_CONTENT_MIDDLE {
  width:590px;
  min-height:800px;
  float:left;
  color: black;
  padding-left: 10px;
  padding-right: 10px;
  border-right:1px solid #CCCCCC;
  border-left:1px solid #CCCCCC;
}
div#site > div#main > div#fT3BLOG_CONTENT_MIDDLE * div.blogList > div.item > div.itemTop, div.itemNav{
	display:none;
}
div#site > div#main > div#fT3BLOG_CONTENT_MIDDLE * div.blogList > div.item > div.itemBody{
	padding-bottom:40px;
}

div#site > div#main > div#fT3BLOG_CONTENT_RIGHT {
  width:170px;
  min-height:800px;
  padding-left: 5px;
  padding-right: 5px;
  color: black;
  float:right;
  text-align:left;
  background-color: white;
}

div#site > div#main > div#fT3BLOG_CONTENT_RIGHT * div.tagCloud > ul {
	padding-left:0px;
	list-style-position:inside;
	list-style-type: none;
}
div#site > div#main > div#fT3BLOG_CONTENT_RIGHT * div.tagCloud > ul > li {
	padding-left:0px;
	list-style-position:inside;

}



div#site > div#main > div#content3 h1 {
  font-family: Arial,sans-serif;
  font-size: 12px;
}


div#site > div#fT3BLOG_MENU_FOOTER {
 float:left;
  border-top: 2px solid #177272;
  margin: 0 auto;
  padding: 5px 0 0;
  clear: both;
  font-size: 12px;
  background-color: white;
  width: 980px;
  height: 24px;
  text-align: center;
  font-weight:bold;
}

div#site > div#fT3BLOG_MENU_FOOTER > ul {
  margin:0px;
  padding-top:5px;
}

a{
  color:#000000;
  text-decoration:none;
}
a:hover, a:active{
  color:#777777;
}
a#active{
  color:#990000;
}


/**
 *  Extensions
 */

/* felogin */
div.tx-felogin-pi1 > form > fieldset {
  width:120px;
  border:0px;
  padding:0px;
  margin:0px;
}
div.tx-felogin-pi1 > form > fieldset > div > input {
  width:135px;
}


/* weather plugin */
div.tx-mvyahooweather-pi1 > div {
  width:120px;
}

/* tagcloud */
div.tagcloud {
  background-color: white;
  margin:10px auto;
  padding:0px;
  border:0px;

}
div.tagcloud a {
  color:#000000;
}