About the template and stylesheet - and changing the menu
-
Tata
- Posts: 3626
- Joined: Tue May 20, 2008 5:34 am
- Location: Slovakia
-
Contact:
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
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: 14227
- Joined: Tue Jun 21, 2011 11:04 am
- Location: Bingen, RLP, DE
-
Contact:
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;
-
lck
- Posts: 3297
- Joined: Wed Mar 23, 2011 11:43 am
-
Contact:
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;
}
...
-
Tata
- Posts: 3626
- Joined: Tue May 20, 2008 5:34 am
- Location: Slovakia
-
Contact:
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.
