BDJLB - dienste:technik

start

anonymous@undisclosed.example.com (Anonymous) — Sun, 02 May 2021 05:25:44 +0000

Technik

Hinweise zur Themetechnik

Hinweise zu den Themefunktionen

themedoku

anonymous@undisclosed.example.com (Anonymous) — Fri, 23 Feb 2024 15:05:10 +0000

Themedoku

Bugs

Hat es gerade keinen, der mich wirklich nervt oder von dem ich Kenntnis habe. Ich hadere jedoch noch ein wenig mit dem a:active hover Hintergrund in der Navigation.

Namensräume

Eine systematische Unterteilung in verschiedene Namensräume ermöglicht:

nach Bedarf Fullwidth Container für Landingpages zu nutzen (via Reguläre Ausdrücke!!)
somit die Navigation auf den Landingspages auszublenden
und darüber hinaus auch Headerbilder nach Wunsch pro Namensraum frisch zu setzen

?id=start:header

Die obige Seite enthält das Headerbild für den Namensraum start: in den Abmessungen 1920×200 zentriert. Damit die Seite selbst beim Wechseln von einem Namensraum in einen anderen nicht hüpft, müssen alle Bilder im Header die gleichen Abmessungen haben.

Wer mal gucken will: diese Funktion ist auf der KvFG Homepage umgesetzt.

Auf die Nutzung der Navbar zur Site-Navigation wurde hier verzichtet. Die Navbar listet hier als Default nur externe Dienste. Wer da mehr / anderes haben will, sollte sich mit den Namensräumen auskennen und diese systematisch einsetzen.

In der mobilen Ansicht wird die Seitenleiste automatisch in die Navbar integriert. Das ist jedoch eine Einstellung des Templates Bootstrap.

Plugin: Blog

Um die - bei vielen kürzeren Beiträgen - störenden Linien los zu werden, wird der Footer ausgeblendet:

{{blog>:blog?7&nofooter}}

Sind die meisten Beiträge länger, dann kann hierauf verzichtet werden.

Weitere Hinweise im Abschnitt Startseite.

Plugin: Fontface

Aktuell nutzt die Seite Nunito - lokal gehostet.

https://google-webfonts-helper.herokuapp.com/fonts/nunito?subsets=latin

Die Einstellungen im Plugin wurden dann wie folgt gesetzt:

https://www.dokuwiki.org/plugin:fontface

Für copy and paste Fanatiker also so:

$conf['plugin']['fontface']['technique'] = 'fontface';
$conf['plugin']['fontface']['fontFile'] = 'nunito-v16-latin-regular';
$conf['plugin']['fontface']['fontName'] = 'Nunito';
$conf['plugin']['fontface']['elements'] = 'body';
$conf['plugin']['fontface']['genericFamily'] = 'sans-serif';
$conf['plugin']['fontface']['elements2'] = '';

Plugin: Navi

https://www.dokuwiki.org/plugin:navi

Wird Navi in der Sidebar wie folgt angesprochen:

{{navi>sidebarcontent?ns&js}}

dann enstehen in der Navigation hässliche Doppeleinträge. Wirft mensch das

?ns&js

raus, dann entstehen diese nicht.

Startseite

Sofern auf der Startseite ein Nachrichtenbereich inkludiert werden soll:

Es gibt den Namensraum

blog:start

Dort wird das Plugin Blog genutzt - mit den üblichen Einstellungen.

Die Startseite bindet diese Unterseite mit Hilfe des Plugins include ein mit

{{page>:blog:start}}

oder besser noch

{{page>:blog:start&noheader&nofooter&noeditbutton}}

und „doppelt“ damit die Inhalte aus dem Nachrichtenbereich.

Der Eintrag für die Nachrichtenseite in der Navigation kann dann entfallen

Warum? Damit in der Seitenübersicht nicht alle Blogeinträge im Bereich der Startseite herumhängen, sondern schön dort aufgeräumt sind, wo sie eben hingehören: in den Nachrichten- / Blog-Bereich der Seite. Das ist house-keeping und „muss so“.

