[Teils erledigt] Einfachrahmen mit Hovereffekt erweitern

Hallo Community,

ich versuche den einfach Rahmen mit ein Hover zu erweitern nach Abfrage ja oder nein. Wie ich den '.sqrparabox' hovern kann ist mir schon klar.

Nur versuche ich eine Abfrage zu integrieren per erweiterte Eigenschaft ja/nein. Denn ich möchte nach bedarf den Textabsatz mit einfacher Rahmen hovern können.

Ich bin mir sicher, dass ich eine Abfrage in der stlyle_conntent.css ja nur mit &site abfangen kann, ergo muss die Auswahl ja irgendwie in der page.ccml stattfinden.

Nur da komme ich nicht so weiter. Hier mal was ich bisher versucht habe. Die Eintragung in der config.ccml:

<cc:property id="design.einfachrahmen.hover" folder="Design" targettype="paragraph" targetsubtype="text" type="boolean" caption="Einfachrahmen hovern?" default="0">

In der page.ccml:

<!-- Boxex.number=2 = Einfacherrahmen -->
<cc:if cond="&para.properties.design.paragraph.text.boxex.number=2">
<div class="sqrparabox" style="background-color: <cc:print value="&para.properties.design.einfacherrahmen.paragraph.text.background">;
<cc:print value="&para.properties.design.einfachrahmen.hover">;
border:<cc:print value='&para.properties.design.paragraph.paraborderpx'>px solid <cc:print value="&para.properties.design.paragraph.text.bordercolor">;"></cc:if>

Die Style_content.css sieht so aus:

.sqrparabox:hover {
	background:yellow;
}

Irgendwie, irgendwo habe ich eventuell ein Denkfehler? So greift es auf jeden Fall nicht. Kann mir jemand da weiterhelfen und mir vielleicht auch erklären wo mein Denkfehler liegt? Vielen Dank,

Grüße Data

Hallo

Ich habe das mal aus einfacher Neugierde heraus probiert.

Den Eintrag in der config.ccml habe ich so von dir übernomme. In der page.ccml habe ich

<cc:if cond="&para.properties.design.paragraph.text.boxex.number=2"><div class="sqrparabox"></cc:if>

durch

<cc:if cond="&para.properties.design.paragraph.text.boxex.number=2"><div class="sqrparabox <cc:if cond="&para.properties.design.einfachrahmen.hover"> hoverbox</cc:if>"></cc:if>

ersetzt. Also eine neu css-klasse hinzugefügt.

In der cstyle_contet.css habe ich folgendes hinzugefügt:

.hoverbox:hover {
	background:yellow;
} 

Als Design habe ich Apex verwendet. In der lokalen Vorschau auf dem PC geht es.

Gruß Rainer

Hallo Rainer,

vielen Dank für deine Rückmeldung und dein Versuch! Danke!

Werde es nachher ausprobieren. Den Grund wieso ich dies per

erweiterte Eigenschaft haben möchte, erläuterte ich ja im #1.

Ich gebe ebenfalls dann Rückmeldung! Danke!

Gruß Data

Ich habe mal noch ein wenig "Rumgespielt".
Man kann nun 4 Hoverfarben in den Website-Eigenschaften einstellen und dann beim Hovern auswählen.

Gruß Rainer

Sehr schick Rainer,

mit diesen oder einen ähnlichen Gedanke hatte ich auch schon gespielt, aber erst einmal bei Seite gelegt.

Ich weiss, Copy&Paste ist hier nicht gern gesehen, aber vielleicht möchtest du trotzdem allen hier wieder geben, wie auch unsere User dies nutzen können.

Ich fang mal an mit unseren jetzigen Stand.

Mal zur Erläuterung!

Siquando hat mit Einführung der responsiven Designs die unheimlich tolle (und von vielen Usern gewünschte) Funktion eingeführt, Textabsätze mit einem Rahmen zu versehen. Eine wirklich gutgemeinte Funtion.

