Templatefarbe ändern

zaka · 06.09.2010

Hallo zusammen, ich habe mir ein Free Template runtergeladen, bei dem die einzelnen Buttons sich nach unten öffnen. Die Buttons konnte ich schon nach meinen Vorstellungen anpassen, aber jetzt möchte ich die ganze Farbe (zur Zeit schwarz) in beige ändern. Leider habe ich nicht viel Ahnung bin eher ein Laie. Arbeite zur Zeit mit NVU um das Template zu bearbeiten. Vielleicht könnt ihr mir weiterhelfen.
Hier noch der Code:

hier mal der Link von dem Template:

Bitte kostenlos registrieren, damit du die Links siehst.

und hier der Quelltext:

Code:

body
{scrollbar-arrow-color: #0e0e0e; scrollbar-base-color: #f3f3f3;
scrollbar-highlight-color : #969696; scrollbar-shadow-color : #ffffff;
SCROLLBAR-TRACK-COLOR: #D6D6D6;}

.menu ul li a.hide, .menu ul li a:visited.hide {
display:none;
}
.menu ul li a:hover ul li a.hide {
display:none;
}
,menu2 ul li a, .menu ul li a:visited{
float:left;
display:block;
width:152px;
font-family:verdana, sans-serif; 
font-size: 86%;
padding-left: 0px; 
padding-bottom: 0px; 
padding-top:0px;
margin: 0 1px;
line-height:30px;
text-align:center;
text-decoration:none ;
color:#808080;
background-color:#000;
border:solid 1px #353535;
background-image:url(images/ob.jpg);
}
.menu ul li a:hover {
background-color:#282828;
color:#fff; 
text-decoration:none ;
border:solid 1px #7C7C7C; 
background-image: url(images/mover.jpg);
}
.menu ul li a:hover ul {
display:block; 
position:absolute; 
top:37px; 
left:0; 
width:153px;
}
.menu ul li a:hover ul li a {
display:block; 
background:#282828; 
color:#808080;
border:solid 1px #353535;
line-height:30px;
background-image:url(images/ob.jpg);
}
.menu ul li a:hover ul li a ul {
visibility:hidden;
}
.menu ul li a:hover ul li a:hover {
background-color:#282828;
color:#fff; 
text-decoration:none ;
border:solid 1px #7C7C7C;
}
.menu ul li a:hover ul li a:hover ul {
visibility:visible; 
position:absolute; 
left:105px; 
top:0; 
color:#000;
}
.menu ul li a:hover ul li a:hover ul.left {
left:-105px;
}

Ich kann allerdings nur mit NVU das Index aufrufen und erhalte diesen Quelltext:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="keywords"
content="homepage,dokument,webpage,page,web,netz,homepage dokument webpage page web netz">
<meta name="description"
content="homepage, dokument, webpage, page, web, netz">
<title>homepage, dokument, webpage, page, web, netz, homepage
dokument webpage page web netz</title>
<!-- Der Copyright-Hinweis ist nicht zu löschen. Ein Entfernen des Copyright/Urheberrecht-Vermerks kann rechtliche Schritte nach sich ziehen --><!-- (c)Copyright by S.I.S.Papenburg / www.on-mouseover.de/templates/ --><!-- Hinweis:

Ein Verkauf der Vorlage oder das Anbieten dieser Vorlage ist untersagt.

Die Vorlage kann privat (kostenlos) und kommerziell (gegen Bezahlung) genutzt werden.

Je nach dem Inhalt, welcher eingefügt wird, kann auch für Privatpersonen eine kommerzielle Nutzung vorliegen.

Lesen Sie auf der Webseite www.on-mouseover.de/templates/

bitte die Nutzungsbedingungen nach.

-->
<link rel="stylesheet" href="css/format.css"
type="text/css">
<!--[if lte IE 6]>

<link rel="stylesheet" media="all" type="text/css" href="css/ie_format.css" />

<![endif]-->
</head>
<body>
<div id="all">
<!--<div id="li"></div> -->
<div id="mitte"><!-- Anfang Mittelteil -->
<div id="leistetop"><span class="leistetop">
<b>N</b>ame <b>d</b>er <b>H</b>omepage
</span>
</div>
<div class="menu">
<!--Menu ganz oben-->
<ul>
<li><a class="hide" href="index.html"
onfocus="this.blur()">Kontakt</a></li>
<!--[if lte IE 6]>

<a href="index.html">Kontakt</a>

<![endif]-->
<li><a class="hide" href="index.html"
onfocus="this.blur()">Impressum</a></li>
<!--[if lte IE 6]>

<a href="index.html">Impressum</a>

<![endif]-->
<li><a class="hide" href="index.html"
onfocus="this.blur()">Preise</a></li>
<!--[if lte IE 6]>

<a href="index.html">Preise</a>

<![endif]-->
<li><a class="hide" href="index.html"
onfocus="this.blur()">Gaestebuecher</a></li>
<!--[if lte IE 6]>

<a href="index.html">Gaestebuecher</a>

<![endif]-->
<li><a class="hide" href="index.html"
onfocus="this.blur()">Shop</a></li>
<!--[if lte IE 6]>

<a href="index.html">Shop</a>

<![endif]-->
</ul>
<!-- ende menü oben-->
</div>
<div id="top">
<!-- Logo --><img src="http://www.traum-projekt.com/forum/images/logo.gif" alt=""
style="border: 1px solid rgb(39, 39, 39); margin: 20px 0pt;"
border="0" height="60" width="468">
<!-- Ende Logo --></div>
<div class="menu">
<!-- unteres Menu -->
<ul>
<li><a class="hide" href="#">Gruppe1</a>
<!--[if lte IE 6]>

<a href="#">Gruppe1

<table><tr><td>

<![endif]-->
<ul>
<li><a href="index.html">Seite 11</a></li>
<li><a href="index.html">Seite 12</a></li>
<li><a href="index.html">Seite 13</a></li>
<li><a href="index.html">Seite 14</a></li>
</ul>
<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->
</li>
<li><a class="hide" href="#">Gruppe2</a>
<!--[if lte IE 6]>

<a href="#">Gruppe2

<table><tr><td>

<![endif]-->
<ul>
<li><a href="index.html">Seite 21</a></li>
<li><a href="index.html">Seite 22</a></li>
<li><a href="index.html">Seite 23</a></li>
</ul>
<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->
</li>
<li><a class="hide" href="#">Gruppe3</a>
<!--[if lte IE 6]>

<a href="#">Gruppe3

<table><tr><td>

<![endif]-->
<ul>
<li><a href="index.html">Seite 31</a></li>
<li><a href="index.html">Seite 32</a></li>
<li><a href="index.html">Seite 33</a></li>
</ul>
<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->
</li>
<li><a class="hide" href="#">Gruppe4</a>
<!--[if lte IE 6]>

<a href="#">Gruppe4

<table><tr><td>

<![endif]-->
<ul>
<li><a href="index.html">Seite 41</a></li>
<li><a href="index.html">Seite 42</a></li>
<li><a href="index.html">Seite 43</a></li>
<li><a href="index.html">Seite 44</a></li>
</ul>
<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->
</li>
<li><a class="hide" href="#">Gruppe5</a>
<!--[if lte IE 6]>

<a href="#">Gruppe5

<table><tr><td>

<![endif]-->
<ul>
<li><a href="index.html">Seite 51</a></li>
<li><a href="index.html">Seite 52</a></li>
<li><a href="index.html">Seite 53</a></li>
<li><a href="index.html">Seite 54</a></li>
</ul>
<!--[if lte IE 6]>

</td></tr></table>

</a>

<![endif]-->
</li>
</ul>
<!-- ende unteres Menu-->
</div>
<div id="content">
<!-- Inhalt -->
<h2>Layout.</h2>
<span class="sp2">
Dieses Design heisst "Kamera". Hier mal mit einem Doppel-Men&uuml;,
beide obigen Menureihen sind aufklappbar. Vielleicht haben Sie es auch
schon festgestellt: F&uuml;r einen Webdesigner sind dunke Layouts
komplizierter als helle Layouts. Viele scheitern daran, weil sie ein
rein schwarzes Design fertigen, um dann festzustellen dass es in
Verbindung mit Schrift sehr grell wirkt und auch eine Spannungsarmut
aufweist. Besser ist es mit verschiedenen &auml;hnlich dunklen
Farben oder Farbverl&auml;ufen zu arbeiten. Denn das menschliche
Auge ist dankbar f&uuml;r Kontraste, Farbabstufungen und Schatten,
um sich eine 3D-Welt aufzubauen.<br>
<br>
Dieser hier gew&auml;hlte mittlere Grauton bezgl. der Schrift und
&Uuml;berschrift ist auf dem sehr dunklen Gund relativ angenehm zu
lesen. Gerne k&ouml;nnen Sie aber auch Weiss oder ein helles Grau
oder auch eine andere Farbe w&auml;hlen. &Auml;ndern Sie den
"color-Wert" wenn Sie m&ouml;gen in der Datei "format.css" bei "h2"
(&Uuml;berschrift) und "#sp2" (Schrift).
<br>
<br>
<br>
</span>
<h2>Technik.</h2>
<span class="sp2">
Die Seite kommt ohne Frames und ohne Tabellen aus und ist ein rein
CSS-basiertes Layout.<br>
<br>
Tauschen Sie das Beispiel-Logo durch Ihres aus. Falls Sie die selbe
Logo-Hintergrundfarbe wie im Beispiel-Logo verwenden m&ouml;chten:<br>
RGB-Wert:14/14/14 bzw. Hex-Wert: #0e0e0e <br>
<br>
Die Schrift ist im Blocksatz, d.h. gleiche Ausrichtung der Schrift an
linker und rechter Kante. Das sieht sch&ouml;n aus, jedoch kann es
mitunter bei sehr langen W&ouml;rtern den Text auseinanderziehen.
Die Abhilfe ist einfach, entscheiden Sie je nach Bedarf oder Ihrem
Geschmack: Ersetzen Sie "text-align:justify" durch "text-align:left".
Und zwar ganz oben in der Datei format.css bei:
<br>
td {
text-align:justify;font-family: arial, helvetica, tahoma ,verdana,
sans-serif;
}
<br>
<br>
Wie &uuml;blich mit ausgelagerter CSS-Datei. Platz f&uuml;r <a
href="#">Fusszeile</a> unten sowie oben der <a
href="#">Homepagename</a> als einfacher Text
einzutragen.
<i>Anlegen von Links bzw. HTML-Seiten</i> wie folgt: Die
Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem
neuen Namen abzuspeichern.
<br>
<br>
<br>
</span>
<h2>Navigation.</h2>
<span class="sp2">
Textlinks.
<br>
Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen.
Das Men&uuml; links ist beliebig erweiterbar bzw.
nat&uuml;rlich auch verk&uuml;rzbar durch L&ouml;schen
einiger Links. Die allgemeinen Links (Links im Text) sehen zur Zeit aus
wie nachstehend. Um den Mouseover-Effekt anzuschauen, fahren Sie mit
der Maus &uuml;ber den Link: <a href="#">Beispiel-Link</a>
</span>
<h2>Validierung.</h2>
<span class="sp2"> <a
href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401-blue"
alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
<a href="http://jigsaw.w3.org/css-validator/"> <img
style="border: 0pt none ; width: 88px; height: 31px;"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!"> </a>
</span><!-- ende inhalt-->
</div>
<div id="fussb">
<!-- Fusszeile -->www.ihre-webseiten-url.de
<!-- Ende Fusszeile --></div>
</div>
<!--<div id="re">&nbsp;</div>-->
</div>
</body>
</html>

LG
Tamhid

fexx · 06.09.2010

AW: Templatefarbe ändern

was genau willst du denn anders haben? auf der seite ist ziemlich viel schwarz ;-) aber prinzipiell überall, wo "background-color:#000;" (das ist "hintergrundfarbe schwarz") kannst du das in eine beliebige farbe ändern.

