farbmanagement in css - id´s o.ä. für farben vergeben?

Harry.H

Hallo Forum,
suche eine Möglichkeit das Farbmanagement meiner HP zu vereinfachen.
Im Moment sieht es so aus, dass ich in meiner css datei, Klassen anlege die meinetwegen so aussehen:

Code

/*3  MENU 2, level 2, active state (ACT) */
TD#menu_2 DIV.e2_hl {
  font-size: 10px;
  font-weight:bold;
  padding-left:15px;
  padding-right:15px;
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: #eeeeee;

da es in dieser Datei nicht nur eine Klasse gibt sondern einige mehr aber nur zwei oder drei Farben, ist es sehr aufwendig immer alle Klassen zu suchen wenn aus - #eeeeee; - meinetwegen - #ff0022 - werden soll.

Ich suche nun eine Möglichkeit die es mir erlaubt alle Farben mit einem Befehl zu ändern.
Möglicherweise geht es mit einer Art ID-Vergabe, die wie folgt lauten könnte:

ID-1 = #eeeeee

der Code dazu würde dann so aussehen:

Code

/*3  MENU 2, level 2, active state (ACT) */
TD#menu_2 DIV.e2_hl {
  font-size: 10px;
  font-weight:bold;
  padding-left:15px;
  padding-right:15px;
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: 1;

Wenn ich dann die ID so veränder

ID-1 = #ff0022

würde sich natürlich in allen Klassen die Farbe auf einen Streich ändern.

Lange Erklärung - kurze Frage

Gibt es so etwas?

Bin für alle Anregungen wie immer sehr dankbar

Gruß

Harry

pindakaas

was ?

rück mal deinen ganzen css code rüber !

und am besten auch den html teil oder zumindest n teil damit man sich vorstellen kann was du erreichen willst

Harry.H

Hallo
danke das du dich mit meinem Problem beschäftigen willst
komme leider gerade nicht an meinen Code ran.
Die Seite erstelle ich mit Typo3 deswegen würde der html Code denke ich nicht viel bringen.

Noch mal ganz kurz.

Ich möchte für bestimmt Farben einen Platzhalter einsetzen z.B Farbe1
ich möchte festlegen das Farbe1 in meinem Fall Farbe - #eeff33 ist.

Also erscheint überall dort wo ich den Platzhalter "Farbe1" eingesetzt habe die oben genannt farbe.

Wenn ich nun die Farbe in meinem Platzhalter in farbe #1166ee ändere soll natürlich überall wo mein Platzhalter "Farbe1" eingesetzt ist nun die neu Farbe angezeigt werde.

In Programmiersprachen nennt man das glaube ich auch variablen festlegen.

Wenn ich wieder auf meinen CSS code zugreifen kann und mein Problem immer noch nicht gelöst ist poste ich den Code noch.

Die Variante die Farbe durch Strg+F zu ersetzen ist mir auch schon in den Sinn gekommen finde ich aber eigentlich nicht sehr komfortabel.

Wie gesagt bin für jede Hilfe dankbar

Gruß
Harry

pindakaas

du kannst doch einfach ne klasse erstellen die das was du willst beinhaltet und die überall wo du willst einfügen

Klar, aber wenn ich in allen Klassen die Farben bestimme ist es doch sehr aufwendig diese nachher zu ändern.
Nehmen wir an ich habe ein Layout mit den Farben Blau und Gelb.
Blau ist die Überschrift, der Rahmen der 1.Navigation, der Text in der 2.Navigation, der Unterstrich beim Mausover effekt der links, die Schriftfarbe beim Highlighten der 1.Navigation, die Schriftfarbe der Fusszeile ..... bla bla bla
Gelb ist die Schriftfarbe der 1.Navigation, der Hintergrund der Contenttabelle, der Rahmen der Tabelle in der 2.Navigation....usw.
Du siehst das die Farben doch in vielen kleinen Elementen festgelegt werden müssen.
Wenn ich mir jetzt überlege das mein Farblayout nicht mehr Blau - Gelb ist sonder Grün - Rot sein soll muss ich ja alle Element suchen in denen die Farbe Blau eingetragen ist sie mit der Farbe Grün austauschen.
Es wäre doch viel einfacher wenn ich an einer bestimmten stelle definiere, dass 1 = Blau und 2=Gelb ist, dann kann ich bei einem Farbwechsel einfach die Definition in 1=Grün und 2=Rot ist.
Ich hoffe das ist jetzt verständlich.
Gruß
Mario

pindakaas

du scheinst das prinzip nicht verstanden zu haben du weist doch wie man style sheets zentran definiert oder ?
also im head :

Code

<head>
<style type="text/css">
rot.{background-color:red;}
blau.{background-color:blue;}</style>
</head>


<body>


<div class="rot">rotes div </div>
<div class="blau">blaues div </div>

Alles anzeigen

wertvolle lektüre über css und html http://de.selfhtml.org

Hi,
ich poste hier mal eine alte css von mir.
wie gesagt ne alte css, mitlerweile sind sie einwenig aufgeräumter und strukturierter.

Code

div {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 11px;
	background-repeat: no-repeat;
}


