Jump to content
granpopo

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 ! ;-)

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Merci de votre réponse. Oui je pensais la même chose que vous...

 

Je vais regarder ça...

Share this post


Link to post
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...

Share this post


Link to post
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...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More