ilch Forum » Ilch CMS 2.X » Design und Templates » Änderungen in style.css

Geschlossen
  1. #1
    User Pic
    Rubber_Duck Mitglied
    Registriert seit
    06.08.2017
    Beiträge
    22
    Beitragswertungen
    0 Beitragspunkte
    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
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    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 lächeln

    www.bilder-upload.eu/bild-4d0c65-1538423997.png.html

    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.
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Talo Mitglied
    Registriert seit
    20.05.2018
    Beiträge
    29
    Beitragswertungen
    1 Beitragspunkte
    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. zwinker
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    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
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Talo Mitglied
    Registriert seit
    20.05.2018
    Beiträge
    29
    Beitragswertungen
    1 Beitragspunkte
    ZitatZitat geschrieben von Slipi
    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

    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.
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    hacki65 Mitglied
    Registriert seit
    10.06.2018
    Beiträge
    43
    Beitragswertungen
    6 Beitragspunkte
    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
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    XAMPP wäre auch gut. Dadurch kannst das Layout offline bearbeiten und bei Fertigstellung hochladen.

    www.apachefriends.org/de/index.html

    Slioi


    Zuletzt modifiziert von Slipi am 02.10.2018 - 18:41:20
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    Rubber_Duck Mitglied
    Registriert seit
    06.08.2017
    Beiträge
    22
    Beitragswertungen
    0 Beitragspunkte
    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)
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    Slipi ilch.de Design
    Registriert seit
    19.01.2018
    Beiträge
    938
    Beitragswertungen
    117 Beitragspunkte
    Einfach melden ggf kann man auch über ts die Probleme und Lösungen erörtern.

    Slipi
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    Rubber_Duck Mitglied
    Registriert seit
    06.08.2017
    Beiträge
    22
    Beitragswertungen
    0 Beitragspunkte
    ZitatZitat geschrieben von Slipi
    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

    Hmm, das würde bedeuten das ich das CMS hier auf meinem Rechner installiere ??
    Das müsste ich mal ausprobieren.

    MfG

    Rubber_Duck (Dirk)
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    Rubber_Duck Mitglied
    Registriert seit
    06.08.2017
    Beiträge
    22
    Beitragswertungen
    0 Beitragspunkte
    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
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    Siggi Hall Of Fame
    Registriert seit
    08.02.2007
    Beiträge
    6.558
    Beitragswertungen
    327 Beitragspunkte
    Naja du gibst Farben wohl falsch an.

    Falsch
    background-color: #F1F1F1B3;

    Richtig
    background-color: #F1F1F1;


    Hexcode hat nur 6 Stellen


    Zuletzt modifiziert von Siggi am 16.10.2018 - 21:07:19
    0 Mitglieder finden den Beitrag gut.
  13. #13
    User Pic
    Rubber_Duck Mitglied
    Registriert seit
    06.08.2017
    Beiträge
    22
    Beitragswertungen
    0 Beitragspunkte
    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)
    0 Mitglieder finden den Beitrag gut.
  14. #14
    User Pic
    Siggi Hall Of Fame
    Registriert seit
    08.02.2007
    Beiträge
    6.558
    Beitragswertungen
    327 Beitragspunkte
    Das kannst du mit der Angabe von rgba als Color machen

    background-color: rgba(255, 0, 0, 0.3);
    0 Mitglieder finden den Beitrag gut.
  15. #15
    User Pic
    Rubber_Duck Mitglied
    Registriert seit
    06.08.2017
    Beiträge
    22
    Beitragswertungen
    0 Beitragspunkte
    ZitatZitat geschrieben von Siggi
    Das kannst du mit der Angabe von rgba als Color machen

    background-color: rgba(255, 0, 0, 0.3);

    Hallo Siggi,
    nochmals vielen lieben Dank für diesen Hinweis ! Ja , so klappt es :-)

    DANKE !!!!

    MfG

    Rubber_Duck (Dirk)
    0 Mitglieder finden den Beitrag gut.
  16. #16
    User Pic
    hacki65 Mitglied
    Registriert seit
    10.06.2018
    Beiträge
    43
    Beitragswertungen
    6 Beitragspunkte
    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.
    0 Mitglieder finden den Beitrag gut.
  17. #17
    User Pic
    Rubber_Duck Mitglied
    Registriert seit
    06.08.2017
    Beiträge
    22
    Beitragswertungen
    0 Beitragspunkte
    ZitatZitat geschrieben von hacki65
    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.


    Hallo Hacki65,

    ja, soweit hatte ich es jetzt auch lächeln. Aber trotzdem Danke für den Tip !

    Gruß

    Rubber_Duck (Dirk)
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Design und Templates

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten