Icône réseaux sociaux sous mes articles

Icône réseaux sociaux sous mes articles [Réglé]

Swan Membre non connecté

Booster Mortier

Le 16/02/2017 à 12h16

Bonjour,

1/ Petit soucis tout de même après test même si les codes sont bons, le placement lui ne n'est pas, puisque les div les place les un au dessus des autres. j'ai testé

Donc pour y palier : intégré de cette façon, c'est plus propre sans rien ajouter de plus au css :

Caché:

reste Petit hic tout de même sur les hover : pas de couleur d'icones, donc transparente

2/ L'intégration reste évasive :
Citation:

ajouter à l'endroit où on veut voir le bouton

Non... pas possible car celui qui n'y connait rien en codage ne saura pas. Et il viendra demander de manière récurrente : "mais ou ?". Donc autant être précis dès le départ.

- A quel ligne .. sous quel fermeture de balise ??

Comme dis dans ma réponse précèdent :

Swan:

4/ Il te reste juste a éditer les fichiers tpl que tu as déplacé plus haut et juste de placer cette partie de code dans le tpl sous la fermeture du <div class="content">...</div>

Cela ne relève pas du tout prêt comme tu dis, mais d'une meilleur compréhension du tutoriel ou de ta mise à jour. Et c'est aussi se mettre à la portée des débutants , tant prôné par la présentation de Pbt. ce ne sont pas tous des pros.

Donc c'est énervant à la force de se répéter et de ne pas être compris, moi inclus

Swan.

swan_signature

Swan Membre non connecté

Booster Mortier

Le 16/02/2017 à 13h29

#157097

Pour Aurélien Reffay :

1/ Module articles

Dns votre thème vous devez "créer/ou avoir" un dossier "modules" qui "contient/contiendra" le dossier "articles", dans lequel vous copierez le fichiers suivant "ArticlesDisplayArticlesController.tpl" qui se trouves lui dans le dossier "articles/templates" à la racine de votre PBt, que vous modifierez par la suite :

Comme ceci :

Code HTML :