zaka · 06.09.2010

AW: Templatefarbe ändern

fexx schrieb:
was genau willst du denn anders haben? auf der seite ist ziemlich viel schwarz ;-) aber prinzipiell überall, wo "background-color:#000;" (das ist "hintergrundfarbe schwarz") kannst du das in eine beliebige farbe ändern.

Ja aber ich weiß nicht mit welchem Programm ich die Farbe ändern kann? :uhm: Mit NVU bekomme ich es nicht hin. Habe mal mit Frontpage gearbeitet aber mehr auch nicht. Ist jetzt totales Neuland für mich. :rolleyes:

LG
Tamhid

fexx · 06.09.2010

AW: Templatefarbe ändern

naja das template besteht ja aus *.html und *.css dateien. die kannst du mit jedem text-editor öffnen.

dafür sind aber html + css kenntnisse nötig. ich weis nicht wie weit du in diesem thema drin bist

ich denke was du suchst ist ein wysiwyg editor. ich weis aber nicht, welcher da empfehlenswert ist. probiers doch mal mit dem adobe dreamweaver

Bijostone · 06.09.2010

AW: Templatefarbe ändern

du kannst es in jedem editor ändern. nur achte darauf wie du es abspeicherst

s_koch · 06.09.2010

AW: Templatefarbe ändern

