[SKIN] Forum + Liens !

[Ar-S]

J'ai passé une bonne moitié de l'aprem à reprendre le css du forum

J'utilise la skin prosilver special edition que j'ai travesti

Voilà ce que cela donne :



Si vous voulez tester/modifier, il vous faut l'add on STYLUS pour firefox.
1 - Choisissez la skin prosilver special edition dans les paramètres du forum
Ensuite vous créez un nouveau style vierge avec STYLUS et vous configurez comme ceci :
2 - Collez mon code
3 - En bas de la fenêtre partie droite vous choisissez :
S'applique à : URL commençant par puis à coté : https://www.purebasic.fr/french/ <-new



Voilà le code.

Code : Tout sélectionner

/* Ar-S Style CSS for french Pure Basic Forum */
.site_logo {
    background-image: url("http://share.ldvmultimedia.com/evzjz43l.png");
    width:149px;
    height:52px;
}
html, body {
    color: #082f73;
 background: linear-gradient(135deg, #8c9cbd, #819fc1, #aac4df); /* change the colors and angles here */
    background-size: 500% 500%;
    animation: animatedGradientBg 40s ease infinite; /* change the animation time here */
}

@keyframes animatedGradientBg {
    0%{background-position:0% 0%}
    50%{background-position:100% 100%}
    100%{background-position:0% 0%}
}


.headerbar {
    background-color: #40637d;
    background-image: -webkit-linear-gradient(top, #235e93 0%, #2e7cb7 1%, #366486 20%, #3688c6 75%, #3f90ce 100%);
    background-image: linear-gradient(to bottom, #235e93 0%, #2e7cb7 1%, #366486 20%, #3688c6 75%, #3f90ce 100%);
    background-repeat: repeat-x;
    margin-bottom:10px;
     box-shadow: 0 0 5px 2px #1e1c1c, inset 0 3px 18px rgba(100, 100, 100, .15);
}


/* POPUP RACCOURCIS */
.dropdown .dropdown-contents {
    background: #0b1d3c;
    border-color: #3f4797;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 1);
}
.dropdown li.separator, .dropdown li, .dropdown li li{
    border-color: #4348ca;
}


.navbar {
    background-color: #35518c;
    box-shadow: 0 0 5px 2px #000, inset 0 3px 18px rgba(100, 100, 100, .15);
}

.forabg, .forumbg {
     margin-bottom: 10px;
    padding: 4px;
    box-shadow: 0 0 3px 1px #312e2e, inset 0 3px 18px rgba(100, 100, 100, .25);
    clear: both;
    border-radius: 5px;
}


.wrap {
    background-color: #4365ae;
    border-color: #b9d5fb;
    -webkit-box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0); 
box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
}
.postprofile a.username{
       color:#d3fffd;
}
.bg1, .bg2 {
      background-color: #35325b;
    box-shadow: 1px 1px 1px 1px #312e2e, inset 0 0px 1px rgba(0, 0, 0, 1);
       border-radius: 20px 20px 20px 20px;
    margin-bottom:15px;
}  
.bg1 a{
    color:#d3fffd;
}

.dropdown-extended .header, .dropdown-extended  {
    border-color: #2769ae;
    color: #000000;
}
/* Panneau de notif */
tr.bg1 td,tr.bg2 td{
    color:#a9b7ff;
}
tr.bg1 td:hover,tr.bg2 td:hover{
    color:#242633;
    background-color:#a9b7ff;
}
.notification-block:hover{
    background-color:#152473;
}



.row-item a{
    color:#2141e3;
}


.postprofile a.username{
       color:#d3fffd;
}

p.author{
      color:#1da7dd;
}

p.author a.username{
      color:#1da7dd;
}

p.author time{
      color:#56cefd;
}

.signature {
    border-top-color: #CCCCCC;
    background-color:#7977b9;
      border-radius: 0 0 100px 100px;
    text-align:center;
}

.signature a{
color:#0142b3;
}

.notice {
    color:#fff;
}
.notice a.username {
    color:#00f7ff;
}

.post:target .content {
    color: #b5ccff;
}
.content {
    color: #b5ccff;
}

a {
    color: #79b6f7;
    text-decoration:none;
    
}
a:hover{
    text-decoration:none;
     transition: .5s linear;
          color: #fff;
  text-shadow: 0 0 1px #fff,
               0 0 1px #fff, 
               0 0 4px #fff;
}
a.topictitle {
     color: #054f9f;
    text-decoration:none;
}


a.username {
     color: #054f9f;
    text-decoration:none;
}

.breadcrumbs a:hover{
    text-decoration:none;
     transition: .5s linear;
          color: #fff;
  text-shadow: 0 0 1px #fff,
               0 0 1px #fff, 
               0 0 4px #fff;
}


/* ligne */
li.row {
    background-color: #d0e6f6;
}
li.row:hover {
    background-color: #e3ecf2;
}
ul.topiclist li {
    color: #4C5D77;
}

.codebox {
    background-color: #fffbd7;
    border-radius: 10px;
    border-color: #C9D2D8;
}

.codebox a{
    color: #297af9;
    text-decoration:none;
}

.codebox a:hover{
    color: #0050ff;
    text-decoration:none;
   text-shadow: 1px 1px 3px #000000;
    -webkit-transition: all 0.6s 0s ease;
    -moz-transition: all 0.6s 0s ease;
    -o-transition: all 0.6s 0s ease;
    transition: all 0.6s 0s ease;
}

a.forumtitle {
    font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: none;
    color:#2f56d0;
text-shadow: -1px 0px 2px #d8efff;
}

a.forumtitle:hover {
    color:#3764f2;
}

a.lastsubject {
     color: #416ac4;
}

.postprofile strong {
    color: #b5ccff;
}

blockquote {
    background-color:#130077;
}

label {
     color: #0062fb;
}

.panel .inner {
    background-color: #d0dff7;
}
bg3 .inner {
    background-color: #d0dff7;
}

.token.function {
    color: #00ff34;
}
.token.number {
    color: #c520ff;
}
.token.string {
    color: #fff;
}

.token.comment {
    color: #b7b7b7;
    font-style: italic;
}

.token.keyword{
    color: #f90040;
}

@media (min-width: 701px) {
	
	.post.online {
		background-image: none;
	}

	.post .preonline.online {
		width: 58px;
		height: 58px;
		position: absolute;
		left: 0;
		top: 0;
		-ms-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}	

	.no-avatar .preonline.online {
		position: relative;
		margin: -8px;
	}
		
	.post .postprofile {
		float: left;
		border-width: 0 1px 0 0;
	}
	
	.post .postprofile dd, .post .postprofile dt {
		margin-right: 8px;
		margin-left: 0;
	}

	.has-profile .postbody {
		float: right;
		margin-right: 6px;
	}
	
}

PARTIE 2
Le menu de raccourcis est pas mal mais le lien "accueil" de la navbar ne me plait pas du tout. J'ai décidé de le remplacer par le lien "nouveaux message" que je préfère voir immédiatement. J'ai aussi ajouté les "sujets actifs" à la demande de cage. Pour la suite, libre à vous de faire votre propre script
Pour ce faire, vous devez installer TamperMonkey sur firefox. (Il existe sûrement des équivalents sur les autres navigateurs.)
Si Stylus permet de changer le CSS, TamperMonkey permet de modifier le contenu html en y insérant du javascript.

Voilà le résultat :


Installation :
1 - Installer TamperMonkey
2 - Cliquez sur "Ajouter un nouveau script"
3 - Remplacez le contenu par celui ci dessous

Code : Tout sélectionner

// ==UserScript==
// @name         PB Remplace le lien Accueil par nouveaux messauges
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  PB Remplace le lien Accueil par nouveaux messauges. Merci à Naleuf et Studing
// @author       Ar-S
// @match        http://*/*
// @include      https://www.purebasic.fr/french/*
// @include      *purebasic.fr/french/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    'use strict';


    var LinkAccueil = document.getElementById("nav-breadcrumbs").getElementsByTagName("a")[0];
LinkAccueil.innerText = "Nouveaux messages";
LinkAccueil.href = "https://www.purebasic.fr/french/search.php?search_id=newposts";

var Lin = document.getElementById("nav-breadcrumbs").getElementsByTagName("a")[1];
Lin.innerText = "Sujets actifs";
Lin.href = "https://www.purebasic.fr/french/search.php?search_id=active_topics";

    var Accueil = document.getElementById("nav-breadcrumbs").getElementsByTagName("a")[3];
Accueil.innerText = "Accueil";
Accueil.href = "https://www.purebasic.fr/french/index.php";

})();

