PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 13/03/2017 22:10:02

Gasbé
Membre
Inscription : 13/03/2017
Messages : 29

Intégrer PluXml dans un site html,css pour conserver le design

Bonjour,

Je découvre Pluxml et je le trouve vraiment bien mais étant pas très doué avec le langage "PHP" je galère assez pour la partie "intégration de mon design"!
En gros je me débrouille très bien avec html css et photoshop mais php j'ai pas suivi mes cours....

Mon problème est que j'ai commencé à me faire un petit site dans le but de présenté mes projet en cours et futurs,
et ce site est fait en HTML, CSS, JAVASCRIPT et il est responsive.

Voilà un exemple de mon design:  http://vbzh82.free.fr/CORPS%20DU%20SITE/index.html
et ici le site en entier qui est en cours de construction provisoirement sur free :  http://vbzh82.free.fr/

Je souhaiterai y intégrer pluxml, dans le sens ou j'aimerais beaucoup garder mon menu à gauche avec mon logo et ma topbar en haut ou
on peut voir ma trogne et placer tout le contenu pluxml là ou il y a du blanc avec les articles au centre et la sidebar à droite .

Je vous montre ce que je voudrais faire en gros avec des screens monté sur photoshop :

453067Capture.jpg

417343Capture2.jpg

Ma page est composé de 4 dossiers et d'un fichier :

- CSS
- FONT (lui je m'en fous)
- IMAGES
- JS
- index.html

J'ai bien essayer de modifié des thèmes, celui d'origine, Responsee et Bootstrap3 mais sans succés.
Je vais voir si c'est possible de faire quelque chose avec le theme modifié de Hamtaro : http://forum.pluxml.org/viewtopic.php?id=4526

Ma question est : Selon vous, est-il possible d'intégrer pluxml dans mon design d'origine ou au moins essayer d'avoir quelque chose d'assez ressemblant à
mon site en modifiant un thème?
Après si c'est pas tout a fait le même menu c'est pas grave du moment que ça reste responsive.

Ma deuxieme question est : Est-il possible de placer par exemple le code PHP de sidebar.php à l'interieur de ma page index.html ?

Merci d'avance pour vos réponses

Hors ligne

#2 13/03/2017 23:09:06

Pierre
Membre
Lieu : La belle province
Inscription : 22/06/2014
Messages : 1 081

Re : Intégrer PluXml dans un site html,css pour conserver le design

Ce qu'il faut faire est simplement l'inverse de ce qui est demandé.  Il faut installer PluXml par défaut et ensuite créer un thème qui contiendra le code html, css et javascript, le logo, etc.

Désolé mais le site doit être en PHP pour que les pages fonctionnent avec le principe de catégories et d'articles.  Un site HTML limite beaucoup le dynamisme offert par un "véritable" langage de programmation.  Beaucoup de documentation est disponible sur le site de PluXml pour faire ses premiers pas.  Les parties difficiles qui font rouler la machine n'auront jamais à être touchées, seules les quelques pages situées dans une copie du répertoire par défaut seront le carré de sable où on fait des dégâts et on apprend à se relever. 

Le forum est un bon endroit pour la thérapie quand la folie s'installe...


#titanic {
    float: none;
    bottom: 0;
}

Hors ligne

#3 13/03/2017 23:34:31

Gasbé
Membre
Inscription : 13/03/2017
Messages : 29

Re : Intégrer PluXml dans un site html,css pour conserver le design

Il faut installer PluXml par défaut et ensuite créer un thème qui contiendra le code html, css et javascript, le logo, etc.

Donc en gros ce design peut-être reproduit à l'identique sur pluxml ?
453067Capture.jpg

Hors ligne

#4 14/03/2017 01:19:19

Pierre
Membre
Lieu : La belle province
Inscription : 22/06/2014
Messages : 1 081

Re : Intégrer PluXml dans un site html,css pour conserver le design

