Template in der Breite ändern - Webmasterwelt - Webmaster-Forum

Bene · #1 15.03.2011, 14:10

Hallo,

Ich habe ein Joomla Template in dem ich die Breite des Textbereiches ändern möchte.

Ist dies möglich ?

Hier die Index.php

Zitat:

<!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" lang="<?php echo _LANGUAGE; ?>" xml:lang="<?php echo _LANGUAGE; ?>">

<head>
<?php JHTML::_('behavior.mootools'); ?>

<jdoc:include type="head" />
<?php if($my->id) initEditor(); ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/larrens2/css/tdefaut.css" type="text/css" media="all" />
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/scroll.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/script.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/cufon-yui.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/cufon-replace.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/mootools.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/accordeon.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/Bauhaus_93_400.font.js"></script>
<link rel="icon" type="image/gif" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/favicon.gif" />





<?php //main width
$mod_left = $this->countModules( 'left' );
$mod_right = $this->countModules( 'right' );
if ( $mod_left && $mod_right ) {

$width = '';
} elseif ( ($mod_left || $mod_right) ) {

$width = '-mid';
} else {

$width = '-full';
}
?>

</head>
<body>
<div id="header">
<div class="pagewidth">
<div class="ombre">
</div>
<div id="sitename">
<a href="index.php"><img src="templates/<?php echo $this->template ?>/images/logo.png" width="313" height="73" alt="logotype" /></a>
</div>
<div id="social-links">
<div id="twitter">
<a href="#"><img src="templates/<?php echo $this->template ?>/images/twitter.png" width="31" height="33" alt="twitter" /></a>
</div>

<div id="facebook">
<a href="#"><img src="templates/<?php echo $this->template ?>/images/facebook.png" width="31" height="33" alt="facebook" /></a>
</div>

<div id="myspace">
<a href="#"><img src="templates/<?php echo $this->template ?>/images/myspace.png" width="31" height="33" alt="myspace" /></a>
</div>

<div id="linkedin">
<a href="#"><img src="templates/<?php echo $this->template ?>/images/linkedin.png" width="31" height="33" alt="linkedin" /></a>
</div>

<div id="stumbleupon">
<a href="#"><img src="templates/<?php echo $this->template ?>/images/stumbleupon.png" width="31" height="33" alt="stumbleupon" /></a>
</div>

<div id="youtube">
<a href="#"><img src="templates/<?php echo $this->template ?>/images/youtube.png" width="31" height="33" alt="youtube" /></a>
</div>

<div id="technorati">
<a href="#"><img src="templates/<?php echo $this->template ?>/images/technorati.png" width="31" height="33" alt="technorati" /></a>
</div>
</div>
<div id="bulle">
</div>
</div>
</div>
<div class="pagewidth">
<div id="tool">
<jdoc:include type="modules" name="login" />

<?php if($this->countModules('user4')) : ?>
<jdoc:include type="modules" name="user4" />
<?php endif; ?>
</div>

<div id="mod-slide">
<div id="slide-container">
<ul id="accordion">
<li>
<div class="stretcher">
<img src="templates/<?php echo $this->template ?>/images/slide_show_act_it_1.jpg" alt="" class="tab" style="visibility:hidden" />
<img src="templates/<?php echo $this->template ?>/images/slide_show_it_1.jpg" alt="" class="tab" />
<div style="padding-left:41px;">
<img src="templates/<?php echo $this->template ?>/images/slide_im_1.jpg" alt="" class="img" />
</div>
</div>
</li>

<li>
<div class="stretcher">
<img src="templates/<?php echo $this->template ?>/images/slide_show_act_it_2.jpg" alt="" class="tab" style="visibility:hidde" />
<img src="templates/<?php echo $this->template ?>/images/slide_show_it_2.jpg" alt="" class="tab" />
<div style="padding-left:41px;">
<img src="templates/<?php echo $this->template ?>/images/slide_im_2.jpg" alt=" " class="img" />
</div>
</div>
</li>

<li>
<div class="stretcher" style="width:727px;">
<img src="templates/<?php echo $this->template ?>/images/slide_show_act_it_3.jpg" alt="" class="tab" style="visibility:hidden" />
<img src="templates/<?php echo $this->template ?>/images/slide_show_it_3.jpg" alt="" class="tab" />
<div style="padding-left:41px;">
<img src="templates/<?php echo $this->template ?>/images/slide_im_3.jpg" alt=" " class="img" />
</div>
</div>
</li>

