CSS Anpassung klappt nicht

  • Hallo Zusammen


    Ich möchte gerne kleine Anpassungen machen am CSS. Aber gewisse Sachen klappt nicht.


    Ich habe den Header (Class ".container-fluid" in weiss eingestellt und alle Links (Text/Bilder) als rot definiert. Aber die SocialLogos welche rechts oben sind nicht zu sehen. Finde aber nicht warum.

    Das Headerbild kann ich irgend wie via CSS nicht anpassen, möchte, dass es immer so breit ist wie das Menü egal mit welcher Auflösung (PC, Laptop, Smartphone) die Seite angeschaut wird.

    Möchte Das Menü und der Text inhalt, dass dieser gleich breit ist.


    Habe diese zusätzliche CSS gemacht, welche die andere Übersteuert. Habe ich was vergessen, das meine oben erwähnten Punkte funktioniert?


    Geht um den Link: https://test.myservice4you.ch


    Vielen Dank für euren Typ.

  • was meinst du den das der Headerbild so breit wie das Menü ist? Die Naviagtion geht über die komplette Breite, plus umbruch. Habe nur 17 Zoll Monitor . Also dein Menü ist sogar zu groß für mein Bildschirm und das habe ich selten.

    Vieleicht ist es bei den anderen nicht so , aber das könnte man aber auch ändern das es eigentlich immer und überall passen könnte.


    Wegen der roten schrift würde ich auf der schnelle hier color:red reinschreiben


    Code
    .bgtoph-icon-clr {
        border-color: #ffffff;
        color: red;
  • Deine Seite hast du mit WordPress erstellt... hmmm... dann bist du eigentlich im falschen Forum, denn einiges (wenn nicht gar alles) von deinen Problemen kann man bestimmt in den Theme (Di Responsive) einstellen. Und wie ich im Vergleich zwischen deiner Seite und dem Demo von 'Di Responsive' sehe, hast du da schon einiges geändert... hoffentlich auch updatesicher im Child-Theme oder im Customizer (zusätzliches CSS).

    Auf jeden Fall wirst du hier nur Hilfe in Sachen HTML und CSS bekommen, denn es wird sich keiner wegen dieser Probleme ein WordPress Installation mit deinem Theme anlegen wollen.

    Mit etwas CSS im Customizer -> 'zusätzliches CSS' (gaaaaanz am Ende dort einfügen) ließen sich ein paar deiner Anliegen beseitigen...

    Es würde jetzt zu weit führen das alles zu erklären... und wahrscheinlich wären wir dann zu Weihnachten noch nicht fertig....,, deswegen ausnahmsweise eine beinahe fertige Lösung. Probiere es aus und wenn es nicht deinen Wünschen entspricht, kannst die paar Codezeilen wieder aus dem zusätzlichen CSS löschen.

    Und teste bitte auch alle Unterseiten, ob sich dort unerwünschte Nebenwirkungen zeigen.

  • Danke für den Code Teil.

    Das Menü funktioniert gut.

    Habe auch alle "a:" Code die Farbe angepasst.

    Aber unter bei den News "https://lucia-jantos.myservice4you.ch/news/ " wird trotzdem noch eine Grüne schrift angezeigt, wenn man über den Link "Titel des News" fährt. Komisch ist auch, dass News die einzige Seite ist, wo nicht die ganze breite nimmt wie die anderen Seiten.

    Anscheinend.

    Wo haben die Entwickler dieses Designs dies den versteckt?

  • Um die 'hover'-Farbe der Links (und auch ggf für :focus und :active) zu ändern, teste mal folgenden Code...

    Code
    body a:hover, body a:focus, body a:active {
      color: #------; /*statt ------- deine Wunschfarbe eintragen zB #ff0000 für rot*/
    }

    Da hat dein Theme standardmäßig wohl eine Sidebar mit 33% Breite und da bleiben für den Rest eben nur 66% übrig.

    Bitte mal testen - sollte den Sidebar auf 0 Breite setzen und den Rest auf 100%.


    Beide Codes wieder am Ende des 'zusätzlichen CSS' im Customizer eintragen.

    Und natürlich auch wieder auf allen Seiten (Unterseiten) prüfen, ob unerwünschte Nebenwirkungen auftreten.

  • Danke für den Code.

    Habe nun noch "nav-previous a:hover" und "nav-next a:hover" im zusätzlichen CSS eingetragen, aber Die Farbe hat sich nicht geändert. Oder habe ich was vergessen?

    Ziel wäre, dass Alle Knöpfe "Goldige Hintergrundfarbe haben und Schwarze Schrift und sich die Schrift ändert auf Rot, wenn man darüber fährt.

  • Deine Beschreibung ist etwas 'unscharf' :(! Aber wenn ich es recht verstehe, dann willst du deine Buttons immer mit Hintergrund 'goldig' - Schrift schwarz und bei Hover die Schrift in rot?

    Dies ganze Animation mit dem schwarzen Hintergrund und dem 'Balken' wird allerdings bei dir mittels des Pseudoelementes ::before erzeugt - das musst du zunächst mal unsichtbar machen, sonst funkt dir das immer dazwischen

    Und dann im zweiten Schritt die Hntergrund- und Schriftfarbe(n) setzten... dieser Code könnte dir helfen.

    Die eingetragenen Werte kannst du nach Bedarf einstellen - und bitte wieder überall auf unerwünschte Nebenwirkungen prüfen.

  • Habe bei Zusätzlichem CSS diesen Code " col-md-4 alignc-spsl cprtcntr_ctmzr {width: 100%;} " eingefügt, aber es macht leider nicht was ich möchte.

    Ich möchte, dass "(C) Lucia Jantos" auf 1 Zeile steht.


    Wo genau definiert man beim Kontaktformular, die Farbeinstellung der Felder? Ich habe es zwar gefunden, aber nirgends wo ich die blaue Markierung der ausgewählte Zeile ändern kann. Ich möchte dies gerne in Gold haben.

    Warum wird auf Smartphone das TelefonSymbol (Header) auf 1ster Zeile gelassen und die TelefonNr auf die nächste, hab ich nicht so eingestellt.

  • Wegen dem "(C) habe ich gefunden.

    Musste nicht "col-md-4 alignc-spsl cprtcntr_ctmzr" anpassen sondern "flex-basis: 100%; width: 1000%; max-width: 1000%" jetzt wirds korrekt angezeigt.

    Jetzt suche ich nur noch die Markierungsfarbe bei der Dropdown Formularfeld. Dort möchte ich nicht blau sondern gold haben.

    Auch das TelefonSymbol (Header) suche ich nocht, wo dies eingestellt wird. den es wir auf Smartphone komisch dargestellt.

    Komisch finde ich auch, dass der Slider auf dem Smartphone Links und rechts abgeschnitten wird, den auf PC/Laptop wirds korrekt angezeigt.

  • Schau doch mal, ob du in deinem CSS (wahrscheinlich im 'zusätzlichen CSS') folgende Einträge findest?

    Hier sind die Einträge zu .row .col-md-4 für die Breite zuständig. Setze dort mal flex-basis und max-width auf einen höheren Wert und schau, was passiert.

    Aber bitte nach der Änderung prüfen, ob da an anderer Stelle unerwünschte Effekte auftreten!

  • Danke hat gut funktioniert


    Finde ich dies nur oder ist es so, dass das Bild "über mich" verzogen ist auf der Startseite? Warum wird nur dieses Bild verzogen? Habe nur 1 grösse Angabe gemacht, die andere grösse berechnet er selbst. Wo kann man den alternativ Text für die SocialMedien Symbole ausschalten, finde es nicht. Auf dem Smartphone wird leider der Slider abgeschnitten, warum?

  • Deinen Eindruck, dass das Bild "über mich" verzogen ist, kann ich nicht teilen - sieht für mich ok aus.

    Auch die Zahlen (Proportionen) zeigen mir, dass alles ok ist mit dem Bild.

    Das Original ist 300px * 283px --- der Quotient also 1,06. Das Bild wird jedoch bei verschiedenen Bildschirmgrößen unterschiedlich skaliert, bis zu einer Größe von 444px * 419px --- also wieder ein Quotient von 1,06. Das Bild wird zwar durch die Skalierung (Anzeige größer als Original) etwas unscharf aber verzieht sich nicht... na ja, eine hübsche Frau kann sowieso nichts 'entstellen'.

    Bei deinem Problem mit dem Tooltip (?alternativ Text der SocialMedia Icons?) kann ich dir nicht weiter helfen. Da hast du irgendein Tooltip-Plugin installiert, das diesen Hover-Effekt mit JavaScript erzeugt. Du müsstest da in den Einstellungen schauen, ob man es dort abschalten kann... oder, wenn es nur ein Plugin für diesen Tooltip ist, das Plugin deaktivieren.

    Dein Slider... auch wieder so eine JavaScript Geschichte... aber mit dem folgenden CSS sollten zumindest die gröbsten Anzeigefehler (abschneiden der Bilder) vermieden werden.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!