Hallo Stefan und andere Interessierten,
für das Design Plural Siquando Shop 10 habe ich die Aufmacher mal etwas modifiziert.
Nach Stefans Wunsch habe ich für die Einspaltigen Aufmacher mit Bildausgabe, die Bildausgabe rechts positioniert.
Generell werden die Aufmacher mit Text und Bild, nur Text mit einem Background „weiß“ und einem Border versehen. Beim hovern wird der Background hervorgehoben.
Bei „nur Link“ also ohne Text oder und Bild, wird lediglich der Button speziell gehovert und mit einem Farbwert mit einem transition wiedergegeben.
Um dieses Beispiel nachzubauen müssen einige kleine Vorarbeiten geleistet werden.
- 1.Siquando muss zuerst geschlossen werden, da wir die config.ccml bearbeiten müssen/wollen.
- 2.Nach dem schließen die config.ccml öffnen und den Part mit:
<cc:file obj="teaser.caption" src="sqr\ccml\teaser_caption.ccml" common="1">
<cc:file obj=" teaser.captionabstract" src="sqr\ccml\teaser_captionabstract.ccml" common="1">
<cc:file obj="teaser.captionabstractpicture" src="sqr\ccml\teaser_captionabstractpicture.ccml" common="1">
Suchen und diesen
<cc:file obj="teaser.caption" src="teaser_caption.ccml" common="0">
<cc:file obj="teaser.captionabstract" src="teaser_captionabstract.ccml" common="0">
<cc:file obj="teaser.captionabstractpicture" src="teaser_captionabstractpicture.ccml" common="0">
- 4.Diese drei .ccml’s aus den Ordner: C:\Program Files (x86)\SIQUANDO\Web 10\common\sqr\ccml kopieren (NICHT VERSCHIEBEN, sondern KOPIEREN) und in den Designordner Plural kopieren.
- 5.Hier rein kopieren: C:\Program Files (x86)\SIQUANDO\Web 10\designs\Plural
Diese drei .ccml’s werden benötigt um einige Änderungen vorzunehmen. Dazu später mehr!
Damit ist die Vorarbeit fertig und wir können anfangen die style_content.css und die drei .ccml’s zubearbeiten.
In der style.content.css entfernen wir alles nach <cc:*> Teaser </cc:*> ab Zeile 802 und ersetzen das Entfernte mit:
.srqteaserelement ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.srqteaserelement li {
display: block;
margin: 0 0 20px 0;
padding: 15px 20px;
border: 1px solid #dddddd;
font-size: 100% !important;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
background:#ffffff;
}
.srqteaserelement li:hover {
-webkit-box-shadow: 2px 2px 20px -4px rgba(217,217,217,1);
-moz-box-shadow: 2px 2px 20px -4px rgba(217,217,217,1);
box-shadow: 2px 2px 20px -4px rgba(217,217,217,1);
}
.srqteaserelement li:hover::after {
opacity: 8;
}
.srqteaserelement li:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* Solo, Teaser nur mit Captions*/
a.sqrbutton3 {
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: 1px solid #dddddd;
border-radius: 0;
color: <cc:print value="&usercolor.medium"> !important;
padding: 10px 20px;
margin: 0px 0 -5px 0;
text-decoration: none;
text-transform: none;
font-family: 'Merriweather', serif;
font-size: 1rem;
line-height: 1;
font-weight:bold;
cursor: pointer;
font-weight: 700;
z-index:5;
float:left;
letter-spacing: 0.1px;
}
a.sqrbutton3:hover {
text-decoration: none;
transition: all 100ms ease-in-out 0s;
background-color: <cc:print value="&usercolor.medium"> ;
background-image: linear-gradient(45deg, <cc:print value="&usercolor.medium"> 50%, transparent 50%);
background-position: 100%;
background-size: 400%;
transition: background 600ms ease-in-out;
border-radius:0;
color: #ffffff !important;
}
/* Solo, Teaser nur mit Captions -ENDE-*/
.sqrteaserpicture {
overflow: hidden;
display: block;
margin: 0;
padding: 0;
}
.srqteaserelement img {
display: block;
z-index:90;
border: 1px solid <cc:print value="&site.properties.design.boxborder">;
transition: all 0.5s;
width: 100%;
height: auto;
clear:both;
clear:left;
clear:right;
}
.srqteaserelement li:hover img {
transform: scale(1.2);
z-index:91;
}
.teaserheader {
text-decoration: none;
display: block;
margin-bottom: 10px;
margin-top:3px;
line-height:160%;
font-family: 'Merriweather', serif;
font-weight: bold;
font-size:125%;
letter-spacing: 0.13339rem;
color: <cc:print value="&usercolor.medium">;
}
p.sqrteaserlookup {
text-align:left;
margin: 8px 0 18px;
border-bottom: 1px solid <cc:print value="&site.properties.design.boxborder">;
padding: 0 0 4px 0;
}
@media screen and (min-width: 768px) {
.sqr1col .sqrteaserpicture {
width: 40%;
float: right;
margin: 4px 0 30px 30px;
}
.sqr1col li:nth-child(odd) .sqrteaserpicture {
float: right;
margin: 4px 0 30px 30px;
/*margin: 4px 30px 30px 0;*/
}
}
@media screen and (max-width: 767px) {
.sqr1col .sqrteaserpicture {
float: none;
margin: 10px 0;
width: 100%;
}
}
/* Pagination Aufmacher */
p.sqrpaginate {
overflow: hidden;
position: relative;
display: inline-block;
text-align: left !important;
margin: 8px auto !important;
float:left;
clear:both;
}
p.sqrpaginate a, p.sqrpaginate b {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none !important;
transition: background-color .3s;
border-radius: 5px 5px 5px 5px;
border: 1px solid #ddd;
margin: 0 4px;
background:#ffffff;
}
p.sqrpaginate a.active, p.sqrpaginate b {
background-color: <cc:print value="&usercolor.medium">;
color: white;
transition: background-color .3s;
border-radius: 5px 5px 5px 5px;
border: 1px solid #ddd;
padding: 8px 16px;
}
p.sqrpaginate a:hover:not(.active) {
transition: all 100ms ease-in-out 0s;
background-color: #F7F7F8;
border-radius: 5px 5px 5px 5px;
padding: 8px 16px;
color: #69696E;
text-decoration: none;
}
.sqrnextpage {
float: right;
margin: 10px 0;
}
.sqrnextpage span {
display: block;
text-align: center;
}
.sqrprevpage {
float: left;
margin: 10px 0;
}
.sqrprevpage span {
display: block;
text-align: center;
}
/* Button im Teaserelement, zum Artikel*/
a.sqrbutton2 {
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: 1px solid #dddddd !important;
border-radius: 0;
color: <cc:print value="&usercolor.medium">;
padding: 10px 20px;
margin: 20px 0;
text-decoration: none;
text-transform: none;
font-family: 'Merriweather', serif;
font-size: 1rem;
line-height: 1;
font-weight:bold;
cursor: pointer;
font-weight: 700;
z-index:4;
float:left;
letter-spacing: 0.1px;
}
a.sqrbutton2:hover {
text-decoration: none;
transition: all 100ms ease-in-out 0s;
background-color: <cc:print value="&usercolor.medium"> ;
background-image: linear-gradient(45deg, <cc:print value="&usercolor.medium"> 50%, transparent 50%);
background-position: 100%;
background-size: 400%;
transition: background 600ms ease-in-out;
border-radius:0;
color: #ffffff !important;
}
Ich weiss, ist ganz schön viel, weshalb ich es hier auf durch anbiete für Copy&Paste.
Nun bearbeiten wie die drei einzelnen .ccmls nacheinander. Wir fangen mit der teaser_captionabstractpicture.ccml an:
<ul>
<cc:loop type="teaserelement" obj="myteaserelement">
<li>
<cc:if cond="¶graph.teaser.colcount=1" not="1">
<a class="sqrteasercaption" href="<cc:print value="&myteaserelement.url">"><cc:print value="&myteaserelement.caption"><cc:if cond="&myteaserelement.id"> <em>(<cc:print value="&myteaserelement.id">)</em></cc:if></a>
</cc:if>
<cc:if cond="&myteaserelement.sidepicture.uid">
<figure class="sqrteaserpicture">
<cc:picture uid="&myteaserelement.sidepicture.uid" suffix="_640" width="640" height="640" obj="teaserpic">
<a href="<cc:print value="&myteaserelement.url">"><img src="<cc:printpictureurl class="picture" xhtml="1" obj="teaserpic_640">" alt="" width="<cc:print value="&teaserpic_640.width">" height="<cc:print value="&teaserpic_640.height">"></a>
</figure>
</cc:if>
<cc:if cond="¶graph.teaser.colcount=1">
<a class="sqrteasercaption" href="<cc:print value="&myteaserelement.url">"><cc:print value="&myteaserelement.caption"><cc:if cond="&myteaserelement.id"> <em>(<cc:print value="&myteaserelement.id">)</em></cc:if></a>
</cc:if>
<p><cc:print value="&myteaserelement.abstract"></p>
<p style="text-align: right">
<b><cc:print value="&myteaserelement.price"></b>
<cc:if cond="&myteaserelement.info"><em>(<cc:print value="&myteaserelement.info" find="s2d" replace="s2dinfo">)</em></cc:if>
</p>
<cc:if cond="&myteaserelement.directput">
<?php $uniqueid = 'pnbformp<cc:print value="¶.number">c<cc:print value="&myteaser.number">r<cc:print value="&myteaserelement.number">'; ?>
<cc:include src="direct_put.ccml" common="1">
</cc:if>
</li>
</cc:loop>
</ul>
Wir ändern durch entfernen des obigen Abschnittes (<cc:if cond="&myteaser.caption"><h3><cc:print value="&myteaser.caption"></h3></cc:if>) lassen wir stehen und fügen dies dafür ein:
<ul>
<cc:loop type="teaserelement" obj="myteaserelement">
<li>
<cc:if cond="¶graph.teaser.colcount=1" not="1">
</cc:if>
<cc:if cond="&myteaserelement.sidepicture.uid">
<figure class="sqrteaserpicture">
<cc:picture uid="&myteaserelement.sidepicture.uid" suffix="_640" width="640" height="640" obj="teaserpic">
<img src="<cc:printpictureurl class="picture" xhtml="1" obj="teaserpic_640">" alt="" width="<cc:print value="&teaserpic_640.width">" height="<cc:print value="&teaserpic_640.height">">
</figure>
<p style="text-align:left" class="teaserheader"><cc:print value="&myteaserelement.caption"></p>
</cc:if>
<cc:if cond="¶graph.teaser.colcount=1">
</cc:if>
<p class="teaser"><cc:print value="&myteaserelement.abstract"></p>
<a class="sqrbutton2" href="<cc:print value="&myteaserelement.url">"><span><cc:print value="&myteaserelement.caption"> ⇒</span></a>
<p style="text-align: right">
<b><cc:print value="&myteaserelement.price"></b>
<cc:if cond="&myteaserelement.info"><em>(<cc:print value="&myteaserelement.info" find="s2d" replace="s2dinfo">)</em></cc:if>
</p>
<cc:if cond="&myteaserelement.directput">
<?php $uniqueid = 'pnbformp<cc:print value="¶.number">c<cc:print value="&myteaser.number">r<cc:print value="&myteaserelement.number">'; ?>
<cc:include src="direct_put.ccml" common="1">
</cc:if>
</li>
</cc:loop>
</ul>
Wie ihr sehen könnt, habe ich den a link für das sqrteaserpic weggelassen und dafür ein sqrbutton2 eingefügt. Warum eigentlich ein sqrbutton2?
Weil für die Weitersequenzen und Formulare von Siquando der sqrbutton schon vergeben ist und wir ja auch was Eigenständiges haben wollen.
Nun geht es mit der teaser_captionabstratc.ccml weiter. Ist genau dasselbe nur halt ohne sqrteaserpicture.
<ul>
<cc:loop type="teaserelement" obj="myteaserelement">
<li>
<a class="sqrteasercaption" href="<cc:print value="&myteaserelement.url">"><cc:print value="&myteaserelement.caption"><cc:if cond="&myteaserelement.id"> <em>(<cc:print value="&myteaserelement.id">)</em></cc:if></a>
<p><cc:print value="&myteaserelement.abstract"></p>
<cc:if cond="&myteaserelement.price">
<p style="text-align: right">
<b><cc:print value="&myteaserelement.price"></b>
<cc:if cond="&myteaserelement.info"><em>(<cc:print value="&myteaserelement.info" find="s2d" replace="s2dinfo">)</em></cc:if>
</p>
</cc:if>
<cc:if cond="&myteaserelement.directput">
<?php $uniqueid = 'pnbformp<cc:print value="¶.number">c<cc:print value="&myteaser.number">r<cc:print value="&myteaserelement.number">'; ?>
<cc:include src="direct_put.ccml" common="1">
</cc:if>
</li>
</cc:loop>
</ul>
Wir ändern auch hier durch entfernen den hier wiedergegebenen Eintrag und ersetzen ihn mit folgendem Inhalt:
<ul>
<cc:loop type="teaserelement" obj="myteaserelement">
<li>
<cc:if cond="¶graph.teaser.colcount=1" not="1">
</cc:if>
<cc:if cond="&myteaserelement.sidepicture.uid">
<figure class="sqrteaserpicture">
<cc:picture uid="&myteaserelement.sidepicture.uid" suffix="_640" width="640" height="640" obj="teaserpic">
<img src="<cc:printpictureurl class="picture" xhtml="1" obj="teaserpic_640">" alt="" width="<cc:print value="&teaserpic_640.width">" height="<cc:print value="&teaserpic_640.height">">
</figure>
<p style="text-align:left" class="teaserheader"><cc:print value="&myteaserelement.caption"></p>
</cc:if>
<cc:if cond="¶graph.teaser.colcount=1">
</cc:if>
<p class="teaser"><cc:print value="&myteaserelement.abstract"></p>
<a class="sqrbutton2" href="<cc:print value="&myteaserelement.url">"><span><cc:print value="&myteaserelement.caption"> ⇒</span></a>
<p style="text-align: right">
<b><cc:print value="&myteaserelement.price"></b>
<cc:if cond="&myteaserelement.info"><em>(<cc:print value="&myteaserelement.info" find="s2d" replace="s2dinfo">)</em></cc:if>
</p>
<cc:if cond="&myteaserelement.directput">
<?php $uniqueid = 'pnbformp<cc:print value="¶.number">c<cc:print value="&myteaser.number">r<cc:print value="&myteaserelement.number">'; ?>
<cc:include src="direct_put.ccml" common="1">
</cc:if>
</li>
</cc:loop>
</ul>
Nun ändern wir noch die teaser_caption.ccml durch entfernen des hier wiedergegebenen Eintrags:
<ul class="sqrbullet<cc:print value="¶.properties.design.paragraph.teaser.bullet.number">">
<cc:loop type="teaserelement" obj="myteaserelement">
<li class="sqrteaserlink">
<a class="sqrteasercaption" href="<cc:print value="&myteaserelement.url">"><cc:print value="&myteaserelement.caption"><cc:if cond="&myteaserelement.id"> <em>(<cc:print value="&myteaserelement.id">)</em></cc:if></a>
<cc:if cond="&myteaserelement.price"><b><cc:print value="&myteaserelement.price"></b></cc:if>
<cc:if cond="&myteaserelement.info"><em>(<cc:print value="&myteaserelement.info" find="s2d" replace="s2dinfo">)</em></cc:if>
<cc:if cond="&myteaserelement.directput">
<?php $uniqueid = 'pnbformp<cc:print value="¶.number">c<cc:print value="&myteaser.number">r<cc:print value="&myteaserelement.number">'; ?>
<cc:include src="direct_put.ccml" common="1">
</cc:if>
</li>
</cc:loop>
</ul>
Wie ihr am Original sehen könnt, werden bei nur teaser_caption, Bullets vorangestellt. Da ich aber die Links genauso darstellen wollte wie die Links bei captionabstract und captionabstractpicture, habe ich die teaser_captions wie folgt geändert:
<cc:loop type="teaserelement" obj="myteaserelement">
<p>
<a style="text-align:center; text-transform:none; font-family: 'Merriweather', serif; font-weight:bold;" class="sqrbutton3" href="<cc:print value="&myteaserelement.url">"><span><cc:print value="&myteaserelement.caption"> ⇒</span></a>
</p>
<p style="text-align: right">
<b><cc:print value="&myteaserelement.price"></b>
<cc:if cond="&myteaserelement.info"><em>(<cc:print value="&myteaserelement.info" find="s2d" replace="s2dinfo">)</em></cc:if>
</p>
<cc:if cond="&myteaserelement.directput">
<?php $uniqueid = 'pnbformp<cc:print value="¶.number">c<cc:print value="&myteaser.number">r<cc:print value="&myteaserelement.number">'; ?>
<cc:include src="direct_put.ccml" common="1">
</cc:if>
<div style="break:break-all"></div>
<div style="clear: both; height: 0.55em; border:none !important; border:0; background:transparent;"></div>
</cc:loop>
Wenn alles richtig gemacht wurde, sollte es so und so aussehen:
Das Ganze habe ich für Siquando Shop 10 – Stefan sagte, dass er die 11er Shop nutzt – die habe ich nicht, aber die 10er -für das Design PLURAL gemacht.
Wer das Ganze nachempfinden und auch testen möchte, bitte sehr. Fehler oder Probleme hier Posten oder einer der Admins findet es besser, wenn dieser Post oder Teile woanders verschoben werden.
Ich wünsch viel Spaß beim Ausprobieren, Grüße Data
Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »
Data« (22.01.2022, 00:38)