board3 portal custom block

Support pour n'importe quelle extension non présente dans notre base de données
Aucune demande de personnalisation des extensions n'est autorisée.

Modérateur: Equipe

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

Merci de mettre le nom de l'extension ainsi que sa version entre crochets, et un titre explicite afin de faciliter la recherche.
Exemple : [nom de l'extension + numéro de version] Titre explicite résumant le problème

Le lien de téléchargement de l'extension est demandé pour toute demande de support.

Aucune demande de personnalisation des extensions n'est autorisée.
Partager sur FacebookPartager sur TwitterPartager sur Google+

board3 portal custom block

Messagepar Nylream » 27 Mar 2015 à 15:33

Bonjour,

J'ai fais un petit contenu pour un custom block de portail. le résultat est ok en apparence, mais n'étant pas développeur, j'aimerais un avis pour corriger quelques erreurs qui y sont sans aucun doute...

Dans un deuxième tant, je me demande si il est possible de rendre ce contenu "responsive", j'ai beau chercher.

Le code est un peu long (102 lignes)et je ne vois pas comment joindre un fichier, c'est ennuyeux si je l'intègre dans un poste ?

edit :
http://pastebin.com/2fMGTtn9

Merci d'avance pour votre aide,
Nylream
Apprenti-posteur
Apprenti-posteur
 
Messages: 136
Enregistré le: 29 Nov 2006 à 13:08

Re: board3 portal custom block

Messagepar sub60 » 27 Mar 2015 à 15:47

Salut,

Vu que ça concerne l'extension Board3portal, on va mettre ça a la bonne place

Votre sujet a été déplacé par un membre de l'équipe.
Origine: Styles phpBB 3.1.x ‹ Modifications et recherche de styles

pour ton code tu peut utiliser pastebin et mettre le lien obtenu ici :wink:

Cordialement
<< Comment poster au bon endroit sur phpbb-fr >>
Attention..!! les styles pour phpBB 3.0, ne sont pas compatible avec phpBB 3.1
Sur phpBB 3.1, pour rafraîchir le style il suffit de vider le cache du forum.
Si vous considérez votre requête comme résolue, merci d'ajouter l'attribut de sujet [Réglé]
Avatar de l’utilisateur
sub60
Floodeur universel
Floodeur universel
 
Messages: 9518
Enregistré le: 19 Juin 2006 à 14:14
Localisation: oise

Re: board3 portal custom block

Messagepar Nylream » 27 Mar 2015 à 15:51

sub60 a écrit:Salut,

Vu que ça concerne l'extension Board3portal, on va mettre ça a la bonne place

<font color=green><b>Votre sujet a été déplacé par un membre de l'équipe.</b></font>
Origine: Styles phpBB 3.1.x ‹ Modifications et recherche de styles

pour ton code tu peut utiliser pastebin et mettre le lien obtenu ici :wink:

Cordialement


Bonjour Sub60.

C'est fait pour le pastbin merci,

Sinon, ça concerne pas plus Board3 portal qu'autre chose puisque c'est un custom block et que le block en lui même fonctionne très bien.
Mon soucis est un soucis d'html / css et de le faire proprement (et responsive). Je comptais donc plus sur l'aide de connaisseur en style comme par exemple Cabot que sur ceux développant l'extension.

Merci à toi,
Nylream
Apprenti-posteur
Apprenti-posteur
 
Messages: 136
Enregistré le: 29 Nov 2006 à 13:08

Re: board3 portal custom block

Messagepar cabot » 27 Mar 2015 à 18:26

Hello,

Tu ne peux pas injecter une balise <html> et une balise <body> dans le corps du document.
=> supprime ces balises

Tu ne peux pas charger le style comme ça, il faudrait utiliser l'attribut scoped mais il n'est supporté actuellement que par Firefox.

Supprime le style et reporte-le dans le CSS après avoir ajouté une classe sur la div qui englobe ton code et en recréant tes sélecteurs avec le nom de cette classe.

Dans le bloc perso :
Code: Tout sélectionner
<div class="trucapouet">
	<table>
		<tr>
			<td class="champs">
				<div class="membres" >
					<div class="cercle cercle1">
						<div class="cercle cercle2"></div>
					</div>
				</div>
			</td>
			<td class="champs">
				<h4 class="fleet"><a href="https://robertsspaceindustries.com/orgs/QUANTA/members" target="_blank">Membres</a></h4>
				<p>2</p>
			</td>
			<td class="champs">
				<div class="vaisseaux" >
					<div class="cercle cercle1">
						<div class="cercle cercle2"></div>
					</div>
				</div>
			</td>
			<td class="champs">
				<h4 class="fleet"><a href="https://robertsspaceindustries.com/orgs/QUANTA/fleetview" target="_blank">Vaisseaux</a></h4>
				<p>7</p>
			</td>
		</tr>
	</table>
</div>

Dans le CSS :
Code: Tout sélectionner
/* Bloc portail perso avec des trucs qui tournent */

.trucapouet .champ{
	padding-right: 22px;
}
	
@-webkit-keyframes cssAnimation {
	from { -webkit-transform: rotate(360deg); }
	to { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes cssAnimation {
	from { -moz-transform: rotate(360deg); }
	to { -moz-transform: rotate(0deg); }
}

@-o-keyframes cssAnimation {
	from { -o-transform: rotate(360deg); }
	to { -o-transform: rotate(0deg); }
}

.trucapouet .cercle {
	background-image: none;
	background-color: transparent;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	-webkit-animation: cssAnimation 5s infinite linear;
	-moz-animation: cssAnimation 5s infinite linear;
	-o-animation: cssAnimation 5s infinite linear;
	animation: cssAnimation 5s infinite linear;
	width: 109px;
	height: 109px;
}

.trucapouet .cercle1 {
	background-image: url("./images/cercle1.png");
}

.trucapouet .cercle2 {
	background-image: url("./images/cercle2.png");
} 
	
.trucapouet .membres {
	background-image: url("./images/fleet.png");
	background-color: transparent;
	background-position: 37px 20px;
	background-repeat: no-repeat;
	width: 125px;
	height: 109px;
	padding-left: 20px;
}

.trucapouet .vaisseaux {
	background-image: url("./images/fleet.png");
	background-color: transparent;
	background-position: 35px -75px;
	background-repeat: no-repeat;
	width: 125px;
	height: 109px;
	padding-left: 18px;
}

.trucapouet .fleet {
	padding-top: 25px;
}

Pour l'instant il n'y a rien de responsive, on a uniquement "nettoyé" un peu le code.
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26717
Enregistré le: 13 Fév 2011 à 19:42
Localisation: Rarement sur la plaque

Re: board3 portal custom block

Messagepar Nylream » 27 Mar 2015 à 22:47

Bonsoir Cabot,

C'est fait, je me doutais bien que même si ça s'affichait... c'était pas "propre".
Merci pour ton aide, maintenant c'est propre :lol:

Le rendu est assez basique pour ce block, j'ai :
Image 1 (avec animation) | Texte de l'image 1 | Image 2 (avec animation) | Texte de l'image 2

Quand ça passe sur un écran de moins de 430 pixel de large, ça coince...
J'aimerais que du coup, à ce palier ça devienne :
Image 1 (avec animation) | Texte de l'image 1
Image 2 (avec animation) | Texte de l'image 2

Voilà, même pas sur que le terme responsive soit pas trop pompeux tellement ça doit être simple... sauf que j'y arrive pas :roll:

Si ça ne t'ennuies pas de me guider un peu

le custom block est là :
http://pastebin.com/Y5fhHZeZ

j'ai mis le style suivant dans le portal.css (à la fin) :
http://pastebin.com/tCaZA99T

Edit :
Il y a plusieurs choses dans l'affichage (sans parler du responsive) qui m'ennuie.
Dans pas mal de tuto je vois les propriété float pour décaler dans un même cadre, 2 éléments (genre mon image et le texte à coté). Ce serait pas plus propre ? J'ai énormément de mal à superposer les 3 éléments (fond + 2 animations)
Je superpose les 2 animations en faisant un div image1 div image2 /div /div, mais lorsque je crée l'animation, elle sont comme lié... j'aimerais faire un reverse sur l'image2, mais lorsque je met cette propriété, ça la fige au lieu d'en inverser la rotation.

Merci beaucoup pour ton aide.
Nylream
Apprenti-posteur
Apprenti-posteur
 
Messages: 136
Enregistré le: 29 Nov 2006 à 13:08

Re: board3 portal custom block

Messagepar cabot » 02 Avr 2015 à 09:12

Pour obtenir un support plus efficace, merci de préciser l'URL de votre forum. :wink:
Image
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26717
Enregistré le: 13 Fév 2011 à 19:42
Localisation: Rarement sur la plaque


Retourner vers Support des extensions non présentes dans notre base de données

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

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