<li>
<div class="stretcher">
<img src="templates/<?php echo $this->template ?>/images/slide_show_act_it_4.jpg" alt="" class="tab" style="visibility:hidden" />
<img src="templates/<?php echo $this->template ?>/images/slide_show_it_4.jpg" alt="" class="tab" />
<div style="padding-left:41px;">
<img src="templates/<?php echo $this->template ?>/images/slide_im_4.jpg" alt=" " class="img" />
</div>
</div>
</li>

</ul>
</div>
</div>

<?php if($this->countModules('left')) : ?>
<div id="left">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
<?php endif; ?>

<div id="main<?php echo $width; ?>">
<div id="pathway"><p>
<jdoc:include type="modules" name="breadcrumb" /></p>
</div>
<div id="contentmain">
<jdoc:include type="component" />
</div>
</div>

<?php if($this->countModules('right')) : ?>
<div id="right">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<?php endif; ?>
</div>
<div id="footer">
<div class="pagewidth">
<div id="footer-content">
<div class="box">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<div class="box">
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<div class="box">
<jdoc:include type="modules" name="user3" style="xhtml" />
</div>
<div class="newsflash">
<jdoc:include type="modules" name="user5" style="xhtml" />
</div>
</div>
</div>
</div>
<div id="footer-bottom">
<div class="pagewidth">
<div id="footer_tm">
<div class="ftb">
Copyright© <?php echo date( '2008 - Y' ); ?> <?php echo $mainframe->getCfg('sitename');?>  |
<?php if ($this->params->get('show_footertext')) : ?>
<?php echo $this->params->get("footertext"); ?>
<?php endif; ?>
</div>
</div>
<div id="top">
<div class="top_button">
<a href="#" onclick="scrollToTop();return false;">
<img src="templates/<?php echo $this->template ?>/images/gotop.png" width="26" height="25" alt="gotop" /></a>
</div>
</div>

</div>
</div>
</body>
</html>

Ich freue mich auf jede Antwort.
Danke für´s Helfen

Gruß Bene

seoonma · #2 16.03.2011, 11:02

In der Regel müsste das in einer der CSS-Dateien verändert werden.

Bene · #3 16.03.2011, 12:10

ok danke für den Tipp

hier das .css

Zitat:

html {
height: 100%;

}

body{
margin:0;
padding:0;
text-align:center;
background:#231a0c url(../images/bg.jpg) repeat;
font-size:13px;
color:#fff;
font-family: helvetica, tahoma, arial , sans-serif;
font-weight:normal;

}

/*texte*/
p {
font-size: 100%;

}

h1 {
font-size: 200%;

}

h2 {
font-size: 150%;

}

h3 {
font-size: 125%;

}

h4, h5, h6 {
font-size: 100%;

}

/* liens hypertextes*/
a:link, a:visited {
text-decoration:none;
color:#fff;
font-weight:bold;

}

a:hover {
color:#000;

}

ul {
margin:0;
padding-left:20px;

}

li {
list-style-type:circle;
background:transparent;
margin: 4px;

}

img {
border:none;
margin:3px 5px;
padding:0;

}

img .caption {
text-align: left;

}

.highlight{
background:#c28a1e;
padding: 0px 2px 0px 2px;
color:#ffffff;

}

.button {
background:#f8cc7a;
border:none;
color:#000;
font-weight:bold;
padding:6px;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
-webkit-border-top-left-radius: 6px; /* pour Chrome */
-webkit-border-top-right-radius: 6px; /* pour Chrome */
-webkit-border-top-top-radius: 6px; /* pour Chrome */
-webkit-border-top-bottom-radius: 6px; /* pour Chrome */

}

.inputbox {
color:#26211e;
background:#fcfdfa;
border:none;
padding:4px;
font-weight:bold;

}

.pagewidth{
width:980px;
text-align:center;
background:transparent;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
position:relative;

}

fieldset {
margin:0px 5px 5px 5px;
padding:5px;
border:1px solid #000;

}

/**************************/
/*********HEARDER**********/
/**************************/
#header {
float:left;
width:100%;
height:147px;
background: url(../images/top.png) repeat-x;

}

#sitename {
float:left;
width:313px;
height:73px;
background:transparent;
margin-top:30px;
margin-left:10px;

}

/****liens social********/
#social-links {
float:left;
width:280px;
height:40px;
background:transparent;
margin:80px 0 0 290px;

}

#twitter ,#facebook ,#myspace ,#linkedin ,#stumbleupon ,#youtube ,#technorati {
float:left;
width:35px;
height:33px;

}

