Template Coffe Bar- Cappuchino von David Cummins

[B.E.A.]

Wer benutzt dieses Template und könnte mir ein paar Fragen zum style.css beantworten?

1. Anscheinend brauche ich beide: cappucino.css und style.css - stimmt das, oder würde auch nur das cappuchino.css alle Formatierungen regeln?

2. Wenn ich beide css bräuchte, kann ich dann das cappuchino.css in das style.css kopieren, damit dort die gleichen Änderungen drin sind? Ich bin ja nun nicht der Css-Profi und ändere es nur im "try and error" -Prinzip

3. Wer weiß wie ich im Header den Blogtitel und die Blogbeschreibung ausblende, bzw. mit einer Farbe versehe, die man nicht sieht, damit es so klein und unsichtbar wie möglich ist.

4. In der linken Seitenleiste würde ich gerne die Schrift in Weiß haben. Da sie aber für den ganzen Blog im css hinterlegt ist, habe ich das nur als Beispiel mal mit der Textfarbe im HTML-Klotz geändert unter Infos. Geht das auch über css und wie? Und leider ist der hover-link dadurch auch in weiß, obwohl der grün sein sollte

5. Ich würde gerne das Erstellungsdatum auf der Startseite in der Statischen Seite "Willkommen" nicht angezeigt bekommen. Weiß jemand wie das geht?

6. Ich habe noch immer nicht raus bekommen wofür diese css sind. Vielleicht weiß der eine oder andere wofür die gut sind.


.serendipity_commentDirection {
font-family: verdana, arial, helvetica, sans-serif;
color: #506070;
font-size: x-small;
font-weight: normal;
text-align: left;
vertical-align: top;
}

form#theme_chooser option {
width: 130px;
}

div#wrapper {
margin: 0 auto 0 auto;
width: 900px;
}

input, textarea {
font-size: 10pt;
font-family: verdana, arial, helvetica, sans-serif;
}

th, td {
font-size: 10pt;
}

p, td, th, div, span {
font-family: verdana, arial, helvetica, sans-serif;
}

hr {
clear: both;
}

a:link,
a:visited,
a:active {
color: #586183;
font-weight: bold;
text-decoration: none;
}

a:hover {
color: #1A7A1B;
text-decoration: underline;
}

#theme_chooser select {
width: 165px;
}

.serendipity_entry p {
margin: 0px;
padding-bottom: 0px;
}

.serendipity_center {
font-size: xx-small;
margin-left: auto;
margin-right: auto;
text-align: center;
}

.serendipity_msg_important {
color: red;
}

.serendipity_msg_notice {
color: green;
}

div.serendipityPlug {
padding-left: 10px;
}

div.serendipityPlug a {
text-decoration: none;
border: 0px;
}

.serendipityImageButton {
cursor: pointer;
}



Schaut euch das hier einmal an http://www.kipadu.de/praxisblog

Ich danke euch für die oder andere Hilfe.
Liebe Grüße Bea

[yellowled]

1. Anscheinend brauche ich beide: cappucino.css und style.css - stimmt das, oder würde auch nur das cappuchino.css alle Formatierungen regeln?

2. Wenn ich beide css bräuchte, kann ich dann das cappuchino.css in das style.css kopieren, damit dort die gleichen Änderungen drin sind? Ich bin ja nun nicht der Css-Profi und ändere es nur im "try and error" -Prinzip

Du brauchst beide, aber wenn Du Änderungen an der cappuchino.css vornimmst, reicht das; dieselben Ändeurngen müssen nicht auch noch in der style.css gemacht werden, cappchino.css überschreibt die Styles in style.css, dennoch brauchst Du auch die style.css als "Rückversicherung".

Hintergrund: style.css ist das grundsätzliche Stylesheet des Templates, cappuchino.css ist das Stylesheet des Cappuchino-Colorsets dieses Templates. Willst Du an diesem spezielle Colorset etwas ändern, musst Du das also nur in cappuchino.css tun.

