Mehrere Wrapper einbauen

**Core** · 24.01.2013, 23:10

Hallo,

Habe ein Template gekauft, nun bekomme ich es nicht eingebaut, es sind mehre wrapper vorhanden, gibt es eine Möglichkeit so was einzubauen.

Das originale CSS

Code:

body {
	margin: 0px;
	padding: 0px;
	background: #FFFFFF url("files/images/homepage01.jpg") repeat left top;
}


/** WRAPPER */

#wrapper {
	background: #F8F6F4 url("files/images/subpage2_01.jpg") repeat-y center top;
}

#wrapper2 {
	background: url("files/images/homepage02.jpg") repeat-x left bottom;
}

#wrapper3 {
	background: url("files/images/homepage03.jpg") repeat-x left top;
}

#wrapper4 {
	width: 1000px;
	margin: 0px auto;
	background: url("files/images/subpage2_02.jpg") no-repeat left top;
}

#wrapper5 {
	background: url("files/images/subpage2_03.jpg") no-repeat left bottom;
}

/** FOOTER */

#footer {
	height: 100px;
}

#footer p {
	margin: 0px;
	padding: 10px 0px 0px 0px;
	text-align: center;
	line-height: normal;
	color: #9A4D6E;
}

Gruss Core

**BugBuster** · 25.01.2013, 00:29

Woher stammt das Template?

**Core** · 25.01.2013, 01:23

http://www.4templates.com

**BugBuster** · 25.01.2013, 01:33

Ach, das ist gar kein Contao Template? Na dann bleibt dir nur das mit Contao Mitteln nach zu bauen.
Ob das nun mehrere wrapper sind als Beispiele oder ob die wirklich alle genutzt werden, wirst nur du wissen.

**Core** · 25.01.2013, 01:40

Die werden alle gebraucht, so sieht es aus, Demo - Two Column .

http://www.4templates.com/website-templates/574352689-WT00565/#cyan

***lucina*** · 25.01.2013, 07:12

Wenn es denn eine Demo wäre, dann könnte man mal schauen, wie der Seitenquelltext strukturiert ist und dann diese Struktur mit Contao generieren lassen. So bleibt das für uns Rätselraten und für Dich die Aufgabe, die Struktur selbständig herunterzubrechen.

Ob das jetzt mehrere eigene Layoutbereiche oder nur benannte (Container-)Module braucht kann man ja so schlecht sagen.

**Core** · 25.01.2013, 07:58

die Demo habe ich auf meinen Rechner, die hatte ich nach dem Kauf bekommen.

