Wordpress Farbe in bestimmten Bereich einstellen
lima-city → Forum → Die eigene Homepage → Homepage Allgemein
bereich
bild
boxen
code
dank
element
hintergrund
http
impressum
kachel
kasten
neustart
paar
page
schauen
setzen
tab
tip
url
webseite
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
davidlw schrieb:
Natürlich nicht - da hat sich bei mir auf die Schnelle ein Tippfehler eingeschlichen. Danke Dir, ist korrigiert!
Der Fehler ist mir auch aufgefallen, weil es nicht funktioniert hat. Wollte dich da auch fragen, aber mir ist es dann später aufgefallen als ich denn verglichen habe mit dem anderen.
Mit ist übrigens aufgefallen das mein theme das Hinzufügen von CSS schon so unterstützt, also ich kann dort einfach beliebig in ein bestimmtes Feld diese sachen einfügen.
Wie findest du die Webseite eigentlich jetzt ?
habe nun alles verbessert was du gesagt hattest, nur irgendwie gefällt mir das grün nicht so richtig, was würdest du für eine Farbe wählen ? -
Gefällt mir auf jeden Fall schon besser!
Ich finde das Grün gar nicht mal so verkehrt, aber um dir ein paar Ideen zu geben: such mal nach einem Tool, welches Dir aus einem Bild eine Farbpalette erstellt (gibt mehrere Seiten, die so etwas anbieten). Da kannst Du dann das Hintergrundbild hochladen und Dir anschauen, was die Dir so für Farben vorschlagen.
Ansonsten noch ein paar Vorschläge meinerseits:
- Auf der Startseite alles schön zentrieren: das „aktuelle Beiträge“ in die Mitte von dem grünen Kasten packen (text-align: center), den „Neustart“-Kasten sowie die beiden Radiosender Kacheln zentrieren (das wird evtl. etwas schwieriger, bei dem Neustart Kasten müsstest Du das float: left wegnehmen/auf none setzen und margin-left und margin-right auf auto, bei den beiden Kacheln ist es wahrscheinlich einfacher, die richtigen margins selbst auszurechnen - bei diesem ganzen herumgefloate blicke ich jetzt auf die schnelle auch nicht mehr durch)
- Bei der „Neustart” Seite den Inhalt der grünen Box auf die volle Breite setzen, sodass da rechts nicht so viel Platz verschenkt wird
Generell scheint mir das aber mit dem Design so nicht wirklich vereinbar zu sein, schau mal zuerst, ob Du da irgendwo die Spalten (Column) Anzahl verändern kannst, sieht zumindest von den Klassen her so aus.
Der Neustart Kasten scheint mir in einem 2 spaltigen Layout zu stecken und die beiden Kacheln in einem 3 spaltigen. Deswegen ist da rechts auch überall so viel Platz.
Also schau Dir auf jeden Fall nochmal die Einstellungsmöglichkeiten des Designs an bevor Du da herumfuddelst und am Ende sämtliche Designeinstellungen kaputt machst!
Und wie immer: die Vorschläge basieren lediglich auf meiner persönlichen Meinung - es ist Deine Website also gestalte sie, wie Du es für richtig hälst! -
davidlw schrieb:
Gefällt mir auf jeden Fall schon besser!
Ich finde das Grün gar nicht mal so verkehrt, aber um dir ein paar Ideen zu geben: such mal nach einem Tool, welches Dir aus einem Bild eine Farbpalette erstellt (gibt mehrere Seiten, die so etwas anbieten). Da kannst Du dann das Hintergrundbild hochladen und Dir anschauen, was die Dir so für Farben vorschlagen.
Ansonsten noch ein paar Vorschläge meinerseits:
- Auf der Startseite alles schön zentrieren: das „aktuelle Beiträge“ in die Mitte von dem grünen Kasten packen (text-align: center), den „Neustart“-Kasten sowie die beiden Radiosender Kacheln zentrieren (das wird evtl. etwas schwieriger, bei dem Neustart Kasten müsstest Du das float: left wegnehmen/auf none setzen und margin-left und margin-right auf auto, bei den beiden Kacheln ist es wahrscheinlich einfacher, die richtigen margins selbst auszurechnen - bei diesem ganzen herumgefloate blicke ich jetzt auf die schnelle auch nicht mehr durch)
- Bei der „Neustart” Seite den Inhalt der grünen Box auf die volle Breite setzen, sodass da rechts nicht so viel Platz verschenkt wird
Generell scheint mir das aber mit dem Design so nicht wirklich vereinbar zu sein, schau mal zuerst, ob Du da irgendwo die Spalten (Column) Anzahl verändern kannst, sieht zumindest von den Klassen her so aus.
Der Neustart Kasten scheint mir in einem 2 spaltigen Layout zu stecken und die beiden Kacheln in einem 3 spaltigen. Deswegen ist da rechts auch überall so viel Platz.
Also schau Dir auf jeden Fall nochmal die Einstellungsmöglichkeiten des Designs an bevor Du da herumfuddelst und am Ende sämtliche Designeinstellungen kaputt machst!
Und wie immer: die Vorschläge basieren lediglich auf meiner persönlichen Meinung - es ist Deine Website also gestalte sie, wie Du es für richtig hälst!
Ich habe mittlerweile schon etwas weiter an der Webseite gearbeitet, auch Rechtliche dinge und denn ganzen Kram.
Nun habe ich aber das Problem, das das Impressum beispielsweise ohne einen Farblichen Hintergrund ist, logischerweise alle Posts nicht, weil das ja im CSS so nun festgelegt ist. Wie kann ich dann aber nur für bestimmte seiten wie das Impressum und Dateschutzbestimmungen Regeln wie denn Hintergrund festlegen ohne das sich gleich alle Seiten dadurch verändern ? -
deinprojekt schrieb:
Ich habe mittlerweile schon etwas weiter an der Webseite gearbeitet, auch Rechtliche dinge und denn ganzen Kram.
Nun habe ich aber das Problem, das das Impressum beispielsweise ohne einen Farblichen Hintergrund ist, logischerweise alle Posts nicht, weil das ja im CSS so nun festgelegt ist. Wie kann ich dann aber nur für bestimmte seiten wie das Impressum und Dateschutzbestimmungen Regeln wie denn Hintergrund festlegen ohne das sich gleich alle Seiten dadurch verändern ?
Gernerell ist es mit CSS nicht möglich, einzelne Seiten anzusprechen, Du könntest nur bei unterschiedlichen Seiten unterschidliche CSS Dateien einbinden oder evlt. über ein Wordpress Plugin Seitenspezifisches CSS verwenden (keine Ahnung, ob es so etwas gibt).
In Deinem konkreten Fall könnte allerdings das hier hilfreich sein: https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anot Denn auf der Startseite wird bei dem einen .container Element auch die Klasse homepagecontent gesetzt. Wenn Du also die ausschließt, kannst Du den Hintergrund für alle anderen Seiten setzen, was ja so wie ich dich verstehe genau das ist, was Du willst. -
Gernerell ist es mit CSS nicht möglich, einzelne Seiten anzusprechen, Du könntest nur bei unterschiedlichen Seiten unterschidliche CSS Dateien einbinden oder evlt. über ein Wordpress Plugin Seitenspezifisches CSS verwenden (keine Ahnung, ob es so etwas gibt).
In Deinem konkreten Fall könnte allerdings das hier hilfreich sein: https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anot Denn auf der Startseite wird bei dem einen .container Element auch die Klasse homepagecontent gesetzt. Wenn Du also die ausschließt, kannst Du den Hintergrund für alle anderen Seiten setzen, was ja so wie ich dich verstehe genau das ist, was Du willst.
Ja genau ich möchte das nur auf der Startseite der Hintergrund nicht zu sehen ist.
Danke für denn link, ich bekomme es aber trotzdem nicht hin.
Als Befehlt habe ich das eingegeben:
.entry-content{ not(.homepagecontent) { background-color: rgb(220,255,150); opacity: 0.8;} }
Beim Quellcode des Containers finde ich als Klasse nur dies:
<div class="container"> <div class="row"> <div class="col-md-12 clearfix kad-header-left"> <div id="logo" class="logocase"> <a class="brand logofont" href="http://mb-live.de/"> <div id="thelogo"> <img src="http://mb-live.de/wp-content/uploads/2015/11/MB-Live4.png" alt="MB-LIVE" class="kad-standard-logo" /> </div>
Beitrag zuletzt geändert: 1.12.2015 15:38:40 von deinprojekt -
Ich hab jetzt keine Zeit (und Lust), dir die Grundlagen von CSS beizubringen. Schau dir mal an, wie Pseudoklassen in CSS funktionieren etc. pp und versuch dann den CSS Code den Du da geschrieben hast mal zu korrigieren.
-
.entry-content{ not(.homepagecontent) { background-color: rgb(220,255,150); opacity: 0.8;} }
kann nicht funktionieren. Lies dir das Beispiel aus dem Link nochmal genau durch.
Dann wirst du feststellen dass dies zu einem Ergebnis führt:
.entry-content :not(.homepagecontent) { background-color: rgb(220,255,150); opacity: 0.8; }
Ist jetzt ungetestet. -
all-in1 schrieb:
.entry-content{ not(.homepagecontent) { background-color: rgb(220,255,150); opacity: 0.8;} }
kann nicht funktionieren. Lies dir das Beispiel aus dem Link nochmal genau durch.
Dann wirst du feststellen dass dies zu einem Ergebnis führt:
.entry-content :not(.homepagecontent) { background-color: rgb(220,255,150); opacity: 0.8; }
Ist jetzt ungetestet.
Vielen Dank für die Hilfe, allerdings wird mir dann nur der Text Markiert, ich hätte allerdings gerne denn gesamten Hintergrund so.
Ich hab mich im Internet auch schlau gemacht, und herausgefunden das man mit der ID von der jeweiligen Seite bestimmte eigenschaften festlegen kann.
Habe es mal so versucht:
.page-id-32 { background-color: rgb(220,255,150); opacity: 0.8; }
Das scheint aber irgendwie nicht zu gehen -
Um dir da jetzt weiter helfen zu können, müsste ich schon einen Link zu der Seite haben.
So jedenfalls mit deinen paar Codefetzen kommen wir da nicht weiter. Dei Quellcode weiter unten bezieht sich wahrscheinlich auf den Header.
Der ganze Hintergrund wäre allerdings immer das body Tag. Und von da aus muss man dann weiter schauen, je nach dem welche Bereiche nur den Hintergrund haben sollen.
Zudem kann es sein, dass weitere Elemente über das CSS einen anderen Hintergrund zugewiesen bekommen haben.
Und da du Wordpress nutzt, musst du da selber schauen. Keine Lust da zig CSS Dateien durchzuschauen. -
all-in1 schrieb:
Um dir da jetzt weiter helfen zu können, müsste ich schon einen Link zu der Seite haben.
So jedenfalls mit deinen paar Codefetzen kommen wir da nicht weiter. Dei Quellcode weiter unten bezieht sich wahrscheinlich auf den Header.
Der ganze Hintergrund wäre allerdings immer das body Tag. Und von da aus muss man dann weiter schauen, je nach dem welche Bereiche nur den Hintergrund haben sollen.
Zudem kann es sein, dass weitere Elemente über das CSS einen anderen Hintergrund zugewiesen bekommen haben.
Und da du Wordpress nutzt, musst du da selber schauen. Keine Lust da zig CSS Dateien durchzuschauen.
Joo das kann ich vollkommen verstehen und zwar würde ich gerne das Impressum:
http://mb-live.de/impressum/
in nem anderem Hintergrund habe.
Ich hab auch die ID dafür gefunden und anscheinend sollte es damit gehen, tut es aber nicht. -
Sollte
sein..wrap.contentclass
Es gibt da so ein paar Browsererweiterungen, mit denen kann man sich unter vielem anderen Dingen auch die id und Klassen auf der Webseite anzeigen lassen.
Ich nutze dafür WebDeveloper. Und danach kannst du in der Browserkonsole direkt testen, wie dein CSS Code dann auch Live wirkt, ohne die Seite neu Laden zu müssen. Wenn es dann zufriedenstellend ist, einfach den geänderten Code aus der Konsole kopieren und ins CSS einfügen. Hochladen fertig. -
all-in1 schrieb:
Sollte
sein..wrap.contentclass
Es gibt da so ein paar Browsererweiterungen, mit denen kann man sich unter vielem anderen Dingen auch die id und Klassen auf der Webseite anzeigen lassen.
Ich nutze dafür WebDeveloper. Und danach kannst du in der Browserkonsole direkt testen, wie dein CSS Code dann auch Live wirkt, ohne die Seite neu Laden zu müssen. Wenn es dann zufriedenstellend ist, einfach den geänderten Code aus der Konsole kopieren und ins CSS einfügen. Hochladen fertig.
Danke für denn Tipp ;)
Aber es scheint irgendwie immer noch nicht zu gehen, ich habe denn Code eingegeben:
.page-id-32 .wrap.contentclass { background-color: rgb(220,255,150); } -
deinprojekt schrieb:
Danke für denn Tipp ;)
Aber es scheint irgendwie immer noch nicht zu gehen, ich habe denn Code eingegeben:
.page-id-32 .wrap.contentclass { background-color: rgb(220,255,150); }
Du solltest dich unbedingt mit den Entwickler-Tools deiner Browsers beschäftigen (in FF z.B. werden die mit strg-umschalt-c eingeblendet).
Der von dir eingefügte Code
.page-id-32 .wrap.contentclass { background-color: rgb(220,255,150); }
funktioniert eigentlich, aber durch
.contentclass, .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus { background: #FFF url("http://mb-live.de/wp-content/uploads/2015/11/band-690261.jpg") repeat scroll center center; }
wird deine Farbangabe nicht wirksam. Das merkst, wenn du deinen Code modifizierst, so
.page-id-32 .wrap.contentclass { background-color: rgb(220,255,150); background-image:none; }
-
mein-wunschname schrieb:
deinprojekt schrieb:
Danke für denn Tipp ;)
Aber es scheint irgendwie immer noch nicht zu gehen, ich habe denn Code eingegeben:
.page-id-32 .wrap.contentclass { background-color: rgb(220,255,150); }
Du solltest dich unbedingt mit den Entwickler-Tools deiner Browsers beschäftigen (in FF z.B. werden die mit strg-umschalt-c eingeblendet).
Der von dir eingefügte Code
.page-id-32 .wrap.contentclass { background-color: rgb(220,255,150); }
funktioniert eigentlich, aber durch
.contentclass, .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus { background: #FFF url("http://mb-live.de/wp-content/uploads/2015/11/band-690261.jpg") repeat scroll center center; }
wird deine Farbangabe nicht wirksam. Das merkst, wenn du deinen Code modifizierst, so
.page-id-32 .wrap.contentclass { background-color: rgb(220,255,150); background-image:none; }
Oh ok, Vielen Dank.
Leider kenne ich mich noch nicht so gut in CSS aus, deswegen wusste ich das noch nicht, Vielen Dank ;) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
