Hallo und juten Abend,
da ich so gar keinen Plan von CSS habe, habt bitte ein wenig Nachsicht mit mir.
Ich würde gerne das Design der genannten HP ändern. Sprich Farben, Hintergund, die schwarzen Umrandungen, transparenz usw. also, klein und vorsichtig anfangen.
Soweit ich das bisher rausbekommen habe, ist dafür ja die style.css im Designordner zuständig, nur wie bekomme ich heraus welcher Eintrag wofür zuständig ist ?
Ja, ich könnte bei den Farbe experimentieren, d.h. irgenbdwo einen Farbwert ändern, hochladen und suchen wo sich was geändert hat aber das scheint mir sehr mühselig und fehlerbehaftet.
Gibt es da ne Übersicht oder wie würde es einfacher gehen ? Über das Menue Webentwickler in Firefox habe ich es schon versucht aber hat mich nicht wirklich weiter gebracht.
Also, wer kann mir mal erklären wofür was steht ?
Im Vorraus besten Dank für die Mühe !!!!
Gruß Rubber_Duck (Dirk)
verwendete ilch Version: 2.x
betroffene Homepage: externer Link
Beitrag zur Merkliste hinzufügen
Hier kann eine Notiz zum Merk-Eintrag hinzugefügt werden (optional)
ilch Forum » Ilch CMS 2.X » Design und Templates » Änderungen in style.css
| Geschlossen | ||
-
Mo. 01.10.2018
21:47 Uhr
#1
- Registriert seit
- 06.08.2017
- Beiträge
- 22
- Beitragswertungen
-
Mo. 01.10.2018
22:04 Uhr
#2
- Registriert seit
- 19.01.2018
- Beiträge
- 954
- Beitragswertungen
Versuch es unter fierfox.
Geh auf deiner Seite, rechtsklick/Elemente untersuchen.
Im pop-up fenster wird dir die Struktur angezeigt. Wenn du mit deiner mouse zbdie <div class="container"> öffnest und dann auf <div class="gaming"> drückst, wird dir auf der rechten Seite die dazugehörigen befehle in der CSS angezeigt (rechte Seite).
Hab dir ein Bild gezeichnet
externer Link
Alle veränderungen die z.b in der CSS vornimmst, kannst du die css speichern Stilbearbeitung klicken, dann bekommst du auf der linken Seite eine auflistung der einzellnen CSS die gerade verwendet werden. Bei veränderung steht neben der css zb.style.css speichern.
Alles was du un der Index veränderst müsstest du kompieren und in deinen editor eifügen. -
Im Chrome gibt es dafür per F12 die Analyse.
Ein Click auf den Pfeil auf dem Quadrat und du kannst mit der Maus über alle Elemente der Seite hoovern.
Wenn du ein Element anklickst, markiert er dir zum einen die Code-Zeile, zum anderen zeigt er dir auch bei Styles an, welche Definitionen für dieses Element gelten inkl. hierarchischer Überschreibung.
Nun kannst du die oberste Definition, die ein bestimmtes Merkmal definiert kopieren, in die Styles.css einfügen und die Values ändern.
Vorsicht: Gerade wenn man sich neu mit CSS beschäftigt, verliert man schnell den Überblick. Tauchen Definitionen in der Styles.css mehrmals auf, gilt automatisch die zuletzt verarbeitete. Auf solche Fehler zu kommen, kann ganz schön nervenraubend sein.
-
Di. 02.10.2018
16:25 Uhr
#4
- Registriert seit
- 19.01.2018
- Beiträge
- 954
- Beitragswertungen
Tipp von mir, erstelle eine neue CSS und darin schreibst du die bearbeiteten Befehle.
Die Befehle in der CSS werden vor der style.css und bootstrap.css bevorfzugt.
Daher müsstest du die index.php deines Layout bearbeiten.
Füge im diesen Code in den <head> ein damit die neue CSS funktioniert
<link href="/application/layouts/DeinLayout/neu.css" rel="stylesheet" type="text/css">
Natürlich sollte die css hochgeladen werden application/layouts/DeinLayout/.
Slipi -
Zitat geschrieben von Slipi
er sollte lieber das ganze template kopieren, namen ändern (auch in der cfg) und dort sauber in der style.css arbeiten. dafür ist sie ja da. -
Di. 02.10.2018
17:57 Uhr
#6
- Registriert seit
- 10.06.2018
- Beiträge
- 43
- Beitragswertungen
F12 funzt auch im Firefox. Ansonsten, wie die anderen schon gesagt haben: Mit dem Developerwerkzeug arbeite ich nur. Man klickt rechte Maus auf ein Element der Seite und wählt "Element untersuchen".
Links sieht man die HTML-Struktur und rechts die zugehörigen CSS Anweisungen des gewählten Elements.
In diesem Fenster lassen sich alle Parameter ändern und man sieht sofort die Auswirkung. Hast Du deine Änderungen fertig, kannst du mit rechter Maustaste auf dieses geänderte Element klicken und "Regel kopieren" auswählen. Den Code aus der Zwischablage kann man dann in die CSS einfügen.
Ich würde zum Anfang erst mal alle eigenen Anpassungen ganz am Ende der CSS eintragen. Das würde vorhergehende Anweisungen dann überschreiben. Ist nicht der elegante Stil, aber zum Austesten geeignet.
LG hacki65
P.S.: Noch ein Tipp - nimm dir zum Editieren einen ordentlichen Texteditor wie z.B. Notepad++
Zuletzt modifiziert von hacki65 am 02.10.2018 - 18:00:41 -
Di. 02.10.2018
17:58 Uhr
#7
- Registriert seit
- 19.01.2018
- Beiträge
- 954
- Beitragswertungen
XAMPP wäre auch gut. Dadurch kannst das Layout offline bearbeiten und bei Fertigstellung hochladen.
externer Link
Slioi
Zuletzt modifiziert von Slipi am 02.10.2018 - 18:41:20 -
Mi. 03.10.2018
11:56 Uhr
#8
- Registriert seit
- 06.08.2017
- Beiträge
- 22
- Beitragswertungen
Hallo zusammen,
erst einmal recht herzlichen Dank für Eure Tips !!
Als Editor nehme ich Notepad++, der zeigt ja unter anderem auch die Zeilennummern an in der man Änderungen ausprobiert hat.
Das mit Firefox und Chrome kenne ich, habe das auch schon ausprobiert und hat geklappt, allerdings nur für eine minimale Änderung in der style.css.
Ich habe bisher das originale Design kopiert, umbenannt und als Standarddesig definiert, soweit habe ich es schon. Änderungen nehme ich in dieser style.css vor.
Ich muss mich halt noch mit css auseinandersetzen da ich blutiger Anfänger bin. Es ist schon nicht ganz so einfach wenn man da noch keine Ahnung hat welche Auswirkungen so eine Änderung in einer Zeile nach sich zieht. Das hängt dann wohl mit den Vererbungen zusammen. Nun ja, ein Schritt nach dem anderen.
Ich gehe auch hin und mache mir von der vorhandenen cyle.css erst eine Kopie und teste dann die Veränderungen. Zum lernen habe ich auch schon eine passende Seite gefunden; Selfhtml, da wird alles schön auf deutsch erklärt :-)
Das mit dem kopieren der geänderten Zeilen und einfügen in die vorhandene CSS muss ich ausprobieren.
Nun ja, ich denke wenn ich nicht weiter komme, dann lest ihr wieder von mir :-)
Also, nochmals herzlichen Dank für Eure mühen und Tips !!
MfG
Rubber_Duck (Dirk) -
Mi. 03.10.2018
15:15 Uhr
#9
- Registriert seit
- 19.01.2018
- Beiträge
- 954
- Beitragswertungen
Einfach melden ggf kann man auch über ts die Probleme und Lösungen erörtern.
Slipi -
Mi. 03.10.2018
20:50 Uhr
#10
- Registriert seit
- 06.08.2017
- Beiträge
- 22
- Beitragswertungen
Zitat geschrieben von Slipi
Hmm, das würde bedeuten das ich das CMS hier auf meinem Rechner installiere ??
Das müsste ich mal ausprobieren.
MfG
Rubber_Duck (Dirk) -
Di. 16.10.2018
19:11 Uhr
#11
- Registriert seit
- 06.08.2017
- Beiträge
- 22
- Beitragswertungen
Hallo Community,
ich habe nun so einiges in der style.css geändert und bisher hat es auch so einigermassen geklappt.
Nun aber habe ich ein kleines Problem.
Ich wollte die Farbgebung des Forums ändern. Da dies aber ein Modul ist und ich in der index.css nicht rumbasteln möchte (dann würden die Änderungen beim nächsten Modulupdate ja auch weg sein), habe ich den für die Farbgebung zuständigen Code gesucht und gefunden.
Diesen habe ich dann kopiert und am Ende in der style.css eingefügt.
Dies hat auch geklappt. Nur tritt jetzt folgendes Problem auf. In der Browseransicht per Firefox und Google-Chrom wird alles richtig dargestellt aber wenn die Seite mit dem Internetexplorer oder Edge aufgerufen wird, fehlt ein großer Teil des Hintergrundes.
Wer Zeit und Lust hat kann dies ja mal testen, dann ist es besser zu sehen was ich meine.
Ach ja, das habe ich in der style.css eingefügt :
.ilch-head {
background-color: #0f27c5;
color: #FFF;
}
Die Frage ist ja auch....mache ich mir das zu einfach mit dem hineinkopieren solch eines Codes in die style.css oder liegt der Fehler woanders ?
MfG Rubber_Duck (Dirk)
Betroffene Homepage: wot-clan-wfa.de -
Di. 16.10.2018
21:06 Uhr
#12
- Registriert seit
- 08.02.2007
- Beiträge
- 6.558
- Beitragswertungen
Naja du gibst Farben wohl falsch an.
Falschbackground-color: #F1F1F1B3;
Richtigbackground-color: #F1F1F1;
Hexcode hat nur 6 Stellen
Zuletzt modifiziert von Siggi am 16.10.2018 - 21:07:19 -
Di. 16.10.2018
21:57 Uhr
#13
- Registriert seit
- 06.08.2017
- Beiträge
- 22
- Beitragswertungen
Hallo Siggi,
jep, das wars. Hatte mir die Farben aus dem Developerwerkzeug rausgesucht.......da konnte man auch die Transparenz wählen.......das machte dann wohl die zwei zusätzlichen Zeichen aus.
OK, vielen Dank für den Tip.
Jetzt ist zwar die Transparenz futsch aber die Seite wird wieder überall ordentlich angezeigt.
Tja, sowas kommt davon wenn man so gar keine Ahnung hat und rumprobiert ;-)
MfG Rubber:Duck (Dirk) -
Di. 16.10.2018
22:09 Uhr
#14
- Registriert seit
- 08.02.2007
- Beiträge
- 6.558
- Beitragswertungen
Das kannst du mit der Angabe von rgba als Color machen
background-color: rgba(255, 0, 0, 0.3);
-
Do. 18.10.2018
17:36 Uhr
#15
- Registriert seit
- 06.08.2017
- Beiträge
- 22
- Beitragswertungen
Zitat geschrieben von Siggi
Hallo Siggi,
nochmals vielen lieben Dank für diesen Hinweis ! Ja , so klappt es :-)
DANKE !!!!
MfG
Rubber_Duck (Dirk) -
Fr. 19.10.2018
16:31 Uhr
#16
- Registriert seit
- 10.06.2018
- Beiträge
- 43
- Beitragswertungen
Wenn du im Developerwerkzeug über den runden Farbknopf hoverst, siehts du einen Tooltip: Shift gedrückt halten und auf den Knopf drücken schaltet die Angaben um zwischen HEX, RGB und HSL. HEX mit transparenz erkennt IE und Edge nicht, daher bei transparenz immer erst auf RGB umschalten. -
Fr. 19.10.2018
19:08 Uhr
#17
- Registriert seit
- 06.08.2017
- Beiträge
- 22
- Beitragswertungen
Zitat geschrieben von hacki65
Hallo Hacki65,
ja, soweit hatte ich es jetzt auch. Aber trotzdem Danke für den Tip !
Gruß
Rubber_Duck (Dirk)
| Geschlossen | ||
 |
Zurück zu Design und Templates | |
Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten