Wenn man sein komplett eigenes WordPress Theme erstellt, wie das auch hier der Fall war, fällt auf, dass der Editor irgendwie gar nicht mehr dazu passen will. Also habe ich mich mal daran gemacht den WordPress Editor, oder auch TinyMCE, mit Hilfe von CSS an mein Haupttheme anzupassen, damit das alles gut zusammenpasst und ich schon beim Schreiben einen Eindruck davon habe, wie der fertige Artikel aussehen wird. Und genau das will ich euch jetzt erklären, damit ihr das bei euch auch umsetzen könnt. Keine Angst, dass ist alles gar nicht so schwer und mehr Copy & Paste aus bestehenden Dateien heraus als alles andere. Lasst uns also anfangen: iPhone 6 HüllenCSS Datei für den Editor erstellen
Als erstes wollen wir eine CSS Datei für die Anpassungen an unserem Editor erstellen. Danach werden wir die Datei über die functions.php eures Themes “laden”. Im Prinzip könnt ihr den Großteil der benötigten Sachen aus eurer bestehenden style.css von eurem Theme verwenden. Müsst nur schauen, dass ihr das richtig anpasst. Hierbei ist zu beachten, dass ihr den CSS Eintrag für html als euren Hintergrund ansehen könnt und den Eintrag für Body als den Bereich, in dem ihr dann schreiben werdet. So sieht meine editor.css Datei aus:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
html {
background-attachment: fixed;
background-image: url('bg.png');
}
body {
font-family: 'Roboto Condensed', sans-serif;
color: #7D7D7D;
background: #fff;
moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
padding: 20px;
width: 740px;
margin: 20px auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
blockquote {
font-style: italic;
margin: 1em 3em;
color: #999;
border-left: 2px solid #2ECC71;
padding-left: 1em;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
p {
text-align: justify;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
h1 {
line-height: 1.5em;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
a {
color: #2ECC71;
text-decoration: none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
a:hover {
color: #27AE60;
text-decoration: none;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
center iframe {
max-width: 100%;
}
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
height: auto;
width: 100%;
}
.alignleft {
float: left;
}
|
Keine Kommentare:
Kommentar veröffentlichen