[Résolu] Gabarit - ancre - Menu

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: #1.10.3
#~ Url du site :
#~ Hébergeur / Soft : ovh
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.10.3
#~ Installed Modules:
#~ CMSMailer: 2.0.2
#~ FileManager: 1.2.0
#~ MenuManager: 1.7.7
#~ ModuleManager: 1.5.3
#~ News: 2.12.3
#~ Printing: 1.1.2
#~ Search: 1.7
#~ ThemeManager: 1.1.4
#~ TinyMCE: 2.9.6
#~ FormBuilder: 0.7.2
#~ Captcha: 0.4.5
#~ CGExtensions: 1.28.2
#~ NMS: 2.4.2
#~ DownCnt: 2.2.0
#~ Slide: 1.0
#~ CMSPrinting: 1.0
#~ MicroTiny: 1.1.1
#~ SEOTools2: 1.0.9
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template: false
#~ output_compression: false
#~ max_upload_size: 64000000
#~ default_upload_permission: 664
#~ url_rewriting: internal
#~ page_extension: .html
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.2.17
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: On
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 64M
#~ upload_max_filesize: 64M
#~ session_save_path: /tmp (1777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ Server Information:
#~ Server Api: cgi
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.0.90
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour, en lisant le topic : http://localhost/cmsms_france/forum_mybb...p?tid=1305 j'ai fait une petite image de ce que je voudrais faire à partir d'un gabarit genre Minimal template. -->http://www.hostingpics.net/viewer.php?id...abarit.jpg

je sais comment faire en html/css/et javascript, mais je voudrais que le client puisse administré le contenu.

Des idées Wink ?!

Merci
Répondre
#1
Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: #1.10.3
#~ Url du site :
#~ Hébergeur / Soft : ovh
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.10.3
#~ Installed Modules:
#~ CMSMailer: 2.0.2
#~ FileManager: 1.2.0
#~ MenuManager: 1.7.7
#~ ModuleManager: 1.5.3
#~ News: 2.12.3
#~ Printing: 1.1.2
#~ Search: 1.7
#~ ThemeManager: 1.1.4
#~ TinyMCE: 2.9.6
#~ FormBuilder: 0.7.2
#~ Captcha: 0.4.5
#~ CGExtensions: 1.28.2
#~ NMS: 2.4.2
#~ DownCnt: 2.2.0
#~ Slide: 1.0
#~ CMSPrinting: 1.0
#~ MicroTiny: 1.1.1
#~ SEOTools2: 1.0.9
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template: false
#~ output_compression: false
#~ max_upload_size: 64000000
#~ default_upload_permission: 664
#~ url_rewriting: internal
#~ page_extension: .html
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.2.17
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: On
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 64M
#~ upload_max_filesize: 64M
#~ session_save_path: /tmp (1777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ Server Information:
#~ Server Api: cgi
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.0.90
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour, en lisant le topic : http://localhost/cmsms_france/forum_mybb...p?tid=1305 j'ai fait une petite image de ce que je voudrais faire à partir d'un gabarit genre Minimal template. -->http://www.hostingpics.net/viewer.php?id...abarit.jpg

je sais comment faire en html/css/et javascript, mais je voudrais que le client puisse administré le contenu.

Des idées Wink ?!

Merci
Répondre
#2
C'est gentil d'avoir pris du temps pour créer ton image, mais je n'ai rien compris. Tu fais 4 pages et c'est bon, non ? Quel est le rapport avec l'ancre ?
Répondre
#2
C'est gentil d'avoir pris du temps pour créer ton image, mais je n'ai rien compris. Tu fais 4 pages et c'est bon, non ? Quel est le rapport avec l'ancre ?
Répondre
#3
slt,
je voudrais afficher le contenu des pages dans les zones d'ancre un comme ici : http://www.webinventif.fr/public/data/df...croll.html
Répondre
#3
slt,
je voudrais afficher le contenu des pages dans les zones d'ancre un comme ici : http://www.webinventif.fr/public/data/df...croll.html
Répondre
#4
avec TinyMCE tu fais une ancre et un lien

exemple
- ancre
ancre1 dans ta page XXX

