Photoshop -> Joomla ?

G

GFX-Händchen

Erfahrenes Mitglied
Hi,

ich habe mir ein Design erstellt welches ich in Joomla 1.5 benutzen möchte:), doch ich komm damit nicht klar!:(

Muss man das Design welches gesliced wurde noch manuell anpassen?:suspekt:
Meine Grafiken werden nicht entsprechend im CMS angezeigt da (wohl) kein floating sondern absolute Positionen verwendet werden.

Mein Buch Joomla! 1.5 von Addison-Wesley bringt mich dabei auch nicht wirklich weiter!:rolleyes:
Dort wird zwar gezeigt wie man ein eigenes Template erstellt, aber es werden dabei keine Grafiken (<img.....) verwendet.

Würde mich über schnelle Hilfe freuen.:)
 
Hallo,

da du schon was länger hier angemeldet bist, wirst du sicherlich wissen, dass Push-Postings hier nicht erlaubt sind.

Du eröffnest das Thema gestern Abend um 20:50 Uhr. Da sind noch kaum User online. Dann fragst du heute erneut nach um 10:33 Uhr. Um diese Uhrzeit sind auch noch kaum User online. Da auch die Nacht dazwischen war, waren innerhalb dieser Zeiträume noch weniger User online. Also hab bitte noch etwas Geduld.

Jetzt zum Thema

Wie hast du die Grafiken in dein Template eingefügt?

MFG

Sascha
 
Ich hab in PS mein Design erstellt und mittels "Für Web speichern" abgespeichert - mit den Einstellungen, dass ich danach Div's und CSS-Code habe.;)
Den CSS-Code habe ich dann aus der index.html (welche ich in index.php umbenannt habe) exportiert in eine template.css Datei.

Danach habe ich die xml-Datei per Hand geschrieben und eine thumbnail.png angelegt.

Soweit half mir das Buch ja.:)


Jetzt wird es aber nicht mehr korrekt angezeigt sondern die geslicten Grafiken sind jetzt untereinander anstatt so wie es sein soll.:(

Mehr habe ich noch nicht gemacht, da mir das Buch nicht weiter half.:-(
 
Hab jetzt nochmal eben "Für Web speichern" müssen da ich im Code ja schopn rumgespielt hatte (weils nicht ging/geht).:rolleyes:

Das ist jetzt der Code den ich von PS erhalte!
Ich habe jetzt nur den CSS-Code exportiert!

html:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>blablubb_test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/template.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color:#FFFFFF;">
<!-- Save for Web Slices (blablubb-test.psd) -->
<div id="Tabelle_01">
	<div id="test-01_">
		<img id="test_01" src="http://www.tutorials.de/forum/images/test_01.png" width="1024" height="210" alt="" />
	</div>

	<div id="test-02_">
		<img id="test_02" src="http://www.tutorials.de/forum/images/test_02.png" width="30" height="558" alt="" />
	</div>
	<div id="test-03_">
		<img id="test_03" src="http://www.tutorials.de/forum/images/test_03.png" width="81" height="48" alt="" />
	</div>
	<div id="test-04_">
		<img id="test_04" src="http://www.tutorials.de/forum/images/test_04.png" width="104" height="48" alt="" />
	</div>

	<div id="test-05_">
		<img id="test_05" src="http://www.tutorials.de/forum/images/test_05.png" width="95" height="48" alt="" />
	</div>
	<div id="test-06_">
		<img id="test_06" src="http://www.tutorials.de/forum/images/test_06.png" width="99" height="48" alt="" />
	</div>
	<div id="test-07_">
		<img id="test_07" src="http://www.tutorials.de/forum/images/test_07.png" width="121" height="48" alt="" />
	</div>

	<div id="test-08_">
		<img id="test_08" src="http://www.tutorials.de/forum/images/test_08.png" width="494" height="17" alt="" />
	</div>
	<div id="test-09_">
		<img id="test_09" src="http://www.tutorials.de/forum/images/test_09.png" width="60" height="49" alt="" />
	</div>
	<div id="test-10_">
		<img id="test_10" src="http://www.tutorials.de/forum/images/test_10.png" width="396" height="495" alt="" />
	</div>

	<div id="test-11_">
		<img id="test_11" src="http://www.tutorials.de/forum/images/test_11.png" width="38" height="541" alt="" />
	</div>
	<div id="test-12_">
		<img id="test_12" src="http://www.tutorials.de/forum/images/test_12.png" width="500" height="18" alt="" />
	</div>
	<div id="test-13_">
		<img id="test_13" src="http://www.tutorials.de/forum/images/test_13.png" width="149" height="492" alt="" />
	</div>

	<div id="test-14_">
		<img id="test_14" src="http://www.tutorials.de/forum/images/test_14.png" width="374" height="446" alt="" />
	</div>
	<div id="test-15_">
		<img id="test_15" src="http://www.tutorials.de/forum/images/test_15.png" width="37" height="492" alt="" />
	</div>
	<div id="test-16_">
		<img id="test_16" src="http://www.tutorials.de/forum/images/test_16.png" width="374" height="46" alt="" />
	</div>

	<div id="test-17_">
		<img id="test_17" src="http://www.tutorials.de/forum/images/test_17.png" width="396" height="46" alt="" />
	</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>

css:
Code: 
#Tabelle_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:768px;
}

#test-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:1024px;
	height:210px;
}

