Jump to content

Ajouter Barre d'icône scoiales sur la droite (apparition quand on Scroll)


Recommended Posts

Bonjour à tous,

 

Je vais essayer d'être clair... :blink:  sur mon problème.

Voilà, je souhaite faire apparaître des icônes (fb, twitter etc) sur une barre à droite qui s'afficherait lorsqu'on descend dans la page.

 

Exemple : https://www.tissus-price.com/

 

Dans mon thème j'ai déjà cette barre, mais avec uniquement le panier et la loupe. Je souhaiterai donc faire apparaître les icones réseaux sociaux en plus.

Mon thème : Buyshop

 

Auriez vous une idée sur la façon de procéder ? :( ou est-ce un module ?

J'avais pensé à rentrer quelque chose comme ça dans le custom.css :

 

<div style="display: block;" id="right_toolbar" class="hidden-phone hidden-tablet">
    <div class="social_icons">
    </div>

<ul class="sb circle gray text">

      <li><a href="#" class="twitter">Twitter</a></li>

    </ul>

 

Mais ça ne marche pas !

 

Et voici ce que j'ai dans le global.css :

 

/*right toolbar*/

#right_toolbar {
    position: fixed;
    right:0px;
    bottom: 15%;
    z-index: 2050;
}
.dark #right_toolbar {
    position: fixed;
    right:0px;
    bottom: 15%;
    z-index: 2603;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 #right_toolbar {
 right:15px;
}
}
#right_toolbar .shoppingcart {
    float: none;
    margin: 15px 0 7px 20px;
    padding:0;
    position:relative;
    display:inline-block;
}
#right_toolbar .shoppingcart:hover {
    padding:0 0 0 20px;
    margin: 15px 0 7px 0;
}
#right_toolbar .shoppingcart .fadelink {
    position:relative;
    float:left;
}
#right_toolbar .shopping_cart_mini {
    position:absolute;
    bottom:-96px;
    margin-right:40px;
    right:0;
    left:auto;
}
#right_toolbar .shoppingcart .badge {
    right: -5px;
}
#right_toolbar .search_wrapper {
    clear:both;
    position:relative;
    height:40px;
}
#right_toolbar .form-search {
    position: static;
}
#right_toolbar .form-search button {
    position:relative;
    z-index:100;
    margin:-1px 0 0 18px;
}
#right_toolbar .form-search input.search-query {
    position:absolute;
    right:20px;
    top:0;
    z-index:99;
    padding:2px 10px;
    width:0;
    height:26px;
    line-height:24px;
}
 

j'avais pensé rajouter un truc du style :

#right_toolbar .social_icons a {
    color: #1e74ba;
    font-size: 28px;
    line-height: 40px;

 

Mais rien ne fonctionne !!!!! :angry::wacko::blink:

 

Merci de votre aide ! ;-)

Link to comment
Share on other sites

Bonjour,

 

A mon avis, ce n'est pas le css qu'il faut modifier, mais trouver quel tpl gère l'affichage panier + loupe que vous mentionnez et y ajouter l'appel des icones réseaux sociaux...

 

Virginie

  • Like 1
Link to comment
Share on other sites

Voilà ce que j'ai pu trouver....

Me semble que c'est le bon script :

 

</script>
<div id="right_toolbar" class="hidden-phone hidden-tablet">
    {if $smalllogo}
        <div><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$smalllogo}" alt=""
                                                                                      data-retina="true"></a></div>{/if}

    <div class="shoppingcart" id="cart_block">
        <div class="fadelink"><span class="pull-right"> <a href="{$link->getPageLink($order_process, true)}"
                                                           title="{l s='View my shopping cart' mod='tonycartslider'}"
                                                           rel="nofollow" class="btn"><i
                            class="icon-basket icon-2x"></i></a> </span><span
                    class="ajax_cart_quantity badge badge-inverse"
                    {if $cart_qties <= 0}style="display:none;"{/if}>{$cart_qties}</span>

            <div class="shopping_cart_mini hidden-phone hidden-tablet" id="right-minicart-wrapper">
                <div class="inner-wrapper"></div>
            </div>

        </div>
    </div>

    <div class="search_wrapper">
        <form class="form-search" id="form-search-right" method="get" action="{$link->getPageLink('search', true)}">
            <input type="hidden" name="controller" value="search"/>
            <input type="hidden" name="orderby" value="position"/>
            <input type="hidden" name="orderway" value="desc"/>
            {literal}
            <button type="submit" class="btn" onClick="document.getElementById('form-search-right').submit()"><i
                        class="icon-search-2 icon-large"></i></button>
            <input type="text" class="input-medium search-query"
                   value="{/literal}{l s='search' mod='tonycartslider'}{literal}"
                   onblur="if (this.value == '') {this.value = '{/literal}{l s='search' mod='tonycartslider'}{literal}';}"
                   onfocus="if(this.value == '{/literal}{l s='search' mod='tonycartslider'}{literal}') {this.value = '';}"
                   name="search_query">{/literal}
        </form>
    </div>
    <div id="back-top"><a href="#top"><i class="icon-up-2"></i></a></div>
</div>
 

Mais je n'ai pas réussi à appeler les icones... :blink: là ça me dépasse un peu....plus l'habitude de coder avec ces CMS...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...