Re : Améliorations du site
Pour ceux qui n'auraient pas compris ce qu'est le breadcrumb ou fil d'arianne,
voici une capture qui montre cela.
On peut observer :
- L'icone à gauche en fonction de la rubrique,
- La couleur du cadre en harmonie avec la catégorie sélectionnée.
A vous d'essayer en changeant de rubriques (articles, tutoriel, forum, ressources)
puis en changeant de catégorie dans une rubrique (Modules, Thèmes...).
voici une capture qui montre cela.
On peut observer :
- L'icone à gauche en fonction de la rubrique,
- La couleur du cadre en harmonie avec la catégorie sélectionnée.
A vous d'essayer en changeant de rubriques (articles, tutoriel, forum, ressources)
puis en changeant de catégorie dans une rubrique (Modules, Thèmes...).
Re : imagehover
Sur Google Chrome, pas besoin de taper quoi que ce soit,
[Bouton droit] sur la page concernée puis [Afficher le code source de la page]
Pour ton soucis,
je ne sais pas si cela a une influence ou pas mais en tout cas, ton fichier généré n'est pas bon du tout.
Et tu cherches mal.
Ton problème, je te l'ai indiqué viens des déclarations CSS APRES le 1er body < ouvrant >
Or on voit
Donc si ce n'est pas dans ton theme.tpl, tu dois avoir quelque part un include d'un fichier contenant notamment ce texte.
Donc il faut commencer par mettre les balises au bon endroit.
Déclaration CSS : dans les balises < head>
Un seul < body > ouvrant pour finir tout à la fin avec une balise fermante.
Allez, au boulot,
et ça , ce n'est pas du XOOPS, c'est du PHP/HTML.
[Bouton droit] sur la page concernée puis [Afficher le code source de la page]
Pour ton soucis,
je ne sais pas si cela a une influence ou pas mais en tout cas, ton fichier généré n'est pas bon du tout.
Et tu cherches mal.
Ton problème, je te l'ai indiqué viens des déclarations CSS APRES le 1er body < ouvrant >
Or on voit
<!-- nettuts -->
<!-- traduit et adapté par outils-web.com -->
<!-- chargement des feuilles de style -->
Donc si ce n'est pas dans ton theme.tpl, tu dois avoir quelque part un include d'un fichier contenant notamment ce texte.
Donc il faut commencer par mettre les balises au bon endroit.
Déclaration CSS : dans les balises < head>
Un seul < body > ouvrant pour finir tout à la fin avec une balise fermante.
Allez, au boulot,
et ça , ce n'est pas du XOOPS, c'est du PHP/HTML.
Re : imagehover
Oula,
en regardant un peu plus en détail la source de ton fichier, je vois ceci :
Donc il y a un < body > ouvrant puis des déclarations CSS puis un nouveau < body > ouvrant...
C'est pas beau, ça...
en regardant un peu plus en détail la source de ton fichier, je vois ceci :
<body id="xmnews">
<!-- nettuts -->
<!-- traduit et adapté par outils-web.com -->
<!-- chargement des feuilles de style -->
<meta charset="UTF-8">
<!-- NORMALIZE.CSS -->
<link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/normalize.css" rel="stylesheet">
<!-- FontAwesome CSS -->
<link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/font-awesome.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/ruby-theme-10.css" rel="stylesheet">
<!-- IF YOU WANT TO USE BOOTSTRAP, BOOTSTRAP STYLES LINK POSITION MUST BE HERE BELOW -->
<link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/bootstrap.min.css" rel="stylesheet">
<!-- ruby Main -->
<link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/ruby-main.css" rel="stylesheet">
<!-- ruby Vertical -->
<link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/ruby-vertical.css" rel="stylesheet">
<!-- ruby Demo - FOR DEMO SHOWCASE ONLY! -->
<link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/ruby-demo.css" rel="stylesheet">
<!-- ruby Vertical -->
<link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/ruby-transitions.css" rel="stylesheet" id="ruby-transitions">
<!-- ruby Responsive -->
<link href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/css/ruby-responsive.css" rel="stylesheet">
<!-- font Open-Sans -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,700' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* FOR THIS DEMO ONLY, HIDE VERTICAL MENU ON MOBILE */
@media(max-width:767px){
div.ruby-wrapper.ruby-vertical {
display: none;
}
}
</style>
</head>
<body>
Donc il y a un < body > ouvrant puis des déclarations CSS puis un nouveau < body > ouvrant...
C'est pas beau, ça...
Re : imagehover
Pour le login/mdp,
Comme le forum est accessible à tous, je te conseille de le modifier et de me l'envoyer en MP sauf si ça ne te pose pas de problème que n'importe qui puisse voir ton site.
Non, pas "inspecter", voir la source.
J'avais indiqué :
Citation :
Pour la suite,
moi je vois bien la ligne
via view-source:http://lumieresdefrance.com/phpv2/mod ... ws/article.php?news_id=22
et quand je clique sur ce lien, je vois bien le contenu du fichier, donc le chemin est correct.
http://lumieresdefrance.com/phpv2/the ... er/css/imagehover.min.css
le système ouvre le fichier css.
Mais effectivement, ça ne fonctionne pas...
Je réfléchie pourquoi...
Hier soir, quand je l'ai fait, ça m'a pris moins de 3mn pour le faire et tout a fonctionné, c'est fou.
Comme le forum est accessible à tous, je te conseille de le modifier et de me l'envoyer en MP sauf si ça ne te pose pas de problème que n'importe qui puisse voir ton site.
Non, pas "inspecter", voir la source.
J'avais indiqué :
Citation :
Ensuite, affiche la source de ta page et clique sur chacun des fichiers css que tu vois dans la source de ta page.
Pour la suite,
moi je vois bien la ligne
<!-- imagehover -->
<link rel="stylesheet" href="http://lumieresdefrance.com/phpv2/themes/LDF_Bleu2/vendor/imagehover/css/imagehover.min.css">
via view-source:http://lumieresdefrance.com/phpv2/mod ... ws/article.php?news_id=22
et quand je clique sur ce lien, je vois bien le contenu du fichier, donc le chemin est correct.
http://lumieresdefrance.com/phpv2/the ... er/css/imagehover.min.css
le système ouvre le fichier css.
Mais effectivement, ça ne fonctionne pas...
Je réfléchie pourquoi...
Hier soir, quand je l'ai fait, ça m'a pris moins de 3mn pour le faire et tout a fonctionné, c'est fou.
Re : imagehover
Bon,
J'ai essayé cette belle librairie sur mon site de tests en local
et...
tout fonctionne.
Mon code :
Fichier theme.tml
Contenu d'un article xmnews :
Donc oui, tout fonctionne, tu as du faire une faute de frappe quelque part !
J'ai essayé cette belle librairie sur mon site de tests en local
et...
tout fonctionne.
Mon code :
Fichier theme.tml
<link rel="stylesheet" href="<{xoImgUrl}>vendor/imagehover/css/imagehover.min.css">
Contenu d'un article xmnews :
<figure class="imghvr-hinge-right">
<img src="http://www.lumieresdefrance.com/phpv2/acontenu/img/v_x1.jpg">
<figcaption>
texte Alain
</figcaption>
<a href="#"></a>
</figure>
Donc oui, tout fonctionne, tu as du faire une faute de frappe quelque part !
Re : imagehover
Hello,
merci pour ce nouveau sujet fort intéressant !
Je ne connaissais pas cette librairie, elle est très sympa, belle trouvaille.
Et merci aussi d'appliquer et surtout adapter la méthode que je propose dans le tuto :
Utiliser les icônes Font Awesome dans un thème XOOPS.
Bon, j'ai regardé rapidement, tout semble correcte.
Maintenant, tu viens de changer des éléments dans ton fichier theme.tpl,
tente de vider le cache de ton navigateur pour voir si cela règle le problème.
Ensuite, affiche la source de ta page et clique sur chacun des fichiers css que tu vois dans la source de ta page.
Cela te permettra de voir rapidement si ta page peut bien atteindre les fichiers attendus.
Est-ce clair, ce que je t'écris là ?
merci pour ce nouveau sujet fort intéressant !
Je ne connaissais pas cette librairie, elle est très sympa, belle trouvaille.
Et merci aussi d'appliquer et surtout adapter la méthode que je propose dans le tuto :
Utiliser les icônes Font Awesome dans un thème XOOPS.
Bon, j'ai regardé rapidement, tout semble correcte.
Maintenant, tu viens de changer des éléments dans ton fichier theme.tpl,
tente de vider le cache de ton navigateur pour voir si cela règle le problème.
Ensuite, affiche la source de ta page et clique sur chacun des fichiers css que tu vois dans la source de ta page.
Cela te permettra de voir rapidement si ta page peut bien atteindre les fichiers attendus.
Est-ce clair, ce que je t'écris là ?
Re : Améliorations du site
Hello !
Quelques améliorations sont maintenant opérationnelles sur le site :
Tutoriels
- Le sommaire (liste des pages) d'un tutoriel se trouve maintenant à gauche et le contenu à droite (sauf en mode smartphone),
- Changement d'icones pour les pages nécessitant d'être connecté (couleur et aspect)
- Dans le sommaire, ajout d'une icône à gauche du titre de la page en cours, avec coloration en fonction de la catégorie du tutoriel)
- Texte plus explicite sur page en accès réservé.
- Dans les blocks de tutoriels, on peut maintenant cliquer sur le titre du tuto pour atteindre la première page du tuto.
- Dans les blocks de tutoriels, sous le titre, nous avons mis à disposition un badge pour atteindre directement la catégorie du tutoriel et donc l'ensemble des tutos pour cette catégorie.
Breadcrumb (ou fil d'arianne)
Pour chaque section (articles, forum, tutoriels, ressources) le breadcrumb a été retouché.
Il s'agit de la barre positionner en haut de chaque section permettant de se situer dans la section et les catégories.
- Ajout de l'icône représentant la section, à gauche du nom de la section,
- Coloration de la bordure du breadcrumb en fonction de la catégorie sélectionnée (XOOPS, Modules, Thèmes...).
Réalisées
Quelques améliorations sont maintenant opérationnelles sur le site :
Tutoriels
- Le sommaire (liste des pages) d'un tutoriel se trouve maintenant à gauche et le contenu à droite (sauf en mode smartphone),
- Changement d'icones pour les pages nécessitant d'être connecté (couleur et aspect)
- Dans le sommaire, ajout d'une icône à gauche du titre de la page en cours, avec coloration en fonction de la catégorie du tutoriel)
- Texte plus explicite sur page en accès réservé.
- Dans les blocks de tutoriels, on peut maintenant cliquer sur le titre du tuto pour atteindre la première page du tuto.
- Dans les blocks de tutoriels, sous le titre, nous avons mis à disposition un badge pour atteindre directement la catégorie du tutoriel et donc l'ensemble des tutos pour cette catégorie.
Breadcrumb (ou fil d'arianne)
Pour chaque section (articles, forum, tutoriels, ressources) le breadcrumb a été retouché.
Il s'agit de la barre positionner en haut de chaque section permettant de se situer dans la section et les catégories.
- Ajout de l'icône représentant la section, à gauche du nom de la section,
- Coloration de la bordure du breadcrumb en fonction de la catégorie sélectionnée (XOOPS, Modules, Thèmes...).
Réalisées
Re : Modifier la forme des blocs dans Xmnews
Sinon,
tu peux faire une recherche dans ton template
et supprimer les mots
card
card-header
card-body
laisse sans doute
card-text
et
card-img
A voir
pour card-img, pas sur que le résultat attendu soit correct.
Ensuite, tu pourras ajouter des class "border" sur tes < div >.
tu peux faire une recherche dans ton template
et supprimer les mots
card
card-header
card-body
laisse sans doute
card-text
et
card-img
A voir
pour card-img, pas sur que le résultat attendu soit correct.
Ensuite, tu pourras ajouter des class "border" sur tes < div >.
Re : Modifier la forme des blocs dans Xmnews
Mais c'est un peu tordu.
Le template utilise le design des objets "card" que tu "casses" par des surcharges de class
Le mieux dans ce cas, serait de ne pas utiliser les objets card (et card-body...) mais de n'utiliser que des objets < div >
et pour avoir des cadres autours :
< div class="border" >
mais il faut comprendre les templates et le bt4
Le template utilise le design des objets "card" que tu "casses" par des surcharges de class
Le mieux dans ce cas, serait de ne pas utiliser les objets card (et card-body...) mais de n'utiliser que des objets < div >
et pour avoir des cadres autours :
< div class="border" >
mais il faut comprendre les templates et le bt4
xSwatch4-enabled v2
Bonsoir,
une version 2 de xSwatch4-enabled est en cours de développement afin de vous proposer :
- Le mode clair/ mode sombre,
- Une mise à jour de Bootstrap avec la toute dernière version en V4, à savoir la version 4.6.
- Quelques correctifs
- Une optimisation des fonctions grilles de Bootstrap
- Une amélioration sur le bas de page
une version 2 de xSwatch4-enabled est en cours de développement afin de vous proposer :
- Le mode clair/ mode sombre,
- Une mise à jour de Bootstrap avec la toute dernière version en V4, à savoir la version 4.6.
- Quelques correctifs
- Une optimisation des fonctions grilles de Bootstrap
- Une amélioration sur le bas de page