/* Standardlinks */
 a:link { color:#000000; text-decoration:none; }
 a:visited { color:#000000; text-decoration:none; }
 a:hover { color:#777777; }
 a:active { color:#FF0000; }


/* Links ebene 1 */


a.e1:link, a.e1:visited, a.e1:active {
	color: #000000;
	display: block;
	font-weight: normal;
	padding-right: 10px;
	padding-left: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 11px;
	border-right: 1px;
	border-left: 1px;
}


a.e1:hover {
	color: #40403A;
	display: block;
	font-weight: normal;
	padding-right: 10px;
	padding-left: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 11px;
	border-right: 1px;
	border-left: 1px;
}


.e1_hl {
	color: #000000;
	display: block;
	font-weight: normal;
	padding-right: 10px;
	padding-left: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 11px;
	border-bottom: 1px solid #ffffff;


}
 
 
 /*  links ebene 2  */
 
 a.e2:link, a.e2:visited, a.e2:active {
	color: #000000;
	background-color: #FFCB11;
	display: block;
	font-weight: normal;
	padding-top: 4px;
	padding-right: 10px;
	padding-bottom: 4px;
	padding-left: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 11px;
	border-top: 1px solid #FFCB11;
	border-right: 1px solid #FFCB11;
	border-left: 1px solid #FFCB11;
}


a.e2:hover {
	color: #40403A;
	background-color: #FFB504;
	display: block;
	font-weight: normal;
	padding-top: 4px;
	padding-right: 10px;
	padding-bottom: 4px;
	padding-left: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 11px;
	border-top: 1px solid #FFB504;
	border-right: 1px solid #FFB504;
	border-left: 1px solid #FFB504;
}


.e2_hl {
	color: #40403A;
	background-color: #FFB504;
	display: block;
	font-weight: normal;
	padding-top: 4px;
	padding-right: 10px;
	padding-bottom: 4px;
	padding-left: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 11px;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
}






 a.e2left:link, a.e2left:visited, a.e2left:active {
	color: #000000;
	background-color: #FFCB11;
	display: block;
	font-weight: normal;
	padding-top: 4px;
	padding-right: 10px;
	padding-bottom: 4px;
	padding-left: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 11px;
	border-top: 1px solid #FFCB11;
	border-right: 1px solid #FFCB11;
	border-left: 1px solid #FFCB11;


}
a.e2left:hover {
	color: #40403A;
	background-color: #FFB504;
	display: block;
	font-weight: normal;
	padding-top: 4px;
	padding-right: 10px;
	padding-bottom: 4px;
	padding-left: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 11px;
	border-top: 1px solid #FFB504;
	border-right: 1px solid #FFB504;
}
.e2left_hl {
	color: #40403A;
	background-color: #FFB504;
	display: block;
	font-weight: normal;
	padding-top: 4px;
	padding-right: 10px;
	padding-bottom: 4px;
	padding-left: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 11px;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}


  
div.e2 {
	background-color: #FFC910;
	border: 1px solid #FFFFFF;
}




/*  links ebene 3  */


div.e3 {


	
}


a.e3:link, a.e3:visited, a.e3:active {
	color: #000000;
	background-color: #FFFFCC;
	display: block;
	font-weight: normal;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 11px;

}


a.e3:hover {
	color: #40403A;
	background-color: #FFB504;
	display: block;
	font-weight: normal;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 11px;


	
}
 


.e3_hl {
	color: #40403A;
	background-color: #FFB504;
	display: block;
	font-weight: normal;
	padding-top: 2px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 11px;


	
}
td.e3{
	color: #40403A;
	background-color: #FEE781;
	display: block;
	font-weight: normal;
	padding-top: 2px;

	padding-bottom: 2px;

	text-align: center;
	text-decoration: none;
	font-size: 11px;
	border-right: 1px solid #FFB504;
	border-left: 1px solid #FFB504;
}
/* texfeld*/


div.tf1 {
	background-image: url(../bilder/textfeld.jpg);

}
td.tf1 {
	color: #333333;
	padding-top: 20px;
	padding-right: 30px;
	padding-bottom: 4px;
	padding-left: 25px;
	font-size: 11px;


}


/* aktuelles */
td.nle1 {
	padding-top: 2px;
	padding-right:10px;
	padding-bottom: 2px;
	padding-left: 10px;
	vertical-align: top;
}


td.nle2 {
	padding-top: 4px;
	padding-right:10px;
	padding-bottom: 10px;
	padding-left: 10px;
	vertical-align: top;
}
td.nle3 {

	padding-right:10px;
	padding-left: 10px;
	vertical-align: top;
	background-color: #777777;
}
td.nle4 {
	padding-top: 3px;
	padding-right:10px;
	padding-bottom: 0px;
	padding-left: 10px;
	vertical-align: top;
}

a.nle2:hover {
	color: #B48003;
	text-decoration: none;

}


/* shortcut */
td.she1 {
	padding-top: 2px;
	padding-right:10px;
	padding-bottom: 2px;
	padding-left: 10px;
	vertical-align: middle;
	font-weight: bold;
	text-align: center;
	color: #FFFFCC;
	background-color: #FFB504;










}


td.she2oben {
	padding-top: 3px;
	padding-right:10px;
	padding-bottom: 3px;
	padding-left: 10px;
	vertical-align: top;
}


td.she2 {
	padding-top: 3px;
	padding-right:10px;
	padding-bottom: 3px;
	padding-left: 10px;
	vertical-align: top;
	border-top: 1px dotted #FFB504;


}

a.she2:hover {
	color: #FFB504;
	text-decoration: none;

}




/* Zusatzoptionen */


.dick-rot {
	font-size: large;
	color: #FF0000;
}
.beispiel {
	font-size: 9px;
}
.klein-grau {
	font-size: 10px;
	color: #666666;
}


.klein-grau-rechts {
	font-size: 10px;
	color: #666666;
	text-align: right;


}




/* tabellen*/


.tdkopf {
	font-size: 12px;
	font-weight: bold;
}


.tde2 {
	font-weight: bold;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 2px;
	padding-right: 20px;
}


.tde3 {
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 2px;
	padding-right: 20px;
}


.tde4 {
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 20px;
	vertical-align: bottom;
}






/* Tabellenoption	 */
table {
    font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 11px;
	}


.hintergrund {
	background-repeat: no-repeat;
}


.mittel-grau {
	font-size: 10px;
	color: #333333;


}


.gross-schwarz {
	font-size: 13px;
	font-weight: bold;
}


.zeile {
	line-height: 19px;
}


.formular {
	border: thick none;
	padding: 2px;
}




.off {
	background: #FFFFFF;
	border: 1px solid #acabaa;
}




.on {
	color:777777;
	background: #FFCC00;
	border: 1px solid #acabaa;
}
.tabellemiite {
	vertical-align: middle;
}


.strasse {
	font-size: 10px;
	display: block;
	font-weight: bold;
	background-color: #FFFFCC;
	padding-right: 3px;
	padding-left: 3px;
	border: 1px solid #dddddd;
}


.feld {
	font-size: 11px;
	background-color: #FFFFCC;
	padding-left: 10px;
	padding-top: 1px;
	padding-bottom: 1px;
	border: 1px solid #777777;
}


/* Potthoff CSS	 */


.ph1 {
	font-size: 17px;
	padding-top: 1px;
	padding-bottom: 1px;
	font-weight: bold;
	text-align: center;




}	


.ph2 {
	font-size: 11px;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 7px;
	font-weight: bold;


}	


.ph3 {
	font-size: 11px;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 15px;
}

Alles anzeigen

langes teil ich weiß warscheinlich auch nicht ganz so wie es ein Profie macht aber stell diir mal vor ich will jetzt die Farbe #FFCB11 in #EE22AC ändern. Was mach ich dann?

Sleeme

wäre es nicht einfacher irgendwie die ganze seite mit dem php befehl

Code

$quelltext = ereg_replace("Farbe1","#eeff33,$quelltext);

echo ($quelltext)
zu durchsuchen und dann Farbe1 durch #eeff33 ersetzen?
Weiss nich obs get, nur so ne spontane eingebung, glaube aber das das schwer umzusetzen wäre mit Typo3..

nickname

Also im Prinzip ein einfaches suche-ersetze ...

hi
meine css dateien für typo3 sehen auch ein wenig anders aus. wie gesagt ist eine ziemlich alte css datei.
php ist leider garnicht mein ding.
Wie oben beschrieben ist mein suchen und ersetzen Befehl Strg+F finde ich aber nicht besoders kofortabel. deswegen bin ich ja auf der suche nach ner einfacheren variante. strg+f ist zwar gut und schön nervt aber nach ner weile wenn man viel ausprobieren will.

hier mal ei paar tipps :
-du kannst mehrere klassen verleihen das heist du musst nicht in 5 klassen das selbe reinschreiben sondern kannst das mit einer klasse machen

-du kannst natürlich auch klassen für farben verleihen und zwar genauso wie du es am anfang des treades wolltetst, vielleicht hab ich dein problem ja auch nicht richtig verstanden , aber das ist der sinn von css

-du scheinst zum beispiel bestimmte ebenen zu haben du kannst also der ebene 1 die klasse ebene1 verleihen und so :

Code

.ebene1{was auch immer die ebene für eigenschaften haben soll;}
            .ebene1 a{so verleist du allen links innerhalb dieser ebene diese eigenschaft }

für mehr ordnung sorgen
http://de.selfhtml.org/ DA hab ich auch css gelernt der BESTE(!) Ort dafür

pindakaas

das war ich sorry war nich eigeloggt

Harry.H

ups! War bei den letzten Antworten wohl auch nicht eingelogt.
Ich denke das meine css dateien mitlerweile etwas sortierter aussehen.
Trotz aller Ordnung, muss ich aber wenn ich die Farben ädern will die ganze css Datei durchsuchen und schritt für schritt die Farben ändern.

Meine Frage ist:
Ist es möglich eine css Datei so aufzubauen das man an nur einer stelle alle Farben verteilen verwalten kann?

JA !

pindakaas

was hindert dich daran ?

Tags