En gros oui, mais il faut distinguer entre le design et les fonctionnalités.  Les machins de météo et de flash-musique vont disparaître, à moins de les "planter" dans le code en dur et mettre des articles autour.  Un blog a comme mission de mettre en vedette ses articles, à la rigueur ils peuvent être agrémentés de ces petits jouets, par exemple en sidebar.

Si la démo peut avoir un exemple de page d'article, avec et sans sidebar, et une de catégorie, peut-être une page d'accueil qui tranche un peu des autres, le tour est presque joué.  C'est pas évident au premier jour de PHP mais on s'en sort pas, les boucles WHILE  et les fonctions fondamentales comme lastArtList() (et 3 ou 4 autres) sont une bonne base pour tirer le maximum de PluXml.


#titanic {
    float: none;
    bottom: 0;
}

Hors ligne

#5 14/03/2017 05:07:22

Gasbé
Membre
Inscription : 13/03/2017
Messages : 29

Re : Intégrer PluXml dans un site html,css pour conserver le design

Merci pour tes explications, l'idée de mettre les jouets en sidebar est pas con du tout ! mais en fait la météo servait à comblé le vide big_smile

En fait je m'aperçois que le menu du thème que j'utilise avec pluxml est beaucoup plus pratique et fonctionnel sur les petites résolutions.. donc du coup je me dis que je peux refaire mon design sur de bonne base mais je galère ÉNORMÉMENT avec le logo.

Sur screenfly je vois qu'en dessous de 1280 de résolution mon logo est répété en boucle à l'horizontale.

#masthead .site-title{
	font-family:Yesteryear;
	line-height:50px;
	font-size:0;
	margin:0;
	padding:17px 0;
	text-align:center;
	background-image: url("http://vbzh82.free.fr/PluXml/themes/flat/img/logo_gasbe.png")  ;
}

Et le problème est que si je met background-image: no-repeat; là le logo disparait complètement....  mad

Hors ligne

#6 14/03/2017 08:45:18

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 174
Site Web

Re : Intégrer PluXml dans un site html,css pour conserver le design

il suffit des fois juste d'un petit mot clé pour résoudre le probleme

background-image: url("http://vbzh82.free.fr/PluXml/themes/flat/img/logo_gasbe.png") no-repeat;

https://www.w3schools.com/cssref/pr_bac … repeat.asp

mot clé: no-repeat


== EN VACANCES ... ENFIN !!! ==
Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#7 14/03/2017 14:27:27

Gasbé
Membre
Inscription : 13/03/2017
Messages : 29

Re : Intégrer PluXml dans un site html,css pour conserver le design

.png") no-repeat;

si je met un no-repeat le logo disparait

Hors ligne

#8 14/03/2017 14:32:37

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 174
Site Web

Re : Intégrer PluXml dans un site html,css pour conserver le design

il faut surement positionner l'image. essaye avec

background-image: url("http://vbzh82.free.fr/PluXml/themes/flat/img/logo_gasbe.png") top left no-repeat;

== EN VACANCES ... ENFIN !!! ==
Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#9 14/03/2017 14:58:05

Gasbé
Membre
Inscription : 13/03/2017
Messages : 29

Re : Intégrer PluXml dans un site html,css pour conserver le design

j'avais deja essayer, je viens de retenter et rien... c'est bizar

Hors ligne

#10 14/03/2017 15:11:06

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 706
Site Web

Re : Intégrer PluXml dans un site html,css pour conserver le design

[== CSS ==]
#masthead  .site-title {
    background: url('/PluXml/themes/flat/img/logo_gasbe.png') no-repeat top left;
}

Les différentes propriétés de background-image sont listées à cette adresse :
https://www.w3schools.com/cssref/pr_bac … -image.asp
En clair, no-repeat n'est pas permis pour background-image. Il faut utiliser background tout simplement.

Utilise l'inspecteur de Firefox pour affiner les régles CSS (touche F12)

Dernière modification par bazooka07 (14/03/2017 15:19:30)

