Tabs module

[Pandore]

Bonjour à tous!

Je voulais mettre en place sur mon site un système de TABS.
Le soucis c'est que je trouve que des modules payant.
Vous avez une solution pour une gratuite sans logo ou pub?
Je souhaite une navigation fluide et efficace pour ma clientèle.

Cordialement, Chris.

[FredVig]

Si voulez-vous parler des boites à onglet, seul du code ajouté peut le créer.
CSS,html, javascript, jQuery, vous avez le choix des propositions sur le net.
Vous pourrez l'insérer soir en design personnalisé soit en module html. Trouvez une démonstration qui vous semble claire et récente, et lancez-vous.
Le fait que vous soyez sur un site jimdo ne change pas grand chose.

[FredVig]

En cherchant rapidement, je partirai sur ce genre de demo, tout en CSS pour une meilleure compatibilité. demo tab nav css
Mais je pense que certains designs de Jimdo permettent déjà cela. Donc… sans doute je ne comprend pas bien ce que vous voulez réaliser. Avez-vous un exemple ?

[Pandore]

Merci FredVig, je souhaitais personaliser mon tableau avec couleur et ombres.

POWr le fait, mais c'est un abonnement mensuel assez coûteux et donc déshonorable.

L'idée est de mettre en page le site avec ce genre de tableau pour n'avoir qu'une page fixe

[Pandore]

Update 1:
Alors je reviens vers toi car j'ai trouver tes tabs tres interessante.
Là où mes capacités s'arrêtent c'est que je comprend pas où je dois rentrer le CSS? ou encore le fichier qu'il propose en téléchargement.
Si je met tout sur HTLM/widget en module j'obtiens ça:


Update 2: 3h plus tard!
J'y suis presque! J'aimerais bien mettre l'animation de la demo 5, et surtout enlever ce fond bleu ciel qui tape l'incruste dans le code du body.
Avez vous une idée pour directement intégré un module article tout prêt dans une des tabs?


Cordialement

[FredVig]

Je suppose qu'il suffit de copier le code source de "l'article tout prêt", et de le coller à la place du texte. Mais je fais de la devinette… je ne connais pas le modèle. à la fin de son article l'auteur dit qu'il a ajouté des css d'animation depuis une autre source. je suppose qu'il faudra les ajouter dans le modifier le Head.
Vous semblez bien vous en tirer.
N'oubliez pas de créditer l'auteur du script dans votre code.

[FredVig]

Le css va dans le modifier le head (lisez les tutos de ce forum sur le sujet si nécessaire) l'html dans un module html.
Le dossier en téléchargement comprend un assemblage pour fonctionner en autonomie sur un ordinateur, afin d'étudier et de modifier à loisir, voire de placer en ligne une version modifiée.

[Pandore]

Merci beaucoup FredVig,
Bon il est 5h31, je pense que c'est tard pour trouver le sommeil sachant que je dois présenter la boutique demain soir.
En une nuit je dit pas que j'ai appris mais coder mais en tout cas j'ai pris une boite d'aspirine pour m'y retrouver dans toute ces lignes.
Oui, je récompenserai : onextrapixel avec un bon coup de pub.

Bon, alors on est là:


Le bouton ajouter au panier ne fonctionne pas, apparemment le lien ne se crée pas.
!!! Attention si on ne peux pas mettre ce lien sur le TABS je ne renouvelle pas mon forfait business!!!  

J'ai aussi des petits bugs d'affichages, et des soucis de font mais bon je vais encore farfouiller sur ce fabuleux forum (où d'ailleurs il n'y a que FredVig pour aider les braves gens).
D'ailleurs si vous êtes vers la Rochelle je vous offres un cidre avec la galette des rois ce weekend!    

Update 1:

1. Le bouton ne fonctionne toujours pas après recherche
2. Le slider photo ne fonctionne pas

Update 2:

Il est 10h23, ma cafetière transpire.
J'ai refais tout le site de fond en comble, et je me retrouve avec les soucis de l'update 1, et les fameux liens sur les tabs qui accrochent pas.

Et pour finir je cherche désespérément des tutos pour avoir une seule page claire et net, voici mon css:

Code:


