Clean Retina, Muster im CSS ändern

Gelöst Katharina Lezuo
(@katharina-lezuo)

vor 8 Jahre, 2 Monaten

Hallo liebes Forum,
bin ganz neu, was die Erstellung einer eigenen Website anbelangt. Das Theme „Clean Retina“ hat mir zunächst sehr gut gefallen, nun stört mich aber das Streifenmuster hinter dm Header. Laut system muß ich das im CSS ändern. Bevor ich da ev. etwas falsch mache, bitte ich Euch um Hilfe, was und wo genau ich das ändere. Vielen Dank!
LG
Katharina

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

Moderator Bego Mario Garde
(@pixolin)

vor 8 Jahre, 2 Monaten
Hallo Katharina,

im Back End gibst du unter Design > Theme Optionen > Design Optionen > Benutzer CSS (Pulldown-Feld ganz unten) folgendes ein:
```
#branding { background: none; }
```
Wenn du das Feld lieber in weiß (oder einer anderen Farbe) haben möchtest, kannst du auch noch einen Farbwert angeben:
```
#branding { background: none #ffffff; } 
```
Die Farbe wird hexadezimal angegeben. Dazu gibt es im Internet Umrechner, z.B. http://www.color-hex.com/

Noch eine Bitte: wenn du Fragen hast, hilft es sehr, wenn du einen Link zu deiner Website und eine Quellangabe mit Link zu deinem Theme oder Plugins angibst. Ohne diese Angaben muss man erstmal selber suchen und das Theme selbst installieren.
Thread-Starter Katharina Lezuo
(@katharina-lezuo)

vor 8 Jahre, 2 Monaten

Lieber Bego Mario Garde,
vielen Dank für Deine Hilfe, werde es gleich mal ausprobieren und ja, entschuldige, Du hast natürlich recht mit den Links. Ich bessere mich 😉

Thread-Starter Katharina Lezuo
(@katharina-lezuo)

vor 8 Jahre, 2 Monaten

Also das hat bei filzkunst.bayern schon mal super geklappt. Noch ein paar Fragen hätte ich, wenn´s nicht zu unverschämt ist:
1. Quellangabe mit Link zu meinem Theme (Clean Retina). Was bedeutet das genau bzw. wie muß der Link aussehen, damit Du bzw. der Support schnell etwas anfangen kann damit?
2. Wie müßte die Eingabe im CSS aussehen, wenn ich statt einem farbigen Hintergrund ein eigenes Bild haben möchte? und
3. Wie müßte die Eingabe im CSS aussehen, wenn ich statt dem bisherigen Muster ein anderes Muster haben möchte und wie kann ich solch ein anderes Muster generieren?
Lieben Dank für Deine Geduld
LG
Katharina

Thread-Starter Katharina Lezuo
(@katharina-lezuo)

vor 8 Jahre, 2 Monaten

Lieber Bego Mario Garde,
eines ist mir noch aufgefallen. Nach der Eingabe hat sich zwar Hintergrund hinter dem Header geändert, aber nicht im Fußzeilenbereich? Ich versuche mal selbst da im CSS etwas zu machen, aber vielleicht hast Du dazu noch einen prägnanten Tipp! Merci!
LG
Katharina
Moderator Bego Mario Garde
(@pixolin)

vor 8 Jahre, 2 Monaten
Hallo Katharina,

irgendwie muss ich gerade an eine Fernsehwerbung für eine beliebte Süßigkeit mit Spielzeug-Füllung denken: „Das sind ja schon drei Wünsche auf einmal!“ 😀

