Encore un blog tech... avec un peu de vape !
Un nouveau mode sombre a fait son apparition sur le blog et est utilisable via le switch en haut à droite (PC) ou en entre le titre et la navbar (téléphone).
Les modifications ont été poussées sur Github et sont directement utilisables.
Il y a quelques petites améliorations à prévoir encore. Mais c'est fonctionnel et, je l'espère, lisible.
J'utilise le thème Andy que j'ai amélioré pour mes besoins personnels
On retrouve notamment par rapport à l'original :
Je prévois encore quelques petites améliorations au fil du temps. J'aimerai notamment être totalement respectueux des standards W3C, on verra si c'est possible. En l'état c'est utilisable et ça fonctionne aussi bien sous Chrome que Firefox.
Soyez libre de l'utiliser, l'améliorer, le modifier, le partager à votre convenance :
La pagination par défaut de Bludit n'est pas terrible. Voici comment l'améliorer.
Dans son thème, remplacer la partie pagination par : (ex pour moi : bl-themes/andy/php/home.php) :
<!-- Pagination -->
<?php if (Paginator::numberOfPages()>1): ?>
<div class="paginator-label">
Pages :
</div>
<nav class="paginator">
<?php
if(!isset($_GET['page'])){
$getPage = 1;
} else {
$getPage = $_GET['page'];
}
?>
<ul class="list-group flex-md-row">
<!-- Previous button -->
<?php if (Paginator::showPrev()): ?>
<li class="list-group-item">
<a class="btn" href="<?php echo Paginator::previousPageUrl() ?>" tabindex="-1"><<
<?php echo $L->get('Previous'); ?></a>
</li>
<?php endif; ?>
<?php if ($getPage >= 4) { ?>
<li class="list-group-item">
<a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>">Début</a>
</li>
<li>... </li>
<?php } ?>
<?php if ($getPage >= 3) { ?>
<li class="list-group-item">
<a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>
?page=<?php echo $getPage - 2; ?>"><?php echo $getPage - 2; ?></a>
</li>
<?php } ?>
<?php if ($getPage >= 2) { ?>
<li class="list-group-item">
<a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>
?page=<?php echo $getPage - 1; ?>"><?php echo $getPage - 1; ?></a>
</li>
<?php } ?>
<?php if ($getPage) { ?>
<li class="list-group-item">
<a class="btn btn-selected" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>
?page=<?php echo $getPage; ?>"><?php echo $getPage; ?></a>
</li>
<?php } ?>
<?php if (Paginator::numberOfPages()-1 >= $getPage) { ?>
<li class="list-group-item">
<a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>
?page=<?php echo $getPage + 1; ?>"><?php echo $getPage + 1; ?></a>
</li>
<?php } ?>
<?php if (Paginator::numberOfPages()-2 >= $getPage) { ?>
<li class="list-group-item">
<a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH); ?>?page=<?php echo $getPage + 2; ?>"><?php echo $getPage + 2; ?></a>
</li>
<?php } ?>
<?php if (Paginator::numberOfPages()-3 >= $getPage) { ?>
<li>... </li>
<li class="list-group-item">
<a class="btn" href="<?php echo parse_url($_SERVER["REQUEST_URI"], PHP_URL_PATH).'?page='.Paginator::numberOfPages(); ?>">Fin</a>
</li>
<?php } ?>
<!-- Next button -->
<?php if (Paginator::showNext()): ?>
<li class="list-group-item">
<a class="btn" href="<?php echo Paginator::nextPageUrl() ?>"><?php echo $L->get('Next'); ?> >> </a>
</li>
<?php endif; ?>
</ul>
</nav>
<?php endif ?>Et ajouter le CSS :
.btn {
padding: 2px 10px 0 10px;
border: 1px solid rgba(0,0,0,.125);
border-radius: 3px;
font-size: 17px;
}
.btn-selected,
.btn:hover {
color: #fff !important;
background-color: #036BAA;
font-weight:600;
}
.paginator-label {
float: left;
}Ce qui offre ce rendu :
Petit script à placer dans Plugins --> Code HTML --> Paramètres --> Admin Area --> Header :
<script>
/// Fires when an editor is added to the EditorManager collection.
tinymce.on('addeditor', function( event ) {
$("<button id=\"switch-tinymce\" class=\"btn btn-sm btn-success\" type=\"button\" onclick=\"tinymce.execCommand('mceToggleEditor',false,'jseditor'); $('#switch-tinymce').toggleClass('btn-success btn-danger');\">ON/OFF</button>").insertAfter("#jsbuttonPreview");
$("#switch-tinymce").before(" ").append(" ");
}, true );
</script>Le script est un peu dégueu mais le rendu est largement acceptable :