3. Wer weiß wie ich im Header den Blogtitel und die Blogbeschreibung ausblende, bzw. mit einer Farbe versehe, die man nicht sieht.

Ich darf in aller Bescheiden heit auf http://matthias.yellowled.de/archives/6 ... reich.html verweisen ...

4. In der linken Seitenleiste würde ich gerne die Schrift in Weiß haben. Da sie aber für den ganzen Blog im css hinterlegt ist, habe ich das nur als Beispiel mal mit der Textfarbe im HTML-Klotz geändert unter Infos. Geht das auch über css und wie? Und leider ist der hover-link dadurch auch in weiß, obwohl der grün sein sollte

#serendipityLeftSideBar {color: #fff;} hinzufügen, sollte tun.

5. Ich würde gerne das Erstellungsdatum auf der Startseite in der Statischen Seite "Willkommen" nicht angezeigt bekommen. Weiß jemand wie das geht?

Kann man mal eine URL zu der betreffenden Seite bekommen? Das würde helfen. EDIT: Ups, ganz am Ende war sie ja. Das habe ich übersehen.

Für den Rest brauche ich ein wenig Zeit

YL

[yellowled]

5. Ich würde gerne das Erstellungsdatum auf der Startseite in der Statischen Seite "Willkommen" nicht angezeigt bekommen. Weiß jemand wie das geht?

Kann man mal eine URL zu der betreffenden Seite bekommen? Das würde helfen. EDIT: Ups, ganz am Ende war sie ja. Das habe ich übersehen.

Okay, ich nehme mal an, Du möchtest es nicht nur auf »Willkommen«, sondern auch auf »Über mich« loswerden? Falls ja:

1. Kopiere die Dateien plugin_staticpage.tpl und plugin_staticpage_aboutpage.tpl aus /plugins/serendipity_event_staticpage/ in das Templateverzeichnis. Bearbeite diese kopierten Dateien mit einem Texteditor wie folgt:

Code: Select all

<!-- {if $staticpage_author} -->
<!--    <div class="staticpage_author">{$staticpage_author|@escape}</div> -->
<!-- {/if} -->

Das blendet die Anzeige des Autorennamens aus.

Code: Select all

<!--    <div class="staticpage_metainfo"> -->
<!-- {if $staticpage_lastchange} -->
<!--    <span class="staticpage_metainfo_lastchange">{$staticpage_lastchange|date_format:"%Y-%m-%d"}</span> -->
<!-- {/if} -->

Und das die Anzeige des Datums. Alternativ kannst Du beide Abschnitte auch einfach entfernen.

Allerdings wirst Du nun auf keiner statischen Seite, auch nicht auf neu erstellten, diese Daten angezeigt bekommen - ganz oder gar nicht

YL

[yellowled]

6. Ich habe noch immer nicht raus bekommen wofür diese css sind. Vielleicht weiß der eine oder andere wofür die gut sind.

.serendipity_commentDirection {
font-family: verdana, arial, helvetica, sans-serif;
color: #506070;
font-size: x-small;
font-weight: normal;
text-align: left;
vertical-align: top;
}

Das formatiert die Hinweise (engl. »Directions«) zum Kommentarformular.

form#theme_chooser option {
width: 130px;
}

Bestimmt die Breite des Auswahlfeldes für das Seitenleistenplugin »Template dropdown«, falls es verwendet wird.

div#wrapper {
margin: 0 auto 0 auto;
width: 900px;
}

Das gesamte Template ist in ein Container-div namens #wrapper verpackt, welches 900px breit und auf der Seite zentriert ist. Vereinfacht gesagt: Das bestimmt die Breite des Blogs.

input, textarea {
font-size: 10pt;
font-family: verdana, arial, helvetica, sans-serif;
}

Schriftgröße und -art in Eingabefeldern und Textboxen in Formularen etc.

th, td {
font-size: 10pt;
}

Schriftgröße allem, was in Tabellen steht.

p, td, th, div, span {
font-family: verdana, arial, helvetica, sans-serif;
}

Schriftart in Absätzen, Tabellen, div- und span-Elementen.

hr {
clear: both;
}

