Flèches flottantes "Messages plus anciens/Messages plus récents" à mi-hauteur de l'ecran (suite)

 J'avais déjà parlé de comment transformer ces simples liens en flèches ou autre dans ce message remplacer-messages-plus-recents-accueil. (Article #2)

Tous les articles concernant ce "bidouillage" sont visibles dans le libellé liens précédent et plus récents

Avant toute chose, sauvegardez votre modèle par la méthode habituel ou en faisant Ctrl+a et Ctrl+c dans votre code HTML et collez-le dans un fichier texte.

Ici, j'ai trouvé une autre manière de placer ces flèches à mi-hauteur de l'écran. Ainsi, elles sont plus visibles et ça donne un petit look "pro". Il y a encore cependant un léger problème. En effet, plus l'écran est large et plus elle s'éloignent du corps du blog. J'ai fait mes réglages pour un écran de 800 pixels de large (ça devient rare!).

Un de mes objectifs est donc de stabiliser ces flèches toujours au même endroit quelque soit la taille de l'écran. Encore du boulot sur la planche... Je pense m'orienter à nouveau vers un DIV modifié voire même un tableau dans un DIV... À voir...

Vous pouvez voir ces flèches en action sur mon mini-blog météo http://nbbc-met.blogspot.fr. Enfin, comme vous arriverez sur le dernier message, vous ne verrez que la flèche de droite, bien sûr. Cliquez sur cette flèche pour afficher le message précédent et vous verrez évidemment aussi la flèche de gauche. La petite maison correspondant à "Home-Accueil" est restée quant à elle à son emplacement d'origine soit en bas. Si vous appliquez ce code à votre blog sans avoir fait la modif pour transformer vos liens en flèches, seuls ces liens apparaîtront à mi-hauteur. 

Si vous désirez déplacer aussi la petite maison ailleurs, il faudra ajouter du code à .home-link et en dessous de padding: 5px;

Prochain travail: remplacer l'intitulé "Messages plus anciens" et "Messages plus récents" par autre chose.

Dans votre modèle HTML, recherchez /* Accents

Le code CSS que j'ai ajouté est en bleu, celui auquel je n'ai pas touché en gris.

/* Accents

---------------------------------------------- */

.section-columns td.columns-cell {

  border-$startSide: 1px solid $(body.rule.color);

}

.blog-pager {

  background: $(paging.background);

}

.blog-pager-older-link {

  background-color: $(content.background.color);

  padding: 0px;

position: fixed; 

top: 50%; 

right: -70px;

width: 320px; 

height: 0px; 

margin: auto; 

visibility : visible;

z-index : 0;

}

.home-link {

  background-color: $(content.background.color);

  padding: 5px;

}

.blog-pager-newer-link {

  background-color: $(content.background.color);

  padding: 0px;

 position: fixed; 

 top: 50%; 

left: -80px;

 width: 340px; 

 height: 0px; 

 margin: auto; 

 visibility : visible;

 z-index : 0;

}

.footer-outer {

  border-top: $(footer.bevel) dashed #bbbbbb;

}