<style type="text/css">
/*<![CDATA[*/
.j-cart .j-cart-icon {display:none !important;}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
    #emotion-header-title {top:0 left:50}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
    .container {margin:0px 0px 0px; !important;padding: 0px; 0px!important; }
    .content {padding: 50px;}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
.jtpl-container {padding: 0px 15px;}
    .footer {display:none !important;}
    #cc-m-12050084227 {padding: 0px 0px;}
/*]]>*/
</style>


<style type="text/css">
/*<![CDATA[*/
    .sidebar {padding: 108px 0px 0px ;margin: 0px;}
    .breadcrumb {padding: 5px 0px 0px ;margin: 100px 0px 0px;}
    /*]]>*/
</style>

C'est le gros bordel car chaque pages est différentes, et on vois même plus le titre...... Mon site c'est Pandoradvanced.

En priant vos lumières. Bonne journée!

[FredVig]

Vous m'auriez dit qu'il vous fallait ça pour dans 24h, je vous aurais répondu : stop !
Gardez ce qui fonctionne, et mettez à jour une autre fois.
Il faut compter plusieurs jours pour tester et mettre au point ce genre d'adaptation.

Bon, alors, voyons le chantier

[Pandore]

J'ai une sainte horreur de ne pas comprendre les choses!
Mais bon je suis déterminé, la preuve j'ai osé le changement de design!
Je suis presque prêt pour le custom body

[FredVig]

Oui, je récompenserai : onextrapixel avec un bon coup de pub.

Moins que de la Pub, c'est simplement le respect des droits de paternité qui est en jeu : maintenir le lien vers l'auteur, dans le cas où une personne mal attentionnée veut revendre son travail. L'autre enjeu est de permettre le lien vers ceux qui veulent  aussi utiliser le code, et ne connaitraient pas l'auteur. également pour ceux qui veulent faire progresser le code et veulent le contacter etc.

Le bouton ajouter au panier ne fonctionne pas, apparemment le lien ne se crée pas.

Il est possible que cette partie ne puisse pas s'insérer dans un module html.
Les fonctions de paiements sont sécurisées de manière particulière, et je suppose qu'il faut que le module soit placé à un endroit précis de la structure Jimdo.

J'ai aussi des petits bugs d'affichages, et des soucis de font mais bon je vais encore farfouiller sur ce fabuleux forum (où d'ailleurs il n'y a que FredVig pour aider les braves gens).

J'ai été énormément aidé par d'autres membres très actifs, notamment sur l'ancien forum. Beaucoup sont bien mieux renseignés que moi. Répondre au forum est un bon moyen de se former soit-même.

1. Le bouton ne fonctionne toujours pas après recherche

Je maintien qu'il faut le placer ailleurs que dans le module html.

2. Le slider photo ne fonctionne pas

Un slider Jimdo (gallerie) fait sans doute appel à une ressource codée en javascript. Du coup, est-ce que le code peut atteindre les éléments placés dans un widget à part…
Ceci-dit, ce que vous avez fait (12H30 11 janvier) semble correct et propre,je ne sais pas où se trouve le slider que vous vouliez insérer. EDIT : celui-là fonctionne :http://www.pandoradvanced.com/acceuil/jetblack-puissant/

je cherche des tutos pour avoir une seule page claire et net,

Alors, c'est une autre question… qu'entendez-vous par là ?
Si vous voulez un site en One page horizontale, Jimdo n'est pas fait pour ça. J'étudie la question depuis 3 mois, juste pour me former à un exercice de style, et je n'ai trouvé que des bribes de réponses.
J'ai l'impression que vous recherchez une navigation et un style épurés.
ça, c'est possible. Votre site comprend assez peu de pages pour limiter la navigation à 2 voir 1 seul niveau. Les pages doivent contenir juste les éléments utiles, les images parlent d'elles-même

voici mon css:

Seule remarque, il n'est pas nécessaire d'inscrire plusieurs fois les balises de déclaration de css

Code:

<style type="text/css">
/*<![CDATA[*/
vous mettez toutes les modif de code ici
/*]]>*/
</style>

Inutile de réécrire à chaque fois (dans "modifier le Head") :
<style type="text/css">
/*<![CDATA[*/
ENcore une modif
/*]]>*/
</style>


Pour le reste, le code css est accessible à partir de votre site pour le n'importe quel visiteur, il n'est donc pas utile de l'inscrire dans le forum. ça part d'une bonne intention, mais on nepeut pas en faire grand chose. il faut le consulter en dynamique avec le site en regard.

Je ne vois pas de grosse erreur dans ces modifications.
Toutefois, il ya quelque part une ligne en trop. cela doit se trouver dans vos modules html :
Regardez avec l'inspecteur de code la feuille de style 9 :

 

Code:

/*<![CDATA[*/
    Adresse de l'élement CSS
    /*]]>*/
body, html {
          height: 100%;
          margin: 0;
        (…)


"Adresse de l'élement CSS", c'est en trop et ça perturbe tout le code.

Le widget de traduction google, c'est à ne tester qu'une fois que tout le reste fonctionne : il comprend 748 lignes de code qui peuvent entrer en conflit avec une de vos adaptation. Mettez-le de côté pour l'instant.

chaque pages est différentes,

On s'y retrouve quand même…
Les pages incluant le code pour tabs sont différentes du reste, mais ça doit pouvoir s'améliorer au global.

et on vois même plus le titre

Oui, alors, il n'y a pas de titre ! Vous avez inséré un logo, mais je ne vois pas de balise de titre.
Sans doute était-elle dans l'image de fond ? Mais il n'y a en a pas non plus…
Vous pouvez désactiver temporairement un code, afin d'identifier les sources de vos problèmes.
il suffit de l'entourer des balises :
/* (ici le code à court-circuiter)  */
De cette façon, vous conserver votre écriture

[Pandore]

Merci pour tout ce travail, je reviens vers vous rapidement pour la barre de titre qui est caché derrière le HEADER avec le logo elle doit être trop haute j'arrive pas à la regler.
Normalement pour le reste on est pas mal.

Le slider je souhaitais le mettre dans le HTML Tabs mais apparemment c'est incompatible comme les ajouts dans le panier.

Cordialement

[FredVig]

Le module titre est absent il devrait se trouver avec "logo" et "navbar"



et le fond de page est vide…



Comment avez-vous inséré votre titre ?

[FredVig]

Peut-être ai-je compris…
Ce que vous voyez comme "titre du site", c'est (peut-être) le fil d'Ariane ou breadcrumb :



Celui-ci s'affiche uniquement sur les pages de sous-menu, pour rappeler l'arborescence

[Pandore]

Peut-être ai-je compris…
Ce que vous voyez comme "titre du site", c'est (peut-être)  le fil d'Ariane ou breadcrumb :



Celui-ci s'affiche uniquement sur les pages de sous-menu, pour rappeler l'arborescence

Bonsoir,

D'accord, donc il n'y a pas de titre?
Je trouve ça plutôt sympa. J'ai enfin réussie à cadrer tout le body.

Je pense pour le shop, insérer des pages en plus, avec un lien sur les tabs pour s'y rendre.

[FredVig]

Il est possible que certains design n'affichent pas de titre (à vérifier dans le comparateur de design réalisé par zekoolweb)
Le breadcrumb, sur certains design comme Malaga ne s'affiche QUE si on a un sous-menu. Cela crée une différence de design d'une page à l'autre. Pour résoudre cela, vous pouvez consulter mes propositions sur mon site à la rubrique "bugg" : fil d'ariane
Pour le Shop, pensez à bien étudier les modules disponibles. Cela n'est pas toujours bien compris : il faut faire des pages produit individuelles, à part. Les produits sont taggés : #caisse #ordinateur #trucDeOuf. Vous insérez ensuite un CATALOGUE là où vous voulez faire apparaître les produits. Les #hastag conditionnent l'affichage des produits. ça fonctionne comme le Blog, quoi…

[Solie]

Il est possible que certains design n'affichent pas de titre (à vérifier dans le comparateur de design réalisé par zekoolweb)

Tout à fait. C'est le cas de Malaga qui n'affiche le titre qu'en mode mobile (dans sa version non-responsive bien-sûr). Et à la condition d'avoir enregistré un titre auparavant avec un autre design qui le permet.

[FredVig]

Ha oui, c'est encore mieux ça ! Je ne m'en étais pas rendu compte…

[Contenu sponsorisé]