Nichts geändert – CSS funktioniert nicht mehr

(@sliderx3)

Moin!
Ich war gerade dabei, meine Spalten in Elementor zu überarbeiten. Änderungen anzeigen lassen, aber nicht gespeichert. Dann bin ich auf die Seite zurück und der Kalender nutzt auf einmal nicht mehr die CSS-Datei.
Eigentlich sollte dort keine Linie unter dem Datum sein und die Buttons für Tag, Woche und Monat sollen ausgeblendet sein. Das ist nun scheinbar rückgänig gemacht worden.

Die CSS-Datei hatte ich mit dem Plugin „Simple Custom CSS and JS“ erstellt, aber auch im Customizer funktioniert der Code nun nicht mehr.

.eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-right .fc-button-group .fc-timeGridDay-button,
.eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-right .fc-button-group .fc-timeGridWeek-button,
.eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-right .fc-button-group .fc-dayGridMonth-button, button.fc-listMonth-button.fc-button.fc-button-primary {
  
     display: none !important;
	font-family: "Amarante", Sans-serif; !important;
	color: #000; !important;
	opacity:1;
}
.fc-list-item-title .fc-widget-content a {
color: #000000; !important;
	a:link: color: #000000; !important;
} 

.fc-scroller {
height: 100% !important;
}
.fc-today-button {
	background-color: #417844
		opacity:1;
}

	/* amaranth-regular - latin */
@font-face {
  font-family: 'Amaranth';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/amaranth-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/amaranth-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/amaranth-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/amaranth-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/amaranth-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/amaranth-v18-latin-regular.svg#Amaranth') format('svg'); /* Legacy iOS */
}

.wpcf7-list-item label {
	font-size: 1em !important;
}
input[type=checkbox]:checked:before {
	font-size: .75em;
	margin-left: -1px;
}

a:hover,a:active,a:link {
    outline: 0 !important;
    text-decoration: none !important;
}

.elementor-978 .elementor-element.elementor-element-3b4036e .eael-contact-form-7 .wpcf7-form label, .elementor-978 .elementor-element.elementor-element-3b4036e .eael-contact-form-7 .wpcf7-form .wpcf7-quiz-label {
font-family: "Amarante", Sans-serif;
font-size: 18px; 
}

.wpcf7-list-item-label {
	font-size:15px;!important;
}

.wpcf7  {
font-family:amarante;!important;
}

.wpcf7 input[type="submit"]
{
     color: #272727;
     margin: 0px 0px 0px 0px;!important;
	     padding: 5px 10px 5px 10px;
}

.wpcf7 input:active[type="submit"]
{
     background: #272727;!important;
}

.wpcf7 input[type="text"], .wpcf7 input[type="textarea"], .wpcf7 textarea, .wpcf7 input[type="email"]
{
    color: #000;
}

.wpcf7 select {
background-color: #414141 ;
    color:#000;!important;
	    opacity: 1;
}

::-webkit-input-placeholder {
    color: #000; !important;
    opacity: 1;
}

:-moz-placeholder { 
    color: #000; !important;
    opacity: 1;
}

::-moz-placeholder { 
    color: #000; !important;
    opacity: 1;
}

:-ms-input-placeholder { 
    color: #000; !important;
    opacity: 1;
}

Und anbei der Zustandsbericht, falls vonnöten


### wp-core ###

version: 6.1.1
site_language: de_DE
user_language: de_DE
timezone: +00:00
permalink: /%postname%/
https_status: true
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: open
environment_type: production
user_count: 1
dotorg_communication: true

### wp-paths-sizes ###

wordpress_path: /mnt/web415/b1/91/57897191/htdocs/STRATO-apps/wordpress_06/app
wordpress_size: 54,40 MB (57038961 bytes)
uploads_path: /mnt/web415/b1/91/57897191/htdocs/STRATO-apps/wordpress_06/app/wp-content/uploads
uploads_size: 183,55 MB (192466631 bytes)
themes_path: /mnt/web415/b1/91/57897191/htdocs/STRATO-apps/wordpress_06/app/wp-content/themes
themes_size: 23,41 MB (24547757 bytes)
plugins_path: /mnt/web415/b1/91/57897191/htdocs/STRATO-apps/wordpress_06/app/wp-content/plugins
plugins_size: 124,85 MB (130912074 bytes)
database_size: 65,77 MB (68960256 bytes)
total_size: 451,97 MB (473925679 bytes)

