[Réglé] Encadrer son forum à l'image du site deezer

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB3.

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bugs, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !

[Réglé] Encadrer son forum à l'image du site deezer

Messagepar atheenais » 23 Nov 2008 à 18:07

Bonjour à tous,

Voilà, j'ai pour projet de créer un template pour un forum phpbb3 que je projette de faire.

J'aimerais savoir s'il est possible d'encadrer son forum comme le fait si bien Deezer (http://www.deezer.com/) :
- avoir un fond d'une couleur sombre et 2 bandes noires de chaque côtés avec un effet d'ombre à droite, à gauche et en bas :
Image
- le forum sera redimensionnable donc j'imagine qu'il faut créer une div de chaque côté pour les ombres.

J'ai essayé la manip de Jester mais je n'y arrive pas.

Quelqu'un a t-il une idée de comment je pourrais faire cela ?

Merci d'avance,

Cdt.

@th.
Modifié en dernier par atheenais le 24 Nov 2008 à 17:03, modifié 1 fois.
Avatar de l’utilisateur
atheenais
Posteur habitué
Posteur habitué
 
Messages: 294
Enregistré le: 21 Avr 2006 à 19:57
Localisation: Lille

Re: Encadrer son forum à l'image du site deezer

Messagepar sub60 » 23 Nov 2008 à 18:42

salut

c'est pas vraiment des bordures , mais plutot deux fond

avec ce tuto ça peut le faire mettre 2 images de fond sur son forum

un fond noir et l'autre plus clair pour qu'il ressorte juste un peut :wink:
en retraite sur le woueb :mrgreen:
Avatar de l’utilisateur
sub60
Floodeur universel
Floodeur universel
 
Messages: 9519
Enregistré le: 19 Juin 2006 à 14:14
Localisation: oise

Re: Encadrer son forum à l'image du site deezer

Messagepar atheenais » 23 Nov 2008 à 19:30

Salut Subaroue,

La méthode vers laquelle tu m'as guidé répond en partie à ma question, le problème est qu'avec, je perds l'extensibilité de mon forum. Mais merci tout de même ;)

Une autre métode ?
Avatar de l’utilisateur
atheenais
Posteur habitué
Posteur habitué
 
Messages: 294
Enregistré le: 21 Avr 2006 à 19:57
Localisation: Lille

Re: Encadrer son forum à l'image du site deezer

Messagepar abble » 23 Nov 2008 à 19:38

salut
le forum que tu cites n'est pas extensible
Styles phpBB3 uniques et sur mesure :
Cosa Nostra Design
Mon nouveau Resto :
Pizzeria L' Olivier
Avatar de l’utilisateur
abble
Floodeur universel
Floodeur universel
 
Messages: 11882
Enregistré le: 04 Oct 2004 à 09:34
Localisation: Entre la pierre et la plume...

Re: Encadrer son forum à l'image du site deezer

Messagepar atheenais » 23 Nov 2008 à 20:36

Salut,

Je ne l'ai cité qu'en guise d'exemple. J'aimerais juste faire une div extensible qui contient le forum avec 2 rebords de chaque côté qui seraient les ombres de ses extrémités droites et gauches.
Avatar de l’utilisateur
atheenais
Posteur habitué
Posteur habitué
 
Messages: 294
Enregistré le: 21 Avr 2006 à 19:57
Localisation: Lille

Re: Encadrer son forum à l'image du site deezer

Messagepar abble » 24 Nov 2008 à 09:16

si tu veux faire ça il te faut deux images avec répetition verticale, l'une à gauche, l'autre à droite, plus une image de fond dans le body.
voilà une piste avec une "border", ouvres overall_header.html et trouves:
Code: Tout sélectionner
<div id="wrap">

après ajoutes:
Code: Tout sélectionner
<div style="border-left: 2px solid #ff0000;"><div style="border-right: 2px solid #ff0000;">


