Expancontract button styling

About the template and stylesheet - and changing the menu
Post Reply
Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Expancontract button styling

Post by Tata » 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
You do not have the required permissions to view the files attached to this post.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

pmschulze
Posts: 120
Joined: Thu Aug 07, 2014 5:29 pm

Re: Expancontract button styling

Post by pmschulze » 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.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Expancontract button styling

Post by cmb » 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;
Christoph M. Becker – Plugins for CMSimple_XH

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Expancontract button styling

Post by lck » 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;
}
...
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Expancontract button styling

Post by Tata » 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.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Post Reply