Not logged in. · Lost password · Register
Forum: Non-English Discussion German discussion RSS
Monobook Custom CSS Frage - Version 2011-10-12 Angua
Avatar
marsmond #1
Member since Mar 2012 · 2 posts
Group memberships: Members
Show profile · Link to this post
Subject: Monobook Custom CSS Frage - Version 2011-10-12 Angua
Hi,

Das Template Monobook verwendet für Seiten, die im Bereich :wiki: liegen, eine blaue Pasteltonfarbe für die Seitedarstellung und die Oberern Tabs. Alle anderen Seiten werden mit einem weißen Hintergrund und weißen Hintergrund-Tabfarbe dagestellt.

Ich möchte, dass alle Seiten diese blaue Farbe verwenden.

Dazu habe ich eine screen.css in /monobook/users/ mit folgendem Inhalt erstellt. Zur Testzwecken mit einer roten Farbe.

/* Andere Seiten */
#content,
#p-cactions li,
#p-cactions li a {
   background: #ffdff1;
}

/* Blaue Wiki Seiten */
.ns-1 #content,
.ns-1 #p-cactions li,
.ns-1 #p-cactions li a {
   background: #ffdff1;
}

Mein Problem ist nun, dass nur der obere Tab Button "Artikel" mit einem weißen Hintergrund dargestelt wird und ich nicht weiß, welche Zuordnung diese Hintergrundfarbe ändert. Dies betrifft nur die Seiten die nicht unterhalb von :wiki: liegen. CSS-Codeblock-1

Bei der CSS Änderung der ursprunglich blauen Wiki Seiten funktioniert Codeblock-2. Auch der "Artikel" Tab Button verhält sich so wie von mir gewünscht.

Bild mit dem weißen Button "Artikel"

[Image: http://www10.pic-upload.de/08.03.12/z1gkfk2pnau2.png]

Bild dem Button Artikel einer Seite unterhalb von :wiki: -> So wie es sein soll Codeblock-2

[Image: http://www10.pic-upload.de/08.03.12/vxb4elxm9v6j.png]

Meine Frage ist nun, mit welchen css Werten kann ich den Hintergrund dieses Tab Button "Artikel" abändern ?



Ich verwende
DokuWiki: Angua 2012-01-25
Monobook: 2011-10-12

Gruß marsmond
Avatar
schranzi85 #2
Member since Nov 2011 · 298 posts
Group memberships: Members
Show profile · Link to this post
Hast Du mal mit dem Tool "Firebug" die Seite untersucht???

Damit bekomme ich immer mehr selbst hin- Du kannst dort nach Bereichen suchen (HTML, CSS) und es wird Dir alles darüber angezeigt- auch die Farben die verwendet werden etc.

Vlt hilft das ja weiter?


Lg
Rechtschreibfehler dürfen behalten werden =D


Die Hoffnung stirbt zuletzt....
Avatar
Andreas (Moderator) #3
Member since Dec 2009 · 264 posts · Location: Karlsruhe, Germany
Group memberships: Global Moderators, Members, Super Mods
Show profile · Link to this post
@marsmond: Ich bastel' dir nachher was passendes zusammen und melde mich dann nochmal.

@schranzi85
Quote by schranzi85:
Hast Du mal mit dem Tool "Firebug" die Seite untersucht???

Nur so als Tipp: Neuere Firefox-Versionen (9, 10..) haben einen sehr guten Web-Inspector an Board: Extras->Web-Entwicklert->Untersuchen (uder einrach strg+shift+i drücken).

Firebug bremst den Browser ja doch ziemlich aus... wenn man das Addon nicht benötigt sollte man es daher auch nicht installieren. Firebug bringt für einfache CSS- oder HTML-Schubserei keine wirklichen Vorteile gegenüber der eingebauten Möglichkeiten (im Gegenteil, der neue Web-Inspector löst das ziemlich elegant). Wird für deinen Anwendungsfall vollkommen ausreichen, probier's mal aus. :-)
I'm so electronic I shit bits
Avatar
schranzi85 #4
Member since Nov 2011 · 298 posts
Group memberships: Members
Show profile · Link to this post
Hi Andreas,

danke für die Info was Firebug und das FF Tool angeht :)

Werde mir das anschauen.


Lg
Rechtschreibfehler dürfen behalten werden =D


Die Hoffnung stirbt zuletzt....
Avatar
Andreas (Moderator) #5
Member since Dec 2009 · 264 posts · Location: Karlsruhe, Germany
Group memberships: Global Moderators, Members, Super Mods
Show profile · Link to this post
In reply to post #3
Hallo marsmond,

Ich habe einen Hack auf der monobook-Seite eingefügt: Custom background color (content area). Allerdings nur im FF und Chrome gestestet. Falls es wider erwarten noch Probleme macht, einfach nochmal melden.

Das originale monobook CSS für MediaWiki ist an dieser Stelle wenig intuitiv (nicht umsonst sieht das alles ein wenig frickelig aus, wenn man das wie ich dann auch noch mit DokuWiki-CSS zusammenführt und die ein oder andere Regel überschreibt :-p).

Wie auch immer: monobook für MediaWiki (und daher auch mein Port für DokuWiki) hat drei verschiedene CSS "namespaces":
ns-0 -> normale Wiki Seiten
ns-1 -> "special"
ns-2 -> "tech"
"special" und "tech" werden zwar separat behandelt, sehen optisch aber gleich aus.

Dein Ansatz alle Seiten mittels
#content,
#p-cactions li,
#p-cactions li a
zu addressieren ist eigentlich vollkommen i.O. (auch wenn ich, nur um in der Logik des originalen MediaWiki-CSS zu bleiben, die .ns-0-Klasse übernehmen würde, also .ns-0 #content, .ns-0 #p-cactions li, [...]}). Was dir jetzt die Suppe versalzen hat ist ein kleiner Fix, der dafür sorgt, dass das MediaWiki-monobook CSS mit DokuWiki funktioniert. Dieser erhöht die Spezifität Innerhalb der Kaskade für die Hintergrund-Farbe dieses einen Tabs. Daher "überstimmt" er deine neue Hintergrundfarbe, obwohl sie später definiert wird. Die Lösung ist daher, das einfach ebenfalls zu überschreiben.

Gruß
Andreas
I'm so electronic I shit bits
This post was edited on 2012-05-04, 07:36 by Andreas.
Avatar
marsmond #6
Member since Mar 2012 · 2 posts
Group memberships: Members
Show profile · Link to this post
Vielen Dank für die Tipps, das hat mir sehr weitergeholfen :-)

Ich habe mir noch eine Hover over Tabs Regel erstellt und die Sitebar-Box Flächen eingefärbt.
Anbei die user screen.css, die das macht was ich mir vorgestellt habe. Bis auf ein paar Farbanpassungen :-)