- un lien
index.php?page=XXX#ancre1 ou {cms_selflink href='XXX'}#ancre1
J-C Etiemble Tutoriels v 2.2.x
Répondre
#4
avec TinyMCE tu fais une ancre et un lien

exemple
- ancre
ancre1 dans ta page XXX

- un lien
index.php?page=XXX#ancre1 ou {cms_selflink href='XXX'}#ancre1
J-C Etiemble Tutoriels v 2.2.x
Répondre
#5
Si tu sais le faire en html, je ne vois pas pourquoi tu te poses des questions :

Dans ton gabarit, tu ajoutes juste avant {content} :
Code :
[== HTML ==]
<div class="header_link">
<a name="top" href="#footer">GO TO FOOTER</a>
<a href="#middle">GO TO MIDDLE</a>

Juste après tu ajoutes :
Code :
[== HTML ==]
</div>
<div class="middle_link">
<a name="middle" href="#top">GO TO TOP</a>
<a href="#footer">GO TO FOOTER</a>
{content block="middle" label="middle"}
</div>
<div class="footer_link">
<a name="footer" href="#top">GO TO HEADER</a>
<a href="#middle">GO TO MIDDLE</a>
{content block="footer" label="footer"}
</div>
Répondre
#5
Si tu sais le faire en html, je ne vois pas pourquoi tu te poses des questions :

Dans ton gabarit, tu ajoutes juste avant {content} :
Code :
[== HTML ==]
<div class="header_link">
<a name="top" href="#footer">GO TO FOOTER</a>
<a href="#middle">GO TO MIDDLE</a>

Juste après tu ajoutes :
Code :
[== HTML ==]
</div>
<div class="middle_link">
<a name="middle" href="#top">GO TO TOP</a>
<a href="#footer">GO TO FOOTER</a>
{content block="middle" label="middle"}
</div>
<div class="footer_link">
<a name="footer" href="#top">GO TO HEADER</a>
<a href="#middle">GO TO MIDDLE</a>
{content block="footer" label="footer"}
</div>
Répondre
#6
ok ...
mais comment administré le contenu des blocs dans l'admin?
et si l'éditeur rajoute une page sera-t-elle prise en compte dans le menu?
j'ai trouvé une demo de script jQuery encore plus précise sur le fonctionnement que je souhaite..
http://www.webdesignweb.fr/sources/scrollto/index.html
Répondre
#6
ok ...
mais comment administré le contenu des blocs dans l'admin?
et si l'éditeur rajoute une page sera-t-elle prise en compte dans le menu?
j'ai trouvé une demo de script jQuery encore plus précise sur le fonctionnement que je souhaite..
http://www.webdesignweb.fr/sources/scrollto/index.html
Répondre
#7
{content block="middle" label="middle"} va afficher un bloc de contenu supplémentaire appelé "middle" dans la page d'administration, en dessous du contenu normal (voir la doc sur : extensions->balises->content).
Si tu désires que les ancres soient dans le menu de navigation comme dans ton dernier lien, tu crées des pages, non pas "contenu, mais "lien page interne".

Ex : tu crées une page avec tes 3 ancres qui s'appelle "test", c'est une page de contenu attachée au gabarit montré plus haut.
Tu crées une page "top" qui est un lien de redirection vers l'ancre top. Tu mets dans les paramètres additionnels : #top et dans "page de destination : test.
Et ainsi de suite pour tes 2 autres pages d'ancre (middle et footer).
Répondre
#7
{content block="middle" label="middle"} va afficher un bloc de contenu supplémentaire appelé "middle" dans la page d'administration, en dessous du contenu normal (voir la doc sur : extensions->balises->content).
Si tu désires que les ancres soient dans le menu de navigation comme dans ton dernier lien, tu crées des pages, non pas "contenu, mais "lien page interne".