#twitter a:hover ,
#facebook a:hover,
#myspace a:hover,
#linkedin a:hover,
#stumbleupon a:hover,
#youtube a:hover,
#technorati a:hover {
float:left;
width:35px ;
height:33px ;
filter:alpha(opacity=50);
-moz-opacity:0.50;
opacity:0.50;

}

#facebook,#myspace ,#linkedin,#stumbleupon,#youtube,#technorati {
margin-left:5px;

}

#bulle {
float:left;
width:97px;
height:70px;
background: url(../images/bulle.png) no-repeat;
margin-top:10px;
margin-left:-20px;

}

/***************************/
/*MOD LOGIN/REGISTER/SEARCH*/
/***************************/

#tool {
float:left;
width:100%;
height:32px;
background:transparent;
margin-top:-7px;

}

a.login-switch {
float:left;
background: url(../images/login.png) no-repeat;
color: #000;
width:71px;
height:32px;
margin-left:370px;

}

a.register-switch {
float:left;
background: url(../images/register.png) no-repeat;
color: #000;
width:71px;
height:32px;
margin-left:20px;

}

a.search-switch {
float:left;
background: url(../images/search.png) no-repeat;
color: #000;
width:71px;
height:32px;
margin-left:20px;
}

a.login-switch:hover {
background: url(../images/login-hover.png) 0 0 no-repeat;

}

a.register-switch:hover {
background: url(../images/register-hover.png) 0 0 no-repeat ;

}

a.search-switch:hover {
background: url(../images/search-hover.png) 0 0 no-repeat ;

}

a.show,
a.show:hover {
float:left;
color: #000;
width:71px;
height:32px;
background: url(../images/close.png) 0 0 no-repeat;

}

a.deconnexion {
float:left;
background:transparent url(../images/logout.png) no-repeat;
color: #000;
width:71px;
height:32px;
margin-left:370px;

}

#gl-login {
background: #231a0c;
color: #FFF;
top: 250px;
display: none;
height: auto;
overflow: hidden;
padding: 11px 21px 11px 33px;
position: absolute;
left: 300px;
text-align:left;
z-index: 999;
width:150px;
-moz-box-shadow: 1px 1px 6px #000;
-webkit-box-shadow: 1px 1px 6px #000;
box-shadow: 1px 1px 6px #000;
}

h3.tittle-login{
text-align:left;
font-weight:bold;
font-size:21px;
letter-spacing:1px;
margin:0 ;
padding:5px 0 12px 0px;

}

h3.tittle-register{
text-align:left;
font-weight:bold;
font-size:21px;
margin:0 ;
padding:5px 0 12px 0px;

}

#gl-register{
background: #231a0c;
color: #fff;
top: 250px;
display: none;
height: auto;
overflow: hidden;
padding: 16px 11px 11px 25px;
position: absolute;
left: 300px;
text-align:left;
z-index: 999;
width:450px;
-moz-box-shadow: 1px 1px 6px #000;
-webkit-box-shadow: 1px 1px 6px #000;
box-shadow: 1px 1px 6px #000;

}

#gl-search {
background: #231a0c;
color: #fff;
top: 160px;
display: none;
height: auto;
overflow: hidden;
padding: 5px 15px;
position: absolute;
left: 700px;
text-align:left;
z-index: 999;
-moz-box-shadow: 1px 1px 6px #000;
-webkit-box-shadow: 1px 1px 6px #000;
box-shadow: 1px 1px 6px #000;

}

/*item mot de passe perdu,identifiant oublié,creer un compte*/
#gl-login form a,
#gl-register form a {
background:transparent;
color:#fff ;

}

/*label du mformulaire de registration*/
#gl-login label {
color: #fff;
padding-top:4px;

}
#gl-register label{
color: #fff;
padding-top:4px;

}

/*les boutons de soumissions des module login et registration*/
#gl-login .button {
background:#f8cc7a;
color:#fff;
padding:5px;
margin:20px 0 5px 0;
cursor

ointer;

}

#gl-register .button {
background:#f8cc7a;
color:#fff;
padding:5px;
margin:10px 0 20px 0;
cursor

ointer;

}

#gl-login .inputbox,
#gl-register .inputbox {
background:#ffffff;
border: none;
color: #333333;
margin-top:2px;

}

/* Login */
#gl-login form {
float: left;
margin-top: 5px;

}

#gl-login form label {
float: left;

}

label.gl-login-user span,
label.gl-login-password span {
display: block;
float: left;

}

#gl-login form input.button {
font-size: 11px !important;
float: left;

}

#gl-login form #mod_login_username,
#gl-login form #mod_login_password {
background: #FFFFFF;
border: 0px solid #490001;
width: 120px;
margin: 3px 8px 0 0;
font-size: 12px !important;
padding: 2px;
font-weight:normal;

}