ouvres overall_footer et trouves :
Code: Tout sélectionner
	<div class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a> &copy; 2000, 2002, 2005, 2007 phpBB Group
		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
	</div>
</div>


après ajoutes :
Code: Tout sélectionner
</div></div>


regardes le résultat, il te suffit maintenant de remplacer les borders par une image
Styles phpBB3 uniques et sur mesure :
Cosa Nostra Design
Mon nouveau Resto :
Pizzeria L' Olivier
Avatar de l’utilisateur
abble
Floodeur universel
Floodeur universel
 
Messages: 11882
Enregistré le: 04 Oct 2004 à 09:34
Localisation: Entre la pierre et la plume...

Re: Encadrer son forum à l'image du site deezer

Messagepar atheenais » 24 Nov 2008 à 14:15

Salut Abble,

J'ai essayé d'adapter ta solution avec 2 images (22px de largeur, 1px de hauteur) reproduites sur l'axe y de chaque côté, ça ne fonctionne pas : tous les éléments de ma page se sont retrouvés comme aspirée par la div de 20px de gauche :
Dans overall_header :
J'ai remplacé :
Code: Tout sélectionner
<div style="border-left: 2px solid #ff0000;"><div style="border-right: 2px solid #ff0000;">

Par :
Code: Tout sélectionner
<div id="ombre_gauche"><div id="ombre_droite">
+ les 2 fermetures de balise dans le footer

Dans common.css :
Code: Tout sélectionner
#ombre_gauche {
	width: 22px;
	background-image: url("{T_THEME_PATH}/images/ombre_gauche.jpg");
	background-repeat: repeat-y; 
}

#ombre_droite{
	width: 22px;
	background-image: url("{T_THEME_PATH}/images/ombre_gauche.jpg");
	background-repeat: repeat-y; 
}


Ai-je fait une erreur ?

En revanche ta solution fonctionne très bien lorsque l'on veut mettre des bandes de couleurs de chaque côté.
Avatar de l’utilisateur
atheenais
Posteur habitué
Posteur habitué
 
Messages: 294
Enregistré le: 21 Avr 2006 à 19:57
Localisation: Lille

Re: Encadrer son forum à l'image du site deezer

Messagepar abble » 24 Nov 2008 à 14:56

à mons avis c'est le fait que tu es mis le width qui fait celà.
mets un
Code: Tout sélectionner
width: 100%;
display: block;
float: left;
padding-right: 22px;

pour ombre gauche
et un :
Code: Tout sélectionner
width: 100%;
display: block;
float: right;
padding-right: 22px;

pour ombre droite
mais pour etre plus précis j'aurais besoin de voir ça en "live" avec le lien de ton fofo svp
Styles phpBB3 uniques et sur mesure :
Cosa Nostra Design
Mon nouveau Resto :
Pizzeria L' Olivier
Avatar de l’utilisateur
abble
Floodeur universel
Floodeur universel
 
Messages: 11882
Enregistré le: 04 Oct 2004 à 09:34
Localisation: Entre la pierre et la plume...

Re: Encadrer son forum à l'image du site deezer

Messagepar atheenais » 24 Nov 2008 à 15:14

Ca ne fonctionne toujours pas :
[url=http://]Voici le lien de mon forum[/url]

Dans le common.php j'ai :
Code: Tout sélectionner
#ombre_gauche {
	width: 100%;
    background-image: url("{T_THEME_PATH}/images/ombre_gauche.jpg");
    background-repeat: repeat-y;
	display: block;
	float: left;
	padding-left: 22px;
}

#ombre_droite {
	width: 100%;
    background-image: url("{T_THEME_PATH}/images/ombre_droite.jpg");
    background-repeat: repeat-y;
	display: block;
	float: right;
	padding-right: 22px;
} 