### wp-dropins (1) ###

advanced-cache.php: true

### wp-active-theme ###

name: OceanWP Child Theme (oceanwp-child-theme-master)
version: 1.0
author: OceanWP
author_website: https://oceanwp.org/
parent_theme: OceanWP (oceanwp)
theme_features: core-block-patterns, widgets-block-editor, align-wide, wp-block-styles, responsive-embeds, editor-styles, editor-style, menus, post-formats, title-tag, automatic-feed-links, post-thumbnails, custom-header, custom-logo, html5, woocommerce, wc-product-gallery-zoom, wc-product-gallery-lightbox, wc-product-gallery-slider, customize-selective-refresh-widgets, widgets
theme_path: /mnt/web415/b1/91/57897191/htdocs/STRATO-apps/wordpress_06/app/wp-content/themes/oceanwp-child-theme-master
auto_update: Aktiviert

### wp-parent-theme ###

name: OceanWP (oceanwp)
version: 3.4.1
author: OceanWP
author_website: https://oceanwp.org/about-oceanwp/
theme_path: /mnt/web415/b1/91/57897191/htdocs/STRATO-apps/wordpress_06/app/wp-content/themes/oceanwp
auto_update: Aktiviert

### wp-themes-inactive (1) ###

Twenty Twenty-Three: version: 1.0, author: WordPress-Team, Automatische Aktualisierungen aktiviert

### wp-mu-plugins (1) ###

Elementor Safe Mode: version: 1.0.0, author: Elementor.com

### wp-plugins-active (17) ###

All In One WP Security: version: 5.1.4, author: All In One WP Security & Firewall Team, Automatische Aktualisierungen aktiviert
Contact Form 7: version: 5.7.2, author: Takayuki Miyoshi (latest version: 5.7.3), Automatische Aktualisierungen aktiviert
Customizer Export/Import: version: 0.9.5, author: The Beaver Builder Team, Automatische Aktualisierungen aktiviert
Disable & Remove Google Fonts: version: 1.5.2, author: Fonts Plugin, Automatische Aktualisierungen aktiviert
Elementor: version: 3.10.1, author: Elementor.com, Automatische Aktualisierungen aktiviert
Elementor Header & Footer Builder: version: 1.6.13, author: Brainstorm Force, Nikhil Chavan, Automatische Aktualisierungen aktiviert
Essential Addons for Elementor: version: 5.5.3, author: WPDeveloper, Automatische Aktualisierungen aktiviert
Flamingo: version: 2.3, author: Takayuki Miyoshi, Automatische Aktualisierungen aktiviert
Honeypot for Contact Form 7: version: 2.1.1, author: Nocean, Automatische Aktualisierungen aktiviert
Ocean Extra: version: 2.1.1, author: OceanWP, Automatische Aktualisierungen aktiviert
PDF viewer for Elementor: version: 2.9.3, author: RedLettuce Plugins, Automatische Aktualisierungen aktiviert
Premium Addons for Elementor: version: 4.9.47, author: Leap13, Automatische Aktualisierungen aktiviert
Simple Custom CSS and JS: version: 3.42, author: SilkyPress.com, Automatische Aktualisierungen aktiviert
Strato Assistant: version: 7.3.0, author: Strato, Automatische Aktualisierungen aktiviert
Unlimited Elements for Elementor: version: 1.5.50, author: Unlimited Elements, Automatische Aktualisierungen aktiviert
Use Any Font: version: 6.2.98, author: Dnesscarkey, Automatische Aktualisierungen aktiviert
WP Super Cache: version: 1.9.2, author: Automattic, Automatische Aktualisierungen aktiviert

### wp-plugins-inactive (2) ###

Akismet Anti-Spam: version: 5.0.2, author: Automattic, Automatische Aktualisierungen aktiviert
Headers Security Advanced & HSTS WP: version: 5.0.20, author: 🐙  Andrea Ferro, Augusto Bombana, Automatische Aktualisierungen aktiviert

### wp-media ###

