Hallo Zusammen,
in einem alten Template gab es mal einen Slider auf der linken Seite (Kundenservice) wie kannich das gleiche in einem Bootstrap Template realisieren?
dieser slider: http://plussupport.commerce-seo.de/showthread.php?t=1236
thx
Hallo Zusammen,
in einem alten Template gab es mal einen Slider auf der linken Seite (Kundenservice) wie kannich das gleiche in einem Bootstrap Template realisieren?
dieser slider: http://plussupport.commerce-seo.de/showthread.php?t=1236
thx
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 +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
super, danke!
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.............