Dadurch kann man bestimmte Absätze durch Rahmeneinfassung hervorheben. Wirklich toll. Nur ein wenig Schade, dass man nützliche Eigenschaften, wie Auswahl der Rahmenfarbe, oder Rahmendicke und Hintergrundfarbe der mit Rahmeneingefassten Absatzes nicht hervorheben kann. Oder wie in diesem meinen Fall das Hovern eines mit Rahmenversehenen Absatzes, zu hovern. Weshalb ich ja hier die Frage stellte, wie?

Die erweiterte Eigenschaft von Rainer #4 ist da natürlich schon das i-Tüpfelchen der ganzen Geschichte. Hier also mal der bisherige stand, ohne Rainers Eigenschaften:

1. In der config.ccml fügen wir ein neuen Code hinzu:

<cc:property id="design.einfachrahmen.hover" folder="Design" targettype="paragraph" targetsubtype="text" type="boolean" caption="Einfachrahmen hovern?" default="0">

2. Ebenso fügen wir in der style_content.css, am besten nach der .sqrparabox ein neuen Code hinzu:

.hoverbox:hover {
 background:yellow;
}

3. In der page.ccml ersetzen wir den vorhanden Passus:

<cc:if cond="&para.properties.design.paragraph.text.boxex.number=2"><div class="sqrparabox"></cc:if>

durch den von Rainer modifizierten Eintrag:

<cc:if cond="&para.properties.design.paragraph.text.boxex.number=2"><div class="sqrparabox <cc:if cond="&para.properties.design.einfachrahmen.hover"> hoverbox</cc:if>"></cc:if>

Das war es bis hier her. Rainer vielen Dank dir!!!

Alle anderen denken bitte immer an eine Sicherung der Dateien oder des Designs!

Grüße Data

Hallo Data

Deine Zusammenfassung ist nicht ganz richtig.

Du hattest ja in Beitrag #1 bereits sowohl Programmierfehler, wie auch Denkfehler...

Programmierfehler:

<cc:print value="&para.properties.design.einfachrahmen.hover">; border:<cc:print value='&para.properties.design.paragraph.paraborderpx'>px solid <cc:print value="&para.properties.design.paragraph.text.bordercolor">;"></cc:if>

Wahrscheinlich meintest du statt...

<cc:print value="&para.properties.design.einfachrahmen.hover">

...wohl eher...

<cc:if cond="&para.properties.design.einfachrahmen.hover">

...denn mit deiner Programmierung hättest du vom Siquando-Programm eine Fehlermeldung erhalten müssen.

Denkfehler:

Du hattest deinen Code, der ja deine hover-Wünsche beinhaltete, unter...

<div class="sqrparabox"....

...veröffentlicht. 

Somit wäre dies, wenn es denn richtig geschrieben gewesen wäre, auch nur unter sqrparabox funktionstüchtig gewesen, obwohl du es ja unter sqrparabox:hover wolltest.

Die Pseudoklasse "hover" kannst du leider nicht per html codieren (was dein Code mir suggeriert), dies bleibt css vorbehalten.

Ich war schon dran am tippen, aber die dazugehörige Lösung über Klassen hat dir ja bereits Rainer065 (schneller als ich ) in Beitrag #2 geliefert.

In deiner Zusammenfassung schreibst du einen weiteren Denkfehler...

2. Ebenso fügen wir in der style_content.css, am besten nach der .sqrparabox ein neuen Code hinzu:

.sqrparabox:hover {
 background:yellow;
}

Das würde zu dem Resultat führen, daß sämtliche sqrparabox-Absätze beim hover die Background-Farbe erhalten. 

Aber gemäss deiner erweiterten Eigenschaft willst du das ja nur, wenn diese angewählt ist.

Somit muß der Code in der Zusammenfassung unter 2.