Wenn eine horizontale Linie (hr, »horizontal rule«) im HTML-Code steht, werden floats in beide Richtungen gecleart, also aufgehoben.

a:link,
a:visited,
a:active {
color: #586183;
font-weight: bold;
text-decoration: none;
}

Links, besuchte Links und aktive Links, und zwar blogweit, soweit nicht genauer spezifiziert, werden in dieser Farbe, fett und ohne Dekoration (Unterstreichung) dargestellt.

a:hover {
color: #1A7A1B;
text-decoration: underline;
}

Analog, aber für Links, die mit der Maus überfahren werden - andere Farbe und Unterstreichung.

#theme_chooser select {
width: 165px;
}

Gehört auch zu »Template dropdown«, aber ich bin mir nicht sicher, wie, da ich es nicht verwende.

.serendipity_entry p {
margin: 0px;
padding-bottom: 0px;
}

Das betrifft Absätze in einem Eintrag im Blog, es sorgt dafür, dass Absätze keinen Außenrand und unten keinen Innenrand erhalten.

.serendipity_center {
font-size: xx-small;
margin-left: auto;
margin-right: auto;
text-align: center;
}

.serendipity_msg_important {
color: red;
}

.serendipity_msg_notice {
color: green;
}

Das sind interne Styles, die s9y benötigt, um Dinge zu zentrieren und bestimmte Meldungen auszugeben.

div.serendipityPlug {
padding-left: 10px;
}

div.serendipityPlug a {
text-decoration: none;
border: 0px;
}

Hm. Ich hab's schon mal gesehen, aber ich kann es derzeit nicht einordnen.

.serendipityImageButton {
cursor: pointer;
}

Das müsste (bin mir nicht ganz sicher) irgendetwas mit Bildern aus der Mediendatenbank sein, auf jeden Fall ändert es den Mauszeiger in einen Zeiger.

Puuuuuh

YL

[B.E.A.]

Mein lieber Yelloled,
vielen Dank für die Mühe die du dir gemacht hast. Nun geht schon einiges. Also deine Headeranweisung habe ich umgesetzt. Allerdings wenn ich das genauso mache zeigt er mir das Headerbild im Firefox nicht an, im IE klappt das wunderbar. Ich hab im CSS an der Stelle

#serendipity_banner {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
border: 1px solid #ffffff;
/* margin: auto; */
width: 100%;
/*width: 900px;*/
/*height: 160px;*/
background-color: #586183;
background-position: 0px 0px;
background-image: url(img/background2.jpg);
background-repeat: no-repeat;

das rot geschriebene einfach wieder reingemacht und dann geht das auch im Firefox. Kann ich das so lassen??

Das mit der Schriftfarbe in der Seitenleiste, geht leider so nicht. Er nimmt das hier nicht so an

#serendipityLeftSideBar {
font-color: #fff;
width: 200px;
background-color: #7580AD;
border-right: 1px solid #586183;
padding: 10px;
margin-top: 10px;
vertical-align: top;

weiße Seitenleistenschrift habe ich nur wenn ich das so mache

a:link,
a:visited,
a:active {
color: #ffffff; /*#586183;*/
font-weight: bold;
text-decoration: none;
}

der Nachteil ist, das alle Links auf den weißen Hauptseiten nicht zu sehen sind. Hast du noch eine andere Idee?

Dann muß ich noch etwas nachfragen:

1. Kopiere die Dateien plugin_staticpage.tpl und plugin_staticpage_aboutpage.tpl aus /plugins/serendipity_event_staticpage/ in das Templateverzeichnis. Bearbeite diese kopierten Dateien mit einem Texteditor wie folgt:

hab ich gemacht. Bleiben die nun für immer im Template Coffe_Bar oder gehen die wieder zurück in das Plugin Staticpage? Ich hab sie nun an beiden Stellen. Oder bleibt im Pluginorder die Orginal plugin_staticpage.tpl und plugin_staticpage_aboutpage.tpl

Das mit dem Datum weg und Name in den Statischen Seiten hat wunderbar geklappt )