Ex : tu crées une page avec tes 3 ancres qui s'appelle "test", c'est une page de contenu attachée au gabarit montré plus haut.
Tu crées une page "top" qui est un lien de redirection vers l'ancre top. Tu mets dans les paramètres additionnels : #top et dans "page de destination : test.
Et ainsi de suite pour tes 2 autres pages d'ancre (middle et footer).
Répondre
#8
Mais ça n'ira pas pour ton nouveau Jquery...
Il va falloir travailler autrement, laisses-moi 2 minutes de réflexion.
Répondre
#8
Mais ça n'ira pas pour ton nouveau Jquery...
Il va falloir travailler autrement, laisses-moi 2 minutes de réflexion.
Répondre
#9
ok pas soucis je cherche aussi Wink
Répondre
#9
ok pas soucis je cherche aussi Wink
Répondre
#10
Il faut que tu saches exactement ce que tu veux. Y-aura-t-il d'autre pages, car dans le lien donné plus haut, il n'y en a qu'une...
Répondre
#10
Il faut que tu saches exactement ce que tu veux. Y-aura-t-il d'autre pages, car dans le lien donné plus haut, il n'y en a qu'une...
Répondre
#11
Effectivement il y a juste une page genre l'index.php
et le menu seras en fixed
Répondre
#11
Effectivement il y a juste une page genre l'index.php
et le menu seras en fixed
Répondre
#12
Et tu veux utiliser le JQuery montré au-dessus ? Si oui, il ne faut pas utiliser cette méthode, tu le vois bien dans le code source.
Et tu ne sais pas combien de blocs devront être affiché ? Ce sera au gré du client, je suppose.
Répondre
#12
Et tu veux utiliser le JQuery montré au-dessus ? Si oui, il ne faut pas utiliser cette méthode, tu le vois bien dans le code source.
Et tu ne sais pas combien de blocs devront être affiché ? Ce sera au gré du client, je suppose.
Répondre
#13
Tout à fait c'est le client qui gère.
le jQuery est juste un exemple..
Répondre
#13
Tout à fait c'est le client qui gère.
le jQuery est juste un exemple..
Répondre
#14
Citation :le jQuery est juste un exemple..
Non, ta réponse ne convient pas, tu es trop vague.
Répondre
#14
Citation :le jQuery est juste un exemple..
Non, ta réponse ne convient pas, tu es trop vague.
Répondre
#15
Y-a-t-il un nombre maximum de blocs ? Ce qui serait logique, sinon ta navigation va déborder.
Répondre
#15
Y-a-t-il un nombre maximum de blocs ? Ce qui serait logique, sinon ta navigation va déborder.
Répondre
#16
Pardon le lien jquery en demo que j'ai mis dans le post plus au (http://www.webdesignweb.fr/sources/scrollto/index.html)
Répondre
#16
Pardon le lien jquery en demo que j'ai mis dans le post plus au (http://www.webdesignweb.fr/sources/scrollto/index.html)
Répondre
#17
Citation :et le menu seras en fixed
Faut savoir, si c'est "fixed", il y a un nombre de blocs définis...
Tu vois bien qu'il n'y a que des divs dans le html pour ce JQuery, pas d'ancre.
Répondre
#17
Citation :et le menu seras en fixed
Faut savoir, si c'est "fixed", il y a un nombre de blocs définis...
Tu vois bien qu'il n'y a que des divs dans le html pour ce JQuery, pas d'ancre.
Répondre
#18
si si j'ai bien vu qu'il n’y avait que des divs c'est pour ça que je voulais passer par des ancres.
l'éditeur ne connais pas le html , ça risque d'être compliqué pour lui.
Répondre
#18
si si j'ai bien vu qu'il n’y avait que des divs c'est pour ça que je voulais passer par des ancres.
l'éditeur ne connais pas le html , ça risque d'être compliqué pour lui.
Répondre
#19
Mais non, c'est à toi de gérer tout ça, ça n'a rien à voir avec l'éditeur.
Ce que tu souhaites est tout à fait possible, mais tu dois définir une limite, sinon ta navigation va dépasser. Comme tu le vois sur la démo, il n'y a que 6 "blocs".
Comment faire pour adapter exactement la démo :
Code :
<div id="header">
    
    <div id="menu">
        <ul>
            <li><a href="#top">Accueil</a></li>
            <li><a href="#img1">Image 1</a></li>
            <li><a href="#img2">Image 2</a></li>
            <li><a href="#img3">Image 3</a></li>
            <li><a href="#img4">Image 4</a></li>
            <li><a href="#img5">Image 5</a></li>
            <li><a href="#img6">Image 6</a></li>
        </ul>
    </div><!-- #menu -->
    
