W2D bietet die Möglichkeit eine Kontextspalte ( Sidebar ) anzulegen.
Diese wird aber nur auf entweder an der linken oder rechten Seite der Website positioniert.
Damit die Sidebar rechts und oder links positioniert wird, kann man sich mit folgender Anleitung behelfen.
Als Beispiel wird das Design PHI verwendet.
Live Demo
In der navigation.ccml habe ich Anweisungen für die Sidebar in den Topic-Bereich verschoben.
Um die Sidebar rechts oder links anzuzeigen, wird vor den eigentlichen Absätzen ein HTML-Absatz
eingefügt.
Wir beginnen mit der rechten Sidebar
Die Absätze wie gewohnt angelegt. Es braucht kein HTML-Absatz angelegt werden.
Nun wird die linke Sidebar gefüllt, auch hier wird zuerst wieder ein HTML-Absatz angelegt.
HTML-Absatz einfügen:
<cc:set obj="sidebarpos" value="links">
danach werden auch hier die eigentlichen Absätze wie gewohnt angelegt.
folgende Änderungen sind an den ccml- bzw. css Dateien durchzuführen:
navigation.ccml
<div id="topic">
.
.
.
<cc:if cond="&sidebar.count gt 0">
<cc:loop type="sidebar" obj="mysidebar">
<cc:if cond="&sidebarpos=''">
<cc:if cond="&right_sidebar_div=''">
<cc:set obj="right_sidebar_div" value="ja">
<div id="sidebar">
</cc:if>
<cc:if cond="&mysidebar.text=''"><br />
<cc:*>nix machen</cc:*>
<cc:else>
<cc:if cond="&mysidebar.caption">
<h1><cc:print value="&mysidebar.caption"></h1>
</cc:if>
<div class="sb">
<cc:print value="&mysidebar.text"><br />
</div>
</cc:if>
<cc:else>
<cc:if cond="&left_sidebar_div=''">
<cc:if cond="&right_sidebar_div='ja'">
</div>
</cc:if>
<div id="sidebarleft">
<cc:set obj="left_sidebar_div" value="ja">
</cc:if>
<cc:if cond="&mysidebar.text=''">
<cc:*>nix machen</cc:*>
<cc:else>
<cc:if cond="&mysidebar.caption">
<h1><cc:print value="&mysidebar.caption"></h1>
</cc:if>
<div class="sb">
<cc:print value="&mysidebar.text"><br />
</div>
</cc:if>
</cc:if>
</cc:loop>
<cc:*> Varibalen zurücksetzen</cc:*>
<cc:set obj="right_sidebar_div" value="">
<cc:set obj="left_sidebar_div" value="">
<cc:set obj="sidebarpos" value="">
</div>
</cc:if>
</div>
style_design.ccml
Positionierung der Sidebar
#sidebar {
position: absolute;
top: 150px;
left: 700px;
width: 200px;
background-color: <cc:print value="&usercolor.medium">;
color: #ffffff;
}
#sidebarleft {
margin-left: 0px;
width: 199px;
background-color: <cc:print value="&usercolor.medium">;
color: #ffffff;
}
style_content.css
Ergänzung der Angaben für die sidebarleft
#sidebar h1, #sidebarleft h1 {
padding: 9px 20px 9px 20px;
background-color: <cc:print value="&usercolor.dark">;
font-size: 100%;
font-weight : bold;
margin: 0px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
}
#sidebar h2,#sidebarleft h2 {
font-size: 100%;
font-weight : bold;
margin: 0px;
color: <cc:print value="&usercolor.bright">;
padding: 4px 0px 2px 0px;
}
#content p, #sidebar p, #sidebarleft p {
margin: 0px;
padding: 2px 0px 4px 0px;
line-height: 160%;
}
#sidebar p, #sidebarleft p {
text-align: left;
}
#sidebar a , #sidebarleft a {
font-weight : bold;
color: <cc:print value="&usercolor.bright">;
text-decoration: none;
}
#content a:hover, #sidebar a:hover, #sidebarleft a:hover {
text-decoration: underline;
}
#content ul, #sidebar ul, #sidebarleft ul {
list-style: none;
padding: 0px;
margin: 6px 0px 6px 10px;
}
#content li, #sidebar li, #sidebarleft li {
padding: 2px 0px 2px 16px;
background: url(../images/<cc:print value="&pic.bullet.filename">) no-repeat top left;
}
#sidebar p, #sidebarleft p {
color: #ffffff !important;
}
global.ccml
Verlegung der sidebar_text.ccml aus den Common-Oder in den Design-Ordner
<cc:file obj="sidebar.text" src="sidebar_text.ccml" common="0">
sidebar_text.ccml
Verlegung von <div class="sb"> aus der Navigation.ccml hierher
<div class="sb">
<p><cc:print value="¶graph.text"></p>
</div>