Ich warte geduldig auf eine Antwort und freue mich wenn wir das noch hinbekommen.

Herzliche Grüße Bea

[yellowled]

Ich hab im CSS an der Stelle das rot geschriebene einfach wieder reingemacht und dann geht das auch im Firefox. Kann ich das so lassen??

Was funktioniert, kann man immer so lassen, also: Ja.

Das mit der Schriftfarbe in der Seitenleiste, geht leider so nicht. Er nimmt das hier nicht so an

Code: Select all

#serendipityLeftSideBar {
	font-color: #fff;

Kein Wunder: color, nicht font-color

Code: Select all

a:link,
a:visited,
a:active {
	color: #ffffff; /*#586183;*/
	font-weight:  bold;
	text-decoration: none;
}

der Nachteil ist, das alle Links auf den weißen Hauptseiten nicht zu sehen sind. Hast du noch eine andere Idee?

Siehe oben - Tippfehler ausbügeln und das Obige wieder auf die ursprüngliche Farbe setzen.

Bleiben die nun für immer im Template Coffe_Bar oder gehen die wieder zurück in das Plugin Staticpage? Ich hab sie nun an beiden Stellen. Oder bleibt im Pluginorder die Orginal plugin_staticpage.tpl und plugin_staticpage_aboutpage.tpl

Die bleiben im Templateverzeichnis. Wenn eine solche Kopie im Templateverzeichnis liegt, benutzt s9y diese anstatt der mit dem Plugin mitgelieferten, was sehr praktisch ist. Falls nämlich das Plugin mal aktualisiert wird (und damit ggf. auch diese .tpl-Dateien im Pluginverzeichnis überschrieben werden), bleiben die editierten Kopien im Templateverzeichnis erhalten.

YL

[TimBeam]

Zu 5.

Ich würde gerne das Erstellungsdatum auf der Startseite in der Statischen Seite "Willkommen" nicht angezeigt bekommen. Weiß jemand wie das geht?

Noch eleganter ist es so:
Kopiere die Dateien plugin_staticpage.tpl und plugin_staticpage_aboutpage.tpl, wie von yellowled beschrieben.

Ersetze:

Code: Select all

{if $staticpage_author}
    <div class="staticpage_author">{$staticpage_author|@escape}</div>
{/if}

    <div class="staticpage_metainfo">
{if $staticpage_lastchange}
    <span class="staticpage_metainfo_lastchange">{$staticpage_lastchange|date_format:"%Y-%m-%d"}</span>
{/if}

{if $staticpage_adminlink AND $staticpage_adminlink.page_user}
    | <a class="staticpage_metainfo_editlink" href="{$staticpage_adminlink.link_edit}">{$staticpage_adminlink.link_name|@escape}</a>
{/if}

mit

Code: Select all

<div class="staticpage_metainfo">
{if $staticpage_lastchange AND $staticpage_author AND $staticpage_adminlink AND $staticpage_adminlink.page_user}
    <span class="staticpage_metainfo_lastchange">Zuletzt geändert am {$staticpage_lastchange|date_format:"%d.%m.%Y"} von {$staticpage_author|@escape} | <a class="staticpage_metainfo_editlink" href="{$staticpage_adminlink.link_edit}">{$staticpage_adminlink.link_name|@escape}</a></span>
{/if}

Dann bekommst Du die Einträge nur zu sehen, wenn Du eingeloggt bist. Ich persönlich finde diese Funktion sehr hilfreich, wenn man viele statische Seiten hat, die man auch schon mal ändert. Man kann dann direkt über Bearbeiten zum Editor springen.

[TimBeam]

Zu CSS versuche mal folgendes:

http://de.selfhtml.org/navigation/css.htm

[B.E.A.]

@ Yellowled

