[gelöst] Hintergrundfarbe transparent bei EU Cookie Compliance
Eingetragen von Neutronie (41)am 06.03.2016 - 23:15 Uhr in
Hallo zusammen,
ich verwende das EU Cookie Modul und bin damit ganz zufrieden (siehe hier). Nun wollte ich die Hintergrundfarbe, welche man unter Konfigurationen einstellen kann, transparent haben. Dazu habe ich die EU Cookie CSS-Datei angepasst und opacity global auf 0.7 gestetzt. Dieses Vorhaben war insoweit erfolgreich, als das die Hintergrundfarbe jetzt transparent ist, aber leider der Text und die Buttons ebenfalls - was ich nicht wollte. In allen möglichen Unterstrukturen habe ich opacitywieder auf 1 gesetzt, dies war leider nicht zielführend.
Hier meine CSS Datei. Ich danke sehr für Hilfe!
#sliding-popup {
display: block;
margin: 0;
padding: 0px;
right: 0;
text-align: center;
width: 100%;
z-index: 99999;
opacity: 0.7; /*changed by reinhard*/
}
.sliding-popup-bottom {
background: url('../images/gradient.png') center center scroll repeat-y transparent;
position: fixed;
opacity: 1; /*changed by reinhard*/
}
.sliding-popup-top {
background-color: #000;
position: relative;
}
#sliding-popup .popup-content {
background-color: transparent;
border: 0 none;
display: block;
margin: 0 auto;
padding: 0;
max-width: 80%;
}
#sliding-popup .popup-content #popup-buttons {
float: right;
margin: 0;
max-width: 40%;
opacity: 1; /*changed by reinhard*/
}
#sliding-popup .popup-content #popup-buttons button {
opacity: 1; /*changed by reinhard*/
cursor: pointer;
display: inline;
margin-right: 5px;
margin-top: 1em;
vertical-align: middle;
overflow: visible;
width: auto;
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#000;
font-family:arial;
font-weight:bold;
padding:4px 8px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
#sliding-popup .popup-content #popup-buttons button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
opacity: 1; /*changed by reinhard*/
background-color:#dfdfdf;
}
#sliding-popup .popup-content #popup-buttons button:active {
position:relative;
top:1px;
opacity: 1; /*changed by reinhard*/
}
#sliding-popup .popup-content #popup-text {
color: #fff;
float: left;
font-weight: bold;
margin: 5px 0;
text-align: left;
max-width: 60%;
}
#sliding-popup .popup-content #popup-text h2,
#sliding-popup .popup-content #popup-text p {
color: #fff;
display: block;
font-size: 16px;
font-weight: bold;
line-height: 1.4;
margin: 0 0 5px 0;
}
#sliding-popup .popup-content #popup-text p {
font-size: 12px;
}
@media screen and (max-width: 600px) {
#sliding-popup .popup-content {
max-width: 95%;
}
#sliding-popup .popup-content #popup-text {
max-width: 100%;
}
#sliding-popup .popup-content #popup-buttons {
float: none;
margin: 5px 0;
max-width: 100%;
opacity: 1; /*changed by reinhard*/
}
#sliding-popup .popup-content #popup-buttons button {
margin-bottom: 1em;
opacity: 1; /*changed by reinhard*/
}
}- Anmelden oder Registrieren um Kommentare zu schreiben
ist doch alles gut...
am 07.03.2016 - 05:44 Uhr
ist doch alles gut...
C.A.W. Webdesign
Buttons und Schrift
am 07.03.2016 - 06:47 Uhr
Nein, leider nicht. Die Buttons und die Schrift sind auch transparent, es ist quasi alles transparent. Das war nicht mein Ziel, es sollte so aussehen wie bei http://www.chip.de.
wenn es um diese seite geht
am 07.03.2016 - 08:53 Uhr
wenn es um diese seite geht http://www.waldorfkindergarten-aurich.de/ ist alles korrekt. die buttons und schrift haben eine opacity von 1 und sehen auch so aus
C.A.W. Webdesign
Es geht um die genannte
am 07.03.2016 - 09:25 Uhr
Es geht um die genannte Seite. Bei mir sind die Buttons und die Schrift sowohl mit dem Smartphone betrachtet als auch über IE/Firefox noch transparent. Das sieht man besonders gut, wenn man auf den Button "Mehr Details" im Cookie-Popup klickt, weil dann viel Text im Hintergrund vorhanden ist. Ich habe mal zwei Screenshots angefügt, einmal wie es bei meiner Seite ist und einmal wie ich es mir wünsche am Beispiel von chip.de.
Vielen Dank und Grüße!
Ratlos!?!?
am 08.03.2016 - 06:44 Uhr
Ich habe jetzt noch einmal mit verschiedenen Endgeräten und Browsern getestet - leider sind die Buttons und die Schrift nach wie vor transparent - was man bei der Seite je nach Endgerät durch den weißen Hintergrund tatsächlich nicht immer so deutlich merkt.
Gibt es noch eine andere Möglichkeit, wo man die Transparenz von Buttons und Schrift wieder auf 1 zurücksetzten kann?
Danke für Eure Hilfe!
das mit opacity geht ja auch
am 08.03.2016 - 07:37 Uhr
das mit opacity geht ja auch nicht. nimm doch wie bei chip eine transparente hintergrundfarbe für den div! damit klappts
C.A.W. Webdesign
Was genau muss ich da tun?
am 08.03.2016 - 08:48 Uhr
Was genau muss ich da tun? Etwas in den PHP-Dateien von EU Compliance ändern? Ich bin leider noch nicht ganz so geübt in diesen Dingen.
im css überschreiben wie du
am 08.03.2016 - 09:12 Uhr
im css überschreiben wie du das oben schon gemacht hast. evtl. ein !important nutzen
C.A.W. Webdesign
Vielleicht bin ich
am 08.03.2016 - 09:31 Uhr
Vielleicht bin ich tatsächlich etwas schwer von Begriff. Meine Strategie war ja bisher, opacity global auf 0.7 zu setzten und dann in allen Klammer wieder auf 1 - in der Hoffnung, dass ich Schrift und Buttons damit erwische und gerade diese dann nicht mehr transparent sind.
Ich habe den Vorschlag mit !div oder !important leider nicht verstanden, daher würde ich mich sehr über konkrete Hinweise / Schritte freuen. Wie gesagt, ich bin noch Anfänger..
Wenn Du ein DIV
am 08.03.2016 - 10:43 Uhr
Wenn Du ein DIV (halb)transparent machst, wird auch der ganze Inhalt im DIV transparent, sonst wäre es nicht wirklich logisch. Deswegen solltest Du mit den Farben arbeiten und nicht mit der Transparenz von ganzen DIVs.
In deinem Fall wäre es (um es Chip-ähnlich zu machen):
#sliding-popup {
background: rgba(32,41,37,0.8);
}
#popup-text {
text-shadow: 1px 1px #000;
}
Und falls das nicht klappt, solltest Du, wie CAW schon sagte, ein "!important" am Ende hinzufügen. Also:
#sliding-popup {
background: rgba(32,41,37,0.8) !important;
}
#popup-text {
text-shadow: 1px 1px #000 !important;
}
LG Piotr
www.it-stent.de
Perfekt!
am 08.03.2016 - 11:29 Uhr
Super, herzlichen Dank, das hat mit
!importantgeklappt!