#1

hostgo

Grünschnabel  (17 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.profiliert.ch   ·   protalk

Die Produktebilder werden in den verschiedenen Responsiv-Design links/rechts angezeigt. :-(

Die Produktebilder im Shop werden in den verschiedenen Responsiv-Design links/rechts angezeigt. Ich möchte alle Bilder alle links und die Texte rechts (von mir aus auch umgekehrt - jedenfalls nicht abwechselnd. Das wirkt sehr chaotisch.

Lösungsversuch 1: Das mit dem "Absatz pro Produkt" habe ich schon ausprobiert. Das ist ausserordentlich umständlich und bei der Pflege der Produkte sehr unübersichtlich. Fällt als Lösung also raus.

Lösungsversuch 2: Mit drei Spalten zu arbeiten habe ich versucht. Wenn die Texte aber nicht gleich lang sind, landen die einzelnen Produkte auf unterschiedlichen Höhen. Auch das wirkt unübersichtlich. Da es sich um Kurstermine handelt, sollten die aber ohnehin chronologisch übereinander (in einer Spalte) dargestellt werden.

Ausserhalb des Shops werden die Absätze (Textblöcke) doch auch so angezeigt, dass alle Bilder auf der einen Seite sind - und die Texte auf der anderen Seite. Es scheint also möglich zu sein. Bin für jeden Tipp dankbar.

So müsste ich das wieder darstellen können: https://www.protalk.ch/shop/seminar-termine/seminartermine.php Leider noch ein statisches Design - daher möchte ich umstellen...

Ich arbeite mit Siquando Shop11 und dem Design "Plural". 


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »W2D Fan« (24.01.2022, 11:01)
#2

Data

As  (143 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

 Hallo Stefan,

Dir kann natürlich geholfen werden. Gehe in den Designordner (Plural) und mache dir bitte eine Kopie von der „style_content.css", damit du die Originale noch hast, falls du etwas falsch machen solltest.

Wenn diese Datei unbearbeitet ist und du ein Editor hast der Zeilennummern ausgibt/anzeigt, dann scrolle bis zur Zeile 876 … vor.

Der Abschnitt der für das wechseln bei Einspaltigen Aufmachern mit CaptionAbstractPicture zuständig ist, lautet:

@media screen and (min-width: 768px) {
 .sqr1col .sqrteaserpicture {
 width: 40%;
 float: right; <-- Dieser Eintrag sorgt dafür, dass das nächste Bild rechts ausgegeben wird.
 margin: 4px 0 30px 30px;
 }
 .sqr1col li:nth-child(odd) .sqrteaserpicture {
 float: left; <-- Dieser Eintrag sorgt dafür, dass das erste, 3. Usw. Bild links ausgegeben wird.
 margin: 4px 30px 30px 0;
 }
}

Wenn du also willst das alle Bilder im Einspaltigem Teaser links ausgegeben werden, dann ändere den 1. Float:right in float:left. Oder wenn die Bilder rechts ausgegeben werden sollen, dann den zweiten von float:left auf Float:right ändern.

@media screen and (min-width: 768px) {
 .sqr1col .sqrteaserpicture {
 width: 40%;
 float: left; <--
 margin: 4px 0 30px 30px;
 }
 .sqr1col li:nth-child(odd) .sqrteaserpicture {
 float: left; <-- 
 margin: 4px 30px 30px 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;
 }
}

Das war es schon! Grüße Data


Dieser Beitrag wurde bereits 3 mal bearbeitet, zuletzt von »Data« (24.01.2022, 01:24)
#3

hostgo

Grünschnabel  (17 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.profiliert.ch   ·   protalk

Hallo Data,

Herzlichen Dank. Ich bin gerade etwas beeindruckt. Darauf wäre ich nie gekommen. Dass ich jetzt weiss, wo der Style festgelegt wird ist brillant. Da könnte man ja noch mehr anpassen 😉

Kleiner Zusatz: Die Zeile unter dem "float left" bzw. "float right" muss mit kopiert werden, damit die Ränder/Abstände wieder stimmen.

Sonnige Grüsse, Stefan

#4

Data

As  (143 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

Jo, Stefan hast recht ist mir auch aufgefallen!* Danke, dass du aufgepasst hast und hier Rückmeldung gibst!

in eine Richtung sieht es in meinen Augen einfach besser aus. Wirkt ruhig und geordnet!

 Was das Ändern angeht, damit die Aufmacher mal anders aussehen... mal sehen was wir da so hingestaltet bekommen?

Grüße Data

 

*= Korrigiert: 24.01.2022, Grüße Data


Dieser Beitrag wurde bereits 2 mal bearbeitet, zuletzt von »Data« (24.01.2022, 01:25)
#5

Data

As  (143 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

Hallo Stefan,

ich habe dir eben mal ein kleines Beispiel erstellt (Screenshot da ich kein Wenspace habe und nur hier offline für mich experementiere).

Beispiel%20Background%20Yellow.JPG

Ansetzen kannst du in der .srqteaserelement li. Dort kannst du mit Background-color, Border usw. Spielen. Hovereffekte usw. Einfach mal spielen.

Beispiel:

.srqteaserelement li {
 display: block;
 margin: 0 0 20px 0;
 padding: 20px;
 background:yellow;
}

Habe nur mal eben das Beispiel hier aufgezeigt, Background in Yellow, und allgemein ein Padding von 20px.

Du kannst ja mal auf CSS-Lernseiten surfen und dir zich Beispiel suchen und ausprobieren. Anders mach ich es ja auch nicht!

 

Grüße Data

#6

Data

As  (143 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

Übrigens habe ich mal einwenig für dich gespielt und den Aufmacher mit hovereffekten und border usw. aufgepeppt.

.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;
	-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);
}
.sqrteaserpicture {
  overflow: hidden;
}
.srqteaserelement img {
  display: block;
	z-index:90;
  border: 1px solid <cc:print value="&site.properties.design.boxborder">;
  transition: all .3s;
  width: 100%;
  height: auto;
  clear:both; 
  clear:left;
  clear:right;
}
.srqteaserelement li:hover img {
  transform: scale(1.2);
}
.sqrteasercaption {
  text-decoration: none;
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  color: <cc:print value="&usercolor.medium">;
}
.srqteaserelement li.sqrteaserlink {
  display: block;
  margin: 0 0 16px 0;
  padding: 0 0 0 24px;
  background-position: 0 6px;
  background-repeat: no-repeat;
}
.srqteaserelement li.sqrteaserlink a {
  color: <cc:print value="&usercolor.medium">;
  font-weight: bold;
  text-decoration: none;
}
.srqteaserelement li.sqrteaserlink a:hover, .sqrteasercaption:hover {
  text-decoration: underline;
}
p.sqrteaserlookup {
	text-align:center;
	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%;
 }
}

Beispiel2.JPG

Wie gesagt nur ein Beispiel. Spiel einfach mal mit den bordern, backgrounds und so weiter.

In diesem Beispiel 2 wird bei Mouseover des Teaserelementes das Teaserelement und das Teaserabsatzbild gehovert. Das Bild wird vergrößert. Das Teaserelement wird beim Mouseover mit boxshadow und transition ausgeführt.

Bau dir dieses beispiel ein und teste. Vielleicht gefällt es dir ... und andere Web10/11-Anwandern dieses Beispiel.

Grüße Data

 

#7

Data

As  (143 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

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

  • 3.Wie folgt ändern:
<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="&paragraph.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="&paragraph.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="&para.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="&paragraph.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="&paragraph.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">&nbsp;&rArr;</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="&para.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="&para.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="&paragraph.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="&paragraph.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">&nbsp;&rArr;</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="&para.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="&para.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="&para.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">&nbsp;&rArr;</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="&para.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:

Beispiel%203.jpg

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)
#8

hostgo

Grünschnabel  (17 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.profiliert.ch   ·   protalk

Hallo Data

Es ist beeindruckend, was Du hier mit "ein wenig" eigener Recherche machen konntest. Herzlichen Dank. Ich habe aufgrund Deiner Vorarbeit rumprobiert und werde vorerst die Rahmen einsetzen. Diese sind sehr nützlich zur besseren Übersicht. Die Konfigurationsdateien der Design sind offensichtlich aufwärtskompatibel. Glück gehabt.

Ich denke, Deine Einträge sind tatsächlich sehr wertvoll. Auch/gerade für Einsteiger. Da sieht man wieder mal, was möglich ist, wenn jemand will. Und ich nehme an, Du machst das schon irgendwie beruflich und nicht nur nebenher. Andernfalls könntest Du auch einmal Deine berufliche Entwicklung überdenken...

Vielen Dank nochmals für Deine Ausführungen!

Beste Grüsse aus der Schweiz

Stefan

#9

Data

As  (143 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden

Hallo Stefan,

danke für dein Lob!

Ich mach das nicht beruflich, bin auch kein Webdesigner oder so. Ich finde lediglich, dass Siquando uns Kunden in vielen leider in Stich lässt.

Wenn man im Internet sich die (eigentlich) schicken Designs ansieht ist man dann doch ein wenig enttäuscht, wie schnöde die Designs eigentlich sind.

Gerade wenn man sich die vielen, vielen Free Webtemplates anschaut und sieht was eigentlich möglich wäre... Nur Siqunado lässt uns Kunden wie gesagt

im Regen stehen. Find ich schade, denn mit Siquando erstellte Websites mehren sich sehr und alles sieht gleich und schnöde aus.

 

Ist aber ein anderes Thema. Wie gesagt, ist nur mein Hobby und ich guck was ich woraus machen kann. Programmierer oder so, bin ich auch nicht.

Ich wünsch ein schönen Tag, Grüße Data

377 Aufrufe | 9 Beiträge