/* background color of normal wiki pages */
.ns-0 #content,
.ns-0 #p-cactions li,
.ns-0 #p-cactions li a,
.ns-0 #p-cactions .selected,
.ns-0 #p-cactions .selected a,
.ns-0 #p-cactions .selected span {
   background: #F8FCFF;
}

/* background color of "special" wiki pages (e.g. edit, discussion, cite...) */
.ns-1 #content,
.ns-1 #p-cactions li,
.ns-1 #p-cactions li a,
.ns-2 #content,
.ns-2 #p-cactions li,
.ns-2 #p-cactions li a {
   background: #F8FCFF;
}

/*  background color of Tabs while hover */
.ns-0 #p-cactions li a:hover,
.ns-0 #p-cactions .selected a:hover,
.ns-1 #p-cactions li a:hover,
.ns-2 #p-cactions li a:hover {
   background: #C5E6FF;
}

/*  background color of Sitebar Boxes */
.pBody {
    background-color: #FFEDDF;
}

/* background  color of Sitebar Searbox */
#p-search .pBody {
    background-color: #FFDFE1;
}

Gruß marsmond
Avatar
Andreas (Moderator) #7
Member since Dec 2009 · 264 posts · Location: Karlsruhe, Germany
Group memberships: Global Moderators, Members, Super Mods
Show profile · Link to this post
Super, ich habe das gleich mal auf der Hack-Seite übernommen. :-)
I'm so electronic I shit bits
Avatar
ach (Administrator) #8
Member since May 2006 · 1857 posts · Location: London, UK
Group memberships: Administrators, Members, Super Mods, Wiki Managers
Show profile · Link to this post
In reply to post #3
Quote by Andreas:
Nur so als Tipp: Neuere Firefox-Versionen (9, 10..) haben einen sehr guten Web-Inspector an Board: Extras->Web-Entwicklert->Untersuchen (uder einrach strg+shift+i drücken).

Hab ich noch nie von gehört. Weißt Du, wie das offiziell heißt, damit man danach googlen kann (am besten auf englisch)? Ich hab's grad versucht zu finden, hatte aber kein Glück (und Ctrl+Shift+i funktionierte auch nicht, aber vielleicht ist die Tastenkombination im englischen Firefox ja auch anders).
Avatar
Andreas (Moderator) #9
Member since Dec 2009 · 264 posts · Location: Karlsruhe, Germany
Group memberships: Global Moderators, Members, Super Mods
Show profile · Link to this post
"Web Developer" heißt das offiziell, die einzelnen Tools dann "Foobar Inspector". Sollte in jedem Firefox 10 dabei sein, egal ob Mac oder Linux. Das von mir angesprochene Tool sollte in der englischen Version über "Tools->Web Developer->Page Inspector" erreichbar sein (kannst ja mal schauen, welchen Shortcut daneben steht bei dir). Hier in Aktion: http://video.golem.de/internet/7129/mozilla-zeigt-tools-fu… Insgesamt sehr geil, ohne den Browser auszubremsen wie es Firebug ja doch recht heftig macht (IMHO so sehr, dass man ein eigenes Profil dafür anlegen sollte).
I'm so electronic I shit bits
Avatar
ach (Administrator) #10
Member since May 2006 · 1857 posts · Location: London, UK
Group memberships: Administrators, Members, Super Mods, Wiki Managers
Show profile · Link to this post
Ah, okay. Ich hatte noch ne 9er Version, in der es zwar einige dieser Tools, aber noch nicht den Inspector gab. Jetzt hab ich die aktuellste Version und Ctrl+Shift+i tut jetzt auch. Sehr schön, muß ich mir demnächst mal genauer angucken. Danke für den Tip.
Wurde eigentlich auch mal Zeit. Schließlich haben Chrome, Opera und Internet Explorer (ja, auch der!) ihre Inspektoren schon seit längerem mit eingebaut.
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2017-03-30, 06:53:30 (UTC +02:00)