Wer mal gucken will: diese Funktion ist auf Karlo umgesetzt.

Template: Bootstrap3

https://www.dokuwiki.org/template:bootstrap3

Pi mal Daumen sieht das so aus: Nach und nach haben sich aber noch ein paar kleinere Änderungen ergeben - z.B. wurde TOC in die Navbar geschoben und die „kleinen Pagetools“ für Besucher:innen wurden deaktiviert.

$conf['tpl']['bootstrap3']['bootswatchTheme'] = 'flatly';
$conf['tpl']['bootstrap3']['sidebarOnNavbar'] = 1;
$conf['tpl']['bootstrap3']['showTools'] = 'logged';
$conf['tpl']['bootstrap3']['showUserHomeLink'] = 0;
$conf['tpl']['bootstrap3']['hideLoginLink'] = 1;
$conf['tpl']['bootstrap3']['showIndividualTool'] = '';
$conf['tpl']['bootstrap3']['showAddNewPage'] = 'logged';
$conf['tpl']['bootstrap3']['schemaOrgType'] = 'BlogPosting';
$conf['tpl']['bootstrap3']['fluidContainer'] = 0;
$conf['tpl']['bootstrap3']['pageOnPanel'] = 0;
$conf['tpl']['bootstrap3']['landingPages'] = '(start)';
$conf['tpl']['bootstrap3']['showPageTools'] = 'logged';
$conf['tpl']['bootstrap3']['showPageId'] = 0;
$conf['tpl']['bootstrap3']['showLoginOnFooter'] = 1;
$conf['tpl']['bootstrap3']['showWikiInfo'] = 0;
$conf['tpl']['bootstrap3']['tocCollapsed'] = 1;
$conf['tpl']['bootstrap3']['tocLayout'] = 'navbar';
$conf['tpl']['bootstrap3']['googleAnalyticsNoTrackAdmin'] = 0;
$conf['tpl']['bootstrap3']['browserTitleCharSepNS'] = '|';
$conf['tpl']['bootstrap3']['useACL'] = 1;
$conf['tpl']['bootstrap3']['showPageIcons'] = 0;
$conf['tpl']['bootstrap3']['pageIcons'] = 'feed,send-mail,permalink,print';
$conf['tpl']['bootstrap3']['socialShareProviders'] = 'mastodon';
$conf['tpl']['bootstrap3']['tagsOnTop'] = 0;
$conf['tpl']['bootstrap3']['useAnchorJS'] = 0;
$conf['tpl']['bootstrap3']['semantic'] = '0';
$conf['tpl']['bootstrap3']['pageToolsAnimation'] = '0';
$conf['plugin']['bootswrapper']['loadBootstrap'] = '1';
$conf['tpl']['white']['tocPosition'] = 'dokuwiki';

userstyle.css

/* HEADER */

.navbar-default {
        background-color: white;
        border-color: white;
        }

/* BODY */

body {
  overflow-y: scroll; /* Show scrollbar to fix header pic */
}

#dokuwiki__header {
        width: 100%;
}

/* HEADLINES */

h2 { padding-top: 1em;
}

/* SIDEBAR */

.nav-pills {
        font-size: 15px;
}

/* Beauty added to navigation */

.nav-pills > li.active > a {
    color: #337ab7;
    background-color: white;
    border-bottom: 1px solid #2271b7;
    border-radius: 0px;
    font-weight: bold;
}

.nav-pills > li.active > a:focus {
    color: #337ab7;
    background-color: white;
    border-bottom: 1px solid #2271b7;
    border-radius: 0px;
    font-weight: bold;
}

.nav-pills > li > a:hover  {
    color: #337ab7;
    background-color: #dcdcdc;
    border-bottom: 1px solid #2271b7;
    border-radius: 0px;
    font-weight: bold;
}

.nav-pills > li.active > a:hover {
    color: #337ab7;
    background-color: #dcdcdc;
    border-bottom: 1px solid #2271b7;
    border-radius: 0px;
    font-weight: bold;
}

/* Mobile navigation bug hunt */


div.plugin__navi li, div.plugin__navi li.open {
    font-size: 15px;
    color: #337ab7;
    font-weight: normal;
    line-height: normal;
    text-shadow: none;
    opacity: 1;
}

.nav > li > a:focus {
    color: #337ab7;
    text-decoration: none;
    background-color: white;
    opacity: 1;
}

.nav > li > a:hover {
    color: #337ab7;
    text-decoration: none;
    background-color: white;
    opacity: 1;
}

/* more room around media file icons */

.dokuwiki a.urlextern, .dokuwiki a.windows, .dokuwiki a.mail, .dokuwiki a.mediafile, .dokuwiki a.interwiki {
  background-repeat: no-repeat;
  background-position: 0 center;
  padding: 0 0 0 20px;
}

detail.php

dokuwiki/lib/tpl/bootstrap3/detail.php

und dort in Zeile 384 steht als Plural für das Wort Information tatsächlich „Informations“. Das geht ja überhaupt nicht Bug report und hier korrigiert.

https://github.com/giterlizzi/dokuwiki-template-bootstrap3/issues/605

themefunctions

anonymous@undisclosed.example.com (Anonymous) — Tue, 24 Aug 2021 13:54:46 +0000

Funktionen (aus Bootstrap)

Die hier nur angerissenen Funktionen sind bei Lotar vollständig dokumentiert:

http://www.lotar.altervista.org/wiki/wiki/plugin/bootswrapper

Accordion

First panel

First panel content

Second panel

Second panel content

Third panel

Third panel content

<accordion>
<panel title="First panel">
First panel content
</panel>
<panel title="Second panel">
Second panel content
</panel>
<panel title="Third panel">
Third panel content
</panel>
</accordion>

Alert

Well done! You successfully read this important alert message.

<alert type="success" icon="glyphicon glyphicon-user" dismiss="true">
**Well done!** You successfully read this important alert message.
</alert>

Buttons

Welcome

<button type="success" size="lg" icon="glyphicon glyphicon-edit">[[:wiki:welcome| Welcome]]</button>

Carousel

<carousel>
{{:bilder:sunset-4845323_1920.jpg?nolink|}}
{{:bilder:swabian-alb-1464794_1920.jpg?nolink|}}
</carousel>

Oder auch als Slides:

<carousel>
<slide>{{:bilder:sunset-4845323_1920.jpg?nolink|}}</slide>
<slide>{{:bilder:swabian-alb-1464794_1920.jpg?nolink|}}</slide>
</carousel>

Collapse

Click Me

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<button collapse="foo">Click Me</button>
<collapse id="foo" collapsed="true"><well>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</well></collapse>

Grids

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor luctus lacus, et venenatis enim faucibus vel. Fusce quis posuere justo.

<grid>
<col sm="6"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor luctus lacus, et venenatis enim faucibus vel. Fusce quis posuere justo.</col>
<col sm="6"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam porttitor luctus lacus, et venenatis enim faucibus vel. Fusce quis posuere justo.</col>
</grid>

Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

<jumbotron>
===== Hello, world! =====
This is a simple hero unit, a simple jumbotron-style 
component for calling extra attention to featured
content or information.
</jumbotron>

Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<lead>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</lead>

Panels

Title of Panel

Subtitle

Panel content

<panel type="default" title="Title of Panel" subtitle="Subtitle" icon="fa fa-home">
Panel content
</panel>

Text

muted
primary
success
info
warning
danger

<text type="muted">muted</text>
<text type="primary">primary</text>
<text type="success">success</text>
<text type="info">info</text>
<text type="warning">warning</text>
<text type="danger">danger</text>

Lorem ipsum dolor sit amet…

<tooltip title="Sample Text" placement="bottom">Lorem ipsum</tooltip> dolor sit amet...