</div><!-- #header -->

<div id="container">
    
    <div id="top"></div>
    
    <div id="img1"></div>
    <div class="image-ombre"><img src="img/1.jpg" alt="image 1" title="image 1" /></div>
    
    <div id="img2"></div>
    <div class="image-ombre"><img src="img/2.jpg" alt="image 2" title="image 2" /></div>
    
    <div id="img3"></div>
    <div class="image-ombre"><img src="img/3.jpg" alt="image 3" title="image 3" /></div>
    
    <div id="img4"></div>    
    <div class="image-ombre"><img src="img/4.jpg" alt="image 4" title="image 4" /></div>
    
    <div id="img5"></div>
    <div class="image-ombre"><img src="img/5.jpg" alt="image 5" title="image 5" /></div>
    
    <div id="img6"></div>
    <div class="image-ombre"><img src="img/6.jpg" alt="image 6" title="image 6" /></div>

    <div id="espace-bas"></div>
    
</div><!-- #container -->
On va commencer par créer les 6 blocs, je t'expliquerai après comment faire une navigation dynamique.
Je te donne ce code dans 2 minutes.
Répondre
#19
Mais non, c'est à toi de gérer tout ça, ça n'a rien à voir avec l'éditeur.
Ce que tu souhaites est tout à fait possible, mais tu dois définir une limite, sinon ta navigation va dépasser. Comme tu le vois sur la démo, il n'y a que 6 "blocs".
Comment faire pour adapter exactement la démo :
Code :
<div id="header">
    
    <div id="menu">
        <ul>
            <li><a href="#top">Accueil</a></li>
            <li><a href="#img1">Image 1</a></li>
            <li><a href="#img2">Image 2</a></li>
            <li><a href="#img3">Image 3</a></li>
            <li><a href="#img4">Image 4</a></li>
            <li><a href="#img5">Image 5</a></li>
            <li><a href="#img6">Image 6</a></li>
        </ul>
    </div><!-- #menu -->
    
</div><!-- #header -->

<div id="container">
    
    <div id="top"></div>
    
    <div id="img1"></div>
    <div class="image-ombre"><img src="img/1.jpg" alt="image 1" title="image 1" /></div>
    
    <div id="img2"></div>
    <div class="image-ombre"><img src="img/2.jpg" alt="image 2" title="image 2" /></div>
    
    <div id="img3"></div>
    <div class="image-ombre"><img src="img/3.jpg" alt="image 3" title="image 3" /></div>
    
    <div id="img4"></div>    
    <div class="image-ombre"><img src="img/4.jpg" alt="image 4" title="image 4" /></div>
    
    <div id="img5"></div>
    <div class="image-ombre"><img src="img/5.jpg" alt="image 5" title="image 5" /></div>
    
    <div id="img6"></div>
    <div class="image-ombre"><img src="img/6.jpg" alt="image 6" title="image 6" /></div>

    <div id="espace-bas"></div>
    
</div><!-- #container -->
On va commencer par créer les 6 blocs, je t'expliquerai après comment faire une navigation dynamique.
Je te donne ce code dans 2 minutes.
Répondre
#20
Edit : voir post suivant.
Répondre
#20
Edit : voir post suivant.
Répondre
#21
Voilà le code complet avec affichage ou non de la navigation et des blocs suivant leur remplissage :
Code :
<body>
{capture name=bloc1}{content block="bloc1" label="bloc1"}{/capture}
{capture name=bloc2}{content block="bloc2" label="bloc2"}{/capture}
{capture name=bloc3}{content block="bloc3" label="bloc3"}{/capture}
{capture name=bloc4}{content block="bloc4" label="bloc4"}{/capture}
{capture name=bloc5}{content block="bloc5" label="bloc5"}{/capture}
<div id="header">
    <div id="menu">
        <ul>
            <li><a href="#top">Accueil</a></li>
            <li><a href="#img1">Image 1</a></li>
            {if $smarty.capture.bloc1 ne ""}
            <li><a href="#img2">Image 2</a></li>
            {/if}
            {if $smarty.capture.bloc2 ne ""}
            <li><a href="#img3">Image 3</a></li>
            {/if}
            {if $smarty.capture.bloc3 ne ""}
            <li><a href="#img4">Image 4</a></li>
            {/if}
            {if $smarty.capture.bloc4 ne ""}
            <li><a href="#img5">Image 5</a></li>
            {/if}
            {if $smarty.capture.bloc5 ne ""}
            <li><a href="#img6">Image 6</a></li>
            {/if}
        </ul>
    </div><!-- #menu -->
