Zeus extrem

[steve_martellini]

Hallo ich habe das Zeus extrem, nun stört es mich aber das wenn ich meine HP auf einem grossen Bildschirm ansehe so viel Platz ist links und rechts. hab da was gelesen von dynamischen Sites. ist das in Zeus integriert oder gibs sowas nicht?

[voodoo36]

Nein, aber dynamische Design gibt 2 oder 3 alte, aber Zeus gehört nicht dazu... nicht jeder hat einen großen TFT, bedenke das und dynamisch sieht auch nicht immer gut aus...

[steve_martellini]

wie siehts denn aus mit 2 verschiedenen Farben also kontextspalte und main content einen andere?

[voodoo36]

in der style gelb ergänzen!

#sidebar {
width: 180px;
padding: 10px 10px 10px 10px;
background: #191919;
}

#content {
background: #303030;

[steve_martellini]

hallo leider geht das nicht habe mehrere conten da stehen: hier mal meine style:

/* Content und Sidebar-Elemente */
#content p.emphasize {
 border-left: 16px solid <cc:print value="&usercolor.alt.dark">;
 padding-left: 8px;
 margin: 10px 0;
}
#content .w2dptablinks {
 padding: 12px 0 0 0;
 border-bottom: 1px dotted <cc:print value="&usercolor.dark">;
 margin-bottom: 10px;
 
}
#content .w2dptablinks a {
 font-weight: normal;
 padding: 6px 10px;
 border-right: 1px solid <cc:print value="&usercolor.dark">; 
 display: block;
 background : url(../images/<cc:print value="&pic.menubar.filename">) repeat top left;
 float: left;
 color: <cc:print value="&usercolor.alt.dark">;
}
#content .w2dptablinks a.w2dptabsel {
background: url(../images/<cc:print value="&pic.menubarsel.filename">) repeat top left;
}
#content .w2dptablinks a:hover {
text-decoration: none; 
background: url(../images/<cc:print value="&pic.menubarsel.filename">) repeat top left;
}

#content .parapicture {
 padding: 8px;
 margin: 10px 0;
 background-color: <cc:print value="&usercolor.medium">;
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 color: #ffffff;
}
#content .parapicture p {
 margin-bottom: 0;}
 
#content h1 {
 font-size: 185%;
 font-weight : bolder;
 margin: 0px;
 padding: 0px 0px 2px 0px;
 color: <cc:print value="&usercolor.alt.dark">;
}
#content h2, #sidebar h2 {
 font-size: 120%;
 font-weight : bold;
 margin: 0px;
}
#content h2 {
 padding: 10px 0px 2px 0px;
}
#sidebar h2 {
 padding: 2px 0px 2px 0px;
}
#content h3 {
 font-size: 100%;
 font-weigth: bold;
 margin: 0px;
 padding: 2px 0px 2px 0px;
}
#content p, #sidebar p {
 margin: 0px;
 padding: 2px 0px 8px 0px;
 line-height: 160%;
}
#sidebar p, #sidebar h2 {
 color: <cc:print value="&usercolor.bright"> !important;
}
#content a, #sidebar a {
 text-decoration: none;
 font-weight : bold;
 color: <cc:print value="&usercolor.alt.dark">;
}
#content a:hover, #sidebar a:hover {
 text-decoration: underline;
}
#content .sidepicture {
 float: right;
 padding: 0px 0px 0px 10px;
 margin: 0px 0px 10px 10px;
 width: 160px;
}
#content .clearer {
 clear: both;
}
#more {
 marging: 0px;
 padding: 20px 0px 20px 0px;
 text-align: right;
}
/* Liste */
#content ul, #sidebar ul {
 list-style: none;
 padding: 0px;
 margin: 6px 0px 6px 10px;
}
#content li, #sidebar li {
 padding: 2px 0px 2px 16px;
 background: url(../images/<cc:print value="&pic.bullet.filename">) no-repeat top left;
}
 
/* Teaser */
div.teaserelement {
 float: left;
 padding: 0px 20px 0px 0px;
 margin: 0px;
}
div.teaser {
 margin: 0px;
 padding: 2px 0px 2px 0px;
}
div.teaserpicture {
 float: right;
 padding: 0px;
 margin: 0px 0px 10px 10px;
 border: none;
}
p.teasertext {
 margin: 0px;
 padding: 4px 0px 4px 0px;
}
.teasernav {
 clear: both;
 padding: 2px 0px 2px 0px;
 margin: 0px;
 text-align: center;
}
/* Absatztype Formular */
input.box {
 border : 1px solid <cc:print value="#dedede">;
 width: 328px;
 vertical-align: top;
 padding: 1px;
 margin: 0px 0px 10px 0px;
}
form.formular textarea  {
 border : 1px solid <cc:print value="#dedede">;
 width: 328px;
 height: 200px;
 vertical-align: top;
 padding: 1px;
 margin: 0px 0px 10px 0px;
}
form.formular .formcaption {
 width: 200px;
 line-height: 200%;
 float: left;
 clear: left;
}
form.formular .formnote {
 color: <cc:print value="#666666">;
 line-height: 160%;
 padding: 2px 0px 10px 204px !important;
}
.buttoncaption {
 line-height: 200%;
}

/* Plugin-Styles */
P.s2d  {
 font-size: 180%;
  color: <cc:print value="&usercolor.alt.dark">;
 font-weight : bold;
 margin: 0px;
 padding: 2px 0px 2px 0px;
 line-height: 200%;
}
P.s2dsmall  {
 font-size: 80%;
}

/** Für Formulare und Shopseiten **/
/* Rahmen und Farbe Formularelemente */
table.formtab select.tx,
table.formtab input.tx,
table.formtab textarea.tx {
 border: 1px dotted <cc:print value="&usercolor.dark">;
 }
/* Absatztyp Tabelle */
table.content {
 margin: 0px 0px 10px 0px;
 border: 0px solid <cc:print value="&usercolor.dark">;
}
tr.odd {
 background-color : <cc:print value="&usercolor.alt.dark">;
}
tr.even {
 
}
tr.header {
 background-color :<cc:print value="&usercolor.alt.dark">;
}
td.cell {
 padding: 4px;
 margin: 0px;
}
td.headercell {
 padding: 4px;
 margin: 0px;
 font-weight: bold;
}
 
/* Weitere Styledefinitionen für Formularelemente */
<cc:include src="formstyle.ccml" common="0">

[steve_martellini]

habs gefunden doch er macht mir die Farbe nicht gleich lange wie mein content?

[voodoo36]

Hallo, man könnte noch im wrap container eine Grafik mit repeat-y einbinden und auf deine Bedürfnissen/Sidebar u. Farben anpassen.

1. Erstelle dazu eine Grafik mit 990x1px, mit 3 Abgrenzung der rechten / linken Sidebar u. content, durch deine Farben und im Design Ordner speichern als pic_logoback.gif

2. In die global.ccml einbinden: z.B.
<cc:picture obj="pic.logoback" dst="plogoback.gif" src="pic_logoback.gif">

3. in der style_design.css bei wrap: (gelb)

#wrap {
margin: 0 auto;
width: 990px;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
background: url(../images/<cc:print value="&pic.logoback.filename">) repeat-y;
}

Fertig:

UNGETESTET: