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

demisel · mars 2017

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 :

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

Pierre · mars 2017

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...

demisel · mars 2017

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 ?

Pierre · mars 2017

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.

demisel · mars 2017

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

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:

Stéphane · mars 2017

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_background-repeat.asp

mot clé: no-repeat

demisel · mars 2017

.png") no-repeat;

si je met un no-repeat le logo disparait

Stéphane · mars 2017

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;

demisel · mars 2017

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

bazooka07 · mars 2017

[== 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_background-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)

bazooka07 · mars 2017

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.

Stéphane · mars 2017

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

demisel · mars 2017

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

demisel · mars 2017

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

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

Réponses