EDIT : en inversant les float, j'ai récupéré la marge à gauche. Il ne manque plus que celle de droite
Modifié en dernier par atheenais le 21 Déc 2008 à 23:11, modifié 1 fois.
Avatar de l’utilisateur
atheenais
Posteur habitué
Posteur habitué
 
Messages: 294
Enregistré le: 21 Avr 2006 à 19:57
Localisation: Lille

Re: Encadrer son forum à l'image du site deezer

Messagepar abble » 24 Nov 2008 à 15:23

essayes à la place de padding-right: 22px; un padding-left: 22px;
si ça ne marche pas donne moi tes deux images que j'essaie en local :wink:
Styles phpBB3 uniques et sur mesure :
Cosa Nostra Design
Mon nouveau Resto :
Pizzeria L' Olivier
Avatar de l’utilisateur
abble
Floodeur universel
Floodeur universel
 
Messages: 11882
Enregistré le: 04 Oct 2004 à 09:34
Localisation: Entre la pierre et la plume...

Re: Encadrer son forum à l'image du site deezer

Messagepar atheenais » 24 Nov 2008 à 15:25

J'ai déja essayé, ça n'a pas marché :)
Il me mets les 2 images à gauche du forum.

Peut-être est-ce dû à la position de la div ?

Voici les 2 images :
ombre gauche
ombre droite

Merci encore pour ton aide Abble !
Modifié en dernier par atheenais le 21 Déc 2008 à 23:11, modifié 1 fois.
Avatar de l’utilisateur
atheenais
Posteur habitué
Posteur habitué
 
Messages: 294
Enregistré le: 21 Avr 2006 à 19:57
Localisation: Lille

Re: Encadrer son forum à l'image du site deezer

Messagepar abble » 24 Nov 2008 à 16:36

alors voilà la soluce, on s'est pris la tete pour rien :mrgreen:

colours.css:
Code: Tout sélectionner
#ombre_gauche {
	background: url("{T_THEME_PATH}/images/ombre_gauche.jpg") 0 0 repeat-y;
}

#ombre_droite {
	background: url("{T_THEME_PATH}/images/ombre_gauche.jpg") 100% 0 repeat-y;
} 


puis dans common.css tu dois avoir ça:
Code: Tout sélectionner
#page-header {
	padding: 0 22px;
	margin: 4px 0;
	clear: both;
}

#page-body {
	padding: 0 22px;
	margin: 4px 0;
	clear: both;
}

#page-footer {
	padding: 0 22px;
	clear: both;
}


html:
Code: Tout sélectionner
<div id="wrap">
<div id="ombre_gauche">
	<div id="ombre_droite">

et ajout de :
Code: Tout sélectionner
</div></div>

après:
Code: Tout sélectionner
	<div class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a> &copy; 2000, 2002, 2005, 2007 phpBB Group
		<!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
		<!-- IF DEBUG_OUTPUT --><br />{DEBUG_OUTPUT}<!-- ENDIF -->
		<!-- IF U_ACP --><br /><strong><a href="{U_ACP}">{L_ACP}</a></strong><!-- ENDIF -->
	</div>
</div>
Styles phpBB3 uniques et sur mesure :
Cosa Nostra Design
Mon nouveau Resto :
Pizzeria L' Olivier
Avatar de l’utilisateur
abble
Floodeur universel
Floodeur universel
 
Messages: 11882
Enregistré le: 04 Oct 2004 à 09:34
Localisation: Entre la pierre et la plume...

Re: Encadrer son forum à l'image du site deezer

Messagepar atheenais » 24 Nov 2008 à 16:46

MERCI ABBLE !

Un problème de résolu, un ! :)

Reste plus que les liens de la navbar qui sont bleu sur fond bleu ;)
Avatar de l’utilisateur
atheenais
Posteur habitué
Posteur habitué
 
Messages: 294
Enregistré le: 21 Avr 2006 à 19:57
Localisation: Lille


Retourner vers Modifications et recherche de styles

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 2 invités