image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1692
imagemagick_version: ImageMagick 6.9.12-60 Q16 x86_64 17403 https://legacy.imagemagick.org
imagick_version: 3.5.1
file_uploads: File uploads is turned off
post_max_size: 128M
upload_max_filesize: 128M
max_effective_size: 128 MB
max_file_uploads: 20
imagick_limits: 
	imagick::RESOURCETYPE_AREA: 4 GB
	imagick::RESOURCETYPE_DISK: 9.2233720368548E+18
	imagick::RESOURCETYPE_FILE: 192
	imagick::RESOURCETYPE_MAP: 4 GB
	imagick::RESOURCETYPE_MEMORY: 2 GB
	imagick::RESOURCETYPE_THREAD: 1
imagemagick_file_formats: 3FR, 3G2, 3GP, A, AAI, AI, APNG, ART, ARW, AVI, AVS, B, BGR, BGRA, BGRO, BMP, BMP2, BMP3, BRF, C, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DNG, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, FAX, FILE, FITS, FRACTAL, FTP, FTS, G, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, H, HALD, HDR, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, JNG, JNX, JPE, JPEG, JPG, JPS, JSON, K, K25, KDC, LABEL, M, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPEG, MPG, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, O, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, POCKETMOD, PPM, PS, PS2, PS3, PSB, PSD, PTIF, PWP, R, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCREENSHOT, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIDEO, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMV, WPG, X3F, XBM, XC, XCF, XPM, XPS, XV, Y, YCbCr, YCbCrA, YUV
gd_version: bundled (2.1.0 compatible)
gd_formats: GIF, JPEG, PNG, WebP, BMP
ghostscript_version: not available

### wp-server ###

server_architecture: Linux localhost 3.10.0-1160.71.1.el7.x86_64 #1 SMP Linux localhost 3.10.0-1160.71.1.el7.x86_64 #1 SMP Linux localhost 3.10.0-1160.71.1.el7.x86_64 #1 SMP
httpd_software: Apache/2.4.54 (Unix)
php_version: 7.4.33 64bit
php_sapi: cgi-fcgi
max_input_variables: 4000
time_limit: 240
memory_limit: 512M
max_input_time: 60
upload_max_filesize: 128M
php_post_max_size: 128M
curl_version: 7.86.0 OpenSSL/1.1.1q
suhosin: false
imagick_availability: true
pretty_permalinks: true
htaccess_extra_rules: true

### wp-database ###

extension: mysqli
server_version: 5.7.38-log
client_version: 5.6.45
max_allowed_packet: 67108864
max_connections: 3000

### wp-constants ###

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /mnt/web415/b1/91/57897191/htdocs/STRATO-apps/wordpress_06/app/wp-content
WP_PLUGIN_DIR: /mnt/web415/b1/91/57897191/htdocs/STRATO-apps/wordpress_06/app/wp-content/plugins
WP_MEMORY_LIMIT: 40M
WP_MAX_MEMORY_LIMIT: 512M
WP_DEBUG: false
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: false
WP_CACHE: true
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: Nicht definiert
DB_CHARSET: utf8
DB_COLLATE: undefined

### wp-filesystem ###

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable
mu-plugins: writable

Danke schonmal und viele Grüße

Slider

Dieses Thema wurde geändert vor 1 Jahr, 2 Monaten von sliderx3.
Dieses Thema wurde geändert vor 1 Jahr, 2 Monaten von sliderx3.

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)

Moderator Bego Mario Garde
(@pixolin)

vor 1 Jahr, 2 Monaten
```
.eael-event-calendar-wrapper …
 {
  
     display: none !important;
	font-family: "Amarante", Sans-serif; !important;
	color: #000; !important;
	opacity:1;
}
```
Warum gibst du eine Schriftart an, setzt die Farbe mit dem ungelenken !important und blendest dann den Abschnitt mit display: none !important aus?

Wieso lädst du mit
```
@font-face {
  font-family: 'Amaranth';
  …
```
einen Font „Amaranth“ und versuchst anschließend mit
```
.elementor-978 … {
font-family: "Amarante", Sans-serif;
font-size: 18px; 
}
```
einen anderen Font zu verwenden?

Das übrige CSS passt auch nicht zu den Änderungen, die du vornehmen möchtest.

