Not logged in. · Lost password · Register
Forum: General Help and Support Templates and Layout RSS
Farbliche Anpassung Monobook
...über die gegebenen Tipps hinaus.
Avatar
soerc09 #1
Member since Apr 2012 · 4 posts
Group memberships: Members
Show profile · Link to this post
Subject: Farbliche Anpassung Monobook
Hallo liebe Forenmitglieder,

habe einige Probleme der Anpassung des Monobook Templates. Im Anhang findet ihr von mir bearbeitete Screenshots, damit ihr wisst wovon ich schreibe.
Ich habe die Hinweise unter http://www.dokuwiki.org/template:monobook gelesen und mich auch durch die Templateverzeichnisse geforstet. Leider nur mit bedingtem Erfolg.

Ich möchte das Template farblich komplett verändern, möchte vom bläulichen weg.

Meine user/screen.css sieht wie folgt aus:

/*#####################START CUSTOM LINK COLOURS#####################*/

div.dokuwiki a.wikilink1:link {
  color: #FFFF00 !important;
}
div.dokuwiki a.wikilink1:visited {
  color: #FF6600 !important;
}
div.dokuwiki a.wikilink1:hover {
  color: #FFFFFF !important;
}

/*#####################END CUSTOM LINK COLOURS#####################*/


/******************************************************************************************/


/*#####################START OWN BACKGROUND IMAGE#####################*/
/*Note: Store your background image as /user/background.jpg*/

html {
  background-color: #99cc99;
}
body {
  background: #99cc99 url(user/background.jpg) 0 0 no-repeat;
}

/*#####################END OWN BACKGROUND IMAGE#####################*/


/******************************************************************************************/


/*#####################START CUSTOM BACKGROUND COLOUR (CONTENT)#####################*/

/* 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: #FFFFFF;
}
 
/* 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: #00FFFF;
}
 
/*  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: #FFFF00;
}
 
/*  background color of Sitebar Boxes */
.pBody {
    background-color: #009999;
}
 
/* background  color of Sitebar Searbox */

#p-search .pBody {
    background-color: #009999;
}

/*#####################END CUSTOM BACKGROUND COLOUR (CONTENT)#####################*/


/******************************************************************************************/

Wie ihr im Anhang in den Screenshots sehen könnt, fehlen noch einige Angaben in dieser Datei um alle Werte zu ändern. Leider weiß ich nicht welche, deshalb wende ich mich an euch. (Die grellen Farben habe ich gesetzt, um mir einen besseren Überblick zu verschaffen...) Folgende Fragen beziehen sich auf die Nummerierung in den Screenshots:

#1: Navigation: Wikiinterne Seiten sind gelb (wie von mir definiert!). Wie ändere ich a) die Farbe der noch nicht existenten Seiten in der Navigation und b) die "externen" Seiten wie "Media Manager", "Changes" etc...?

#2: Hier geht es prinzipiell um die gleiche Sache, nur dass die Elemente eben im Text, nicht in der Navigation sind. (Ggf. ist das wahrsch. die gleiche Farbkonstante?)

#3: Hier geht es um den Hintergrund des Blocks und den Hintergrund des TOC.

#4: der Linke bereich deckt sich m.E. nach mit #1 und #2, aber wie sieht es mit dem rechten oberen Menü aus?

#5: Hier interessieren mich wieder die Hintergründe der Tabelle und des unteren Feldes jeder Seite.


Wäre sehr dankbar um einschlägige Hinweise.

Vielen Dank schonmal für eure Hilfe,

soerc09
The author has attached one file to this post:
screenshots.zip 149.1 kBytes
You have no permission to open this file.
Avatar
Andreas (Moderator) #2
Member since Dec 2009 · 264 posts · Location: Karlsruhe, Germany
Group memberships: Global Moderators, Members, Super Mods
Show profile · Link to this post
Da lässt sich natürlich was machen. Zugegebenermaßen ist es bei monobook und vector nicht immer einfach die zu stylenden Elemente zu adressieren, da ja doch viele Elemente zusammenspielen (MediaWiki CSS, DokuWiki CSS und der Kleber, um das zusammenzuhalten).

Ich bin gerade noch am Arbeiten, schaue mir deine Änderungswünsche aber ASAP an.
I'm so electronic I shit bits
Avatar
soerc09 #3
Member since Apr 2012 · 4 posts
Group memberships: Members
Show profile · Link to this post
Danke für die schnelle Rückmeldung, Andreas.
Avatar
Andreas (Moderator) #4
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 #1
Quote by soerc09 on 2012-04-03, 17:49:
#1: Navigation: Wikiinterne Seiten sind gelb (wie von mir definiert!). Wie ändere ich a) die Farbe der noch nicht existenten Seiten in der Navigation und b) die "externen" Seiten wie "Media Manager", "Changes" etc...?