#test-02_ {
	position:absolute;
	left:0px;
	top:210px;
	width:30px;
	height:558px;
}

#test-03_ {
	position:absolute;
	left:30px;
	top:210px;
	width:81px;
	height:48px;
}

#test-04_ {
	position:absolute;
	left:111px;
	top:210px;
	width:104px;
	height:48px;
}

#test-05_ {
	position:absolute;
	left:215px;
	top:210px;
	width:95px;
	height:48px;
}

#test-06_ {
	position:absolute;
	left:310px;
	top:210px;
	width:99px;
	height:48px;
}

#test-07_ {
	position:absolute;
	left:409px;
	top:210px;
	width:121px;
	height:48px;
}

#test-08_ {
	position:absolute;
	left:530px;
	top:210px;
	width:494px;
	height:17px;
}

#test-09_ {
	position:absolute;
	left:530px;
	top:227px;
	width:60px;
	height:49px;
}

#test-10_ {
	position:absolute;
	left:590px;
	top:227px;
	width:396px;
	height:495px;
}

#test-11_ {
	position:absolute;
	left:986px;
	top:227px;
	width:38px;
	height:541px;
}

#test-12_ {
	position:absolute;
	left:30px;
	top:258px;
	width:500px;
	height:18px;
}

#test-13_ {
	position:absolute;
	left:30px;
	top:276px;
	width:149px;
	height:492px;
}

#test-14_ {
	position:absolute;
	left:179px;
	top:276px;
	width:374px;
	height:446px;
}

#test-15_ {
	position:absolute;
	left:553px;
	top:276px;
	width:37px;
	height:492px;
}

#test-16_ {
	position:absolute;
	left:179px;
	top:722px;
	width:374px;
	height:46px;
}

#test-17_ {
	position:absolute;
	left:590px;
	top:722px;
	width:396px;
	height:46px;
}

Da kauft man sich schon ein Buch zu Joomla und dann hilft einem das nicht.:(
 
Ein bisschen.:rolleyes:
Ich versteh ja nur nicht warum in Joomla die Grafiken nicht an der richtigen Stelle sitzen, aber wenn man die index.html aufruft dann schon.:(

Habe schon probiert mit background-image die Grafiken jeweils als Hintergrund zu nutzen......

Ich brauch erstmal Hilfe um es zu verstehen warum das jetzt so ist wie es ist.

Im Buch wo keine Grafiken verwendet werden sondern nur Div's und CSS da klappts ja auch.
Wären da wenigstens Beispiele mit Grafiken drin.......:(
 
Ich würde die Grafiken auch mit CSS einbinden, statt es im HTML-Code zu tun.

Dann ist es genau das gleiche wie im Buch. Außerdem würde ich die Grafiken nicht absolut positionieren.

MFG

Sascha
 
Habe ich auch schon probiert, nur irgendwo mach ich nen Fehler den ich nicht finde.

Ich lösche alle img-Tags aus der HTML und binde die Bilder als background-image - in der CSS-Datei - ein, soweit doch richtig?
In der CSS lösche ich die absoluten Positionen, aber dann sind alle Grafiken nicht mehr an der Stelle, an der sie sein sollen (irgendwo ja logisch).

Nur wie bekomm ich die Grafiken wieder an deren richtigen Position?

Im Buch steht nur das Grundgerüst, aber nicht wie man mit Inhalt z.B. Grafiken umzugehen hat.
 
Um ein richtiges HTML-Template zu erstellen, musst du dich etwas mit CSS und mit HTML auseinandersetzen.

Wenn du das kannst, bekommst du das Joomla-Template auch hin.
Das Problem ist halt, dass du CSS können musst, wenn du ein Template erstellen möchtest.

MFG

Sascha

EDIT: Oder du lässt es dir von jemandem erstellen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück