CMSimple_XH–Forum

Posted: **Fri Oct 04, 2019 7:28 pm**

Ich habe bisschen mit expandcontract plugin gespielt. Das Ergebniss ist sichtbar hier (die Subdomain läuft nur mit http - ist aber sauber).
Es ging mir darum, die Expand_buttons mit bilder zu versehen. Dafür brauchte ich nur in expandcontract's Stylesheet folgendes reinzugeben:

Code: Select all

.expand_area form.expand_button input[type="submit"]{
    width: 170px;
    height: 115px;	
	font-size: 1.5rem;
	color: #fff;
	text-shadow: 1px 1px 0 #000;
}
.expand_area form.expand_button input[type="submit"]:hover{
	color: tomato;
}
.expand_area form:nth-child(1).expand_button input[type="submit"]{
	background: url(images/dubai.jpg);
}
.expand_area form:nth-child(2).expand_button input[type="submit"]{
	background: url(images/abu-dhabi.jpg);
}
.expand_area form:nth-child(3).expand_button input[type="submit"]{
	background: url(images/sharjah.jpg);
}
.expand_area form:nth-child(4).expand_button input[type="submit"]{
	background: url(images/um-al-quwain.jpg);
}
.expand_area form:nth-child(5).expand_button input[type="submit"]{
	background: url(images/ras-al-kaimah.jpg);
}
.expand_area form:nth-child(6).expand_button input[type="submit"]{
	background: url(images/ajman.jpg);
}
.expand_area form:nth-child(7).expand_button input[type="submit"]{
	background: url(images/al-ain.jpg);
}
.expand_area form:nth-child(8).expand_button input[type="submit"]{
	background: url(images/fujairah.jpg);
}
.expand_area form:nth-child(9).expand_button input[type="submit"]{
	background: url(images/desert.jpg);
}
.expand_area form:nth-child(10).expand_button input[type="submit"]{
	background: url(images/sea.jpg);
}

Und natürlich die entsprechende Bilder unter /plugins/expandcontract/css/images speichern und in der Konfiguration einstellen

Code: Select all

$plugin_cf['expandcontract']['use_inline_buttons']="true";

Und so sieht es dann

expand_button.jpg

Posted: **Sat Oct 05, 2019 9:37 am**

Eine wunderbare Idee! Sieht auch richtig gut aus.
Leider wird verschwinden die Bilder, wenn man den Button aktiviert. Der Zustand bleibt auch erhalten, so dass mann - wenn man einmal alle Bilder angeklickt hat - keine Bilder mehr sieht.

Posted: **Sat Oct 05, 2019 10:26 am**

pmschulze wrote: ↑
Sat Oct 05, 2019 9:37 am
Leider wird verschwinden die Bilder, wenn man den Button aktiviert. Der Zustand bleibt auch erhalten, so dass mann - wenn man einmal alle Bilder angeklickt hat - keine Bilder mehr sieht.

Es sieht so aus als ob expandcontract den background als Inline-Style übersteuert. Man könnte aber folgendes tun:

Code: Select all

background: url(images/dubai.jpg) !important;

Posted: **Sat Oct 05, 2019 10:27 am**

pmschulze wrote: ↑
Sat Oct 05, 2019 9:37 am
Leider wird verschwinden die Bilder, wenn man den Button aktiviert. Der Zustand bleibt auch erhalten, so dass mann - wenn man einmal alle Bilder angeklickt hat - keine Bilder mehr sieht.

Ursache hierür ist das Script-Snippet im <head>:

Code: Select all

<script>
    $(document).ready(function() {

        $("inpu, textarea").focus(function() {
            $(this).css("border", "2px solid #f66");
            $(this).css("background", "#fee");
        });
        $("inpu, textarea").blur(function() {
            $(this).css("border", "2px solid #444");
            $(this).css("background", "#fff");
        });
    });
</script>

Entweder hier die Zeile mit "background" löschen oder zumindest zu "background-color" ändern (evtl. auch noch zu transparent) oder hinter allen url(images/*.jpg) ein !important setzen.

Code: Select all

.expand_area form:nth-child(1).expand_button input[type="submit"]{
	background: url(images/dubai.jpg) !important;
}
...

Posted: **Sat Oct 05, 2019 10:33 am**

Vielen Dank. Das habe ich online irgedwie nicht bemerkt. Am Localhost lief es gut. Mit CSS war es sehr einfach.

CMSimple_XH–Forum

Expancontract button styling

Expancontract button styling

Re: Expancontract button styling

Re: Expancontract button styling

Re: Expancontract button styling

Re: Expancontract button styling