Leider können wir hier keine Grundlagen in HTML, CSS, JavaScript, PHP usw. vermitteln – dafür gibt es andere Foren. Ich markiere den Thread als „keine Support-Frage“ und schlage vor, dass du deine CSS-Anpassungen nochmal durchgehst.
bscu
(@bscu)

vor 1 Jahr, 2 Monaten

Und noch eine Frage:

Wenn du ein Child-Theme einsetzt, wofür brauchst du dann das Plugin „Simple Custom CSS and JS“?
Thread-Starter sliderx3
(@sliderx3)

vor 1 Jahr, 2 Monaten
Warum gibst du eine Schriftart an, setzt die Farbe mit dem ungelenken !important und blendest dann den Abschnitt mit display: none !important aus?

Die Schriftart in der CSS ist veraltet, ich habe die dann über ein Plugin eingebunden und es vergessen.
Das Problem, das ich mit dem important lösen wollte, war die Schriftfarbe, die partout nicht schwarz werden wollte. Im Baukasten war sie schwarz, auf der Seite weiß. Liegt aber wohl daran, dass es ein Link ist und ich den damit nicht angesprochen habe, das habe ich dann später gelöst bekommen.

Die Änderungen, die ich dort aufgeführt habe, wurden mir 1 zu 1 im Supportforum gegeben und haben bisher ohne Probleme funktioniert. Auf einmal ists damit aber vorbei.

Und noch eine Frage:

Wenn du ein Child-Theme einsetzt, wofür brauchst du dann das Plugin „Simple Custom CSS and JS“?

Die Änderungen wurden nicht geladen und mir wurde dann hier im Forum geraten, ein Plugin dafür zu nutzen, das die Änderungen überschreibt.
- Diese Antwort wurde geändert vor 1 Jahr, 2 Monaten von sliderx3.
Moderator Bego Mario Garde
(@pixolin)

vor 1 Jahr, 2 Monaten
Die Schriftart in der CSS ist veraltet, ich habe die dann über ein Plugin eingebunden und es vergessen.

Veralteter Code, vergessener Code, Code der nicht funktioniert, Code der irgendwann Fragen aufwirft (Wieso habe ich den eingefügt? Was wollte ich damit bewirken? Wieso funktioniert es nun nicht?) – das erhöht alles den Wartungsaufwand deiner Website.

Das Problem, das ich mit dem important lösen wollte, …

Die Verwendung des Wertes !important überschreibt die Vorgaben anderer Regeln. Das hört sich erst einmal gut an, führt aber schnell zu Problemen, etwa wenn du dich fragst, wieso die anderen Regeln nicht funktionieren.

Nehmen wir an, du hast in einem Parent Theme folgende CSS-Anweisungen:
```
p { 
  color: #000; 
}
p.wichtig {
  color: #fff;
  background: #444;
}
```
Damit wird normaler Text in schwarz ausgegeben, ein Absatz mit der CSS-Klasse .wichtig in rot und mit grauem Hintergrund.

