Accueil
4 — PA
@ poesiescendrees
Date d'inscription : 24/11/2020
modifier la PA
Le code de la PA est disponible dans une page externe HTML (Panneau admin > Modules > HTML & JAVASCRIPT > gestion des pages HTML) modifiable à tout moment. Elle est intégrée en tant qu'iframe dans le template "index_body" aux lignes 39 à 41 comprises. L'URL indiqué à la ligne 40 est celui de la page HTML ; c'est donc sur l'éditeur de cette dernière (et non dans le template) qu'il faudra réaliser les modifications voulues.
Pour créer donc votre PA en page externe, créez une nouvelle page HTML sur votre forum et n'oubliez surtout pas de changer l'adresse URL dans le template index_body pour que ce soit elle qui soit bien affichée et non l'ancienne.
CODES DE LA PA
Pour créer donc votre PA en page externe, créez une nouvelle page HTML sur votre forum et n'oubliez surtout pas de changer l'adresse URL dans le template index_body pour que ce soit elle qui soit bien affichée et non l'ancienne.
CODES DE LA PA
modifier la PA
Pour modifier la PA, il est important
Le code de la PA se divise en 2 grosses parties : le CSS au début et le HTML à la fin de la page. Le CSS lui-même est composé des parties du CSS général du forum nécessaires à afficher correctement la page. Donc normalement, lors des MAJs, vous ne devrez changer que les variables de couleur au début du code à moins que vous n'effectuiez d'autres changements sur le CSS général; auquel cas vérifiez s'ils doivent ou non être réalisés également sur la PA.
me contacter
@ poesiescendrees
Date d'inscription : 24/11/2020
PA directement sur le forum sans iframe
Dans la plupart des cas, les étapes pour installer la PA se résumeront à celles du message précédent. En revanche, si pour une quelconque raison vous désirez remettre la PA sur le forum c'est tout-à-fait possible. Si vous voulez installer un mode clair/sombre par exemple (non inclus dans le thème), l'iframe ne fonctionnera pas.
Vous n'aurez qu'à rajouter le premier spoiler à la fin de votre CSS général et remplacer les lignes 39 à 41 comprises du template "index_body" par le contenu du deuxième spoiler (lignes précédemment citées plus haut). Autrement dit, vous réintégrerez le template au forum et vous ferez les modifications nécessaires dans le CSS général. N'oubliez pas de valider les changements de template. La page HTML externe n'est désormais plus utile et vous pourrez la supprimer.
Vous n'aurez qu'à rajouter le premier spoiler à la fin de votre CSS général et remplacer les lignes 39 à 41 comprises du template "index_body" par le contenu du deuxième spoiler (lignes précédemment citées plus haut). Autrement dit, vous réintégrerez le template au forum et vous ferez les modifications nécessaires dans le CSS général. N'oubliez pas de valider les changements de template. La page HTML externe n'est désormais plus utile et vous pourrez la supprimer.
- Le CSS:
- Code:
/*- - - - - - - - - - - - - - - - - - - - PA PA PA - - - - - - - - - - - - - - - - - - - -*/
.subtitle_pa, .subtitle_pa * {
color: var(--d3);
font-size: 10px;
}
.bp_pa {
display: grid;
grid-gap: var(--mo);
grid-template:
"top_left top_center top_right" 150px
"bottom_left bottom_center bottom_right" var(--total-height-staff)
/ 1fr 1fr 1fr;
--actual-height-input-staff: 4px;
--height-infos-staff: 50px;
--height-input-staff: calc(var(--actual-height-input-staff) + var(--margin-staff));
--margin-staff: var(--mo);
--total-height-staff: calc(var(--height-input-staff) + var(--height-infos-staff));
}
.bp_pa > * {
margin: 0 !important;
}
.icon_pa {
grid-area: top_left;
}
.icon_pa img {
width: 100%;
height: 100%;
}
.context_pa {
grid-area: top_center;
}
.infos1_pa {
grid-area: top_right;
}
.infos2_pa {
grid-area: bottom_left;
font-size: 11px;
font-style: italic;
line-height: 14px;
text-align: justify;
}
/*staff*/
.staff_pa {
grid-area: bottom_center;
position: relative;
}
.input_pa {
height: var(--height-input-staff);
border-bottom: var(--margin-staff) solid var(--l1);
background: var(--m1);
}
.input_pa:last-of-type {
margin: 0 !important;
}
.input_pa:hover {
background: var(--h1);
}
.input_pa:checked {
background: var(--h2);
}
.about_staff_pa {
display: none;
width: 100%;
height: calc(100% - var(--height-input-staff));
position: absolute;
bottom: 0;
left: 0;
}
.input_pa:checked + .about_staff_pa {
display: block;
}
.about_staff_pa > div {
width: 100%;
height: 100%;
}
.infos_staff_pa {
padding-right: var(--mo);
font-size: 11px;
}
.infos_staff_pa i {
opacity: .8;
font-size: 10px;
}
.infos_staff_pa a {
color: inherit;
}
.icon_staff_pa {
width: var(--height-infos-staff);
height: var(--height-infos-staff);
}
.icon_staff_pa img {
width: 100%;
height: 100%;
}
/*partners*/
.partners_pa {
grid-area: bottom_right;
line-height: 20px;
}
.partners_pa tag {
font-size: 10px;
}
- Le HTML:
- Code:
<div class="simple light center-align">
<h3>— thème en libre service (modernBB) —</h3>
<!----- DÉBUT LIENS SOUS LE TITRE
(ajouter ou supprimer à votre guise les liens,
supprimer tout le code entre ce commentaire et le commentaire < FIN LIENS SOUS LE TITRE >
pour supprimer complètement les liens sous le titre)
----->
<pl class="subtitle_pa">
<a href="https://ghostly-daze.forumactif.com/t24-1-theme-modernbb" target="_top">sujet explicatif</a> —
<a href="https://ghostly-daze.forumactif.com/f12-sujets-predefinis" target="_top">sujets prédéfinis</a> —
<a href="https://ghostly-daze.forumactif.com/f13-questions-suggestions-et-reports-de-problemes" target="_top">poser une question / rapporter un problème</a> —
<a href="https://ghostly-daze.forumactif.com/c1-world-gone-mad" target="_top">catégorie exemple</a>
</pl>
<!----- FIN LIENS SOUS LE TITRE ----->
</div>
<div class="bp_pa simple light">
<div class="icon_pa simple middle small">
<!----- IMAGE EN HAUT A GAUCHE ----->
<img src="https://i.pinimg.com/564x/02/33/8f/02338f8c42c3f6c3fd40f91d32a1733d.jpg"/>
</div>
<div class="context_pa simple light">
<scroll>
<!----- TEXTE EN HAUT AU MILIEU ----->
<ro>libre service</ro> bienvenue !
ghostly daze est le forum vitrine au thème qu'il aborde. mis en libre service par <cv>@poesiescendrees</cv>, vous pouvez l'utilisez comme vous voulez pour votre forum.
c'est un thème complet qui porte une petite trentaine de templates, le css assorti et la configuration du panneau admin.
tout est expliqué sur <a href="https://ghostly-daze.forumactif.com/t24-1-theme-modernbb" target="_top">ce sujet</a>.
les codes sont libres d'accès, je vous recommande d'aller lire tous les sujets de prise en main afin que vous puissiez facilement les modifier dans le futur.
au plaisir de vous y retrouver
</scroll>
</div>
<div class="infos1_pa simple light">
<scroll>
<!----- TEXTE EN HAUT A DROITE ----->
<ro>informations diverses</ro> la première catégorie <cv>"codes en libre service"</cv> regroupe, en toute logique, les codes du thème.
les deux catégories suivantes et leurs forums, <cv>"world gone mad"</cv> et <cv>"phoenix"</cv> sont des exemples de vraies catégories classiques d'administration,
pour que vous puissiez avoir une idée de ce que ça donne.
</scroll>
</div>
<scroll class="infos2_pa">
<!----- TEXTE EN BAS A GAUCHE ----->
<ro>disclaimer</ro> le thème du forum, son thème et son design (dont le header) ont été réalisés par <cv>@poesiescendrees</cv>.
la partie javascript permettant de sélectionner les codes en un clic a été réalisé par <a href="https://forum.forumactif.com/t309759-bouton-selectionner-le-contenu-pour-les-balises-de-code" target="_top"><cv>@Ea</cv></a>.
</scroll>
<div class="staff_pa flexrow">
<!--------------------
AJOUTER/SUPPRIMER DU STAFF EN BAS AU MILIEU :
le code contenu entre les commmentaires < DÉBUT / FIN STAFFIEN.NE >
est celui correspondant au bloc d'une seule personne du staff;
vous pouvez en ajouter et en supprimer autant que vous voulez
du moment qu'il y en a au moins un et que les boutons restent
suffisamment grands sur votre forum
-------------------->
<!----- DÉBUT STAFFIEN.NE ----->
<input type="radio" name="staff_pa" class="input_pa" checked/>
<div class="about_staff_pa">
<div class="flexrow">
<div class="infos_staff_pa table_js right-align">
<ro>poésies cendrées (em)</ro><br/>
<i><a href="https://ghostly-daze.forumactif.com/u1" target="_top">profil</a> + <a href="https://poesiescendrees.tumblr.com/" target="_top">tumblr</a> + <a href="https://test-renegade.kanak.fr/" target="_top">forum ressource</a></i>
</div>
<div class="icon_staff_pa no-extend small middle">
<img src="https://i.pinimg.com/564x/7e/b3/39/7eb339754c6396217385b93ec63a243f.jpg"/>
</div>
</div>
</div>
<!----- FIN STAFFIEN.NE ----->
<!----- DÉBUT STAFFIEN.NE ----->
<input type="radio" name="staff_pa" class="input_pa"/>
<div class="about_staff_pa">
<div class="flexrow">
<div class="infos_staff_pa table_js right-align">
<ro>admin 2</ro><br/>
<i><a href="#top" target="_top">compte 1</a> + <a href="#top" target="_top">compte 1</a> + <a href="#top" target="_top">compte 1</a></i>
</div>
<div class="icon_staff_pa no-extend small middle">
<img src="https://i.pinimg.com/564x/7e/b3/39/7eb339754c6396217385b93ec63a243f.jpg"/>
</div>
</div>
</div>
<!----- FIN STAFFIEN.NE ----->
<!----- DÉBUT STAFFIEN.NE ----->
<input type="radio" name="staff_pa" class="input_pa"/>
<div class="about_staff_pa">
<div class="flexrow">
<div class="infos_staff_pa table_js right-align">
<ro>modo</ro><br/>
<i><a href="#top" target="_top">compte 1</a> + <a href="#top" target="_top">compte 1</a> + <a href="#top" target="_top">compte 1</a></i>
</div>
<div class="icon_staff_pa no-extend small middle">
<img src="https://i.pinimg.com/564x/7e/b3/39/7eb339754c6396217385b93ec63a243f.jpg"/>
</div>
</div>
</div>
<!----- FIN STAFFIEN.NE ----->
<!----- DÉBUT STAFFIEN.NE ----->
<input type="radio" name="staff_pa" class="input_pa"/>
<div class="about_staff_pa">
<div class="flexrow">
<div class="infos_staff_pa table_js right-align">
<ro>graphiste</ro><br/>
<i><a href="#top" target="_top">compte 1</a> + <a href="#top" target="_top">compte 1</a> + <a href="#top" target="_top">compte 1</a></i>
</div>
<div class="icon_staff_pa no-extend small middle">
<img src="https://i.pinimg.com/564x/7e/b3/39/7eb339754c6396217385b93ec63a243f.jpg"/>
</div>
</div>
</div>
<!----- FIN STAFFIEN.NE ----->
</div>
<div class="partners_pa">
<scroll>
<ro>voir aussi</ro><br/>
<!----- PARTENAIRES EN BAS A DROITE : ajouter et supprimer autant de liens que voulu ----->
<a href="https://poesiescendrees.tumblr.com/tagged/code" target="_top"><tag>autres codes en libre service</tag></a><br/>
<a href="https://ghostlydazecendres.forumactif.com/" target="_top"><tag>l'autre version du thème</tag></a>
</scroll>
</div>
</div>
me contacter
|
|
|