genauso wie du dies bei den internen wikilinks gemacht hast (mit der Ausnahme, dass man bei den nicht existierenden Seiten noch die Links in den Tabs anpassen sollte, daher das folgende Beispiel). Die Klassen heißen nur anders.
  • wikilink1 = existierende Seiten
  • wikilink2 = nicht existierende Seiten

Beispiel:
  1. /* missing page red: common */
  2. a.wikilink2:link,
  3. a.wikilink2:visited,
  4. a.wikilink2:hover {
  5.  color: #ff00aa !important;
  6. }
  7.  
  8. /* missing page red: tabs */
  9. #p-cactions li a.wikilink2 {
  10.  color: #ff00aa;
  11. }



Quote by soerc09 on 2012-04-03, 17:49:
#2: Hier geht es prinzipiell um die gleiche Sache, nur dass die Elemente eben im Text, nicht in der Navigation sind. (Ggf. ist das wahrsch. die gleiche Farbkonstante?)

Die Klasse ist die gleiche, ja. wenn a.wikilink2 geändert wird betrifft das nicht nur die Navigation, sondern auch den Text.



Quote by soerc09 on 2012-04-03, 17:49:
#3: Hier geht es um den Hintergrund des Blocks und den Hintergrund des TOC.

Ich habe der Einfachheit halber zwei Snippets/Hacks erstellt:

Falls du bei der TOC noch mehr brauchst/willst: Die relevanten Styles findest du hier:



Quote by soerc09 on 2012-04-03, 17:49:
#4: der Linke bereich deckt sich m.E. nach mit #1 und #2, aber wie sieht es mit dem rechten oberen Menü aus?

Das Element rechts oben kommt vom originalen monobook/MediaWiki und wird sort "personal tools" genannt.

Folglich solltest du wie folgt selektieren können
  1. #p-personal .pBody a {
  2.  [...]
  3. }



Quote by soerc09 on 2012-04-03, 17:49:
#5: Hier interessieren mich wieder die Hintergründe der Tabelle und des unteren Feldes jeder Seite.

#6 bekommst du mit der .catlinks-Klasse selektiert:
  1. /* "you are here" and "breadcrumbs" */
  2. .catlinks {
  3.  [...]
  4. }

Die für Tabellen relevanten Styles, an denen du dich orientieren kannst: monobook-table-CSS.


Puh... das war jetzt doch 'ne Menge. Ich hoffe es hilft :-)

Edit: github-URLs aktualisiert, habe das Repo verschoben.
I'm so electronic I shit bits
This post was edited on 2012-05-04, 07:32 by Andreas.
Avatar
soerc09 #5
Member since Apr 2012 · 4 posts
Group memberships: Members
Show profile · Link to this post
Hallo Andreas,

danke für die ausgiebige Bearbeitung, ich rechne dir das sehr hoch an!

Ich werde mich im Laufe der kommenden Woche mal durcharbeiten und auf jeden Fall nochmal eine Rückmeldung geben.
Du hast das Problem auf den Punkt gebracht:
[...]da ja doch viele Elemente zusammenspielen (MediaWiki CSS, DokuWiki CSS und der Kleber, um das zusammenzuhalten).
Ich werde mich nun etwas besser orientieren können.

Viele Dank noch einmal und bis die Tage,

soerc09
Avatar
soerc09 #6
Member since Apr 2012 · 4 posts
Group memberships: Members
Show profile · Link to this post
Hallo zusammen, hallo Andreas,

ich arbeite mich durch. Stoße allerdings an einige Grenzen. Ich bin davon ausgegangen, dass alle deine Verweise auf fremde Dateien immer eine Änderung in der usr/screen.css nach sich ziehen sollten, nicht in der Datei direkt.

Anbei nochmal 2 Screenshots, die ich wieder durchnummeriert habe. Darauf beziehen sich auch die folgenden Anmerkungen:

Zu #1: Die nicht-existenten Seite habe ich verändert, kein Problem. Mir bleibt allerdings unklar, welche "Art" von Link #1.1 und #1.2 sind. Bisher nahm ich an, sie seien externe, weil sie nicht nur :wiki:seite verlinken, sondern eine komplette Url (vgl. das schwarze Feld unter #1.1). Scheinbar ist dies aber nicht der Fall. Darüber hinaus stelle ich fest, dass es ein Problem bei meinen Def. für externe Urls zu geben scheint. Ich habe geschrieben:

/**********************START Custom Link Colours**********************/

