Adaption von Commerce Kickstart Theme nach Adaptive Commerce Theme
Eingetragen von drruebe (271)am 09.01.2016 - 10:50 Uhr in
Moin Moin,
seit Tagen arbeite ich daran den schönen Style vom Commerce Kickstart Theme in das Adaptive Commerce Theme zu adaptieren.
Was mir einfach nicht gelingen will, ist das wie beim CK-Theme, beim unterschreiten einer bestimmten Bildschirmbreite, die "Next", "Current" und "Previus" Buttons unterhalb der Slideshow ausgeblendet werden.
Kann da jemand helfen?
Anbei ein paar Bilder und Costum css:
/*Warenkorb*/
.views-table.cols-5 {
width: 100%;
}
.field-type-image {
float: left;
}
/*Produktkollektion*/
.view-collection-products .view-header .view-collection-products .view-content .item-list h3 a, .view-collection-products .view-header .collection-terms .view-content .item-list h3 a, .view-collection-taxonomy-term .view-header .view-collection-products .view-content .item-list h3 a, .view-collection-taxonomy-term .view-header .collection-terms .view-content .item-list h3 a {
background-color: #cecece;
border: 1px solid #cecece;
border-radius: 8px;
color: #000000;
float: right;
font-family: "Open Sans",sans-serif;
font-size: 16px;
font-weight: 400;
margin-right: 10px;
padding: 5px 15px;
text-decoration: none;
}
table {
border-spacing: 0;
margin: 0 0 10px;
padding: 0;
width: 230px;
}
tbody tr:nth-child(2n+1), tr.odd {
vertical-align: top;
}
.item-list ul li {
list-style: none;
margin: 0;
padding: 0;
}
/*Seitenhintergrund*/
#header-wrapper {
background-color: rgba(0, 0, 0, 0);
background-image: none;
}
#header-wrapper {
border-bottom: none;
}
div#page {
background: #01010b url("http://tecmawi.de/bilder/bg-hamburg.png") no-repeat fixed center bottom / 100% auto;
}
#content-wrapper {
border-bottom: none;
border-top: none;
}
/*Ankerbuttons Produktuebersicht*/
.view-collection-products .view-header .view-collection-products .view-content .item-list h3 a, .view-collection-products .view-header .collection-terms .view-content .item-list h3 a, .view-collection-taxonomy-term .view-header .view-collection-products .view-content .item-list h3 a, .view-collection-taxonomy-term .view-header .collection-terms .view-content .item-list h3 a {
background-color: #cecece;
border: 1px solid #cecece;
border-radius: 8px;
color: #000000;
font-family: "Open Sans",sans-serif;
font-size: 16px;
font-weight: 400;
padding: 5px 15px;
text-decoration: none;
}
.view-collection-products .view-header .view-collection-products, .view-collection-products .view-header .collection-terms, .view-collection-taxonomy-term .view-header .view-collection-products, .view-collection-taxonomy-term .view-header .collection-terms {
float: none;
margin: 5px;
padding-top: 0;
}
/*Warenkorbfeld, Kasse*/
.block-shopping-cart-block, .block-shopping-cart-block .block-inner, .block-shopping-cart-block .content {
float: right;
height: 100%;
max-width: 260px;
white-space: nowrap;
}
.block-shopping-cart-block,
.block-shopping-cart-block .block-inner,
.block-shopping-cart-block .content {
height: 100%;
white-space: nowrap; }
.block-shopping-cart-block {
margin: 0 auto;
margin-left: 50px;
/* LTR */ }
.block-shopping-cart-block .content {
background-color: #ffffff;
background-image: url("/bilder/picto_cart.png");
background-position: 1% 48%;
border-radius: 8px;
/* LTR */
background-repeat: no-repeat;
float: right;
/* LTR */
margin-left: -60px;
/* LTR */
padding-left: 50px;
/* LTR */ }
.block-shopping-cart-block .content .view-shopping-cart .view-content,
.block-shopping-cart-block .content .view-shopping-cart .view-footer,
.block-shopping-cart-block .content .view-shopping-cart .view-empty {
display: inline;
float: left;
/* LTR */
font-family: "Open Sans", sans-serif;
font-weight: 400; }
.block-shopping-cart-block .content .view-shopping-cart .view-content ul,
.block-shopping-cart-block .content .view-shopping-cart .view-content li {
margin: 0;
padding: 0; }
.block-shopping-cart-block .content .view-shopping-cart .view-footer {
display: block;
float: none; }
.block-shopping-cart-block .content .view-shopping-cart .view-empty,
.block-shopping-cart-block .content .view-shopping-cart .line-item-quantity {
margin: 0;
vertical-align: middle; }
.block-shopping-cart-block .content .view-shopping-cart .view-empty p {
float: left;
/* LTR */
line-height: 30px; }
.block-shopping-cart-block .content .view-shopping-cart .line-item-summary {
display: inline;
float: left;
/* LTR */
height: 34px;
line-height: 30px;
margin: 0; }
.block-shopping-cart-block .content .view-shopping-cart .line-item-summary .line-item-quantity {
color: #888888;
text-decoration: none; }
.block-shopping-cart-block .content .view-shopping-cart .line-item-summary .line-item-total {
color: #111111;
float: left;
/* LTR */
font-family: "Open Sans", sans-serif;
font-weight: 300;
height: 100%;
line-height: 30px;
padding: 0 12px 0 6px; }
.block-shopping-cart-block .content .view-shopping-cart .line-item-summary .line-item-total-label {
display: none; }
.block-shopping-cart-block .content .view-shopping-cart .line-item-summary ul.links {
background-color: #2698f2;
clear: none;
color: white;
display: block;
float: left;
border-radius: 8px;
/* LTR */
font-family: "Open Sans", sans-serif;
font-weight: 300;
height: 100%;
line-height: 30px;
margin: 0 0 0 5px;
/* LTR */
padding: 0 10px; }
.block-shopping-cart-block .content .view-shopping-cart .line-item-summary ul.links li {
margin: 0;
padding: 0; }
.block-shopping-cart-block .content .view-shopping-cart .line-item-summary ul.links li a {
color: white;
font-weight: 700; }
.block-shopping-cart-block .content .view-shopping-cart .line-item-summary ul.links li a:hover {
text-decoration: underline; }
/*Slideshow*/
#block-views-demo-content-slideshow-block-1 {
/* HP blocks: Slideshow */
position: relative; }
#block-views-demo-content-slideshow-block-1 .bx-wrapper {
position: relative; }
#block-views-demo-content-slideshow-block-1 .bx-wrapper .bx-window,
#block-views-demo-content-slideshow-block-1 .bx-wrapper .bx-viewport {
overflow: visible !important; }
#block-views-demo-content-slideshow-block-1 .bx-wrapper ul.event-slider li {
margin: 0;
margin-left: -15px;
overflow: hidden; }
#block-views-demo-content-slideshow-block-1 .bx-wrapper ul.event-slider li a {
display: block; }
#block-views-demo-content-slideshow-block-1 .views-field-nothing,
#block-views-demo-content-slideshow-block-1 .bx-prev,
#block-views-demo-content-slideshow-block-1 .bx-next {
display: none;
text-indent: -9999px; }
.front .node {
border: 1px solid #E0E3E6;
display: block;
margin: 15px 15px;
padding: 10px 15px;
width: auto; }
.front .node h2 {
font-size: 18px;
font-weight: 400;
margin-bottom: 0;
text-transform: uppercase; }
.front .node h2 a {
color: #656565;
text-decoration: none; }
.front .node .submitted {
color: #A0A0A0;
font-size: 12px;
margin: 5px 0;
text-transform: uppercase; }
.front .node .submitted a {
color: #A0A0A0; }
.front .node .content .field-name-field-image {
margin: 10px; }
.front .node .content .field-type-taxonomy-term-reference .field-items .field-item {
padding-right: 3px; }
.front .node .content .field-name-field-tags {
border-top: 1px dotted #777777;
font-size: 11px;
margin-bottom: 5px;
padding: 3px; }
.front .node .content .field-name-field-blog-category {
font-size: 11px;
padding: 3px; }
.front .node .node-links {
font-size: 12px; }
.front .node .node-links a {
font-size: 12px;
font-weight: 600;
text-decoration: none; }
.front .node .node-links ul {
margin: 0; }
.front .node .node-links ul li {
margin: 0; }
#block-views-demo-content-slideshow-block-1 {
/* HP blocks: Slideshow */ }
#block-views-demo-content-slideshow-block-1 .bx-wrapper {
padding-bottom: 100px; }
#block-views-demo-content-slideshow-block-1 .bx-wrapper ul.event-slider li {
overflow: visible; }
#block-views-demo-content-slideshow-block-1 .views-field-nothing {
background: #888;
border: 1px solid #CCC;
color: #ffffff;
padding-bottom: 4px;
position: absolute;
bottom: -100px;
left: 33.2%; }
#block-views-demo-content-slideshow-block-1 .bx-prev,
#block-views-demo-content-slideshow-block-1 .bx-next {
color: #555555;
background: #EEE;
border: 1px solid #CCC;
text-decoration: none;
display: block;
margin-top: 15px;
padding-bottom: 5px;
width: 33.3%; }
#block-views-demo-content-slideshow-block-1 .bx-prev:hover,
#block-views-demo-content-slideshow-block-1 .bx-next:hover {
background: #FFF; }
#block-views-demo-content-slideshow-block-1 .views-field-nothing,
#block-views-demo-content-slideshow-block-1 .bx-prev,
#block-views-demo-content-slideshow-block-1 .bx-next {
display: block;
height: 80px;
text-align: center;
text-indent: 0;
width: 33.3%;
margin-right: 0%; }
#block-views-demo-content-slideshow-block-1 .views-field-nothing span.field-content,
#block-views-demo-content-slideshow-block-1 .bx-prev span.field-content,
#block-views-demo-content-slideshow-block-1 .bx-next span.field-content {
display: block;
font-family: "Open Sans", sans-serif;
font-weight: 300;
font-size: 21px;
height: 80px;
line-height: 28px;
padding: 10px 25px 0;
overflow: hidden; }
#block-views-demo-content-slideshow-block-1 .views-field-nothing span.field-content em,
#block-views-demo-content-slideshow-block-1 .bx-prev span.field-content em,
#block-views-demo-content-slideshow-block-1 .bx-next span.field-content em {
font-family: "Open Sans", sans-serif;
font-size: 32px;
font-style: normal;
font-weight: 900;
text-decoration: none;
text-transform: uppercase; }
#block-views-demo-content-slideshow-block-1 .bx-prev {
margin-left: 0;
/* LTR */
float: left;
/* LTR */
position: absolute;
bottom: 0;
left: 0;
/* LTR */ }
#block-views-demo-content-slideshow-block-1 .bx-next {
margin-right: 0;
/* LTR */
float: right;
/* LTR */
position: absolute;
bottom: 0;
right: 0;
/* LTR */ }
#block-views-demo-content-slideshow-block-1 .event-slider .views-field-nothing,
#block-views-demo-content-slideshow-block-1 .view-display-id-block_1 .bx-prev,
#block-views-demo-content-slideshow-block-1 .view-display-id-block_1 .bx-next {
border: 0;
width: 33.3%; }
#block-views-demo-content-slideshow-block-1 .event-slider .views-field-nothing {
background: transparent url("/bilder/bg_title_slideshow_current.png") no-repeat scroll center top;
/* LTR */ }
#block-views-demo-content-slideshow-block-1 .bx-prev,
#block-views-demo-content-slideshow-block-1 .bx-prev:hover {
background: transparent url("/bilder/bg_title_slideshow_previous.png") left top no-repeat;
/* LTR */ }
#block-views-demo-content-slideshow-block-1 .bx-next,
#block-views-demo-content-slideshow-block-1 .bx-next:hover {
background: transparent url("/bilder/bg_title_slideshow_next.png") right top no-repeat;
/* LTR */
margin-right: 0px;
/* LTR */ }
/*Produktseite*/
.grid-14 {
float: right;
height: auto;
margin-left: auto;
margin-right: auto;
width: 300px;
max-width: 100%;
}
.grid-8 {
margin-left: 10px;
}
label {
display: block;
float: left;
font-weight: bold;
width: 140px;| Anhang | Größe |
|---|---|
| Volle Breite.png | 543.63 KB |
| 320px breit.png | 214.92 KB |
- Anmelden oder Registrieren um Kommentare zu schreiben
im globalc.css werden
am 09.01.2016 - 14:31 Uhr
im globalc.css werden ausgeblendet. und durch das omega theme werden je nach bildschirmgröße verschiedene css eingebunden. das mußt du beim adaptive sozusagen umgekehrt machen. im global.styles.css die pfeile anzeigen und im responsive css der verschiedenen bildschirmgrößen ausblenden
C.A.W. Webdesign
Danke schonmal für die
am 09.01.2016 - 15:05 Uhr
Danke schonmal für die Antwort.
Ich möchte nur ungern, so wie ich es sonst immer getan habe, an den Corefiles bohren.
Das ist ja das schöne beim AT. Da gibt es direkt unter den Designeinstellungen die Möglichkeit Costum CSS einzubinden, womit dann auch die volle Updatefähigkeit erhalten bleibt.
Gibt es da ne Möglichkeit irgendwo im Abschnitt "Slideshow" eine Windowsize-Anweisung einzubauen?
all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)Wie müsste diese aussehen?
Gruß Frank
Die Ruhe sei den Menschen heilig, nur bekloppte haben's eilig.