.hoverbox:hover {
	background:yellow;
} 

heißen (so wie es Rainer065 in Beitrag #2 auch gepostet hat), damit er nur bei ausgewählter erweiterter Eigenschaft in Kraft tritt!

Viel Spaß noch bei deinem Projekt!

Gruß

Puntigamer

 P.S.

Den Beitrag #4 von Rainer065 kannst du dir mit einer erweiterten Eigenschaft vom type="combo" mit der Definition von mehreren Klassen realisieren! 

Hallo Puntigamer,

ja du hast recht, dass in style_content.css die ich wiedergab, hier im Forum, ich das dümmlicher weise falsch schrieb.

.sqrparabox:hover {
 background:yellow;
}

Ich habe es oben korrigiert. Muss natürlich:

.hoverbox:hover {

 background:yellow;

}

heißen. Ist richtig!

Was die anderen erweiterten Eigenschaften angeht, lass die einfach mal bei Seite. In der Hauptsache ging es mir darum überhaupt Textabsätze mit einfacher Rahmen, nach Bedarf hovern zu können.

Dennoch danke, dass du drüber geschaut hast und mich auf Fehler hingewiesen hast. Danke!

Grüße Data

Hallo, hier mal meine Lösung für 4 Hover-Farben

In die config.ccml eingetragen:

<cc:property id="design.einfachrahmen.hover" caption="Einfachrahmen hovern Farbwahl" folder="Design" targettype="paragraph" targetsubtype="text" type="combo" default="(Standard)" comboitems="(Standard)|Farbe1|Farbe2|Farbe3|Farbe4">

<cc:property id="design.einfachrahmen.hover.color1" caption="Hover Farbe 1" folder="Design" style="*" targettype="site" type="color" default="#E9ECF2">
<cc:property id="design.einfachrahmen.hover.color2" caption="Hover Farbe 2" folder="Design" style="*" targettype="site" type="color" default="#E9ECF2">
<cc:property id="design.einfachrahmen.hover.color3" caption="Hover Farbe 3" folder="Design" style="*" targettype="site" type="color" default="#E9ECF2">
<cc:property id="design.einfachrahmen.hover.color4" caption="Hover Farbe 4" folder="Design" style="*" targettype="site" type="color" default="#E9ECF2">

In der page.ccml geändert:

<cc:if cond="&para.properties.design.paragraph.text.boxex.number=2"><div class="sqrparabox"></cc:if>

ersetzt durch

<cc:if cond="&para.properties.design.paragraph.text.boxex.number=2">
<div class="sqrparabox
<cc:if cond="&para.properties.design.einfachrahmen.hover.number=2"> hoverbox1</cc:if>
<cc:if cond="&para.properties.design.einfachrahmen.hover.number=3"> hoverbox2</cc:if>
<cc:if cond="&para.properties.design.einfachrahmen.hover.number=4"> hoverbox3</cc:if>
<cc:if cond="&para.properties.design.einfachrahmen.hover.number=5"> hoverbox4</cc:if>
"></cc:if>

In die style_design.css eingetragen:

.hoverbox1:hover {
	background: <cc:print value="&site.properties.design.einfachrahmen.hover.color1">;
}
.hoverbox2:hover {
	background: <cc:print value="&site.properties.design.einfachrahmen.hover.color2">;
} 
.hoverbox3:hover {
	background: <cc:print value="&site.properties.design.einfachrahmen.hover.color3">;
} 
.hoverbox4:hover {
	background: <cc:print value="&site.properties.design.einfachrahmen.hover.color4">;
} 

Bitte immer an eine Sicherung der Dateien oder des Designs denken!

Gruß Rainer

Ui Rainer,

da hat dich aber die Lust & der Ehrgeiz gepackt!

Ich schau es mir mal nachher an. Aber Danke, dass du dir (auch wegen mir) für uns Gedanken machst!

Dir ein schönen Abend,

Grüße Data