Hier mal der Seitenquelltext der Demo:

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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
 @import url("layout.css");
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="wrapper2">
		<div id="wrapper3">
			<div id="wrapper4">
				<div id="wrapper5">
					<div id="header">
						<div id="logo">
							<h1>BusinessName, Inc.</h1>
						</div>
						<!-- end #logo -->
						<div id="menu">
							<ul>
								<li class="first"><a href="#" id="menu1" accesskey="1" title="">Products</a></li>
								<li><a href="#" id="menu2" accesskey="2" title="">Services</a></li>
								<li><a href="#" id="menu3" accesskey="3" title="">About</a></li>
								<li><a href="#" id="menu4" accesskey="4" title="">Support</a></li>
								<li><a href="#" id="menu5" accesskey="5" title="">Contact</a></li>
							</ul>
						</div>
						<!-- end #menu -->
					</div>
					<!-- end #header -->
					<div id="page">
						<div id="content">
							<div id="box1" class="box-style1">
								<div class="title">
									<h1>Pellentesque viverra vulputate</h1>
									<h2>Consequat etiam tempus lorem volutpat</h2>
								</div>
								<div class="content"> <img src="images/homepage06.jpg" alt="" width="140" height="132" class="left" />
									<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nexres elementum vel. Lorem sed ipsum dolor sit amet nullam. Volutpat sed veroeros bibendum. In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. </p>
									<p>Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo. Fusce odio. Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. Mauris aliquet. Aliquam sem leo, vulputate sed, convallis at, ultricies quis, justo. Donec nonummy magna quis risus. Quisque eleifend. Phasellus tempor vehicula justo. Aliquam lacinia metus ut elit. Suspendisse iaculis mauris nec lorem. Pellentesque pede. Donec pulvinar ullamcorper metus. In eu odio at lectus pulvinar mollis.</p>
									<h3>Vestibulum suscipit volutpat nulla</h3>
									<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed blandit. Phasellus pellentesque, ante nec iaculis dapibus, eros justo auctor lectus, a lobortis lorem mauris quis nunc. Praesent pellentesque facilisis elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In hac habitasse platea dictumst. Nullam id ante eget dui vulputate aliquam. Pellentesque erat erat, tincidunt in, eleifend accumsan, malesuada eget, augue. Pellentesque pede. Donec pulvinar ullamcorper metus. In eu odio at lectus pulvinar mollis.</p>
									<p>Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh:</p>
									<ol>
										<li><a href="#"> Integer sit amet pede vel arcu aliquet pretium.</a></li>
										<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
										<li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li>
										<li><a href="#">Pellentesque quis elit non lectus gravida blandit.</a></li>
										<li><a href="#">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li>
										<li><a href="#">Duis non ante in metus commodo pellentesque.</a></li>
										<li><a href="#">Cras vitae metus aliquam risus pellentesque pharetra.</a></li>
									</ol>
									<p>Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo. Fusce odio. Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. Mauris aliquet. Aliquam sem leo, vulputate sed, convallis at, ultricies quis, justo. Donec nonummy magna quis risus. Quisque eleifend. Phasellus tempor vehicula justo. Aliquam lacinia metus ut elit. Suspendisse iaculis mauris nec lorem. Pellentesque pede. Donec pulvinar ullamcorper metus. In eu odio at lectus pulvinar mollis. </p>
								</div>
							</div>
							<!-- end #box1 -->
						</div>
						<!-- end #content -->
						<div id="sidebar">
							<div id="box4" class="box-style2">
								<div class="title">
									<h2>Volutpat sed tempor</h2>
								</div>
								<div class="content"><img src="images/homepage18.jpg" alt="" width="76" height="122" class="left" />
									<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. In vel lorem ipsum is, tempor at, varius nulla sed etiam lorem. <a href="#">More&hellip;</a></p>
								</div>
							</div>
							<!-- end #box4 -->
							<div id="box5" class="box-style2">
								<div class="title">
									<h2>Donec ipsum et purus</h2>
								</div>
								<div class="content">
									<table border="0" cellspacing="0" cellpadding="0" class="table1">
										<tr>
											<td class="left"><a href="#">Aliquam non mauris</a></td>
											<td class="right"><strong>03.17</strong></td>
										</tr>
										<tr class="alt">
											<td class="left"><a href="#">Etiam fermentum ipsum</a></td>
											<td class="right"><strong>03.16</strong></td>
										</tr>
										<tr>
											<td class="left"><a href="#">Pulvinar dolor sapien</a></td>
											<td class="right"><strong>03.16</strong></td>
										</tr>
										<tr class="alt">
											<td class="left"><a href="#">Velit dapibus rutrum</a></td>
											<td class="right"><strong>03.15</strong></td>
										</tr>
										<tr>
											<td class="left"><a href="#">Elit mauris in elit sed</a></td>
											<td class="right"><strong>03.14</strong></td>
										</tr>
										<tr class="alt">
											<td class="left"><a href="#">Pellentesque sem lectus</a></td>
											<td class="right"><strong>03.11</strong></td>
										</tr>
										<tr>
											<td class="left"><a href="#">Bibendum sed tempus</a></td>
											<td class="right"><strong>03.10</strong></td>
										</tr>
									</table>
								</div>
							</div>
							<!-- end #box5 -->
							<div id="box6" class="box-style2">
								<div class="title">
									<h2>Blandit nullam consequat</h2>
								</div>
								<div class="content">
									<p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In vel tempor at, varius etiam veroeros.</p>
									<img src="images/homepage23.jpg" alt="" width="52" height="53" class="left" />
									<p><strong>Vel aliquam nulla</strong> tempor at, varius etiam veroeros. Dolor sit amet. <a href="#">More&hellip;</a></p>
									<img src="images/homepage24.jpg" alt="" width="52" height="53" class="left" />
									<p><strong>Blandit sed dolor</strong> tempor at, varius etiam veroeros. Dolor sit amet. <a href="#">More&hellip;</a></p>
									<img src="images/homepage25.jpg" alt="" width="52" height="53" class="left" />
									<p><strong>Aliquam mauris</strong> tempor at, varius etiam veroeros. Dolor sit amet. <a href="#">More&hellip;</a></p>
								</div>
							</div>
							<!-- end #box6 -->
						</div>
						<!-- end #sidebar -->
						<div style="clear: both;">&nbsp;</div>
					</div>
					<!-- end #page -->
					<div id="footer">
						<p>Copyright (c) 2008 BusinessName, Inc. All rights reserved.</p>
					</div>
					<!-- end #footer -->
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end #wrapper -->
</body>
</html>