3 - Cliquez sur Fichier => Enregistrer..

Et voilou.
Gros merci à Naleuf et Studing pour leur aide.
Avec mon skin et ce mod, je retrouve le fofo que j'aime

[Marc56]

Super

Je ne savais pas qu'il y avait juste une feuille à copier/coller.
Il va falloir que j’étudie aussi le CSS, car sur mon FF (89.0b7 (64 bits)) les angles de l'entête ne passent pas.
(Et comme j'utilise mon poste surtout de jour je préfère un thème clair (bleu ciel /gris))
J'ai bien le thème Flat Style (blue) de Ian Bradley
http://phpbbstyles.oo.gd/demo.php?style=4

Merci pour le tuto, je n'avais pas osé tester avant

[Kwai chang caine]

Moi c'est l'ancien que j'aurais bien voulu retrouver
En tout cas merci de ton travail, mais aussi de la combine, je savais pas que l'on pouvait utiliser un skin coté client

[cage]

Merci Ar-S,

Vraiment sympa.

cage

[venom]

Sympa cette astuce. Je ne connaissais pas. Perso j'utilise Flat Style blue Il est sympa. Je m'y suis fait.






@++

[Ar-S]

Moi c'est l'ancien que j'aurais bien voulu retrouver
En tout cas merci de ton travail, mais aussi de la combine, je savais pas que l'on pouvait utiliser un skin coté client

Ce n'est pas ça, c'est qu'on réécrit le css en utilisant les mêmes balises que la skin utilisée.
En résumée tu as dans un skin d'origine
body { background-color:#FFF; } (fond blanc) toi tu poses un body { background-color:#000; } (fond noir) dans stylus en lui indiquant d'appliquer ça sur tel ou tel site. C'est HYPER cool pourvu que tu ais un peu de temps pour modifier tout ce que tu veux. Seul toi le verra, c'est coté client comme tu dis

[kernadec]

bjr Ar-S
Mes yeux te disent Merci
le truc cool c'est qu'on peut aussi l'utiliser sur Android
Cordialement

[Marc56]

Noter que cette extension existe aussi pour tous les navigateur utilisant le moteur Chromium.


II est possible de visualiser en direct les modifications avec un navigateur permettant d'afficher plusieurs fenêtres en mosaïque

Vivaldi est un des navigateurs basé sur le moteur Chromium
Il est dérivé d'Opera et possède encore plus d'options, dont la gestion native des fenêtres multiples en mode mosaïque
Pour voir en direct les modifications du CSS on peut donc ouvrir les deux pages côte à côte

Toutes les extensions Chrome sont compatibles.
dont Stylus
https://chrome.google.com/webstore/deta ... bafhncgmne

1. Ouvrir la page du forum

Si le style d'Ar-S n'est pas installé
2. Cliquer sur l'icône [S] dans la barre d'icône
3. Cliquer sur Gestion
4. Créer nouveau style
5. Coller le code

Si le style est déjà installé:
2. Cliquer sur l'icône [S] dans la barre d'icône
3. Cliquer sur l'icône de crayon pour modifier

Pour afficher deux fenêtre en mosaïque:
1. Sélectionner deux onglets (avec la souris + CTRL)
2. Afficher le menu popup (bouton droit)
3. Sélectionner "juxtaposer les 2 onglets"

Dans la fenêtre de style, si "Prévisualiser en direct" est coché, les modifications se voient en direct

Ne pas oublier d'enregistrer

[kernadec]

bjr Ar-S
je pense que la couleur de la ligne 46 de script devrait être changée
car dans recherche nous voyons pas les options Topic
finalement je post le CSS modifié à ma sauce

Cordialement

ps: merci Marc56 pour le partage

[Réédit] Merci ChrisR pour les profils à gauche intégré au code ci-dessous

Code : Tout sélectionner

.site_logo {
    background-image: url("http://share.ldvmultimedia.com/evzjz43l.png");
    width:149px;
    height:52px;
}
html, body {
    color: #082f73;
}
.headerbar {
    background-color: #40637d;
}

/* POPUP RACCOURCIS */
.dropdown .dropdown-contents {
    background: #0b1d3c;
    border-color: #3f4797;
    box-shadow: 1px 3px 5px RGBA(0, 0, 0, 1);
}
.dropdown li.separator, .dropdown li, .dropdown li li{
    border-color: #4348ca;
}


.navbar {
    background-color: #35518c;
    box-shadow: 0 0 5px 2px #000, inset 0 3px 18px RGBA(100, 100, 100, .25);
}

.forabg, .forumbg {
     margin-bottom: 10px;
    padding: 4px;
    box-shadow: 0 0 3px 1px #312e2e, inset 0 3px 18px RGBA(100, 100, 100, .25);
    clear: both;
    border-radius: 5px;
}


.wrap {
    background-color: #4365ae;
    border-color: #E6E9ED;
}
.postprofile a.username{
       color:#6DE1FF;
}
.bg1, .bg2 {
      background-color: #a6a4e3;
    box-shadow: 1px 1px 1px 1px #312e2e, inset 0 0px 1px RGBA(0, 0, 0, 1);
       border-radius: 20px 20px 20px 20px;
    margin-bottom:15px;
}  
.bg1 a{
    color:#6DE1FF;
}
.row-item a{
    color:#2141e3;
}


.postprofile a.username{
       color:#6DE1FF;
}

p.author{
      color:#0000FF;
}

p.author a.username{
      color:#0073FF;
}

p.author time{
      color:#00ff00;
}

.signature {
    border-top-color: #CCCCCC;
    background-color:#7977b9;
}

.notice {
    color:#fff;
}
.notice a.username {
    color:#00f7ff;
}

.post:target .content {
    color: #000000;
}
.content {
    color: #000000;
}

a {
    color: #3D95F4;
    text-decoration:none;
}

a.topictitle {
     color: #054f9f;
    text-decoration:none;
}

a.username {
     color: #054f9f;
    text-decoration:none;
}

/* ligne */
li.row {
    background-color: #d0e6f6;
}
li.row:hover {
    background-color: #e3ecf2;
}
ul.topiclist li {
    color: #4C5D77;
}

.codebox {
    background-color: #fffbd7;
    border-color: #C9D2D8;
}

a.forumtitle {
    font-family: "Trebuchet MS", Helvetica, Arial, Sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: none;
    color:#2f56d0;
text-shadow: -1px 0px 2px #d8efff;
}

a.forumtitle:hover {
    color:#3764f2;
}

a.lastsubject {
     color: #416ac4;
}

.postprofile strong {
    color: #000000;
}

blockquote {
    background-color:#0096ff;
}

@media (min-width: 701px) {
	
	.post.online {
		background-image: none;
	}

	.post .preonline.online {
		width: 58px;
		height: 58px;
		position: absolute;
		left: 0;
		top: 0;
		-ms-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}	

	.no-avatar .preonline.online {
		position: relative;
		margin: -8px;
	}
		
	.post .postprofile {
		float: left;
		border-width: 0 1px 0 0;
	}
	
	.post .postprofile dd, .post .postprofile dt {
		margin-right: 8px;
		margin-left: 0;
	}

	.has-profile .postbody {
		float: right;
		margin-right: 6px;
	}
	
}

[Marc56]

Voila ma version diurne (bleu-clair / gris-clair) coins carrés
(Pas totalement au point: l'entête et pied de page ne sont pas alignés)
J'ai enlevé un peu trop de lignes: notamment des fontes. À améliorer.

Code : Tout sélectionner

/* Stylus thème pour forum PureBasic */ 
/* Nécessite l'extension STYLUS (stylus.openstyles) - Tous navigateurs */ 
/* Thème clair Gris-Bleu, coins carrés */ 
/* Dérivé du travail d'analyse d'Ar-S : [SKIN] Forum */ 
/* https://www.purebasic.fr/french/viewtopic.php?f=4&t=18446 */ 

.site_logo {
    width:249px;
    height:42px;
}
html, body {
    color: rgb(0, 0, 0);
}
.headerbar {
    background-color: #e6e9ed;
}

/* POPUP RACCOURCIS */
.dropdown .dropdown-contents {
    background: #c9d2d8;
    border-color: #3f4797;
}

.dropdown li.separator, .dropdown li, .dropdown li li{
    border-color: #4348ca;
}

.navbar {
    background-color: #fff;
}

.wrap {
    background-color: #c9d2d8;
    border-color: #E6E9ED;
}

.postprofile a.username{
       color:#2141e3;
}

.bg1, .bg2 {
    background-color: #e6e9ed;
    margin-bottom:15px;
}  

.postprofile a.username{
       color:#054f9f;
}

p.author{
      color:#2141e3;
}

p.author a.username{
      color:#db08089e;
}

p.author time{
      color:#0b1d3c;
}

.notice {
    color:#fff;
}
.notice a.username {
    color:#2141e3;
}

.post:target .content {
    color: #2141e3;
}
.content {
    color: rgb(0, 0, 0);
}

a {
    color: #054f9f;
    text-decoration:none;
}

a.topictitle {
     color: rgb(0, 0, 0);
    text-decoration:none;
}

a.username {
     color: #054f9f;
    text-decoration:none;
}

/* ligne */
li.row {
    background-color: #e6e9ed;
}
li.row:hover {
    background-color: #fffbd7;
}
ul.topiclist li {
    color: #4C5D77;
}

 /* Code */ 
.codebox {
    background-color: #fffbd7;
    border-color: #C9D2D8;
}

a.forumtitle {
    font-family: "Verdana", "Trebuchet MS", Helvetica, Arial, Sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    text-decoration: none;
    color:#2f56d0;
}

a.forumtitle:hover {
    color:#4348ca;
}

a.lastsubject {
     color: #416ac4;
}

.postprofile strong {
    color: #3f4797;
}

blockquote {
    background-color:#fffbd7;
}

PS. Puisqu'on parle d'outils pour lire plus facilement les forums et autres pages web, je conseille cette autre extension indispensable et qui existe aussi pour FF et les Chromium: Highlight This https://highlightthis.net/index.html
Contrairement à beaucoup d'extension qui se contentent de mettre en couleur les mots clé recherchés ou mémoriser ceux d'une page, cette extension sert à maintenir des listes de mot-clé qui sont ensuite surlignés lors du chargement de n'importe quelle page.
L'aide sur le site est en anglais, mais le programme en français.
Pensez à utiliser la fonction sauvegarde car certains outils de nettoyage peuvent vider tous ses paramètres et listes.

[ChrisR]

Pour Afficher les profils à gauche dans les messages.
css récupéré depuis l'extension Profil sur la gauche

Code : Tout sélectionner

@media (min-width: 701px) {
	
	.post.online {
		background-image: none;
	}

	.post .preonline.online {
		width: 58px;
		height: 58px;
		position: absolute;
		left: 0;
		top: 0;
		-ms-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);
	}	

	.no-avatar .preonline.online {
		position: relative;
		margin: -8px;
	}
		
	.post .postprofile {
		float: left;
		border-width: 0 1px 0 0;
	}
	
	.post .postprofile dd, .post .postprofile dt {
		margin-right: 8px;
		margin-left: 0;
	}

	.has-profile .postbody {
		float: right;
		margin-right: 6px;
	}
	
}

[Ar-S]

ChrisR, très sympa le retour des profils à gauche.
Concernant vos versions, n'hésitez pas à mettre des screenshot, c'est plus sympa.

[kernadec]

bjr à tous
Voici de quoi s'amuser
Mais comme ils dépassent 60000 caractères voici les liens :
Skin CAFE ----> https://jmp.sh/qrw5BuZ
Skin SKY BLUE ----> https://jmp.sh/I45i8we
Skin BREEZE BLUE ----> https://jmp.sh/E58oH7C
Skin BLACK STAR ----> https://jmp.sh/S3auJmc
Skin PRODARK Gris ----> https://jmp.sh/Alvq5np
skin Black AZJIO ----> https://jmp.sh/lGxyOsY
perso j'utilise le style black AZJIO
Cordialement

[Kwai chang caine]

Ce n'est pas ça, c'est qu'on réécrit le css en utilisant les mêmes balises que la skin utilisée.

D'accord !!!
Merci pour l'explication
Tu crois qu'on pourrait passer le pseudo à gauche comme avant, avec ton "avion", car je trouve ça vraiment pas naturel de regarder

[ChrisR]

Bonjour KCC,
Regarde 3 messages plus haut, j'ai trouvé un bout de code pour le faire.
Je suis d'accord, c'est pas naturel le pseudo à droite.

Par contre, j'ai rien trouvé pour afficher "Active Topics" directement sur la page d'accueil, comme avant.