</div><!-- #header -->
<div id="container">
    <div id="top"></div>
    <div id="img1"></div>
    <div class="image-ombre">{content}</div>
    {if $smarty.capture.bloc1 ne ""}
    <div id="img2"></div>
    <div class="image-ombre">{$smarty.capture.bloc1}</div>
    {/if}
    {if $smarty.capture.bloc2 ne ""}
    <div id="img3"></div>
    <div class="image-ombre">{$smarty.capture.bloc2}</div>
    {/if}
    {if $smarty.capture.bloc3 ne ""}
    <div id="img4"></div>    
    <div class="image-ombre">{$smarty.capture.bloc3}</div>
    {/if}
    {if $smarty.capture.bloc4 ne ""}
    <div id="img5"></div>
    <div class="image-ombre">{$smarty.capture.bloc4}</div>
    {/if}
    {if $smarty.capture.bloc5 ne ""}
    <div id="img6"></div>
    <div class="image-ombre">{$smarty.capture.bloc5}</div>
    {/if}
    <div id="espace-bas"></div>
</div><!-- #container -->
</body>
Répondre
#21
Voilà le code complet avec affichage ou non de la navigation et des blocs suivant leur remplissage :
Code :
<body>
{capture name=bloc1}{content block="bloc1" label="bloc1"}{/capture}
{capture name=bloc2}{content block="bloc2" label="bloc2"}{/capture}
{capture name=bloc3}{content block="bloc3" label="bloc3"}{/capture}
{capture name=bloc4}{content block="bloc4" label="bloc4"}{/capture}
{capture name=bloc5}{content block="bloc5" label="bloc5"}{/capture}
<div id="header">
    <div id="menu">
        <ul>
            <li><a href="#top">Accueil</a></li>
            <li><a href="#img1">Image 1</a></li>
            {if $smarty.capture.bloc1 ne ""}
            <li><a href="#img2">Image 2</a></li>
            {/if}
            {if $smarty.capture.bloc2 ne ""}
            <li><a href="#img3">Image 3</a></li>
            {/if}
            {if $smarty.capture.bloc3 ne ""}
            <li><a href="#img4">Image 4</a></li>
            {/if}
            {if $smarty.capture.bloc4 ne ""}
            <li><a href="#img5">Image 5</a></li>
            {/if}
            {if $smarty.capture.bloc5 ne ""}
            <li><a href="#img6">Image 6</a></li>
            {/if}
        </ul>
    </div><!-- #menu -->
</div><!-- #header -->
<div id="container">
    <div id="top"></div>
    <div id="img1"></div>
    <div class="image-ombre">{content}</div>
    {if $smarty.capture.bloc1 ne ""}
    <div id="img2"></div>
    <div class="image-ombre">{$smarty.capture.bloc1}</div>
    {/if}
    {if $smarty.capture.bloc2 ne ""}
    <div id="img3"></div>
    <div class="image-ombre">{$smarty.capture.bloc2}</div>
    {/if}
    {if $smarty.capture.bloc3 ne ""}
    <div id="img4"></div>    
    <div class="image-ombre">{$smarty.capture.bloc3}</div>
    {/if}
    {if $smarty.capture.bloc4 ne ""}
    <div id="img5"></div>
    <div class="image-ombre">{$smarty.capture.bloc4}</div>
    {/if}
    {if $smarty.capture.bloc5 ne ""}
    <div id="img6"></div>
    <div class="image-ombre">{$smarty.capture.bloc5}</div>
    {/if}
    <div id="espace-bas"></div>
</div><!-- #container -->
</body>
Répondre


Atteindre :


Utilisateur(s) parcourant ce sujet : 2 visiteur(s)