**BugBuster** · 25.01.2013, 20:52

Ach du schei..., wer baut denn sowas....

Also, ich kenne jetzt mal die wrapper Grafikdateien nicht, aber ich sehe da Header, Main, Right, Footer. Wozu da 4 zusätzliche Wrapper noch nötig sind, entzieht sich meiner Kenntnis.
Ich würde die Grafik Dateien nehmen und die CSS Angaben und alles Schritt für Schritt in Contao nachbauen. Haste mehr von.
Musste ja theoretisch sowieso fast machen, den einige Inhalte musste ja durch Module ersetzen (Navi, News, ...)

**Core** · 25.01.2013, 21:32

Header, Main, Right, Footer habe ich hinbekommen, die zusätzliche Wrapper sind für den Hintergrund der Webseite. Links-oben, recht-oben, links-unten und rechts-unten, der Hintergrund besteht aus 5 Grafiken, bekomme es nicht hin wie man so viel Grafik einbaut. Habe sogar versucht das Template „fe_page.tpl“ anzupassen ohne Erfolg.

Habe die Dateien mal hochgeladen, hier die Demo:

http://test.raumausstatter-emmrich.de/demo/subpage1.html

Die zugehörige CSS-Datei

Code:

/** BASIC */

body {
	margin: 0px;
	padding: 0px;
	background: #FFFFFF url(images/homepage01.jpg) repeat left top;
}

/** FORMS */

form {
	margin: 0px;
	padding: 0px;
}

/** HEADINGS */

h1, h2 {
	margin: 0px 0px 1em 0px;
	letter-spacing: -.05em;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	color: #575757;
}

h1 {
	font-size: 36px;
}

h2 {
	font-size: 21px;
}

h3 {
	margin: 0px 0px 1em 0px;
	font-size: 100%;
	color: #616161;
}

/** MENU */

#menu {
	float: right;
}

#menu ul {
	margin: 0px;
	padding: 45px 20px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
	height: 42px;
	padding: 10px 14px 0px 16px;
	background: url(images/homepage05.gif) no-repeat left top;
}

#menu li.first {
	background: none;
}

#menu a {
	text-decoration: none;
	font: normal 16px Georgia, "Times New Roman", Times, serif;
	color: #FFFFFF;
}

#menu a:hover {	
	text-decoration: underline;
}

/** TEXTS */

body, th, td, input, textarea, select {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #8B8B8B;
}

p, ul, ol, dl {
	margin-top: 0px;
	margin-bottom: 1.5em;
	text-align: justify;
	line-height: 20px;
}

.list1 {
	margin-left: 0px;
	padding-left: 0px;
	list-style: none;
}

.list1 li {
	padding-left: 12px;
	background: url(images/homepage17.gif) no-repeat left center;
}

/** LINKS */

a {
	color: #7EBEC2;
}

a:hover {
	text-decoration: none;
}

.link1 {
	display: block;
	width: 90px;
	height: 20px;
	padding: 5px 0px 0px 0px;
	background: url(images/homepage08.gif) no-repeat left top;
	text-decoration: none;
	text-align: center;
	letter-spacing: -1px;
	font: normal 13px Georgia, "Times New Roman", Times, serif;
	color: #FFFFFF;
}