Danke für die wertvollen Erklärungen. Hab ich nun soweit alles verstanden und entsprechend umgeändert. Leider ist die Farbe in der Seitenleiste immer noch nicht so, wie sie sein soll ((

Schau mal hier http://www.kipadu.de/praxisblog/index.p ... _mich.html

Im Hauptteil ist alles o.k. Linkfarbe ist in grün und sichtbar. Aber auf der Seitenleiste soll die Schriftfarbe weiß sein und die Links auch in weiß. So steht es nun

a:link,
a:visited,
a:active {
color: #1A7A1B;
font-weight: bold;
text-decoration: none;
}

a:hover {
color: #1A7A1B;
text-decoration: underline;
}

Ändere ich da die Farbe in weiß, sehe ich die Links im Hauptteil nicht, weil ich weiß auf weiß nicht unterscheiden. Wenn dieser Befehl das ganze Blog steuert, müsste es doch eine Möglichkeit geben Seitenleisten/Hauptteil separat zu steuern. Aber wie?? Ich hab schon alles mögliche ausprobiert.

@ TimBeam

danke für deinen elegnaten Tipp, habe ich mal umgesetzt und klappt wunderbar )

[yellowled]

Aber auf der Seitenleiste soll die Schriftfarbe weiß sein und die Links auch in weiß.

Was grundsätzlich schon mal nicht empfehlenswert ist. Links sollten sich immer vom Fließtext abheben.

Ändere ich da die Farbe in weiß, sehe ich die Links im Hauptteil nicht, weil ich weiß auf weiß nicht unterscheiden. Wenn dieser Befehl das ganze Blog steuert, müsste es doch eine Möglichkeit geben Seitenleisten/Hauptteil separat zu steuern. Aber wie?

In Deinem Fall (mit nur einer Seitenleiste, was man auch auch nicht riechen kann ) so:

Code: Select all

#serendipitySideBar a:link,
#serendipitySideBar a:visited,
#serendipitySideBar a:active { }

#serendipitySideBar a:hover { }

Füge diese Styles so hinzu, dann kannst Du über die »alten« Elemente Links generell und über die obigen speziell die in der Seitenleiste formatieren.

YL

[B.E.A.]

@ Yellowled

Ich könnte dich knut....
Endlich hat es gefunzt. Ich hab das mit den Linkfarben schon fast richtig gehabt. Allerdings hatte ich einen Punkt davor gemacht und du das "#". Da lag für mich der Fehler. Wenn ich jetzt noch den Unterschied in den Css wüsste wann ein "." oder "#" vor einem Befehl kommt, wäre ich glücklich

Verrätst du mir das noch?

Dir einen super schönen Sonntag und vielen, vielen dank.
Liebe Grüße Bea

[trancemaster2k]

SelfHTML-Erklärungen:

. = Formate für Klassen definieren

# = Individualformate definieren


Mit # kannst Du genau ein Format mit den gewünschten CSS-Werten definieren.

Mit . jedoch sind mehrere Definitionen möglich, je nach übergeordnetem Element.

[yellowled]

Ich könnte dich knut....

Vorsicht, gelegentlich schaut mir meine Freundin über die Schulter, wenn ich dieses Forum lese

Wenn ich jetzt noch den Unterschied in den Css wüsste wann ein "." oder "#" vor einem Befehl kommt, wäre ich glücklich

Du bist ja leicht glücklich zu machen

Ein Punkt markiert eine sogenannte Klasse (»class«), eine Raute (»#«) ein sogenanntes Individualformat (»id«). Beides sind letztlich Möglichkeiten, in CSS bestimmte Instanzen eines Elementes anzusprechen, wobei ids nur einmalig innerhalb einer HTML-Seite, classes jedoch mehrfach vergeben werden können bzw. sollten. Ebenso kann ein Element meiner Erinnerung nach nur einer id, wohl aber mehrere classes zugeordent werden.

Beispiele für eine class in s9y wären z.B. .serendipitySideBarTitle (weil es mehrere Seitenleistenplugins, ergo auch mehrere Titel dazu auf einer Seite geben kann). ids werden in s9y z.B. für #serendipity_banner (weil es - normalerweise zumindest - nur ein Banner auf einer Seite gibt) verwendet.

Alles weitere erklären die von trancemaster2k geposteten Links.

YL