Hallo
Ich habe mir ein Design erstellt und würde das nun gern ins Wordpress bringen. Da ich aber bisher keine "leichte" Anleitung gefunden habe, wie man aus einem Design ein Wordpressfähiges-Theme machen kann, habe ich bisher nach vorhandenen, passenden Themes gesucht, wo ich das CSS anpassen kann. Problem ist nur, dass ich keins finde, was mir passend erscheint :(
Ich habe aber schon öfters Designs angepasst, doch nun will es nicht wirklich klappen.
Habt ihr Ideen bzg. Theme, was passen könnte? Mein Design besteht aus "Obere Navigation (und dahinter quasi noch ein Div), Header, Content, Footer und links ist die Sidebar.
Hier mal der Quelltext der CSS und der Index:
* {margin: 0; padding: 0}
HTML, BODY, TD, INPUT {
font-family : Tahoma, Trebuchet MS, Arial, sans-serif;
font-size: 12px;
background-color: #ad301c;
}
/* Hintergrund Navi ************************* */
#headerbackground {
background-color: #ad301c;
position: fixed;
height: 30px;
width: 100%;
z-index: 3;
top: 0;
left: 0;
}
/* Obere Navigation ************************* */
#navigationoben {
width: 900px;
text-align: right;
padding: 4px 0px 6px 0px;
margin: 0px;
position: fixed;
top: 5px;
left: 40px;
z-index: 6;
}
#navigationoben ul {
list-style-type: none;
margin:0px;
padding:0px;
}
#navigationoben li {
display: inline;
}
#navigationoben li a {
margin: 0px;
padding: 4px 8px 6px 8px;
background : #77170b url(../daten/eckspace.gif) no-repeat top left;
text-decoration: none;
color: #ffffff;
border-left: 1px solid #ad301c;
}
#navigationoben li a img {
vertical-align : middle;
}
#navigationoben li a:hover {
background-color : #561B24;
color: #ffffff;
}
/* Header ************************* */
#header {
width: 100%;
height: 130px;
margin: 0px;
padding: 0px;
background : #CD506A url(../daten/header.jpg) no-repeat 0px 0px;
position: fixed;
top: 30px;
left: 0px;
z-index: 4;
border-bottom: #ffffff 1px solid;
border-top: #ffffff 1px solid;
}
/* Sidebar ************************* */
#sidebar {
position: fixed;
top: 132px;
left: 30px;
width: 200px;
padding-bottom: 15px;
margin: 0;
z-index: 5;
}
#sidebar h3 {
margin: 0px;
padding: 6px 10px 4px 10px;
height: 19px;
background-color: #F3E2E4;
border-bottom: #ffffff 1px solid;
color: #561B24;
display: block;
font-size: 100%;
font-weight: normal;
}
/* Sidebarbild ************************* */
#sidebarpic {
width: 300px;
height: 300px;
bottom: 0px;
left: 3px;
position: fixed;
background-image: url(../daten/sidebar.jpg);
background-position: left bottom;
background-repeat: no-repeat;
}
/* Navigation ************************* */
.navi {
text-align: right;
margin: 0 0 0px 0;
padding: 0px 0px 0px 0px;
list-style-type: none;
width: 100%;
}
.navi li {
margin: 0;
padding: 0;
background: none;
list-style-type: none;
border-bottom: #000000 solid 1px;
}
.navi li a {
text-decoration: none;
color: #561B24;
display : block;
padding : 6px 5px 6px 0px;
background-color: #000000;
}
.navi li a:hover {
color : #743d4a;
background-color : #f5f2e8;
}
.navi li .active {
color : #743d4a;
}
/* Inhalt ************************* */
#content {
width: 690px;
padding: 10px 10px 3px 10px;
top: 162px;
left: 230px;
overflow: auto;
position: absolute;
z-index: 1;
color: #ffffff;
}
/* Footer ************************* */
#footer {
width: 100%;
height: 1px;
margin: 0px;
padding: 0px;
position: fixed;
bottom: 0px;
left: 0px;
z-index: 2;
background-color: #ad301c;
}
Alles anzeigen
Body des HTML's
<div id="headerbackground">
<div id="navigationoben">
<ul>
<li><a href="./index.html"> <img src="./images/phome.gif" width="12" height="12" alt="" border="0"> </a></li><li><a href="./53297598bb0ea2418/index.html">bla</a></li><li><a href="./miete/index.html">bla</a></li><li><a href="./kauf/index.html">bla</a></li><li><a href="./53297598bc0e80e36/index.html">bla</a></li><li><a href="./leistungen/index.html">bla</a></li><li><a href="./suche/index.html">bla</a></li><li><a href="./referenz/index.html">bla</a></li><li><a href="./53297598bb0db9104/index.html">bla</a></li><li><a href="./links/index.html">bla</a></li><li><a href="./ueberuns/index.html">Links</a></li><li><a href="./53297598bb0ea2418/index.html">bla</a></li><li><a href="./53297598bb0ea2418/index.html">Kontakt</a></li>
</ul>
</div>
</div>
<div id="header"></div>
<div id="sidebarpic"></div>
<div id="sidebar">
<h3>Allgemein:</h3>
<div class="navi">
<ul>
<li><a href="./index.html">Startseite</a></li>
<li><a href="./index.html">Startseite</a></li>
</ul>
</div>
<h3>Allgemein:</h3>
<div class="navi">
<ul>
<li><a href="./index.html">Startseite</a></li>
<li><a href="./index.html">Startseite</a></li>
</ul>
</div>
</div>
<div id="content">
<p>blablablab.... </p>
</div>
<div id="footer"></div>
Alles anzeigen
Ich verzweifel insbesondere ab der oberen Navigation mit den Seiteninhalten. Wie man das macht, weiss ich nicht so recht.
Ich freue mich sehr auf Hilfe!
Liebe Grüsse