<section id="module-articles"> 
    <header> 
        <h1> 
            <a href="{U_SYNDICATION}" title="${LangLoader::get_message('syndication', 'common')}"><i class="fa fa-syndication"></i></a> 
            {@articles}# IF NOT C_ROOT_CATEGORY # - {CATEGORY_NAME}# ENDIF # # IF IS_ADMIN #<a href="{U_EDIT_CATEGORY}" title="${LangLoader::get_message('edit', 'common')}"><i class="fa fa-edit smaller"></i></a># ENDIF # 
        </h1> 
    </header> 
    <div class="content"> 
        # INCLUDE NOT_VISIBLE_MESSAGE # 
        <article itemscope="itemscope" itemtype="http://schema.org/Article" id="article-articles-{ID}" class="article-articles"> 
            <header> 
                <h2> 
                    <span itemprop="name">{TITLE}</span> 
                    <span class="actions"> 
                        # IF C_EDIT # 
                            <a href="{U_EDIT_ARTICLE}" title="${LangLoader::get_message('edit', 'common')}"><i class="fa fa-edit"></i></a> 
                        # ENDIF # 
                        # IF C_DELETE # 
                            <a href="{U_DELETE_ARTICLE}" title="${LangLoader::get_message('delete', 'common')}" data-confirmation="delete-element"><i class="fa fa-delete"></i></a> 
                        # ENDIF # 
                            <a href="{U_PRINT_ARTICLE}" title="${LangLoader::get_message('printable_version', 'main')}" target="blank"><i class="fa fa-print"></i></a> 
                    </span> 
                </h2> 
 
                <div class="more"> 
                    # IF C_AUTHOR_DISPLAYED # 
                    <i class="fa fa-user" title="${LangLoader::get_message('author', 'common')}"></i> 
                    # IF C_AUTHOR_EXIST #<a itemprop="author" href="{U_AUTHOR}" class="{USER_LEVEL_CLASS}" # IF C_USER_GROUP_COLOR # style="color:{USER_GROUP_COLOR}"# ENDIF #> {PSEUDO} </a># ELSE #{PSEUDO}# ENDIF #|  
                    # ENDIF # 
                    <i class="fa fa-calendar" title="${LangLoader::get_message('date', 'date-common')}"></i> <time datetime="# IF NOT C_DIFFERED #{DATE_ISO8601}# ELSE #{PUBLISHING_START_DATE_ISO8601}# ENDIF #" itemprop="datePublished"># IF NOT C_DIFFERED #{DATE}# ELSE #{PUBLISHING_START_DATE}# ENDIF #</time> | 
                     <i class="fa fa-eye" title="{NUMBER_VIEW} {@articles.sort_field.views}"></i> <span title="{NUMBER_VIEW} {@articles.sort_field.views}">{NUMBER_VIEW}</span> 
                    # IF C_COMMENTS_ENABLED # 
                         | <i class="fa fa-comment" title="${LangLoader::get_message('comments', 'comments-common')}"></i><a itemprop="discussionUrl" class="small" href="{U_COMMENTS}"> {L_COMMENTS}</a> 
                    # ENDIF # 
                     | <i class="fa fa-folder" title="${LangLoader::get_message('category', 'categories-common')}"></i> <a itemprop="about" class="small" href="{U_CATEGORY}">{CATEGORY_NAME}</a> 
                    # IF C_KEYWORDS # 
                     | <i title="${LangLoader::get_message('form.keywords', 'common')}" class="fa fa-tags"></i> 
                        # START keywords # 
                            <a itemprop="keywords" href="{keywords.URL}">{keywords.NAME}</a># IF keywords.C_SEPARATOR #, # ENDIF # 
                        # END keywords # 
                    # ENDIF # 
                </div> 
 
                <meta itemprop="url" content="{U_ARTICLE}"> 
                <meta itemprop="description" content="${escape(DESCRIPTION)}"> 
                <meta itemprop="datePublished" content="# IF NOT C_DIFFERED #{DATE_ISO8601}# ELSE #{PUBLISHING_START_DATE_ISO8601}# ENDIF #"> 
                <meta itemprop="discussionUrl" content="{U_COMMENTS}"> 
                # IF C_HAS_PICTURE #<meta itemprop="thumbnailUrl" content="{PICTURE}"># ENDIF # 
                <meta itemprop="interactionCount" content="{NUMBER_COMMENTS} UserComments"> 
            </header> 
            <div class="content"> 
                # IF C_PAGINATION # 
                    # INCLUDE FORM # 
                    <div class="spacer"></div> 
                # ENDIF # 
                # IF PAGE_NAME # 
                    <h2 class="title page_name">{PAGE_NAME}</h2> 
                # ENDIF # 
                    <div itemprop="text">{CONTENTS}</div> 
 
                [line] 
 
                # IF C_PAGINATION # 
                    <div class="pages-pagination right"> 
                        # IF C_NEXT_PAGE # 
                        [url={U_NEXT_PAGE}]{L_NEXT_TITLE} <i class="fa fa-arrow-right"></i>[/url] 
                        # ELSE # 
 
                        # ENDIF # 
                    </div> 
                    <div class="pages-pagination center"># INCLUDE PAGINATION_ARTICLES #</div> 
                    <div class="pages-pagination"> 
                        # IF C_PREVIOUS_PAGE # 
                        [url={U_PREVIOUS_PAGE}]<i class="fa fa-arrow-left"></i> {L_PREVIOUS_TITLE}[/url] 
                        # ENDIF # 
                    </div> 
                # ENDIF # 
                <div class="spacer"></div> 
            </div> 
            <!-- Placement des codes : FB , twitter et G+ : Début -->
            <div id="share" class="center">
                <hr />
                <span class"utils-icon-share-fb">
                <a href="javascript:void(0);" onclick="Javascript:window.open('https://facebook.com/sharer/sharer.php?u='+document.URL,'_blank','top=50,left=50,width=626,height=436,scrollbars=no');" title="Partager la news">
                <i class="fa fa-facebook-square fa-2x"></i>
                </a>
                </span>
 
                <span class ="utils-icon-share-twitter">
                <a href="javascript:void(0);" onclick="Javascript:window.open('https://twitter.com/intent/tweet?text=Petit%20partage%20%3A&url='+document.URL,'_blank','top=50,left=50,width=626,height=436,scrollbars=no');" title="Partager la news">
                <i class="fa fa-twitter-square fa-2x"></i>
                </a>
                </span> 
 
                <span class="utils-icon-share-google-plus">
                <a href="javascript:void(0);" onclick="Javascript:window.open('https://plus.google.com/share?url='+document.URL,'_blank','top=50,left=50,width=626,height=436,scrollbars=no');" title="Partager la news">
                <i class="fa fa-google-plus-square fa-2x"></i>
                </a>
                </span>
                <hr />
            </div>
            <!-- Placement des codes : FB , twitter et G+ : Fin-->            
            <aside> 
                # IF C_SOURCES # 
                <div id="articles-sources-container"> 
                    <span>${LangLoader::get_message('form.sources', 'common')}</span> : 
                    # START sources # 
                    <a itemprop="isBasedOnUrl" href="{sources.URL}" class="small">{sources.NAME}</a># IF sources.C_SEPARATOR #, # ENDIF # 
                    # END sources # 
                </div> 
                # ENDIF # 
                # IF C_DATE_UPDATED # 
                <div><i>${LangLoader::get_message('form.date.update', 'common')} : <time datetime="{DATE_UPDATED_ISO8601}" itemprop="datePublished">{DATE_UPDATED}</time></i></div> 
                # ENDIF # 
                <div class="spacer"></div> 
                # IF C_NOTATION_ENABLED # 
                <div class="left smaller"> 
                    {KERNEL_NOTATION} 
                </div> 
                # ENDIF # 
                <div class="spacer"></div> 
                # IF C_COMMENTS_ENABLED # 
                    # INCLUDE COMMENTS # 
                # ENDIF # 
            </aside> 
            <footer></footer> 
        </article> 
    </div> 
    <footer></footer> 
