Styling des Cookie-Hinweises von iwcc Cookie Gedöns

Einleitung

Achtung: Diese Anleitung bezieht sich auf Version 1 des Addons. In Version 2 gab es Änderungen am Fragment "iwcc_box.php".

Der Cookie Hinweis des iwcc Cookie Gedöns Addons erscheint standardmäßig als Lightbox welche die gesamte Seite überlagert. Zudem werden CSS- und Javascript-Dateien des Addons im Head-Bereich reingeladen. Dies läasst sich über das Fragment iwcc_box.php aus dem Ordner fragments im Ordner eigenen Wünschen anpassen. Dazu wird das Fragment z.B. in den Ordner theme/private/fragments kopiert, sofern das theme-Addon verwendet wird. Anschließend können die Änderungen vorgenommen werden.

Im nachfolgenden Beispiel wird auf pretty-checkbox und fontello verzichtet. Das CSS aus iwcc_frontend.css wird geändert in die Haupt-CSS-Datei der Website eingefügt.

Beispiel

Cookie

Code

<?php
$iwcc = new iwcc_frontend($this->getVar('forceCache'));
$iwcc->setDomain($_SERVER['HTTP_HOST']);
if ($this->getVar('debug'))
{
    dump($iwcc);
}
?>
<?php if ($iwcc->cookiegroups): ?>
    <script src="/assets/addons/iwcc/js.cookie-2.2.1.min.js"></script>
    <script src="/assets/addons/iwcc/iwcc_frontend.js"></script>
    <script id="iwcc-template" type="text/template">
        <div class="iwcc-background fr-version-bottom iwcc-hidden <?= $iwcc->boxClass ?>" id="iwcc-background" data-domain-name="<?= $iwcc->domainName ?>">
            <div class="iwcc-wrapper" id="iwcc-wrapper">
                <div class="iwcc-wrapper-inner">
                    <div class="iwcc-summary" id="iwcc-summary">
                        <p class="iwcc-headline"><?= $iwcc->texts['headline'] ?></p>
                        <p class="iwcc-text"><?= nl2br($iwcc->texts['description']) ?></p>
                        <div class="iwcc-cookiegroups">
                            <?php
                            foreach ($iwcc->cookiegroups as $cookiegroup) {
								if ($cookiegroup['required']) {
                                    echo '<div class="iwcc-cookiegroup-checkbox">';
                                    echo '<input id="' . $cookiegroup['uid'] . '" type="checkbox" data-action="toggle-cookie" data-uid="' . $cookiegroup['uid'] . '" data-cookie-uids=\'' . json_encode($cookiegroup['cookie_uids']) . '\' disabled="disabled" checked="checked">';
                                    echo '<label for="' . $cookiegroup['uid'] . '">' . $cookiegroup['name'] . '</label>';
                                    if ($cookiegroup['script'])
                                    {
                                        echo '<div class="iwcc-script" data-script="' . $cookiegroup['script'] . '"></div>';
                                    }
                                    echo '</div>';
                                }
                                else {
                                    echo '<div class="iwcc-cookiegroup-checkbox">';
                                    echo '<input id="' . $cookiegroup['uid'] . '" type="checkbox" data-uid="' . $cookiegroup['uid'] . '" tabindex="1" autocomplete="off" data-cookie-uids=\'' . json_encode($cookiegroup['cookie_uids']) . '\'>';
                                    echo '<label for="' . $cookiegroup['uid'] . '">' . $cookiegroup['name'] . '</label>';
                                    if ($cookiegroup['script'])
                                    {
                                        echo '<div class="iwcc-script" data-script="' . $cookiegroup['script'] . '"></div>';
                                    }
                                    echo '</div>';
                                }
                            }
                            ?>
							<div class="iwcc-show-details">
								<a id="iwcc-toggle-details" class="omnMoreInfo"><?= $iwcc->texts['toggle_details'] ?></a>
							</div>
                        </div>
                    </div>
                    <div class="iwcc-detail iwcc-hidden" id="iwcc-detail">
                        <?php
                        foreach ($iwcc->cookiegroups as $cookiegroup)
                        {
                            echo '<div class="iwcc-cookiegroup-title iwcc-headline">';
                            echo $cookiegroup['name'] . ' <span>(' . count($cookiegroup['cookie']) . ')</span>';
                            echo '</div>';
                            echo '<div class="iwcc-cookiegroup-description">';
                            echo $cookiegroup['description'];
                            echo '</div>';
                            echo '<div class="iwcc-cookiegroup">';
                            foreach ($cookiegroup['cookie'] as $cookie)
                            {
                                echo '<div class="iwcc-cookie">';
                                echo '<span class="iwcc-cookie-name"><strong>' . $cookie['cookie_name'] . '</strong> (' . $cookie['service_name'] . ')</span>';
                                echo '<span class="iwcc-cookie-description">' . $cookie['description'] . '</span>';
                                echo '<span class="iwcc-cookie-description">' . $iwcc->texts['lifetime'] . ' ' . $cookie['cookie_lifetime'] . '</span>';
                                echo '<span class="iwcc-cookie-provider">' . $iwcc->texts['provider'] . ' ' . $cookie['provider'] . '</span>';
                                echo '<span class="iwcc-cookie-link-privacy-policy"><a href="' . $cookie['provider_link_privacy'] . '">' . $iwcc->texts['link_privacy'] . '</a></span>';
                                echo '</div>';
                            }
                            echo '</div>';
                        }
                        ?>
                    </div>
                    <div class="iwcc-buttons-sitelinks">
                        <div class="iwcc-buttons">
                            <a class="iwcc-save-selection iwcc-close uk-button uk-button-default"><?= $iwcc->texts['button_accept'] ?></a>
                            <a class="iwcc-accept-all iwcc-close uk-button uk-button-primary"><?= $iwcc->texts['button_select_all'] ?></a>
                        </div>
                        <div class="iwcc-sitelinks">
                            <?php
                            foreach ($iwcc->links as $v)
                            {
                                echo '<a href="' . rex_getUrl($v) . '">' . rex_article::get($v)->getName() . '</a>';
                            }
                            ?>
                        </div>
                    </div>
                    <a class="icon-cancel iwcc-close iwcc-close-box uk-hidden"></a>
                </div>
            </div>
        </div>
    </script>
<?php endif; ?>
.iwcc-background {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 1em;
	z-index: 999999;
	height: 100%;
	width: 100%;
	overflow: hidden;
	
	.iwcc-wrapper {
		background: #fff;
		position: relative;
		font-size: 13px;
		line-height: 16px;
		width: 100%;
		max-width: 60em;
		max-height: 100vh;
		overflow-y: auto;
		a {
			cursor: pointer;
		}
	}
		
	&.fr-version-bottom {
		left: auto;
		top: auto;
		right: auto;
		bottom: 0px;
		padding: 0;
		height: auto;
		width: 100%;
		
		background-color: white;
		color: #666;
		border-top: 1px solid black;
		box-shadow: #ccc 2px 2px 8px 2px;

		.iwcc-wrapper {
			background: transparent;
		}
	}
}

.iwcc-wrapper-inner {
	padding: 1em;
	position: relative;
}

.iwcc-hidden {
	display: none;
}
.iwcc-detail {
	margin-bottom: 1em;
}
.iwcc-headline {
	font-weight: bold;
	font-size: 1em;
	margin-bottom: 5px;
	span {
		font-weight: normal;
	}
}
.iwcc-text {
	margin: 0;
}
	
.iwcc-sitelinks {
	a {
		display: inline-block;
		margin: 0 0.5em;
		color: #999;
		text-decoration: none;
		&:hover {
			color: #404040;
			text-decoration: none;
		}
		&:first-child {
			margin-left: 0;
		}
	}
}

.iwcc-save-selection {
	color: #A5A5A5 !important;
}

.iwcc-close-box {
	position: absolute;
	right: 0.5em;
	top: 0.5em;
	display: block;
	padding: 0;
	margin: 0;
	border: 0;
	cursor: pointer;
	color: #999;
	font-size: 1.8em;
	background: none transparent;
	line-height: 1;
	text-decoration: none;
	&:before {
		margin: 0;
	}
	&:hover {
		color: #404040;
		background: none transparent;
		text-decoration: none;
	}
}

.iwcc-cookiegroups {	
	margin: 8px 0 8px;	
	border: 1px solid #ccc;
	padding: 4px 8px;
	border-radius: 4px 0 0 4px;
	&:after {
		content: "";
		clear: both;
		display: table;
	}
}
.iwcc-cookiegroup-checkbox, .iwcc-show-details {
	margin: 0;
	
	position: relative;
	display: inline-block;
	white-space: nowrap;
	
	padding: 4px 10px;
	line-height: 17px;
	&:hover {
		background-color: #EDEDED;
		a {
			text-decoration: none;
			color: #666;
		}
	}
}

.iwcc-cookiegroup + .iwcc-cookiegroup-title {
	margin-top: 1em;
}
.iwcc-cookie {
	margin-top: 0.5em;
	border-left: 2px solid #999;
	padding: 0.5em 0.5em 0.5em 1em;
	background: #f9f9f9;
	span {
		display: block;
	}
}

.iwcc-wrapper {
	input[type="checkbox"] {
		opacity: 0;
		height: 17px;
		width: 17px;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		padding: 4px 8px;
	}
	input[type="checkbox"] + label, a.omnMoreInfo {
		height: auto;
		width: auto;
		min-height: 17px;
		display: block;
		position: relative;
		z-index: 1;
		vertical-align: top;
		line-height: 17px;
		cursor: pointer;
		padding: 1px 0 0 22px;
	}
	input[type="checkbox"] + label::before, a.omnMoreInfo::before {
		position: absolute;
		background-repeat: no-repeat;
		background-position: left top;
		height: 17px;
		width: 17px;
		display:inline-block;
		padding: 0;
		top: 0;
		left: 0;
		z-index: 1;
		content: '';
	}
	input[type="checkbox"] + label::before {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAABvAAAAbwHxotxDAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAADZQTFRF/////wAA5Bsb4Rsb4xoa4Rwc4xsb4Rsb4hsb4hsb4hsb4yIi4yYm8ZSU98DA98HB98LC////D8BLZgAAAAp0Uk5TAAEmcH+As7Xm9myQZpsAAABqSURBVBhXZY9JDgMhDASrbWDy/98OwfYcQhRF1LGl3gRgLiMrEhDIhgComYXQcL7ELOEXP+6QXcKUhaySutU7eIvAfQVMjQZyr7KIgqWXAeoiVwG5hWbU+yNsS0rbcoQetcewc/pxjv/7D9JkQzloZ2NlAAAAAElFTkSuQmCC');
	}
	input[type="checkbox"]:checked + label::before {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAACFAAAAhQHi7P/BAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAFFQTFRF////AP8AVdVVZsxNZrtVbcJVar9ca8NXaMFZasFXa8JZasNYasFaa8JZacJYasJZasNZa8JZasJZasJZasJZasJZasJZasJZasJZasJZasJZEILHAQAAABp0Uk5TAAEGCg8VJCZCRnB/gLGztbq9xsjS5urw9vwUKFZoAAAAcklEQVQYV23PSxYCIRBD0dDaooDVfijFt/+FOmhEj5rZHSWRJMVi7lai1oTUAKClIElhYWQJkhIfSVJsQ5c7LaoMnzcHyLK3t1cwOdxOw7gc9tPxZVwGdZ5yN6YC1Fnd5LW27rpb7MMevSr9m/5z7uv+E2PDEYnbsX9CAAAAAElFTkSuQmCC');

	}
	input[type="checkbox"]:disabled, input[type="checkbox"]:disabled + label {
		cursor: not-allowed;
		color: #666666;
	}
	input[type="checkbox"]:disabled + label::before {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjgyQzgwRUFDNTc3MjExRTg5NEE3RjRDQUZDNDBDOTY3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjgyQzgwRUFENTc3MjExRTg5NEE3RjRDQUZDNDBDOTY3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODJDODBFQUE1NzcyMTFFODk0QTdGNENBRkM0MEM5NjciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODJDODBFQUI1NzcyMTFFODk0QTdGNENBRkM0MEM5NjciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4X18kuAAABNElEQVR42mL8//8/AzLo6+tTA1JRQGwMxSBwFoqXFRUV3UJWzwgzoKGhgZGPjy8fyGwDYk4G7OA7EFd9+vRpIlD9f7gBUM1bgHwvBuLANqAhPiBDmEA8qM3EagYBL6geBmYgA+Tn1UDMSoTG4yD7gJgDiO2PHz++mgkaYJxEaN4H9K4LEIdB+SA9kUxIIU1Is++fP39YGRkZm5DETdANeA1UsBuXZiDYCeSbI8kZM6EpjmBnZ/cB0puI0AwGTNAEAgMTvn37xs/BwREKShqENIP0ohugy8TEtBdkCDDFNRLQDAJnQAYsg6YwFEOASVqFgGaQnuXglAhUXADk9KMp+AtKJ3hiphDoygngQASlbVDyRFPATCApT4QFIigv/AelbZCpaN7B5uxCWD5AyY3kZmeAAAMApNGWSOsTA9oAAAAASUVORK5CYII=');
	}
	a.omnMoreInfo::before {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfiBQ8PJgNWUBqsAAABOUlEQVQoz3WRu0oDQRSGv5mNF0wQFBtBTNCIFxBsAmJlYSoLFaJiaSJGIS9gY55BC3VJXEshYlCwUouohfgARoQUYiNqsPGCJNkdi113EcxpzuH75z8XRuCG3tHwgB+4iw95VHplUz9+AAb0Fo/6YC+kJqoHT58q5jDhW2BX72yMVfaTZQHGKVG+eCHk+bgnjCZ2FldFdlKeUC9Ma0Sb3qLHBbcqLS5EH23ehiIblnmGAbiJjwLktI+SM65QnZVLJWvc2W3TznOm0gF4f4wmyxKaa07Db3eUXam0CTLbXjm0qUr96iIJQKtxlukSRp4Z11lQ2zKgVoi4Ty+FMcVR3TNR8zJ+zDlg8fxHecUErhI5CSql1kVvoJsNVzYCQS2o1sQyCM+UGdSKTuOxxPU/v2mVeLPvrxU9+gO/3Fu7J/nI4wAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wNS0xNVQxNTozODowMyswMjowMJG7RKYAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDUtMTVUMTU6Mzg6MDMrMDI6MDDg5vwaAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==');
	}
}

@media (max-width:35em){
	.iwcc-buttons {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column-reverse;
	}
	.iwcc-save-selection, .iwcc-accept-all {
		margin: 0em 0 0.5em 0;
	}
	.iwcc-buttons-sitelinks {
		text-align: center;
	}
}

@media (min-width: 35em) {
	.iwcc-cookiegroups {
		display: flex;
		flex-wrap: wrap;
		//justify-content: flex-end;		
		justify-content: flex-start;
	}
	.iwcc-buttons {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.iwcc-save-selection,
	.iwcc-accept-all {
		display: inline-block;
		margin: 0 0 0 0.5em;
	}
	
	.iwcc-buttons-sitelinks {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		flex-direction: row-reverse;
	}
}