.link1:hover {
	text-decoration: underline;
}

/** FOOTER */

#footer {
	height: 100px;
}

#footer p {
	margin: 0px;
	padding: 10px 0px 0px 0px;
	text-align: center;
	line-height: normal;
	color: #9A4D6E;
}

/** TABLES */

.table1 {
	width: 100%;
}

.table1 tr {
}

.table1 td {
	height: 31px;
	padding: 0px 10px;
	background: #CEE9EB;
	border-bottom: 1px solid #FFFFFF;
	color: #6C9294;
}

.table1 td.left {
	background: #CEE9EB url(images/homepage19.gif) no-repeat left top;
}

.table1 td.right {
	background: #CEE9EB url(images/homepage20.gif) no-repeat right top;
}

.table1 tr.alt td {
	background: #F3E2D0;
}

.table1 tr.alt td.left {
	background: #F3E2D0 url(images/homepage21.gif) no-repeat left top;
}

.table1 tr.alt td.right {
	background: #F3E2D0 url(images/homepage22.gif) no-repeat right top;
}

/** BACKGROUNDS */

.bg1 {
}

/** MISC */

.align-justify { text-align: justify; }
.align-right { text-align: right; }

img { border: none; }

img.left {
	float: left;
	margin: 0px 20px 0px 0px;
}

img.right {
	float: right;
	margin: 0px 0px 0px 20px;
}

hr { display: none; }

.hr1 {
	height: 1px;
}

/** WRAPPER */

#wrapper {
	background: #F8F6F4 url(images/subpage2_01.jpg) repeat-y center top;
}

#wrapper2 {
	background: url(images/homepage02.jpg) repeat-x left bottom;
}

#wrapper3 {
	background: url(images/homepage03.jpg) repeat-x left top;
}

#wrapper4 {
	width: 1000px;
	margin: 0px auto;
	background: url(images/subpage2_02.jpg) no-repeat left top;
}

#wrapper5 {
	background: url(images/subpage2_03.jpg) no-repeat left bottom;
}

/** BOX STYLE 1 */

.box-style1 {
	padding-bottom: 30px;
}

.box-style1 .title {
}

.box-style1 .title h1 {
	margin: 0px;
	padding: 0px 0px 0px 26px;
	background: url(images/homepage07.gif) no-repeat left center;
}

.box-style1 .title h2 {
	margin: 0px;
	padding: 0px 0px 0px 26px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #B2BEBF;
}

.box-style1 .content {
	padding: 20px 0px 0px 0px;
}

/** BOX STYLE 2 */

.box-style2 {
	padding-bottom: 30px;
	background: url(images/homepage09.jpg) no-repeat right top;
}

.box-style2 .title {
	margin-right: 70px;
	background: url(images/homepage10.jpg) repeat-x left bottom;
}

.box-style2 .title h2 {
	height: 29px;
	padding: 24px 0px 0px 22px;
	background: url(images/homepage11.jpg) no-repeat left bottom;
	font-size: 14px;
	color: #FFFFFF;
}

.box-style2 .content {
	margin-left: -50px;
	padding: 15px 20px 0px 70px;
	background: url(images/homepage12.gif) no-repeat left top;
}

Gruß Core

***lucina*** · 25.01.2013, 22:28

Um die fe_page wirst du aber nicht herumkommen. Ist doch auch nicht schwer: einfach das, was da als #wrapper steht in #warpper5 umtaufen und vier wrapper drumherumlegen. Also oben ..

Code:

<body id="top" class="{{ua::class}}<?php if ($this->class): ?> <?php echo $this->class; ?><?php endif; ?>"<?php if ($this->onload): ?> onload="<?php echo $this->onload; ?>"<?php endif; ?>>
HIERHIN
<div id="wrapper">

und unten ...

Code:

<?php endif; ?>

</div>
HIERHIN
<?php echo $this->mootools; ?>
<?php if (!$this->disableCron): ?>

<script src="<?php echo TL_ASSETS_URL; ?>assets/contao/js/scheduler.js?t=<?php echo $this->cronTimeout; ?>" id="cron"></script>
<?php endif; ?>

</body>
</html>