Fork me on GitHub




(1) 2 3 4 5 »


Modifier l'apparence de mon site
Aspirant
Inscrit: 06/04/2020 00:34
De Rhône
Messages: 23
Bonjour, je viens d'installer mon site en local sur Wamp.

J'essaye maintenant de modifier son apparence visuelle.

J'ai pu mettre le module Xmnews en page d'accueil et ... c'est à peu près tout. J'ai essayé de fouiller les différentes documentations Xoops sur internet mais je n'ai pas vraiment trouvé d'infos pratiques, sans compter que la plupart des infos disponibles sont datées de 10 ans.

Je peux me débrouiller en HTML et CSS mais j'ai vu que la plupart des documentations parlent de Smarty ou de Bootstrap.
Je ne connais ni l'un ni l'autre dans la pratique. J'ai aussi vu qu'il y avait une partie Gestionnaire de modèles dans la partie administration.

Bref, c'est un peu le bazar dans ma tête, je ne sais pas trop dans quelle direction aller pour modifier visuellement mon site. Si quelqu'un ici était prêt à m'aider à débuter avec Xoops, ce serait sympa.

Je vais prendre un exemple simple pour commencer à me familiariser : imaginons que je veuilles modifier la couleur de fond des articles publiés avec Xmnews et déplacer la date de publication de gauche vers la droite, comment faut-il s'y prendre ?

Posté le : 07/04/2020 14:27
Partager Twitter Partagez cette article sur GG+
Re: Modifier l'apparence de mon site
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
Bien bien

1 - question : quel est ton thème choisit coté frontoffice ?

2 - Ensuite, je t'invite à lire en profondeur cet article :

la surcharge.

Certes, il n'est pas récent, mais il est toujours d'actualité et te permettra de comprendre le fonctionnement des surchages (de modules notamment).

3 - Quelle version de xmnews ? 1.0 ou RC2 ou autre

En fonction de tes réponses, je t'aiguillerai vers la bonne direction,
mais c'est très simple une fois que tu as bien compris comment fonctionne les surcharges.
Vraiment !


Sur monxoops.fr, nous avons fait le choix de colorer le cadre du texte en fonction de la catégorie des articles, et surtout de façon automatique!

Tout ça avec des surcharges et des templates (déjà disponibles sur le module) que nous avons customisés.

Posté le : 07/04/2020 14:41

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: Modifier l'apparence de mon site
Aspirant
Inscrit: 06/04/2020 00:34
De Rhône
Messages: 23
J'ai pris Xswatch et j'utilise la version 1.0 de xmnews.

C'est bien que tu mentionnes monxoops.fr, c'est grâce à ce site que je me suis décidé à créer le mien avec xoops.

Posté le : 07/04/2020 16:40
Partager Twitter Partagez cette article sur GG+
Re: Modifier l'apparence de mon site
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
xswatch a été réalisé en Bootstrap 3 (BT3).
Sur la dernière version de xmnews, dans le dossier extra, il y a les surcharges de xmnews en BT4
Mais ce n'est opérationnel qu'avec une version XOOPS 2.5.11* (Très bientôt une version stable sortira).

Bien sur, tu peux modifier en surchargeant les templates BT3 fournis par défaut,
mais c'est dommage de ne pas profiter de xswatch4 (xswatch en bt4).

Je prépare donc un paquet xswatch4 compatible avec XOOPS 2.5.10.

Sois patient, mais ça pourrait arriver avant 24h


Posté le : 08/04/2020 12:47

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: Modifier l'apparence de mon site
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
Ok,
pour une version bt4 pour Xoops 2.5.10, cela doit être validé par un autre membre de monxoops.fr avant publication officielle.

En attendant,
je te propose de faire des essais avec ce que tu as actuellement, à savoir xswatch.

Si tu as bien lu la doc sur les surcharges, je vais juste t'indiquer de prendre le fichier
\modules\xmnews\templates\xmnews_index.tpl et le copier dans le dossier qui va bien (je te laisse chercher dans quel dossier ! ).
Une fois fait, tu peux maintenant surcharger ce fichier.
Dans ta demande, colorer le fond des articles (chaque article individuellement) :

<div class="panel-body">
devient
<div class="panel-body bg-success">

et le tour est joué !
Pense évidemment à modifier "Contrôler les modifications de templates?" à "Oui" dans les "Préférences générales".

Colorer toute la page (la partie module xmnews + chaque article) ?

<div class="xmnews bg-info">
(.../...)
<
div class="panel-body bg-success">


Allez, à toi de jouer !

Posté le : 09/04/2020 09:08

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: Modifier l'apparence de mon site
Aspirant
Inscrit: 06/04/2020 00:34
De Rhône
Messages: 23
Ah! J'ai eu un peu de mal pour trouver depuis quel dossier dossier déplacer le fichier et vers quel autre mais j'ai fini par trouver et j'ai pu modifier 2-3 bricoles.

Open in new window


Mais du coup, d'autres questions me viennent en tête
( eh oui )

-Comment faire pour connaître le fichier à modifier ? Là c'est toi qui m'a dis que je devais modifier xmnews_index.tpl et que je devais modifier la div panel body.
Mais comment moi je vais faire, quand je voudrais modifier d'autres éléments, pour trouver quelle div modifier et dans quel fichier ?

-J'ai compris que j'utilisais bootstrap quand j'ai tapé bg-sucess sur mon moteur de recherche. Mais comment connaître ensuite quel élément utiliser à quel moment ? Il faut simplement trouver ça en lisant toute la doc sur leur site ?