zaka schrieb:
Ja aber ich weiß nicht mit welchem Programm ich die Farbe ändern kann? :uhm: Mit NVU bekomme ich es nicht hin. Habe mal mit Frontpage gearbeitet aber mehr auch nicht. Ist jetzt totales Neuland für mich.
LG
Tamhid

Ich mach das mit dem Nachfolger von NVU: KompoZer
Wenn Du den NVU schon kanntest, ist der KompoZer praktisch gleich in der Bedienung.

Eine html Seite mit dazugehöriger CSS Datei kann der Kompozer öffnen, bearbeiten und auch wieder speichern ;-)

Zu dem Problem musst Du aber Grundkenntnisse in html und CSS lernen, entweder über einige tutorials, oder wie ich: hol Dir paar Bücher aus der Bücherei und lies diese im Urlaub ;-)

Normal werden die Angaben über die Farben so geschrieben: #000

das bedeutet: Rot=0 Grün=0 und Blau=0 = totales schwarz

Vollständig wäre es aber pro Farbe 2-stellig, also so: #000000,
wenn es aber "eindeutig" ist, darf es auch einstellig sein.

100% leuchtendes Grün wäre also #00ff00 (oder #0f0)

"ff" ist der höchste Wert den du in HEX 2stellig angeben kannst.

Du kannst aber auch (ohne ein Programm wie KompoZer) die CSS Datei einfach mit dem einfachen Text Editor (Windows) öffnen ( nicht mit Word), die Änderungen tippen und dann wieder ( als Text) speichern.

Hoffe das hilft ein wenig weiter...

fexx · 07.09.2010

AW: Templatefarbe ändern

mal als klein übersicht ;-)