#gl-login form a {
padding: 5px 0 !important ;
margin: 0;
text-decoration: none;
background:transparent;
display:block;

}

#gl-login form a:hover,
#gl-login form a:active,
#gl-login form a:focus {
text-decoration: underline;

}

.gl-login-links {
padding: 2px 0 !important;
margin:0;
clear: both;
text-transform: none;
letter-spacing: normal;
font-size: 12px;
font-weight:normal;

}

.gl-login-links a {
font-weight:normal;

}

.libele {
display:none;

}

/***slideshow***/
#mod-slide {
float:left;
width:893px;
height:436px;
background: url(../images/bg-slide.jpg) 0 0 repeat;
padding-left:1px;
margin-top:45px;
margin-left:30px;

}

#slide-container {
background:transparent;
height:421px;

}

#accordion {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
text-align:left;

}

#accordion li{
list-style:none;
float:left;
display:block;
text-align:left;

}
.stretcher{
float:left;
height:421px;
width:41px;
overflow:hidden;

}

.tab{
cursor

ointer;
float:left;
position: absolute;

}

/***********************/
/**colonne left/right**/
/***********************/
#left ,#right {
float:left;
width:200px;
margin:40px 10px 15px 10px;
text-align:left;

}

#right {
margin:40px 5px 15px 20px;
}

div .moduletable ,
div .moduletable_menu ,
div .moduletable_text {
margin-bottom:25px;
border-bottom:5px dashed #fff;
padding-bottom:20px;

}

div .moduletable h3,
div .moduletable_menu h3 ,
div .moduletable_text h3{
font-size:22px;
background: url(../images/bg-h3.png) 0 1px no-repeat;
padding-left:25px;

}

div .moduletable a,
div .moduletable_menu a ,
div .moduletable_text a {
font-weight:normal;
font-style:italic;
color:#ffffff;

}

div .moduletable a:hover,
div .moduletable_menu a:hover ,
div .moduletable_text a:hover {
font-weight:normal;
font-style:italic;
color:#f8cc7a;

}

#main {
float:left;
width:470px;
background:#ffffff;
margin-top:50px;
margin-left:20px;
text-align:left;
padding:10px 20px;
position:relative;

}

#main-mid {
float:left;
width:670px;
background:#ffffff;
margin-top:50px;
margin-left:20px;
text-align:left;
padding:10px 20px;
position:relative;

}

#main-full {
float:left;
width:900px;
background:#ffffff;
margin-top:30px;
margin-left:20px;
text-align:left;
padding:10px 20px;
position:relative;

}

#contentmain {
float:left;
width:100%;
color:#271d10;
font-style:italic;

}

#contentmain a {
color:#271d10;

}

#contentmain a:hover {
color:#000000;

}

#pathway {
float:left;
width:100%;
height:30px;
background: url(../images/sep.jpg) 0 100% repeat-x;
margin:0 0 10px 0;
padding:5px 5px 15px 0px;

}

#pathway a{
color:#000;

}

#pathway p {
margin:0 ;
padding:0 5px 10px 5px;
font-weight:bold;
color:#271d10;

}

div .entete {

}

div .componentheading {
font-size:22px;
padding-bottom:15px;

}

/******CALENDAR*******/

.calendar {
margin-left:0px;
margin-top:-5px;
display:block ;
padding:7px 0 0 0;
background: url(../images/bg-calendar.png) no-repeat;
width:40px ;
height:59px;
text-align:center;
position:absolute;
left:-33px;

}

.day {
color: #211b12;
font-weight:bold;
margin: 0;
padding:0 ;
font-size:17px;
background:transparent;
font-weight: bold;
display:block;

}

.month {
color: #211b12;
font-weight: bold;
margin: 0;
padding:0px 0 0 0 ;
font-size:17px;
background:transparent;
display:block;

}

.contentinfo {
margin: 0 0 0 20px;
padding-left: 5px;
background:transparent;
color:#211b12;
font-weight:normal;
font-style:italic;

}

.contentheading,a.contentpagetitle {
font-size:22px;
padding-top:0px;

}

table.contentpaneopen, .contentpane {
background:transparent;
margin-top:0px;

}

a.contentpagetitle:hover,
a.contentpagetitle:active {
color:#000000;

}