/*Existierende Seiten: Common*/
div.dokuwiki a.wikilink1:link {
  color: #FFFF00 !important;
}
div.dokuwiki a.wikilink1:visited {
  color: #FF6600 !important;
}
div.dokuwiki a.wikilink1:hover {
  color: #FFFFFF !important;
}
/*Existierende Seiten: Tabs*/
  #p-cactions li a.wikilink1 {
     color: #ff00aa;
    }

/*Nicht-Existierende Seite: common */
    a.wikilink2:link,
    a.wikilink2:visited,
    a.wikilink2:hover {
     color: #FF0000 !important;
    }
    
/*Nicht-Existierende Seite: tabs */
    #p-cactions li a.wikilink2 {
     color: #FF0000;
    }

/*Externer Link: common */
    a.urlextern:link,
    a.urlextern:visited,
    a.urlextern:hover {
    background-image: url(static/3rd/dokuwiki/link_icon.gif);
    padding: 0 0 0 17px;
    color: #FFFF00;
}
 /*External Link: tabs */
    #p-cactions li a.urlextern {
     color: #00FFFF;
    }

/**********************END Custom Link Colours**********************/


Zu #2:Bei der Personal Tool Leiste habe ich große Probleme. Wie du siehst ist es mir gelungen, den eigenen Nutznamen farblich zu verändern, die anderen Optionen aber nicht. Zudem fiel das "Userbild" welches normalerweise vor dem Namen steht dieser Veränderung zum Opfer. Ich habe geschrieben:

/**********************START Menu Personal Tools**********************/
  
 #p-personal .pBody a {
     color: #33FF00;
    }

div#column-one #p-personal.portlet .pBody ul {
  background: transparent none 0 0;
  line-height: 1.4em !important;
  list-style-image: none !important;
  list-style-position: outside;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 2em 0 3em !important;
  text-align: right;
  color: #FFFF00;
}

#p-personal ul {
border: none;
line-height: 1.4em;
color: #00FFFF;
padding: 0 2em 0 3em;
margin: 0;
text-align: right;
text-transform: lowercase;
list-style: none;
z-index: 0;
background: none;
cursor: default;
}
#p-personal li {
z-index: 0;
border: none;
padding: 0;
display: inline;
color: #FFFF00;
margin-left: 1em;
line-height: 1.2em;
background: none;
}
#p-personal li.active {
font-weight: bold;
}
#p-personal li a {
text-decoration: none;
color: #FF0000;
padding-bottom: .2em;
background: none;
}
#p-personal li a:hover {
background-color: white;
padding-bottom: .2em;
text-decoration: none;
}
#p-personal li.active a:hover {
background-color: transparent;

/**********************END Menu Personal Tools**********************/


Zu: #3: Bei den Tabellen habe ich keinen Erfolg gehabt, obwohl ich meine der Code sei relativ übersichtlich:

/**********************START Tables**********************/

table {
  border-collapse: collapse;
  empty-cells: show;
  border-spacing: 0;
  border: 1px solid;
  border-color: #FF6600;
}
caption {
  caption-side: top;
  text-align: left;
  margin: 0 0 .3em;
}
th,
td {
  padding: .3em .5em;
  margin: 0;
  vertical-align: top;
  border: 1px solid;
  border-color: #FF6600;
  text-align: left;
}
th {
  font-weight: bold;
  background-color: #993399;
}

/**********************END Tables**********************/

Zu #5: Selbes gilt für die Catlinks:

/**********************START Catlinks**********************/

.catlinks {
 background-color: #33FF00;
 border: 1px solid;
 border-color: #FF6600;
}

/**********************END Catlinks**********************/


Ich vermute, dass ich entweder bei manchen Definitionen entweder a) "auf dem falschen Dampfer" bin, also etwas definiere, was ich nicht definieren sollte oder b) Codes unvollständig sind, weil mir das tiefere Verständnis noch fehlt. Bin um jeden Ratschlag dankbar.

Danke im Voraus und schöne Feiertage,

soerc09
The author has attached one file to this post:
screenshots3und4.zip 263.3 kBytes
You have no permission to open this file.
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
Quote by soerc09:
Ich bin davon ausgegangen, dass alle deine Verweise auf fremde Dateien immer eine Änderung in der usr/screen.css nach sich ziehen sollten, nicht in der Datei direkt.

Vorab (bin etwas ausgelastet und schau mir den Rest nacher an): ja, das ist korrekt. Alles in /user/screen.css, sonst wird es eklig beim updaten ;-)

PS: Falls du nicht so lange warten willst: ggf. sind die Definitionen einfach zu unspezifisch, testweise mal !important an die jeweilige Regel anhängen (also z.B. border-color: #FF6600 !important; statt border-color: #FF6600;).
I'm so electronic I shit bits
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, 20120620-dev, © 2003-2011 by Yves Goergen
Current time: 2014-04-24, 18:08:27 (UTC +02:00)