info:dw_css

Dokuwiki: personnaliser la css

https://www.dokuwiki.org/devel:css

Note Fred: je privilégie l'édition de

/conf/userall.css

Suffit de lancer l'inspecteur de code firefox (F12), d'examiner l'élément, de bidouiller la CSS puis une fois qu'on trouvé ce que l'on veut de surcharger en modifiant

/conf/userall.css  

ex. de mes hacks:

Bootstrap3 Template

Sur ce wiki et sur mon blog1), j'ai opté pour un fond sombre pour des raisons écologiques. J'ai du un peu bidouiller l'excellent thème Bootstrap3 Template, en consultation il est nickel, mais en édition c'était pas trop pratique.

/*
hack radeff dokuwiki theme bootstrap / darkly
credits https://www.dokuwiki.org/template:bootstrap3|Bootstrap3 Template
 */
#config__manager label {
    color:     lightgreen;
    white-space: initial;
    font-size: 1.2em;
    font-weight: initial;
}
 
p.include_readmore a.wikilink1.btn.btn-default.btn-xs {
    font-size: 2em;
}
 
.dokuwiki button {
    vertical-align: middle;
    background-color: beige;
    color: black;
}
 
.notetip {
background-color: #0db40d;
}
.notetip ul li a, .notetip a, .noteimportant {
color: brown;
}
 
.noteclassic, .notewarning, .noteimportant  {
  color: black;
}
.noteclassic a, .notewarning a, .noteimportant a
{
  color: navy;
}
 
.tagstop {
  position: absolute;
  bottom: 1px;
  right: 1em;
  height: 50px;
}
/*
.tagstop {
    padding: 1em;
    position: relative;
    top: 2em;
    background-color: #375a7f;
    border-coldisplay: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 25px;
    overflow: hidden;
}
*/
 
html.js body.darkly.dokuwiki.mode_show.tpl_bootstrap3.loggedIn.dw-page-on-panel div#insitu__fn.insitu-footnote.JSpopup.panel.panel-body.panel-default a.urlextern {
color: navy;
}
 
a, h1, h2
 {
  color: snow;
}
 
p {
  color: lightgrey;
}
 
.tagstop:before{
     content: "Tag(s): ";
  }
  .tagstop {
/*color: #212529;*/
padding: 1em;
position: relative; top: 2em;
background-color: #375a7f;;
border-coldisplay: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
border-radius:25px;
overflow:hidden;
}
 
.tagstop a {
  color: white;
}
 
a.wikilink1 {
text-decoration: none !important;
}
 
div.dokuwiki div.plugin_include_content div.secedit {
  float: right;
  margin-left: 1em;
  margin-top: 0;
}
 
div.dokuwiki div.inclmeta {
  border-top: 1px dotted __border__;
  padding-top: 0.2em;
  color: __text_neu__;
  font-size: 80%;
  line-height: 1.25;
  /*margin-top: 0.5em;*/
  margin-bottom: 2em;
}
 
div.dokuwiki div.inclmeta a.permalink {
  background: transparent url(images/link.gif) 0px 1px no-repeat;
  padding: 1px 0px 1px 16px;
}
 
div.dokuwiki div.inclmeta abbr.published {
  background: transparent url(images/date.gif) 0px 1px no-repeat;
  padding: 1px 0px 1px 16px;
  border-bottom: 0;
}
 
div.dokuwiki div.inclmeta span.author {
  background: transparent url(images/user.gif) 0px 1px no-repeat;
  padding: 1px 0px 1px 16px;
}
 
/* Disable the default interwiki icon for the user link (if there is any) */
div.dokuwiki div.inclmeta span.author a.interwiki {
    background: none;
    padding: 0;
}
 
div.dokuwiki div.inclmeta span.comment {
  background: transparent url(images/comment.gif) 0px 1px no-repeat;
  padding: 1px 0px 1px 16px;
}
 
div.dokuwiki div.inclmeta div.tags {
  border-top: 0;
  font-size: 100%;
  float: right;
  clear: none;
}
 
div.dokuwiki p.include_readmore {
  text-align: right;
}
div.dokuwiki p.include_readmore a {
  color: white;
}

1)
noter la différence de look entre les deux sites, alors que la feuille de style est commune, via un lien symbolique
  • info/dw_css.txt
  • Dernière modification: 2020/03/10 06:17
  • de radeff