Quellangaben: Es ist halt leichter, wenn man gleich einen Link zum Theme hat (z.B. https://wordpress.org/themes/clean-retina/), besser noch, wenn man es direkt in der Anwendung, sprich: auf deiner Website, sieht. Den Link hast du ja nachgereicht … sieht alles schon ganz gut aus. (Übrigens: wenn du ein Kontaktformular verwendest, benötigst du auch eine Datenschutzerklärung. Der Link muss von jeder Webseite mit einem Klick erreichbar sein (d.h., kein Untermenü). Ich würde das über benutzerdefinierte Menüs realisieren, eins davon („Impressum, Datenschutzerklärung“) per Widget im Fußzeilenbereich.)

Eigenes Bild im Kopfzeilenbereich: Bild hochladen in die Mediathek. (Das Bild sollte nicht zu groß ausfallen. Keiner möchte 3MB-Bilddateien herunterladen, die dann als Hintergrund angezeigt werden. Ggf. in einem Bildbearbeitungsprogramm verkleinern, komprimieren, mit einem Tool wie Imageoptim optimieren.) Webadresse des Bilds merken. Asnchließend änderst du dein benutzerdefiniertes Stylesheet folgendermaßen ab:
```
#branding, #colophon { background: url('http://filzkunst.bayern/wp-content/uploads/2015/03/filz.jpg') repeat; }
```
Der von mir verwendeten Pfad zum Bild soll natürlich nur ein Beispiel sein. Die Eigenschaft „repeat“ gibt an, dass das Bild wiederholt werden soll.

Vielleicht ist dir aufgefallen, dass ich die ID #colophon hinzugefügt habe. Damit verwendest du das gleiche Hintergrundbild für den Fußzeilenbereich. Möchtest du unterschiedliche Bilder, sieht das z.B. so aus:
```
#branding { background: url('http://filzkunst.bayern/wp-content/uploads/2015/03/filz_blau.jpg') repeat; }
#colophon { background: url('http://filzkunst.bayern/wp-content/uploads/2015/03/filz_weiss.jpg') repeat; }
```
Anderes Muster: Ich persönlich mag die Muster bei Subtle Patterns sehr gerne, wobei ich die nach Bedarf in einem Grafikprogramm einfärbe (neue Ebene, einfärben, Transparenz einstellen). Die Muster unterliegen alle der Creative Commons-Lizenz, d.h. es genügt, wenn du einen Hinweis im Impressum unterbringst: Hintergrundmuster „Felt„, CC BY-SA 3.0 – Subtle Patterns © Atle Mo
Das Einbinden geht wie oben beschrieben: Bild Hochladen, dann CSS anpassen und den Link zum Bild verwenden. Über die Bildgröße brauchst du dir dann keine Gedanken mehr machen.

Wenn noch was unklar ist, meld dich einfach. 🙂

Bego
Thread-Starter Katharina Lezuo
(@katharina-lezuo)

vor 8 Jahre, 2 Monaten

Also ganz großes Lob und Danke, Bego, für Hilfe. Ist sicher so nicht selbstverständlich.
Je mehr ich eintauche, desto mehr Fragen stellen sich und dann darf ich Dich wieder fragen. Das ist klasse! 😉
Schönen Sonntag noch!
LG
Katharina

Thread-Starter Katharina Lezuo
(@katharina-lezuo)

vor 8 Jahre, 2 Monaten

Lieber Bego,
Nun doch noch was. Ich habe nun ein eigenes Bild als Hintergrund in Kopf- und Fußzeilenbereich eingefügt. Mit repeat; wiederholt sich das Bild, was ich aber eigentlich in dm Fall nicht will. Aber selbst wenn ich das repeat; rauslösche, wiederholt es sich trotzdem?? Das Bild bzw. der Hintergrund soll den jeweiligen Bereich aber voll ausfüllen. Was mache ich falsch?
lg
Katharian
Moderator Bego Mario Garde
(@pixolin)

vor 8 Jahre, 2 Monaten
Mit repeat wiederholt sich das Bild horizontal und vertikal (Kachel). repeat-x wiederholt nur horizontal, repeat-y nur vertikal. no-repeat… na, du weißt schon.

Etwas komplizierter wird es, wenn das Bild unabhängig von der Größe des Browserfensters immer den kompletten Bildschirm ausfüllen soll. Hier kann man folgendes verwenden:
```
#branding, #colophon {
 background: url('http://filzkunst.bayern/wp-content/uploads/2015/03/filz_blau.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
```
Leider wird die CSS-Eigenschaft „cover“ nur von modernen Browsers richtig unterstützt. D.h. das funktioniert nur in Safari 3+, Chrome (alle), IE 9+, Opera 10+ und Firefox 3.6+.

Es gibt andere Lösungsansätze, die aber hier übers Ziel hinausschießen würden.
Thread-Starter Katharina Lezuo
(@katharina-lezuo)

vor 8 Jahre, 2 Monaten
Hallo Bego, ich hoffe, ich kann die Mühe, die Du Dir machst irgendwann mal weitergeben. 😉 Danke! Hab etwas Bauchweh, weil ich schon wieder was hätte, was ich nicht verstehe. Ich frag´einfach:

1. Über meinen Beiträgen erscheint immer auch „von admin“ vgl. http://filzkunst.bayern/filzen-fuer-einen-guten-zweck/. kann ich das löschen?

2. Die Anzeige unter meinen Blogbeiträgen mit den socia-media links und dem Balken zum vorigen bzw. zum nächsten Beitrag schaut nicht wirklich gut bzw. etwas gedrängt aus: http://filzkunst.bayern/filzen-fuer-einen-guten-zweck/. kann ich das ändern?

3. Unter der Möglichkeit einen Kommentar (z.B. zu Beitrag http://filzkunst.bayern/filzen-fuer-einen-guten-zweck/) zu schreiben steht auch immer:
```
"Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b>
<blockquote cite=""> <cite>  <del datetime=""> <em> <i> <q cite=""> <strike> <strong>"
```
Muß das so sein oder kann ich das irgendwie rauslöschen!
Ich weiß, ich bin nervig, aber ich hoffe trotzdem auf Hilfe! 😉
Moderator Bego Mario Garde
(@pixolin)

vor 8 Jahre, 2 Monaten
Zu 1: Das löst du wieder mit einer CSS-Regel
```
.entry-meta .by-author { display: none; }
```
Zu 2: Das ist in der Tat unschön. Auf die Schnelle ist mir dazu nur folgendes eingefallen:
```
#content ul-default-wp-page { clear: left; }
```
… wobei ich die Formatierung ingesamt nicht so hübsch finde.

Zu 3: Bei diesem Hinweis möchte man darauf hinweisen, dass – sehr eingeschränkt – auch HTML verwendet werden kann. Bekommt man weg mit
```
#respond form p.form-allowed-tags { display: none; } 
```
Die CSS-Regeln kannst du einfach untereinander schreiben.
Thread-Starter Katharina Lezuo
(@katharina-lezuo)

vor 8 Jahre, 2 Monaten

Du bist echt der Hit. Vielen Dank und schönen Tag Dir!

Moderator espiat
(@espiat)

vor 8 Jahre, 1 Monat

Als gelöst markiert und Danke an Bego Mario Garde 😉

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

Das Thema „Clean Retina, Muster im CSS ändern“ ist für neue Antworten geschlossen.

Themen-Schlagwörter

Ansichten