a.readon {
float:right;
background:#f8cc7a;
font-weight: bold;
padding:5px;
margin-right:15px;
color:#000;
margin-top:5px;
font-weight:normal;
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
-webkit-border-top-left-radius: 6px; /* pour Chrome */
-webkit-border-top-right-radius: 6px; /* pour Chrome */
-webkit-border-top-top-radius: 6px; /* pour Chrome */
-webkit-border-top-bottom-radius: 6px; /* pour Chrome */

}

.blog_more {
margin-bottom:25px;

}

.blog_more strong {
letter-spacing:1px;
font-size:16px;
text-transform:uppercase;
font-weight:bold;
padding-left:35px;

}

.blog_more li {
margin:5px 25px;

}

.modifydate {
margin-top:10px;
text-decoration:underline;

}

.article_separator, .article_seperator{
height:21px;
width:100%;
display:block;
background: url(../images/sep.jpg) 0 80% no-repeat;

}

/*****POOL****/
table.poll td{
text-align:left;
font-size:12px;
margin:0 !important;
padding:0;

}

table.poll thead td {
font-size:15px;
padding-left:14px;
font-weight:bold;

}

table.poll div {
text-align:left;
padding:3px !important;

}

table.poll .button{
font-size:12px;
margin:5px 0px 0 8px;
padding:6px;
color:#000;
font-weight:bold;

}

table.pollstableborder td.sectiontableentry1,
table.pollstableborder td.sectiontableentry2 {
color: #ffffff;
background:transparent;
margin:0;
padding:3px ;
font-style:italic;

}

#footer {
float:left;
width:100%;
height:300px;
background: url(../images/footer.png) repeat;

}

#footer-content{
float:left;
width:980px;
height:220px;
background:transparent;
margin:40px 0 0 0;
padding:0;

}

.box {
float:left;
width:220px;
height:210px;
background: url(../images/box-bg.png) 0 0 no-repeat;
margin:0 0 0 10px;
text-align:left;

}

#footer .newsflash {
float:left;
width:270px;
height:210px;
background:transparent;
margin:0 0 0 10px;
text-align:left;

}

#footer .moduletable ,
#footer .moduletable_menu ,
#footer .moduletable_text {
margin-bottom:0px;
border-bottom:none;
padding-bottom:5px;

}

#footer .moduletable h3,
#footer .moduletable_menu h3 ,
#footer.moduletable_text h3{
font-size:22px;
background: transparent;
padding-left:5px;

}

div .moduletable a,
div .moduletable_menu a ,
div .moduletable_text a {
font-weight:normal;
font-style:italic;
color:#ffffff;

}

div .moduletable a:hover,
div .moduletable_menu a:hover ,
div .moduletable_text a:hover {
font-weight:normal;
font-style:italic;
color:#f8cc7a;

}

#footer-bottom {
float:left;
width:100%;
height:45px;
background:#000 ;
margin:0px;
text-align:left;

}

#footer_tm {
float:left;
width:920px;
height:30px;
background:transparent;
text-align:center;

}

.ftb {
margin-top:15px;
margin-left:10px;
font-size:12px;
color:#fff;

}

.ftb a, .ftb a:visited{
padding:0;
color:#f8cc7a;

}

.ftb a:hover {
color:#fff;

}

/*bouton top*/
#top {
float:left;
width:30px;
height:25px;
margin-top:8px;
padding:0 !important;
border:none !important;
background:transparent;

}

.top_button {
padding:0 !important;
border:none !important;

}

.ombre {
position:absolute;
top:0;
left:300px;
background: url(../images/ombre.png) no-repeat;
width:245px;
height:128px;

}

.article_column {
background: transparent;
padding:10px 10px;

}

/*table*/

.sectiontableheader {
padding:5px;

}

td.contentdescription {
padding:5px;

}

tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding:5px;

}

table.contenttoc {
margin: 5px;
border: 1px solid #fff;
padding: 5px;
float: right;
color:#fff;

}

table.contenttoc td {
padding: 0 5px;

}

/**publicité****/
div.bannergroup_text {
padding-bottom:10px;

}

div.bannerfooter {
padding:10px;

}

div.banneritem_text {
padding-top:10px;
margin:0;

}

div.bannerheader {
padding-left:20px !important;
padding-right:20px !important;
font-size:14px;
font-weight:bold;

}

/**end file***/

Aber wenn ich "Pagewidth" ändere verschiebt sichdas Menü rechts über das Menü links

hat jemand eine Ahnung ??

Gruß Bene

seoonma · #4 17.03.2011, 09:22

#contentmain {
float:left;
width:100%;
color:#271d10;
font-style:italic;

}

Ich denke der Wert "width" könnte Dir evtl. weiterhelfen. Ferndiagnose ist aber schwer, wenn man die Seite nicht sieht

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln