Kundenservice Slider im Bootstrap Template

  • Sodele, sagen wir Schwaben gerne einmal hier die Lösung:

    1. den folgenden Code in die Index.html aus dem Templateordner, direkt nach dem (</header>) eintragen:

    <div class="kundenservice"><a href="shop_content.php?coID=7"><img src="{$tpl_path}img/kundenservice.png" alt="Kundenservice bei deinerdomain.de">
    <strong>
    E-Mail<br>
    <span class="big">info@deinedomain.de</span><br><br>
    Telefon<br>
    <span class="big">Mo-Fr 9-18 Uhr<br>
    Tel &nbsp;+49 111222 325654 </span>
    </strong></a>
    </div>


    2. In die stylesheet.css den folgenden Code eintragen:

    .kundenservice {
    -webkit-transition-property: opacity, left;
    -webkit-transition-duration: 700ms;
    transition-property: opacity, left;
    transition-duration: 700ms;
    }

    .kundenservice a strong { opacity:0;
    -webkit-transition-property: opacity, left, background;
    -webkit-transition-duration: 300ms;
    transition-property: opacity, left, background;
    transition-duration: 300ms;
    left: -250px;
    }

    .kundenservice {position:fixed; margin-top:6px; height:200px; z-index:99999999; width:35px; opacity: 0.3;}
    .kundenservice a strong { display:block; padding:8px 10px;position:fixed; margin-top:-190px; }
    .kundenservice:hover {position:fixed; opacity:1; width:270px; background:#000 url(/templates/v2next-boot-flat-left/img/bg_kundenservice.png) -35px 1px no-repeat; box-shadow: 0 2px 6px #666; }
    .kundenservice:hover a strong { position:fixed; white-space:nowrap; opacity:1; margin-top:-170px; left: 45px; color:#fff; }


    das warst schon ... evtl kann man noch bei mobiler Ansicht das rausnehmen, dazu dann in der entsprechenden Größe eintragen:

    .kundenservice {visibility: hidden;}

    3. Die entsprechenden Files vom alten Template in den img ordner des Templates hochladen (ich hänge diese mal an, falls das unerwünscht ist, bitte bescheidgeben) ein mal: bg_kundenservice.png[ATTACH=CONFIG]708[/ATTACH]und kundenservice.png [ATTACH=CONFIG]709[/ATTACH]

    das wars, viel Spass und Erfolg.

    Ich hoffe ich konnte evtl. jemanden helfen der sowas sucht.

    Grüße

  • das warst schon ... evtl kann man noch bei mobiler Ansicht das rausnehmen, dazu dann in der entsprechenden Größe eintragen:

    .kundenservice {visibility: hidden;}


    Sodele? Jetzetle!
    Danke erst mal für diesen Tipp! Hat im Grunde auch so geklappt, aber wie und wo nehme ich das aus der mobilen Ansicht raus? Funktioniert im Windows Phone 8.1 leider nicht.
    Habe das nicht mehr ganz aktuelle future-two-c2 im Einsatz. Shopversion 2.5.9

  • den style.css media format< etwas was do eingetragen ist in dieser teil dan

    .kundenservice {visibility: hidden;}

    ob es die gibt beim den future-two-c2 media format< etwas weis ich nicht

  • Hi jotest! :)
    in der stylesheet.css steht nichts mit media.

    In der css_browser.css stehen das:
    @media only screen and (min-width: 600px), 750, 800 usw bis 1550px


    so gehts los:
    @media screen and (max-width: 600px) {

    footer .box {width:100%;}
    .product_img {width:39%; text-align: center; float:left;}
    .product_img img {height: auto; max-width: 100%;}
    .product_name, .price, .product_shipping_link, .buttons_liste, .on_stock, .product_description {width:55%; float:right;}


    #nav_search {padding: 14px 0 0 12px;}
    .flexnav li {width: 100%;}
    .flexnav li > ul {top: 50px;left: 0;display: block; }
    #logo { width: 100%;}
    .about_me {width:96%; float:left;}
    .dates {width:96%; float:left;}
    .wkhead, .wk5 {display:none;}
    .wk1 {width:2%; margin-right:2%;}
    .wk3 {width:94%; margin-bottom:10px; border-bottom:1px solid #c2c2c2;}
    .wk4, .wk5, .wk6, .wk7 {width:33%;}
    .ws_order_details, .order_details {padding:3%;}

    .wl1 {width: 50%;}
    .wl2 {width: 50%;}
    .wl3 {width: 33%;}
    .wl4 {width: 33%;}
    .wl5 {width: 33%;}
    .wl1, .wl2 {margin-bottom:10px; border-bottom:1px solid #c2c2c2; height:110px;}

    .chkt_bild {width:100% !important;}
    .chkt_beschr {width:100% !important; border-bottom:1px dotted #c2c2c2; margin-bottom:10px; padding-bottom:10px;}
    .chkt_qty {width:20% !important;}
    .chkt_sprice, .chkt_sum {width:40% !important;}

    .catnav {width: 100%; float:left; }


    #trustedshops {height:90px;}
    #nav_search, #wk_button { width:100%; float: left;}

    .customer_name {width:100%; text-align:left;}

    .social_icon {float: left; margin: 0 3px 0 0; text-align:center;}
    .nav_search {width:99%; text-align: center;}
    .megabild {width:100%;}
    .megabild img {max-width:100%; height: auto;}
    .navigator {width: 50%;}
    .pn {float:left;}
    .product_info_left {overflow: hidden; width: 90%; float:left;}
    .product_info_right {overflow: hidden; width: 100%; float:left; text-align:right; margin-top: 20px; margin-left:0;}
    .w126 {text-align: left;}
    .bodywrapper {width: 92%;}
    .box_bestellungen {width: 50%; padding-bottom:10px;}
    .product_box {width:98%; border-left:0px; padding-bottom:10px;}
    .text_box {width:94.5%;}
    .tinynav { display: block }
    .product_box_weitere_artikel {width: 47%;}
    .address_pad {width:98%;}
    .cat_box { width:98%; border-bottom:1px solid #ccc;}
    .button2 {width:95%;}
    .textblock {width:100%; }
    .contentseiten h1 {margin-bottom: 10px;margin-top: 60px;}
    div.checkout_shipping_modules, .checkout_shipping_address{width:100%;float:left;clear:left;}
    div.checkout_payment_modules, .checkout_payment_address {width:100%;float:right;clear:right;}
    .social_share_privacy_area .twitter, .social_share_privacy_area .gplus,.social_share_privacy_area .facebook {width: 50% !important;}


    dl dt {float:left}

    }


    @media only screen and (min-width: 600px) {

    footer .box {width:100%;}
    .product_img {width:39%; text-align: center; float:left;}
    .product_img img {height: auto; max-width: 100%;}
    .product_name, .price, .product_shipping_link, .buttons_liste, .on_stock, .product_description {width:94%; float:left;}

    usw.............