user.css: Anpassen der Styles

Hallo,

ich war kräftig beim Lesen und bin zu folgendem Ergebnis gekommen: Um das Template und das CSS (was ich eigentlich möchte) anzupassen, sollte man eine Kopie des Templates machen (ist geschehen), dann soll man nicht in der original CSS-Datei "herumfuhrwerken" sondern eine "user.css" anlegen (das ist auch geschehen. Unterordner "CSS").

In diesem Beitrag wird jetzt beschrieben, was ich bisher nirgendwo fand, wie die einzelnen "Classes" heißen: http://bj.zemplate.com/protost…rotostar-module-positions
So suchte ich mir die "class header" heraus, da ich dort gerne visuelle Änderungen vornehmen wollte. Ganz einfach, nichts großartiges:

#header {
backgound-image: url("images/headers/bit_zahlen_700x147.png"); 
 background-repeat: no-repeat; 
 background-size: cover;
}

Tja. Ich mache tolle Previews, aber leider tut sich nichts. Ich glaube ein Denkfehler oder Mißverständnis des Systems blockiert mich. Kann mir jemand einen Tipp geben, was ich falsch mache. Eigentlich bin ich mit der Site so weit fertig und habe außer ein paar kleinen Änderungen nicht mehr viel vor (außer neuen Beiträgen zu verfassen).

Ich danke euch im voraus!

Aller beste Grüße
Walter

Zitat von chr-hl

(...) Ansonsten bitte Link zu dem Problem posten.
Christian

Hallo Christian,

hier der Link: https://www.wjk-software.online/index.php/de/
Im übrigen habe ich das ganze anstatt im "Edge" auch im "Chrom" aufgerufen, das gleiche Ergebnis. Nämlich keines... Danke, daß Du Dich dafür interessierst.

Zitat

Mit #header sprichst Du aber die ID an und keine Klasse.

Danke, Tom! Hast Du natürlich recht. Ich habe mit allem ein wenig herumgespielt. Nichts hat bisher eine Wirkung gezeigt, um es einmal so zusagen, ich weiß auch nicht wo die CSS aufgerufen werden soll. So weit bin ich bei meiner Suche noch nicht. (Falls es funktioniert, würde es mich ehrlicherweise auch nicht interessieren.)

Tja, ich bin noch nicht weiter gekommen. Danke Euch!

Aller beste Grüße
Walter

Zitat von skodi

Hallo Walter,
deine Grafik ist in einem "eigenen Modul".
Du kannst das eigene Modul ganz individuell per CSS ansteuern, in dem du ihm einen Modulklassensuffix zuweist.

Danke, Skodi! Das kapiere ich so weit, aber ich möchte die Grafik im Header plazieren. Kann ich das über das Modul? Ich kann die Grafik auch abändern, falls es nötig sein sollte...
Da unten wo die Grafik steht plaziere ich eventuell Banners, das weiß ich aber noch nicht.

Aller beste Grüße
Walter

Hallo Skodi,

erst einmal Danke! Da ich CSS besser kann wie das mit den Modulen. Probiere ich erst einmal den Vorschlag von Christian aus.

Zitat von chr-hl

Moin in die Schweiz,

auf Diener Seite gibt es ein <header> mit der Klasse header!
Wenn Du diesem Bereich CSS "angedeihen" willst, ist ersten auch eine Klasse als Selektor zu verwenden und zweitens die Url zutreffend einzugeben.

Mein Vorschlag (unter der Voraussetzung, dass sich die Grafik im Verzeichnis images unterhalb von templates/protostar befindet.

Code

.header {  backgound-image: url(../images/bit_zahlen_700x147.png);  background-repeat: no-repeat;  background-size:cover;

Hallo Christian,

herzlichen Dank für die Mühe. Ich habe ein wenig experimentiert. Zunächst eine Übersicht:

.header {
  background-image: url("bit_zahlen_950x200.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100px;
  background-color: yellow;
}

Die "background-color: yellow;" habe ich testmäßig eingefügt und es funktioniert, genauso wie "min-height: 100px;". Das Bild habe ich auch in das Verzeichnis "CSS" kopiert. vorher war (ist) es dort, wo Du es vermutet hast "/templates/protostar/images". Es funktioniert, mir unverständlicherweise, einfach nicht. Wie gesagt,"color" und "height" funktionieren.
(Habe auch den Schreibfehler "backgound-image" in "background-image" geändert.)

Aller beste Grüße
Walter

Noch ein Ergebnis als Nachtrag:

.header {
  background-image: -webkit-gradient(
 linear,
 left top,
 right bottom,
 color-stop(0, #EDFC1F),
 color-stop(0.75, #3DFF54)
);
background-image: -o-linear-gradient(right bottom, #EDFC1F 0%, #3DFF54 75%);
background-image: -moz-linear-gradient(right bottom, #EDFC1F 0%, #3DFF54 75%);
background-image: -webkit-linear-gradient(right bottom, #EDFC1F 0%, #3DFF54 75%);
background-image: -ms-linear-gradient(right bottom, #EDFC1F 0%, #3DFF54 75%);
background-image: linear-gradient(to right bottom, #EDFC1F 0%, #3DFF54 75%);
  min-height: 100px;
}

Auch das funktioniert!

Beste Größe
Walter

Zitat von chr-hl

Ergänzung aufgrund eines anderen Threads:
Wie lautet genau der Dateiname und die Verzeichnisse?
Gross-Kleinschreibung nicht "unterschlagen"!

Moin, moin, Christian!

nein, ich unterschlage nichts. Ich habe extra den "FileZilla" aufgemacht, um den Pfad zu kopieren: /public_html/templates/protostar/images/bit_zahlen_950x200.jpg.

Das war im übrigen ja auch meine Befürchtung, deshalb hatte ich das Image ja auch in den Ordner "CSS" kopiert, um von dort, ohne Pfad, die Datei aufrufen zu können. Hatte leider auch nichts gebracht.

Ich habe jetzt was anderes "gebastelt", aber befriedigend ist das natürlich nicht. Danke Dir für Deine Bemühungen schon einmal.

Herzliche Grüße aus Thailand
Walter

Tja, Christian,

kannst Du es mir erklären? Ich weiß es nicht, genau den Link habe ich von Anfang an genommen...

Ich danke Dir von ganzem Herzen für die vielen Mühen und die Ausdauer die Du erbracht hast!

Aller beste Grüße
Walter