</section>

ensuite enregistrer et fermer.

1/ Module news

Dns votre thème vous devez "créer/ou avoir" un dossier "modules" qui "contient/contiendra" le dossier "news", dans lequel vous copierez le fichiers suivant "NewsDisplayNewsController.tpl" qui se trouves lui dans le dossier "news/templates" à la racine de votre PBt, que vous modifierez par la suite :

Comme ceci :

Code HTML :

<section id="module-news">
    <header>
        <h1>
            <a href="{U_SYNDICATION}" title="${LangLoader::get_message('syndication', 'common')}"><i class="fa fa-syndication"></i></a>
            {@news}# IF NOT C_ROOT_CATEGORY # - {CATEGORY_NAME}# ENDIF # # IF IS_ADMIN #<a href="{U_EDIT_CATEGORY}" title="${LangLoader::get_message('edit', 'common')}"><i class="fa fa-edit smaller"></i></a># ENDIF #
        </h1>
    </header>
    <div class="content">
        # IF NOT C_VISIBLE #
            # INCLUDE NOT_VISIBLE_MESSAGE #
        # ENDIF #
        <article itemscope="itemscope" itemtype="http://schema.org/CreativeWork" id="article-news-{ID}" class="article-news">
            <header>
                <h2>
                    <span itemprop="name">{NAME}</span>
                    <span class="actions">
                        # IF C_EDIT #
                            <a href="{U_EDIT}" title="${LangLoader::get_message('edit', 'common')}"><i class="fa fa-edit"></i></a>
                        # ENDIF #
                        # IF C_DELETE #
                            <a href="{U_DELETE}" title="${LangLoader::get_message('delete', 'common')}" data-confirmation="delete-element"><i class="fa fa-delete"></i></a>
                        # ENDIF #
                    </span>
                </h2>
 
                <div class="more">
                    # IF C_AUTHOR_DISPLAYED #
                        ${LangLoader::get_message('by', 'common')}
                        # IF C_AUTHOR_EXIST #<a itemprop="author" rel="author" class="small {USER_LEVEL_CLASS}" href="{U_AUTHOR_PROFILE}" # IF C_USER_GROUP_COLOR # style="color:{USER_GROUP_COLOR}" # ENDIF #>{PSEUDO}</a># ELSE #{PSEUDO}# ENDIF #,
                    # ENDIF #
                    ${TextHelper::lowercase_first(LangLoader::get_message('the', 'common'))} <time datetime="# IF NOT C_DIFFERED #{DATE_ISO8601}# ELSE #{DIFFERED_START_DATE_ISO8601}# ENDIF #" itemprop="datePublished"># IF NOT C_DIFFERED #{DATE}# ELSE #{DIFFERED_START_DATE}# ENDIF #</time>
                    ${TextHelper::lowercase_first(LangLoader::get_message('in', 'common'))} <a itemprop="about" href="{U_CATEGORY}">{CATEGORY_NAME}</a>
                    # IF C_COMMENTS_ENABLED #- # IF C_COMMENTS # {NUMBER_COMMENTS} # ENDIF # {L_COMMENTS}# ENDIF #
                </div>
 
                <meta itemprop="url" content="{U_LINK}">
                <meta itemprop="description" content="${escape(DESCRIPTION)}" />
                # IF C_COMMENTS_ENABLED #
                <meta itemprop="discussionUrl" content="{U_COMMENTS}">
                <meta itemprop="interactionCount" content="{NUMBER_COMMENTS} UserComments">
                # ENDIF #
 
            </header>
            <div class="content">
                # IF C_PICTURE #<img itemprop="thumbnailUrl" src="{U_PICTURE}" alt="{NAME}" title="{NAME}" class="right" /># ENDIF #
 
                <div itemprop="text">{CONTENTS}</div>
            </div>
            <br /><br /><hr /><br />
            <!-- Placement des codes : FB , twitter et G+ : Début -->
            <div id="share" class="center">
                <span class"utils-icon-share-fb">
                <a href="javascript:void(0);" onclick="Javascript:window.open('https://facebook.com/sharer/sharer.php?u='+document.URL,'_blank','top=50,left=50,width=626,height=436,scrollbars=no');" title="Partager la news">
                <i class="fa fa-facebook-square fa-2x"></i>
                </a>
                </span>
 
                <span class ="utils-icon-share-twitter">
                <a href="javascript:void(0);" onclick="Javascript:window.open('https://twitter.com/intent/tweet?text=Petit%20partage%20%3A&url='+document.URL,'_blank','top=50,left=50,width=626,height=436,scrollbars=no');" title="Partager la news">
                <i class="fa fa-twitter-square fa-2x"></i>
                </a>
                </span> 
 
                <span class="utils-icon-share-google-plus">
                <a href="javascript:void(0);" onclick="Javascript:window.open('https://plus.google.com/share?url='+document.URL,'_blank','top=50,left=50,width=626,height=436,scrollbars=no');" title="Partager la news">
                <i class="fa fa-google-plus-square fa-2x"></i>
                </a>
                </span>
            </div>
            <!-- Placement des codes : FB , twitter et G+ : Fin-->   
            <aside>
                # IF C_SOURCES #
                <div id="news-sources-container">
                    <span class="news-sources-title"><i class="fa fa-map-signs"></i> ${LangLoader::get_message('form.sources', 'common')}</span> :
                    # START sources #
                    <a itemprop="isBasedOnUrl" href="{sources.URL}" class="small news-sources-item">{sources.NAME}</a># IF sources.C_SEPARATOR #, # ENDIF #
                    # END sources #
                </div>
                # ENDIF #
 
                # IF C_KEYWORDS #
                <div id="news-tags-container">
                    <span class="news-tags-title"><i class="fa fa-tags"></i> ${LangLoader::get_message('form.keywords', 'common')}</span> :
                        # START keywords #
                            <a itemprop="keywords" rel="tag" href="{keywords.URL}" class="news-tags-item">{keywords.NAME}</a># IF keywords.C_SEPARATOR #, # ENDIF #
                        # END keywords #
                </div>
                # ENDIF #
 
                # IF C_SUGGESTED_NEWS #
                    <div id="news-suggested-container">
                        <span class="news-suggested-title"><i class="fa fa-lightbulb-o"></i> ${LangLoader::get_message('suggestions', 'common')} :</span>
                        <ul>
                            # START suggested #
                            <li><a href="{suggested.URL}" class="news-suggested-item">{suggested.NAME}</a></li>
                            # END suggested #
                        </ul>
                    </div>
                # ENDIF #
 
                <hr class="news-separator">
 
                # IF C_NEWS_NAVIGATION_LINKS #
                <div class="navigation-link">
                    # IF C_PREVIOUS_NEWS #
                    <span class="navigation-link-previous">
                        <a href="{U_PREVIOUS_NEWS}"><i class="fa fa-arrow-circle-left"></i>{PREVIOUS_NEWS}</a>
                    </span>
                    # ENDIF #
                    # IF C_NEXT_NEWS #
                    <span class="navigation-link-next">
                        <a href="{U_NEXT_NEWS}">{NEXT_NEWS}<i class="fa fa-arrow-circle-right"></i></a>
                    </span>
                    # ENDIF #
                    <div class="spacer"></div>
                </div>
                # ENDIF #
 
                # INCLUDE COMMENTS #
            </aside>
            <footer></footer>
        </article>
    </div>
    <footer></footer>