Hors ligne

#11 14/03/2017 15:36:11

bazooka07
Membre
Lieu : Quelque part en Rhône-Alpes
Inscription : 06/02/2014
Messages : 706
Site Web

Re : Intégrer PluXml dans un site html,css pour conserver le design

Pour ce que tu veux faire, il vaut mieux procéder comme ceci:

[== HTML ==]
<h1 class="site-title display-title ">
   <a href="/PluXml/" title="Gasbe" rel="home">
      <img alt="Gasbe" src="/PluXml/themes/flat/img/logo_gasbe.png">
   </a>
</h1>
[== CSS ==]
#masthead .site-title {
    padding: 0;
    margin: 0;
    font-family: Yesteryear;
    height: 80px;
    width: 225px;
    text-align: center;
}

Si l'image n'est pas accessible, au moins le texte alternatif s'affichera.

Dernière modification par bazooka07 (14/03/2017 15:36:36)

Hors ligne

#12 14/03/2017 15:50:09

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 174
Site Web

Re : Intégrer PluXml dans un site html,css pour conserver le design

autant pour moi je n'ai pas fait attention que j'avais écrit background-image au lieu de background
merci JP d'avoir corrigé


== EN VACANCES ... ENFIN !!! ==
Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#13 14/03/2017 18:49:24

Gasbé
Membre
Inscription : 13/03/2017
Messages : 29

Re : Intégrer PluXml dans un site html,css pour conserver le design

Ton code fonctionne bien Bazooka mais un problème résolu en amène un autre parceque
je voulais que mon logo se change lorsque la résolution d'écran passe en dessous de 1280px, je souhaitais le remplacer par un autre plus petit et plus adapté aux basses résolution.

Je pensais faire le changement de logo (image) avec ce code:

[== CSS ==]
@media (max-width:1199px){
	#masthead .site-title{
	background: url("/PluXml/themes/flat/img/logo_gasbe_mobile.png") ; 
	padding: 0;
    margin: 0;
    font-family: Yesteryear;
    text-align: center;
	}

}

mais étant donné que l'image est appelé en html dans header.php ben je peux pas faire comme ça car le gros logo reste affiché et ça affiche aussi le petit logo

Dernière modification par Gasbé (14/03/2017 18:57:43)

Hors ligne

#14 14/03/2017 20:29:43

Gasbé
Membre
Inscription : 13/03/2017
Messages : 29

Re : Intégrer PluXml dans un site html,css pour conserver le design

Finalement les logos s'affiche bien que ce soit en grande résolution et en basse résolution.

dans header. php j'ai placé le code comme ça:

[== HTML ==]
			   
<h1 class="site-title display-title  ">
   <a href="/PluXml/" title="Gasbe" rel="home">
       <img src=""> </a>
</h1>	

et dans mon css comme ça pour le grand logo :

[== CSS ==]
#masthead .site-title{
	font-family:Yesteryear;
	background: url("/PluXml/themes/flat/img/logo_gasbe.png") no-repeat ;
	line-height:50px;
	font-size:1px;
	margin:0;
	margin-top: 19px;
	padding-top: 19px;
	padding-bottom: 4px;

	text-align:left
}

et comme ça pour le petit logo qui s'affiche pour toute les résolution en dessous 1280px:

[== CSS ==]
@media (max-width:1199px){
	#masthead .site-title{
	background: url("/PluXml/themes/flat/img/logo_gasbe_mobile.png") no-repeat ;
	margin-top: 7px;
    margin-left: 4px;
	padding:4px 4px 2px 4px;
    font-family: Yesteryear;
   	text-align:left;
	border-bottom:1px solid rgba(255,255,255,.1);
	}

}

Merci à vous tous, si jamais par la suite je re-bloque pour autre chose et qui pourrait vous paraitre facile à résoudre je reposte dans ce topic   wink

Dernière modification par Gasbé (14/03/2017 20:30:56)

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés