HowTo: Events Made Easy (WordPress-Plugin)

Events Made Easy ist ein sehr (wirklich sehr sehr) leistungsfähiges WordPress-Plugin um Events, Veranstaltungen, Seminare usw. zu verwalten. Vollständig kostenlos, mit einem Entwickler der sich rührig um seine Anwender kümmert, voll und ganz empfehlenswert!

Die Leistungsfähigkeit versteckt sich dabei gekonnt, viele Möglichkeiten erschließen sich erst durch den Einsatz von Shortcodes und Hacks.

Hier ein paar Beispiele wie ich Events Made Easy anpasse:

Buchungen in Deutschland rechtssicher gestalten

  1. Im WordPress-Dashboard ‚Veranstaltungen‘ / Formularfelder ein Feld für AGBs definieren (als Checkbox)
  2. Bei Einstellungen / Buchen / Format: Buchungsformular, vor dem Captcha dieses Feld einfügen
    <tr><th scope='row'>AGB:</th><td>#REQ_FIELD{1}</td></tr>

    #REQ_FIELD{1} zeigt das erste definierte Feld an, durch REQ kann das Formular erst verlassen werden wenn die Checkbox angeklickt wird.

  3. eventuell weitere Felder (wie Datenschutzbelehrung, Widerrufsbelehrung ) genauso definieren

Pflichtfeld beim Buchungsformular

Das Pflichtfeld lässt sich einfacher ändern, da dies der CSS-Klasse eme-required-field zugewiesen ist. Einfach den Code wieder in die style.css oder im WordPress-Dashboard einfügen.

Der Hinweis ‚Pflichtfeld‘ erscheint so z.B. kleiner:

.eme-required-field {
    font-size: 80%;
  }

Absende-Button stylen

Der Absende-Button hat den Charme von Windows 3.11. So wird er einfach verändert:

Ein einfacher Button-Generator ist z.B. der Buttonoptimizer, dort kann ein entsprechender CSS-Code erstellt werden.

Dieser CSS-Code kann dann in die style.css des Themes, oder noch einfacher, direkt in Events Made Easy geschrieben werden. Dazu im WordPress-Dashboard unter ‚Veranstaltungen‘ ‚Einstellungen‘ den Reiter ‚Sonstiges‘, dort das Feld ‚Zusätzliches HTML für Kopf‘ editieren.

Wichtig: Der Button hat keine eigene CSS-Klasse oder ID, muss also über seinen Namen angesprochen werden

 input[name=eme_submit_button]

Bei Verwendung von z.B. dem Buttonoptimizer die vergebene Klasse .button dazu in allen Defintionen durch input[name=eme_submit_button] ersetzen.

Eine komplette Definition für einen orangen Button sieht z.B. so aus:

<style type="text/css">
input[name=eme_submit_button] {
 display: inline-block;
 text-align: center;
 vertical-align: middle;
 padding: 12px 24px;
 border: 0px solid #a14727;
 border-radius: 4px;
 background: #ff9900;
 background: -webkit-gradient(linear, left top, left bottom, from(#ff9900), to(#ff9900));
 background: -moz-linear-gradient(top, #ff9900, #ff9900);
 background: linear-gradient(to bottom, #ff9900, #ff9900);
 font: normal normal bold 14px arial;
 color: #ffffff;
 text-decoration: none;
}
input[name=eme_submit_button]:hover,
input[name=eme_submit_button]:focus {
 border: 0px solid #ff723e;
 background: #ffb800;
 background: -webkit-gradient(linear, left top, left bottom, from(#ffb800), to(#ffb800));
 background: -moz-linear-gradient(top, #ffb800, #ffb800);
 background: linear-gradient(to bottom, #ffb800, #ffb800);
 color: #ffffff;
 text-decoration: none;
}
input[name=eme_submit_button]:active {
 background: #995c00;
 background: -webkit-gradient(linear, left top, left bottom, from(#995c00), to(#ff9900));
 background: -moz-linear-gradient(top, #995c00, #ff9900);
 background: linear-gradient(to bottom, #995c00, #ff9900);
}
</style>

Hierbei habe ich die Definition noch um die style-Angabe ergänzt. Wird das CSS in der style.css des Themes definiert, so ist diese wegzulassen.

Veranstaltungs-Details in der Liste aus- und einklappbar gestalten

Folgender CSS-Code sorgt für ausklappbare Veranstaltungsdetails, dieser kann z.B. in der eigenen ’style.css‘ eingefügt werden: Ein Beispiel wie dies aussieht ist unter https://bettinaschober.de/termine/ zu sehen.

details {
	@include states($default);
	cursor: pointer;
	transition: background 0.3s;
	min-height: 48px;
	max-height: 60px;
	transform-origin: top center;
	transform: rotate(0.1deg);
	transition: all 0.3s;

	::-webkit-details-marker {
		display: none;
	}

	// Primary Style
	&.primary {
		@include states($primary);
	}

	// Success Style
	&.success {
		@include states($sucess);
	}

	// Square Style
	&.square {
	}

	&[open] {
		transition: all 0.6s;
		min-height: 100px;
		max-height: 200px;
	}
}

summary {
	outline: none;
	
	&:selection {
		background: transparent;
	}

	&:after {
		margin-top: 2px;
		content: "➕";
		float: left;
		[open] & {
			padding: 0 0 12px 0;
			content: "➖";
		}
	}
}



Kommentar hinterlassen