Posté le : 09/04/2020 19:40
Partager Twitter Partagez cette article sur GG+
Re: Modifier l'apparence de mon site
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 4051
Bien !

Le chemin, tu as trouvé !
De nombreuses questions tu as posé !

Devant tes yeux, certaines réponses étaient !

A la racine du dossier xswatch, un fichier readme.md tu trouveras,
Ce fichier tu liras,
des informations, il te donnera !

Concernant les fichiers à modifier, le principe est toujours le même pour les modules,

la structure des modules est la suivante :
Dossier "templates" = design des pages
templates : Design coté frontOffice
templates/block : Design des blocs
templates/admin : Design des pages coté BackOffice

Pour trouver le bon fichier, regarde l'Url de la page que tu veux modifier,
les noms sont assez explicites.
ça te semblera logique quand tu auras bien compris

Pour l'exemple, j'ai utilisé une couleur définie dans Boostrap, (rappelle toi, xswatch = BT3, pas BT4) mais si tu connais le CSS, pour les couleurs, tu aurais pu utiliser
style="background-color:#FFCCBB;"
Non, tu n'es pas obligé d'utiliser du Bootstrap, du CSS direct ça marchera évidemment.

Le bootstrap est une bibliothèque d'éléments css prédéfinis qui te permet d'utiliser des fonctions poussées.

A toi de voir si le jeu en vaut la chandelle,
apprendre doucement un peu le BT3/BT4 ou tout faire à la main.
Exemple ?
si tu veux faire une "barre de navigation", regarde les facilités pour le faire en BT3/bt4. C'est juste un exemple.

Pour la dernière question,
comment savoir où modifier les éléments, une fois que tu as trouvé le bon fichier (et copié au bon endroit) ?
Humm, il faut "tatonner", c'est à dire, sentir comment est contruit le fichier, prendre des points de repère dans le fichier et tenter des choses.
Exemple :
ajouter "Test" à un endroit et voir où se place le mot au résultat final (à condition de le placer dans une balise correcte).

Au début, certes, c'est pas évident, mais si tu es curieux, je suis sur que tu aimeras faire cela et adapter les templates exactement comme tu le souhaites.

Dans les prochaines semaines, sur monxoops.fr
nous produirons un tuto 'comment réaliser une surcharge de A à Z" !
Je pense que nous mettrons également à disposition un tuto "Découverte et utilisation de Bootstrap".

J'espère avoir été assez clair dans cette courte explication, je suis conscient que je ne t'ai pas détaillé l'ensemble mais mon credo est de montrer la voie, à chacun d'en faire une avenue directe vers la réussite de son propre projet.

Alain

Posté le : 09/04/2020 23:46

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: Modifier l'apparence de mon site
Aspirant
Inscrit: 06/04/2020 00:34
De Rhône
Messages: 23
Merci pour toutes ces explications, ça m'est très utile !

Citation :
alain01 a écrit :
Dans les prochaines semaines, sur monxoops.fr
nous produirons un tuto 'comment réaliser une surcharge de A à Z" !
Je pense que nous mettrons également à disposition un tuto "Découverte et utilisation de Bootstrap".


Au top ! J'ai hâte de lire ça.

Posté le : 10/04/2020 08:27
Partager Twitter Partagez cette article sur GG+
Re: Modifier l'apparence de mon site
Aspirant
Inscrit: 06/04/2020 00:34
De Rhône
Messages: 23
La mise à jour d'un module est plutôt simple. Il suffit de remplacer les fichiers dans le dossier du module puis de mettre à jour en cliquant sur l'icône depuis l'administration dans Modules->Système->Modules. C'est simple et rapide.

Posté le : 20/04/2020 20:31
Partager Twitter Partagez cette article sur GG+
Re: Modifier l'apparence de mon site
Aspirant
Inscrit: 06/04/2020 00:34
De Rhône
Messages: 23
Pour ne pas polluer le sujet de Sylvie, je continue ici les questions qui me concernent


J'ai donc crée un fichier surchargetheme.css qui est appelé par mon theme.tpl

J'arrive à modifier mon thème mais je sais pas agir sur la barre de navigation.

Actuellement mon fichier nav-menu.tpl ressemble à ça :

<!-- A grey horizontal navbar that becomes vertical on small screens -->
<
nav class="navbar navbar-expand-sm bg-light justify-content-center">

  <!-- 
Links -->
  <
ul class="navbar-nav">
    <
li class="nav-item">
      <
class="nav-link" href="../newbb">Forum</a>
    </
li>
    <
li class="nav-item">
      <
class="nav-link" href="../yogurt">Social</a>
    </
li>
    <
li class="nav-item">
      <
class="nav-link" href="../pm">Messages privés</a>
    </
li>
  </
ul>

</
nav>


et mon fichier surchargetheme.css à ça :

body {
  
color#FFA500;
  
background-color#272b30;
}

li {
    list-
stylenone;
}

Alors j'ai bien les points de list-style qui ont disparu comme prévu mais le fond de ma navbar est toujours bleu classique. J'avais réussi à modifier la couleur en touchant à bootstrap.min.css mais vu que ce n'est pas conseillé, je ne vois pas comment faire.

J'ai essayé d'appeler surchargetheme.css depuis nav-menu.tpl mais ça n'a pas marché.

Je suis un peu perdu.

Posté le : 21/04/2020 18:55
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant
(1) 2 3 4 5 »



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.

Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

37 Personne(s) en ligne (29 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 37 | Plus ...