- InvitéInvité
[commande] Image+ texte en page d'accueil
Sam 26 Aoû 2023 - 16:06
Type de commande (modification de templates, en-tête, qeel, mise en page de messages, pub, autres) : image+texte
Pour quel forum :bubblegum.forumactif.com
Maquette graphique/schéma/croquis :https://zupimages.net/up/23/34/ab2i.png
Informations utiles (couleurs, images, etc, …) :couleur de fond : #CFF5FF image : https://zupimages.net/up/23/34/fssz.png police Open sans 25px couleur #000000 (1er ligne en majuscule)
[Pour les modifications de templates] Version du forum (PhpBB2, PhpBB3, PunBB, Invision, ModernBB ou AwesomeBB) :AwesomeBB
Le code pourra-t-il être mis en libre service ensuite ? Non
Bonjour la Tambouille j'ai encore besoin de vos services pour mettre en place une image avec un texte en page d'accueil. J'ai mis un exemple en image directement sur le forum concerné afin de bien visualiser les proportions et la position de l'image+texte.
Merci par avance.
Pour quel forum :bubblegum.forumactif.com
Maquette graphique/schéma/croquis :https://zupimages.net/up/23/34/ab2i.png
Informations utiles (couleurs, images, etc, …) :couleur de fond : #CFF5FF image : https://zupimages.net/up/23/34/fssz.png police Open sans 25px couleur #000000 (1er ligne en majuscule)
[Pour les modifications de templates] Version du forum (PhpBB2, PhpBB3, PunBB, Invision, ModernBB ou AwesomeBB) :AwesomeBB
Le code pourra-t-il être mis en libre service ensuite ? Non
Bonjour la Tambouille j'ai encore besoin de vos services pour mettre en place une image avec un texte en page d'accueil. J'ai mis un exemple en image directement sur le forum concerné afin de bien visualiser les proportions et la position de l'image+texte.
Merci par avance.
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [commande] Image+ texte en page d'accueil
Sam 26 Aoû 2023 - 21:36
- InvitéInvité
Re: [commande] Image+ texte en page d'accueil
Dim 27 Aoû 2023 - 9:54
Coucou Mäven, merci beaucoup. Bon dimanche.
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [commande] Image+ texte en page d'accueil
Jeu 31 Aoû 2023 - 20:03
Coucou !
Je ne t'ai pas oublié hein, je fais ça dans le week-end normalement =)
Je ne t'ai pas oublié hein, je fais ça dans le week-end normalement =)
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [commande] Image+ texte en page d'accueil
Sam 2 Sep 2023 - 21:48
Hello !
J'ai commencé et tu peux voir un aperçu ici : https://commandes-maven-tamb.forumactif.com/
Cependant il me manque plusieurs infos :
- y a t-il un contour ou c'est juste sur l'image ?
- cela doit-il prendre 100% de la page ou alors la même largeur que les catégories ?
Bonne soirée =)
J'ai commencé et tu peux voir un aperçu ici : https://commandes-maven-tamb.forumactif.com/
Cependant il me manque plusieurs infos :
- y a t-il un contour ou c'est juste sur l'image ?
- cela doit-il prendre 100% de la page ou alors la même largeur que les catégories ?
Bonne soirée =)
- InvitéInvité
Re: [commande] Image+ texte en page d'accueil
Dim 3 Sep 2023 - 11:18
Re Mâven, aucun contour et cela doit prendre 100% de la page stp. l'image est en fond transparent.
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [commande] Image+ texte en page d'accueil
Dim 3 Sep 2023 - 16:49
OK donc comme ça ça te va ?
https://commandes-maven-tamb.forumactif.com/
https://commandes-maven-tamb.forumactif.com/
- InvitéInvité
Re: [commande] Image+ texte en page d'accueil
Dim 3 Sep 2023 - 17:27
Oui c'est très bien comme ça.
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [commande] Image+ texte en page d'accueil
Mer 6 Sep 2023 - 13:33
Hello !
Alors, on va commencer par créer une page HMTL : PA -> Modules -> Gestion des pages HTML
Créer une nouvelle en mode avancé, cocher "non" aux 2 questions et puis coller ce contenu :
Ensuite, tu enregistres, et tu récupères l'url de ta page. Pour moi c'est cela :
Ensuite, on va aller modifier le template index_body (PA -> Affichage -> Template -> général -> Index_body)
Et juste après :
Maintenant on va aller faire un peu de javascript pour appeler la page HTML au bon endroit.
PA -> Modules -> Gestion des codes javascript.
Tu en crées un nouveau que tu appliques uniquement sur l'index.
Et tu vas y coller ceci :
Et enfin, un peu de CSS, dans Affichage -> Couleurs et CSS -> Feuille de style CSS
Et voilà, tout devrait être bon
Alors, on va commencer par créer une page HMTL : PA -> Modules -> Gestion des pages HTML
Créer une nouvelle en mode avancé, cocher "non" aux 2 questions et puis coller ce contenu :
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="message_accueil">
<img src="https://zupimages.net/up/23/34/fssz.png" alt="Bienvenue !" />
<div>
TU VEUX FAIRE PARTIE DE LA COMMUNAUTE BUBBLEGUM ?
<br />
Rien de plus simple !
<br />
Crée ton profil et retrouve tes amis sur les fifférents salons de discussion.
</div>
</div>
</body>
</html>
Ensuite, tu enregistres, et tu récupères l'url de ta page. Pour moi c'est cela :
- Code:
https://commandes-maven-tamb.forumactif.com/h3-accueil-bubblegum
Ensuite, on va aller modifier le template index_body (PA -> Affichage -> Template -> général -> Index_body)
Et juste après :
- Code:
<!-- END message_admin_index -->
- Code:
<div id="emplacementAccueil">
</div>
Maintenant on va aller faire un peu de javascript pour appeler la page HTML au bon endroit.
PA -> Modules -> Gestion des codes javascript.
Tu en crées un nouveau que tu appliques uniquement sur l'index.
Et tu vas y coller ceci :
- Code:
$(document).ready(function(){
$('#emplacementAccueil').load('/h3-a');
});
- Code:
/h3-a
Et enfin, un peu de CSS, dans Affichage -> Couleurs et CSS -> Feuille de style CSS
- Code:
#message_accueil{
display:flex;
justify-content:center;
align-items:center;
background : #CFF5FF;
font-family: 'Open Sans';
font-size:25px;
}
Et voilà, tout devrait être bon
- InvitéInvité
Re: [commande] Image+ texte en page d'accueil
Jeu 7 Sep 2023 - 10:03
Coucou Mäven merci beaucoup. Néanmoins un soucis avec les widgets.
je mets ce code
Ton code fonctionne seulement si j'enlève les widgets.
Ce qui me dérange le plus c'est cette pub. Je sais bien qu'elle n'est pas supprimable mais peut-on la mettre en dessous de la page d'accueil ?
je mets ce code
- Code:
#sidebar {
margin-top: 300px;
}
Ton code fonctionne seulement si j'enlève les widgets.
Ce qui me dérange le plus c'est cette pub. Je sais bien qu'elle n'est pas supprimable mais peut-on la mettre en dessous de la page d'accueil ?
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [commande] Image+ texte en page d'accueil
Jeu 7 Sep 2023 - 11:13
Hello !
Je n'avais pas l'info pour les widget
Alors ce que tu peux faire c'est le retirer du template index_body et plutôt aller le mettre dans overall_header juste AVANT :
Comme ceci :
Et ça sera bon
Je n'avais pas l'info pour les widget
Alors ce que tu peux faire c'est le retirer du template index_body et plutôt aller le mettre dans overall_header juste AVANT :
- Code:
<!-- BEGIN html_validation -->
Comme ceci :
- Code:
<div id="emplacementAccueil">
</div>
<!-- BEGIN html_validation -->
Et ça sera bon
- InvitéInvité
Re: [commande] Image+ texte en page d'accueil
Jeu 7 Sep 2023 - 12:09
Parfait Mâven. Une dernière question. Si je change de design et donc d'image si elle est de dimension différente par exemple. Dois-je modifier quelque chose ? Encore merci pour ton aide.
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4055
Re: [commande] Image+ texte en page d'accueil
Jeu 7 Sep 2023 - 13:58
Non tout se mettra bien automatiquement
Par contre j'ai oublié mais tu peux retirer cela de la css :
Par contre j'ai oublié mais tu peux retirer cela de la css :
- Code:
background : #CFF5FF;
- InvitéInvité
Re: [commande] Image+ texte en page d'accueil
Jeu 7 Sep 2023 - 14:34
Oh encore merci ! C'est le top ! Tu es la petite fée du codage. Tu peux archiver stp.
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|