Nun möchtest du die Textfarbe in normalen Absätzen auf ein weniger kontrastreiches Grau ändern. Dabei verwendest du !important.
Mit p { color: #444 !important; } überschreibst du nicht nur den Farbwert für normale Absätze, sondern sorgst auch dafür, dass als wichtig markierter Text in grauer Schrift auf grauem Hintergrund dargestellt (und damit unlesbar) wird. Schließlich überschreibt !important die Regel, die für p.wichtig verwendet wird (allerdings in diesem Beispiel nur für die Farbe, nicht für den Hintergrund).

Für jemand, der auf Honorarbasis Support für ein Plugin leistet, ist es leichter, eine CSS-Regel mit !important vorzuschlagen, als sich mit den Details der Webseite zu beschäftigen, vorhandene CSS-Regeln auszuwerten und spezifischere Selektoren auszuwählen. Es reicht nicht, sowas unreflektiert zu übernehmen – du musst es an die Besonderheiten deiner Website anpassen.
Zugegeben ist das bei Verwendung von Elementor nicht ganz einfach, weil Elementor mehrfach verschachteltes HTML produziert und dabei sehr viele CSS-Klassen verwendet. Allerdings sehen die Entwickler von Elementor vermutlich auch gar nicht vor, dass ein Endanwender hier noch individuelle Anpassungen vornimmt.

Wie auch immer … jetzt sind wir an dem Punkt, den wir eigentlich nicht erreichen möchten: CSS-Grundlagen zu vermitteln. Es ist auch nicht die Aufgabe des Support, indivduelle Änderungswünsche an Themes und Plugins umzusetzen.
Du findest in Freelancer-Portalen wir Fiverr viele Anbieter, die für ein kleines Honorar solche Änderungen umsetzen. Denen möchten wir ungern ihre Arbeit abnehmen.

Die Änderungen wurden nicht geladen …

Das hat in den allermeisten Fällen damit zu tun, dass es eine CSS-Regel gibt, die spezifischere Selektoren verwendet. Beispiel: dein Theme verwendet eine CSS-Regel .entry-content p { color: #000080; }. Dir gefällt die blaue Schrift nicht und du verwendest in einem Child-Theme p { color: #000; }. Jetzt müsste die Schrift doch schwarz dargestellt werden, weil dein Child Theme deine CSS-Regel später lädt und damit die CSS-Regeln des Parent Theme überschreibt? Stimmt, aber nur für eine Regel p { color: …; } im Parent Theme (die es gar nicht gibt), während die spezfischere Regel .entry-content p { color: #000080; } davon unberührt bleibt. „Meine CSS-Änderungen werden nicht geladen! 😭“ – doch, werden sie, nur bewirken sie nichts.

… mir wurde dann hier im Forum geraten, ein Plugin dafür zu nutzen …

Ich weiß jetzt nicht, auf welchen Thread du dich konkret beziehst, aber wenn jemand (ohne Angabe weiterer Details) fragt, wie eigene CSS-Regeln eingefügt werden können, würde ich zunächst auf den Customizer hinweisen, der ein Eingabedeld für Zusätzliches CSS hat. Was du dort einträgst, bleibt auch nach Theme-Updates erhalten und wenn du außer CSS keine Änderungen am Theme vornehmen möchtest, kannst du auf ein Child-Theme ganz verzichten (und damit den Wartungsaufwand weiter verringern).
Bevor es die Möglichkeit gab, CSS-Regeln im Customizer zu ergänzen, haben wir tatsächlich oft ein Plugin empfohlen, weil das immer noch weniger Wartungsaufwand ist, als ein Child-Theme zu nutzen. Aber ob du nun den Customizer oder ein eigenes Plugin verwendest: aus fehlerhaftem CSS wird damit kein richtiges CSS.
Ganz verkehrt ist, ein Child-Theme anzulegen und dann noch zusätzlich ein Plugin zu verwenden, obwohl die CSS-Regel bequem in das Stylesheet des Child-Themes gepasst hätte.
- Diese Antwort wurde geändert vor 1 Jahr, 2 Monaten von Bego Mario Garde. Grund: Antwort zu "mir wurde dann hier im Forum geraten, ein Plugin dafür zu nutzen"
bscu
(@bscu)

vor 1 Jahr, 2 Monaten

Die Änderungen, die ich dort aufgeführt habe, wurden mir 1 zu 1 im Supportforum gegeben

Wenn du dort schon angefragt hast, warum machst du dort nicht weiter?

haben bisher ohne Probleme funktioniert. Auf einmal ists damit aber vorbei.

Könnte ja durch ein Update des Plugins passiert sein.

Die Änderungen wurden nicht geladen und mir wurde dann hier im Forum geraten, ein Plugin dafür zu nutzen, das die Änderungen überschreibt.

Aber doch nicht bei einem Child-Theme, dabei kannst du Einträge in die style.css des Child-Themes schreiben.

Thread-Starter sliderx3
(@sliderx3)

vor 1 Jahr, 2 Monaten

Nabend!
Danke für die ausführliche Antwort. Die CSS habe ich entsprechend abgeändert.

Ein Childtheme wurde mir empfohlen, damit sich nichts auf meiner Seite verschiebt, falls das Parent-Theme mal verändert wird.

Ich werde dann in den anderen Thread wechseln.

Viele Grüße

Ansicht von 6 Antworten - 1 bis 6 (von insgesamt 6)

Das Thema „Nichts geändert – CSS funktioniert nicht mehr“ ist für neue Antworten geschlossen.

Ansichten