</section>

Solution tout en un

Ensuite vous avez aussi la possibilité de le placer directement dans un menu de contenu "l'administration/contenu/Ajout menu de contenu", comme ceci :

Code TEXT :

[html]            <div id="share" class="center">
                <span class"utils-icon-share-fb">
                <a href="javascript:void(0);" onclick="Javascript:window.open('https://facebook.com/sharer/sharer.php?u='+document.URL,'_blank','top=50,left=50,width=626,height=436,scrollbars=no');" title="Partager la news">
                <i class="fa fa-facebook-square fa-2x"></i>
                </a>
                </span>
 
                <span class ="utils-icon-share-twitter">
                <a href="javascript:void(0);" onclick="Javascript:window.open('https://twitter.com/intent/tweet?text=Petit%20partage%20%3A&url='+document.URL,'_blank','top=50,left=50,width=626,height=436,scrollbars=no');" title="Partager la news">
                <i class="fa fa-twitter-square fa-2x"></i>
                </a>
                </span> 
 
                <span class="utils-icon-share-google-plus">
                <a href="javascript:void(0);" onclick="Javascript:window.open('https://plus.google.com/share?url='+document.URL,'_blank','top=50,left=50,width=626,height=436,scrollbars=no');" title="Partager la news">
                <i class="fa fa-google-plus-square fa-2x"></i>
                </a>
                </span>
            </div>[/html]

Note: Pour un placement optimal dans "Gestion des menus", choisissez le Menu gauche ou Menu droit en haut ou alors en "Menu central haut"

Pour les plus férus, libre à vous de le placer/coder à votre manière

Swan.

swan_signature

Répondre

Sujet verrouillé, vous ne pouvez pas poster de message

Aurélien Reffay Membre non connecté

Swan Membre non connecté

janus57 Membre non connecté

Swan Membre non connecté

janus57 Membre non connecté

Swan Membre non connecté

1/ Module articles

1/ Module news

Solution tout en un

Aurélien Reffay Membre non connecté

olivierb Membre non connecté

Swan Membre non connecté

Aurélien Reffay Membre non connecté