Author Topic: Cookie - Nutzung Bestätigen  (Read 240 times)

Offline derschutzhund

  • Posts: 165
Cookie - Nutzung Bestätigen
« on: November 04, 2018, 11:22:14 AM »
Hallo zusammen,

ich suche eine einfache Möglichkeit auf zwei älteren HPs, die mit WB 2.8.1 laufen und die in ca. 1 Jahr erneuert werden sollen, auf die Schnelle noch diesen "Bestätigungsbutton" für die Cookienutzung einzubauen.
Die Seite soll dann wohl von einer Firma aufgebaut werden aber bis dahin brauche ich halt recht schnell eine Lösung ohne die Seite auf eine neuere WB-Version zu ändern.

Diesen Beitrag habe ich dazu gefunden: https://forum.WebsiteBaker.org/index.php/topic,28685.25.html
Damit schaffe ich es, dass am Ende der Startseite ein X und ein Text angezeigt wird der verschwindet wenn man das X anklickt. Wird die Seite wieder neu aufgerufen, ohne das Cookie im Browser zu löschen, wird der Infotext aber wieder angezeigt.
So bin ich vorgegangen:
Bin ins Templateverzeichnis und habe angelegt
/js
da hinein geladen CookieNotice.min.js und zusätzlich zum testen auch CookieNotice.js

egal welche der beiden Dateien ich aufrufe, macht keinen Unterschied, was ja auch erst mal ok ist!

/cookie
da hinein geladen CookieNotice.css

In der index.php vor der Zeile </body>

<!--
 CookieNotice.html
 copyright: Manuela v.d.Decken <manuela@isteam.de>
 author:    Manuela v.d.Decken <manuela@isteam.de>
 license:   http://www.gnu.org/licenses/gpl.html   GPL License
 version:   0.0.1
-->
    <div id="CookieNotice">
       <div id="CookieNoticeBar">
            <span id="CookieNoticeClose">X</span>
            <span id="CookieNoticeInfo">Die Seite verwendet Cookies! Bitte der Nutzung zustimmen!</span>
        </div>
    </div>
    <script charset="utf-8" type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>js/CookieNotice.min.js"></script>


In der Style.css versuche ich das cookiecss so zu laden aber ich glaube hier liegt auch ein Hauptfehler

@import "cookie/CookieNotice.css";

Der Infotext wird ganz unten angezeigt, hat keinen Kasten und auch keinen vernünftigen Button.
Wenn ich das X anklicke dann verschwindet der Text kommt aber nach dem neuladen der Seite sofort wieder.
Normal dürfte er ja erst kommen wenn ich das Cookie im Browser lösche oder?

Wäre schön, wenn mir jemand helfen könnte!

LG

Wolfgang





Offline DarkViper

  • Forum administrator
  • *****
  • Posts: 2976
  • Gender: Female
Re: Cookie - Nutzung Bestätigen
« Reply #1 on: November 04, 2018, 12:22:28 PM »
In der Style.css versuche ich das cookiecss so zu laden aber ich glaube hier liegt auch ein Hauptfehler

@import "cookie/CookieNotice.css";

Der Infotext wird ganz unten angezeigt, hat keinen Kasten und auch keinen vernünftigen Button.
Wenn ich das X anklicke dann verschwindet der Text kommt aber nach dem neuladen der Seite sofort wieder.
Normal dürfte er ja erst kommen wenn ich das Cookie im Browser lösche oder?
Im WB-Wiki habe ich eine genaue Beschreibung der Einbindung mitsamt dem herunterladbaren Code hinterlassen.
Da der Code schon auf WB-2.12.1 ff ausgelegt ist, muss bei älteren Versionen das 
<?php echo oReg.TemplateUrl?>js/CookieNotice.min.js
noch auf
<?php echo TEMPLATE_DIR?>/js/CookieNotice.min.js
geändert werden.
Das Cookie wird nach 7 Tagen (einstellbar) gelöscht und muss erneut bestätigt werden.
Die Cookie-Notice ist auf WB zugeschnitten. Da WB derzeit noch zwingend zumindest ein SessionCookie anlegt, blockiert die Seite, wenn man mit Cookies nicht einverstanden ist.
Könnte man einfach auf der Seite weitermachen ohne das Einverständnis zu geben, würde sich der/die/das SeitenbetreiberIn strafbar machen, da er/sie/es gegen den Willen des/der BesucherIn ein Cookie anlegt.  8-)

Manuela
(gegen meine persönliche Überzeugung mal ausnahmsweise -hoffentlich- korrekt gegendert)
« Last Edit: November 04, 2018, 12:36:41 PM by DarkViper »
Der blaue Planet - er ist nicht unser Eigentum - wir haben ihn nur von unseren Nachkommen geliehen

"You have to take the men as they are… but you can not leave them like that !" :-P
Das tägliche Stoßgebet: Oh Herr, wirf ihnen Hirn vom Himmel !

Offline jacobi22

  • Posts: 5201
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: Cookie - Nutzung Bestätigen
« Reply #2 on: November 04, 2018, 12:36:16 PM »
probier mal

Code: [Select]
@import url("cookie/CookieNotice.css");
Probleme sind da, um sie zu lösen, nicht, um nach Ausreden zu suchen.

Offline derschutzhund

  • Posts: 165
Re: Cookie - Nutzung Bestätigen
« Reply #3 on: November 04, 2018, 05:06:05 PM »
Nach der Beschreibung im WB-Wiki bin ich vorgegangen!

Quote
@import url("cookie/CookieNotice.css");

Das teste ich mal!

LG

Wolfgang

Offline jacobi22

  • Posts: 5201
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: Cookie - Nutzung Bestätigen
« Reply #4 on: November 04, 2018, 05:12:03 PM »
die import-Anweisung erwartet natürlich eine gültige URL in relativer Form, ausgehend von der Datei, in die der import eingefügt wurde. Mit dieser Struktur im Template

/templateordner
    /css
    /cookie
    /images
    /js
    index.php

und einer style.css im css-Ordner würde der Link wie oben gepostet natürlich nicht mehr passen
Probleme sind da, um sie zu lösen, nicht, um nach Ausreden zu suchen.

Offline derschutzhund

  • Posts: 165
Re: Cookie - Nutzung Bestätigen
« Reply #5 on: November 04, 2018, 05:24:16 PM »
Hab es getestet. Hat nichts geändert.
Das mit dem relativen Pfad sollte doch passen wenn die Verzeichnisstruktur so aussieht:

/templates
     /esc_lango
              style.css
     /cookie
                 CookieNotice.css

Hab hier mal die style.css
Code: [Select]
body {
margin:0 auto;
padding:0;
font:76% Verdana,Tahoma,Arial,sans-serif;
background:#ccc url(img/bg.jpg) top center repeat-y;
color:#3a3a3a;
}

#wrap {
background-color:#ffffff;
color:#303030;
margin:0 auto;
padding:0px 0px;
width:920px;
}

/***** Header *****/

#header {
color:#fff;
background:#003366;
height: 130px;
padding:0;

@import url("cookie/CookieNotice.css");


}
#toolbox {
color:#fff;
background:#fff url(./i/bgadmin.png) repeat-x;
padding:0;
}
#toolbar {
color:#fff;
background:#003366 url(./i/toppnav.jpg) repeat-x;
height: 28px;
padding-top: 0px;
}

.toolbar {
color:#fff;
background:#fff url(./i/toppnav.jpg) repeat-x;
height: 25px;
padding-top: 4px;
}
.toolbar a{
color:#fff;
font-weight: bold;
}
#topbar {
color:#fff;
background: #003366 url(i/h1.jpg) bottom center repeat-x;
height: 22px;
padding:0;
}
    #topbar ul {
          margin:0;
          padding: 0px 10px 0 10px;
          list-style:none;
      }
    #topbar li {
      display:inline;
      margin:0;
      padding:0;
      }
    #topbar a {
      float:left;
      color:#fff;
      background: url("./i/tableft1.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #topbar a span {

      color:#fff;
      font-weight: bold;
      float:left;
      display:block;
      background:url('./i/point.gif') no-repeat right top;
      padding:5px 10px 4px 6px;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #topbar a span {float:none;}
    /* End IE5-Mac hack */
    #topbar a:hover span {
      color:#627EB7;
      }
    #topbar a:hover {
      background-position:0% -42px;
      }
    #topbar a:hover span {
      background-position:100% -42px;
      }

      #topbar #current a {
              background-position:0% -42px;
      }
      #topbar #current a span {
              background-position:100% -42px;
      }
#header h1 {
font-size:2.5em;
font-weight:normal;
letter-spacing:-2px;
margin:0 0 4px 15px;
padding:15px 0 0;
}

#header h1 a,#header h1 a:hover {
padding:0;
}

#header p {
font-size:1.1em;
letter-spacing:-1px;
margin:0 0 5px 15px;
padding:0 0 0 3px;
}

/***** Left sidebar *****/
#avmenu {
clear:left;
background:#f4f4f4;
float:left;
width:130px;
border-right: 1px solid #dadada;
padding: 1px;
margin-top: 7px;
}

.arrowlistmenu{
color: #003366;

}

.arrowlistmenu ul{
list-style-type: none;
margin: 0;
padding-left: 5px;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A70303;
background: url(./i/point.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0 ;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
font-size: 90%;
}
.arrowlistmenu ul ul li a{
color: #A70303;
background: url(./i/pointo.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0 ;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
font-size: 80%;
}

.arrowlistmenu ul ul ul li a{
color: #A70303;
background: url(./i/pointoo.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0 ;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
font-size: 80%;
}
.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

/***** Right sidebar *****/

#extras {
float:right;
width:150px;
margin: 4px 3px 10px 0;
border-left: 1px solid #ccc;
padding: 0px;
font-size: 0.9em;
background-color: #F2F2F2;
}

#extras p, #extras ul {
margin: 0 0 1.5em 0;
line-height: 1.0em;
padding:0 0px ;
}

#extras a {
font-weight:bold;
}

#extras li {
list-style:none;
margin:0 0 6px 0;
padding:0;

}

#extras h2 {
font-size:1.6em;
font-weight:normal;
margin:0 0 6px 0;
letter-spacing:-1px;
}
.blau {
font-size:1.2em;
color:#003366 ;
background: #ccc url(./i/bgright.jpg) repeat-x;
margin-top: 0px;
padding: 10px 5px 10px 5px;
}
.gelb {
font-size:1.2em;
color:#003366 ;
background: #ccc url(./i/bgrightgelb.jpg) repeat-x;
padding: 10px 5px;
width: 140px;
}
.gruen {
font-size:1.2em;
color:#003366 ;
background: #ccc url(./i/bgrightgreen.jpg) repeat-x;
padding: 10px 5px;
}
.blau2 {
font-size:1.2em;
color:#003366 ;
background: #003366 url(./i/bgrightblue.jpg) repeat-x;
padding: 10px 5px;
}
.blau3 {
font-size:1.2em;
color:#003366 ;
background: #003366 url(./i/bgrightdblue.jpg) repeat-x;
padding: 10px 5px;
}
.grau {
font-size:1.2em;
color:#003366 ;
background: #003366 url(./i/bgrightgrey.jpg) repeat-x;
padding: 10px 5px;
}
.rot {
font-size:1.2em;
color:#003366 ;
background: #003366 url(./i/bgrightred.jpg) repeat-x;
padding: 10px 5px;
}
.orange {
font-size:1.2em;
color:#003366 ;
background: #003366 url(./i/bgrightorange.jpg) repeat-x;
padding: 10px 5px;
}
.lila {
font-size:1.2em;
color:#003366 ;
background: #003366 url(./i/bgrightlila.jpg) repeat-x;
padding: 10px 5px;
}

/***** Main content *****/

#content {
margin:10px 165px 10px 150px;
padding-right:10px ;
line-height:1.5em;
text-align:left;
}

#contentwide {
margin:10px 0 10px 150px;
padding:0;
line-height:1.5em;
text-align:left;
}

#contentfull {
margin:10px 10px 10px 10px;
padding:2px 0 0 0;
line-height:1.5em;
text-align:left;
}

#content h1, #contentwide h1, #contentfull h1 {
font-size: 14px ;
letter-spacing:-1px;
font-weight:normal;
margin:8px 0 10px 0;
padding:0;
color: #23699A;
}
#content h2, #contentwide h2, #contentfull h2 {
font-size: 13px ;
letter-spacing:-1px;
font-weight:normal;
margin:8px 0 10px 0;
padding:0;
color: #003366;
}

#content h3, #contentwide h3, #contentfull h3 {
font-size:1.5em;
font-weight:normal;
margin:6px 0 6px 0;
padding:0;
}

#content img, #contentwide img, #contentfull img {
padding:1px;
display:inline;
background:#cccccc;
color:#303030;
border:4px solid #f0f0f0;
}

#content a, #contentwide a, #contentfull a {
font-weight:bold;
}
#content p, #contentwide p, #contentfull p {
padding-left: 8px;
}

#content ul, #content ol,
#contentwide ul, #contentwide ol,
#contentfull ul, #contentfull ol {
margin:0 0 16px 20px;
padding:0;
}

#content ul ul, #content ol ol,
#contentwide ul ul, #contentwide ol ol,
#contentfull ul ul, #contentfull ol ol {
margin:2px 0 2px 20px;
}

#content li, #contentwide li, #contentfull li {
margin:0 0 2px 10px;
padding:0 0 0 4px;
}


/***** Footer *****/

#footer {
clear:both;
margin:0 auto;
padding:8px 0;
border-top:2px solid #dadada;
width:760px;
text-align:center;
color:#808080;
background-color:#ffffff;
font-size:0.9em;
}

#footer p {
padding:0;
margin:0;
}

#footer a {
color:#003366;
background-color:inherit;
text-decoration:none;
}

#footer a:hover {
text-decoration:underline;
}

/***** Various tags *****/
.lool a {
      color:#fff;
      background:  url("tableft1.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      font-weight:bold;
      }
.pagetitel h2{
font-size: 15px;
color: #003366;

}

a {
text-decoration:none;
color:#003366;
background-color:inherit;
}

a:hover {
text-decoration:underline;
color:#286ea0;
background-color:inherit;
}

a img {
border:0;
}

p {
margin:0 0 16px 0;
}

blockquote {
border-top:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
border-bottom:1px solid #d8d8d8;
border-left:4px solid #cccccc;
margin:16px;
padding:7px 7px 7px 11px;
background:#f4f4f4 url(img/menubg.gif) bottom left repeat-x;
color:#505050;
}

blockquote p {
font-size:1.1em;
line-height:1.3em;
margin:0;
}

/***** Table styles *****/

table {
margin:0 0 16px 0;
padding:0;
line-height:1.3em;
border-collapse:collapse;
border:1px solid #d8d8d8;
}

caption {
text-align:left;
font-size:1.5em;
font-weight:normal;
margin:0;
padding:6px 0 8px 0;
}

th {
padding:7px;
text-align:left;
background:#eaeaea url(img/menubg2.gif) bottom left repeat-x;
color:#505050;
}

td {
padding:7px;
font-size:0.9em;
text-align:left;
background:#f4f4f4 url(img/menubg.gif) bottom left repeat-x;
color:#303030;
}

/***** Form styles *****/

.button {
border-top:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:4px solid #cccccc;
margin:0 0 15px 0;
padding:7px 7px 7px 11px;
background:#fff url(img/menffubg.gif) bottom left repeat-x;
color:#505050;
font-weight:bold;
padding:4px;

}

input, textarea {
border:1px solid #cccccc;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:1em;
margin:0;
padding:4px;
}

label {
margin:2px;
}

input {

}

textarea {
width:400px;
}

/***** Search box *****/

#searchbox {
padding:1px;
margin:0px 0 1px 10px;
}

#searchform {
background:#ffffff;
border:1px solid #ccc;
color:#505050;
font-size:0.9em;
padding:2px;
width:116px;
}
#searchsubmit {
background: url(./i/toppnav.png) repeat-x;
border:1px solid #ccc;
color:#fff;
font-size:0.9em; font-weight:bold;
padding:1px;
width:50px;
}

#searchbox label {
display:none;
}

/***** Various classes *****/

.left {
margin:10px 10px 5px 0;
float:left;
}

.right {
margin:10px 0 5px 10px;
float:right;
}

.announce {
margin:10px 0 10px 0;
padding:10px 10px 5px 10px;
width:105px;
color:#505050;
background:#f4f4f4 url(img/menubg.gif) bottom left repeat-x;
border-top:1px solid #d8d8d8;
border-right:1px solid #d8d8d8;
border-bottom:1px solid #d8d8d8;
border-left:4px solid #cccccc;
line-height:1.3em;
}

.announce a {
font-weight:bold;
}

.announce p {
font-size:0.9em;
}

.announce h2 {
margin:0 0 10px 0;
padding:0;
}

#avmenu .announce {
width:125px;
}

.textright {
text-align:right;
margin:-10px 0 4px 0;
}

.center {
text-align:center;
}

.small {
font-size:0.8em;
}

.large {
font-size:1.3em;
}

.bold {
font-weight:bold;
}

.highlighted {
padding:3px;
background-color:#f0f0f0;
color:#303030;
border:1px solid #b0b0b0;
}

.hide {
display:none;
}
.pagetitle{
font-size: 15px;
color: #666;
padding-left: 12px;
border-bottom: 1px solid #ccc;
padding-bottom:2px;
margin-right: 12px;
margin-bottom:10px;
font-weight: bold;


}

Offline jacobi22

  • Posts: 5201
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: Cookie - Nutzung Bestätigen
« Reply #6 on: November 04, 2018, 05:48:53 PM »
Quote
Das mit dem relativen Pfad sollte doch passen wenn die Verzeichnisstruktur so aussieht:

/templates
     /esc_lango
              style.css

wenn deine style.css im Ordner esc_lango liegt, mußt du erst eine Etage runter, um in den nächsten Ordner zu kommen.
also
Code: [Select]
@import url("../cookie/CookieNotice.css");
Alternative wäre ein absoluter Pfad - dann wäre es egal, in welchem Ordner es liegt

Code: [Select]
@import url("https://deineDomain.de/templates/cookie/CookieNotice.css");
P.S.: so wie der Pfad korrekt ist, erscheint auch der Balken, sofern der Code für die cookie-Notice dem im Wiki entspricht
Probleme sind da, um sie zu lösen, nicht, um nach Ausreden zu suchen.

Offline derschutzhund

  • Posts: 165
Re: Cookie - Nutzung Bestätigen
« Reply #7 on: November 04, 2018, 06:08:08 PM »
Hat nichts geändert.

Ist es normal, dass die Zeile @import url("../cookie/CookieNotice.css");  grau eingefärbt ist.
Grau ist doch normal ein Kommentar oder?

Offline jacobi22

  • Posts: 5201
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: Cookie - Nutzung Bestätigen
« Reply #8 on: November 04, 2018, 06:45:54 PM »

kommt auf den Editor an  ;-)

aber schau mal....

Quote
#header {
color:#fff;
background:#003366;
height: 130px;
padding:0;

@import url("cookie/CookieNotice.css");


}

fällt dir was auf??

Wenn nicht, du bist mit deiner Zeile in der Definition der ID header, das muß alleine stehen, also so

Code: [Select]
@import url("cookie/CookieNotice.css");

#header {
color:#fff;
background:#003366;
height: 130px;
padding:0;
}
Probleme sind da, um sie zu lösen, nicht, um nach Ausreden zu suchen.

Offline derschutzhund

  • Posts: 165
Re: Cookie - Nutzung Bestätigen
« Reply #9 on: November 04, 2018, 09:23:13 PM »
Hat leider keine Änderung gebracht!

Code: [Select]
/***** Header *****/

@import url("../cookie/CookieNotice.css");

#header {
color:#fff;
background:#003366;
height: 130px;
padding:0;

}

Auch mit @import url("cookie/CookieNotice.css"); ändert sich nichts.
Die Infozeile mit "X...." wird weiterhin ganz unten angezeigt.

Offline derschutzhund

  • Posts: 165
Re: Cookie - Nutzung Bestätigen
« Reply #10 on: November 04, 2018, 10:36:39 PM »
Kanns vielleicht an dieser Zeile in der index.php liegen?
Quote
    <script charset="utf-8" type="text/javascript" src="<?php echo TEMPLATE_DIR; ?>/js/CookieNotice.js"></script>

Offline jacobi22

  • Posts: 5201
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: Cookie - Nutzung Bestätigen
« Reply #11 on: November 05, 2018, 01:14:40 AM »
Quote
Kanns vielleicht an dieser Zeile in der index.php liegen?

am besten, du machst mal einen Screenshot von der Ordnerstruktur in deinem templates-Ordner. Der im Wiki beschriebene Unterordner /js mit der Datei CookieNotice.min.js soll nach dieser Beschreibung ein Unterordner des Templates sein, in dem es eingebunden ist.
Du verwendest da aber einen separaten Ordner außerhalb deines Templates-Ordners, das macht es unnötig kompliziert

P.S.: im Ordner templates/DefaultTemplate (ab WB 2.10.0) ist ein funktionierendes Beispiel mit all diesen Dateien
Probleme sind da, um sie zu lösen, nicht, um nach Ausreden zu suchen.

Offline derschutzhund

  • Posts: 165
Re: Cookie - Nutzung Bestätigen
« Reply #12 on: November 05, 2018, 05:21:24 PM »
So siehts aus:
Code: [Select]
/templates/esc_lango
  edit.png
  folder.png
  index.php
  info.php
  infoold.php
  logout.png
  media.png
  old style.php
  style.css
  /cookie
  CookieNotice.css
  /i
  arrowbullet.png
  bgadmin.png
  bgleft.png
  bgright.jpg
  bgrightblue.jpg
  bgrightdblue.jpg
  bgrightgelb.jpg
  bgrightgreen.jpg
  bgrightgrey.jpg
  bgrightlila.jpg
  bgrightorange.jpg
  bgrightred.jpg
  blau.jpg
  blue.jpg
  button.gif
  button2.png
  gruen.jpg
  h1.jpg
  h2-orig.jpg
  h2.gif
  h2.jpg
  header.jpg
  header11.jpg
  header2.jpg
  header22.jpg
  header22d.jpg
  navi.png
  point.png
  pointo.png
  pointoo.png
  titlebar-active.png
  titlebg.jpg
  toppnav.jpg
  /img
  1menubg.gif
  1menubg2.gif
  bg.gif
  bg.jpg
  button.png
  cc.gif
  header22d.jpg
  /js
  CookieNotice.js
  CookieNotice.min.js

Offline jacobi22

  • Posts: 5201
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: Cookie - Nutzung Bestätigen
« Reply #13 on: November 05, 2018, 06:27:15 PM »
in den <head>-Bereich der index.php des Templates esc_lango

Code: [Select]
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR?>/cookie/CookieNotice.css" media="screen" />
und ganz nach unten vor dem schließenden </body> diese Zeile

Code: [Select]
<script src="<?php echo TEMPLATE_DIR?>/js/CookieNotice.min.js"></script>
Solltest du nicht klar kommen, meld dich per PN oder Mail, dann hätte ich gern mal das ZIP des Templates

P.S.: ggf auch mit anderen Browsern testen, ggf spielt hier auch der Browser-Cache mit rein
Probleme sind da, um sie zu lösen, nicht, um nach Ausreden zu suchen.

Offline derschutzhund

  • Posts: 165
Re: Cookie - Nutzung Bestätigen
« Reply #14 on: November 06, 2018, 02:30:19 PM »
Mit den zwei Zeilen sieht es nun schon mal richtig gut aus!
Die Anpassung der "Infobox" macht man dann in der CookieNotice.css ?

Durch die beiden Zeilen entfällt doch das eine oder andere aus der Originalbeschreibun g oder?
Was kann ich denn da an gemachten Einträgen etc. wieder löschen?

Habe mal ein Foto der Infobox angehängt. Ich nehme an so soll es aussehen?

Erst mal einen dicken Dank an dich für deine Hilfe!!! (Y)

LG

Wolfgang

Offline hgs

  • Betatester
  • **
  • Posts: 920
    • EFG MG
Re: Cookie - Nutzung Bestätigen
« Reply #15 on: November 06, 2018, 02:56:13 PM »
Meines Erachtens ist diese Cookie-Bestätigung so abmahnwürdig, weil der Link zu Datenschutzseite (gibt es diese überhaupt) und Impressum nicht möglich ist.
Auf dieser Seite habe ich das so eingebaut
https://umojasingers.de/

Das ganze kann im css geändert werden.
Hier mal die CookieNotice.css von dieser Seite
Code: [Select]
/** ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 * CookieNotice.css
 *
 * @category     Template
 * @copyright    Manuela v.d.Decken <manuela@isteam.de>
 * @author       Manuela v.d.Decken <manuela@isteam.de>
 * @license      http://www.gnu.org/licenses/gpl.html   GPL License
 * @version      0.0.1
 * @lastmodified 19.09.2015
 * @since        File available since 04.07.2015
 * @description  switch off the cookie notice for n days
    (by default after 7 days the cookie will be removed again)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    format the cookie notice
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#CookieNotice {
    box-sizing: border-box;
    position: fixed;
    left: 0; /*top: 0;*/ right: 0; bottom: 0;
    padding: 0 15px 15px 15px/*15px*/;
   /* background-color: rgba(120, 120, 120, 0.6);*/
    display: none;
    z-index: 9999;
}
#CookieNoticeBar {
    position: relative;
    top: 30%;
    background-color: rgba(244,239,195,0.8);
    text-align: center;
    color: #777;
    font-size: 0.9em;
    padding: 6px 4px;
    border-radius: 6px;
    border: solid 1px red;
}
#CookieNoticeClose {
    float:right;
    background: #ff0000;
    color: #ffffff;
    font-weight: bold;
    padding: 0 10px;
    width: auto;
    cursor: pointer;
    border-radius: 4px;
}
#CookieNoticeInfo {}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
Damit ist die Seite weiter bedienbar,
den Link zum Datenschutz habe ich im Template so eingebaut.

Auszug aus der index.php
Code: [Select]
<div id="CookieNotice">
    <div id="CookieNoticeBar">
        <span id="CookieNoticeClose">Ich stimme zu</span>
        <span id="CookieNoticeInfo">Diese Webseite benutzt Cookies. Wenn Sie die Webseite weiter benutzen, stimmen Sie zu! Mehr Info gibt es <a href="https://umojasingers.de/pages/datenschutz.php/" title="Datenschutz">hier</a></span>
    </div>
</div>
<script charset="utf-8" type="text/javascript" src="<?php echo TEMPLATE_DIR?>/js/CookieNotice.js"></script>

</body>

Wenn ich das richtig beim Datenschutzseminar verstanden habe, muss Impressum und Datenschutz immer erreichbar sein. Ein Cookiehinweis darf das nicht verhindern.

Ich weiß, da beißt sich die Katze in den Schwanz, Datenschutz muß erreichbar sein und der cookie wird gesetzt ohne das der Webseitenbesucher zugestimmt hat.
LG Harald

"Fange nie an, aufzuhören - höre nie auf, anzufangen." Marcus Tullius Cicero (106-43 v.Chr.)

Offline derschutzhund

  • Posts: 165
Re: Cookie - Nutzung Bestätigen
« Reply #16 on: November 06, 2018, 03:48:23 PM »
1. Eine Datenschutzerklärun g ist vorhanden bzw. wird gerade überarbeitet
2. Impressum ist natürlich vorhanden

Die sauberste Lösung wäre ja, wenn der User aus der Cookiezeile zwei Links hat, einen zur Datenschutzerklärun g und eine zum Impressum was ja sicher machbar ist.
Alles andere ist wie bis jetzt nicht erreichbar bzw. wird erst nach dem Anklicken des Besätigungsbuttons erreichbar.
Lässt sich das realisieren oder denke ich da falsch?

LG

Wolfgang

Offline jacobi22

  • Posts: 5201
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: Cookie - Nutzung Bestätigen
« Reply #17 on: November 06, 2018, 05:11:40 PM »
Die Problematik ist so schwer nicht zu verstehen

Punkt 1: die Kontaktdaten des Verantwortlichen müssen jederzeit lesbar sein. Werden personen-relevante Datei in Cookies gespeichert, dann auch die Datenschutzerklärun g. Und das auch ohne Zustimmung zur Cookienutzung.
Ob diese Daten in einer Seite liegen, die den Titel "Impressum" hat oder gleich auf der Startseite, ist dabei nicht von Belang. Es gibt keine Vorschrift über die Benutzung eines Impressums, dieser Name hat sich eingebürgert und hilft bei der Suche auf der Webseite, aber einen Zwang zu einem Impressum gibt es nicht. Nur als Einwand, ein richtiger OnePager hat auch kein separates Impressum   :wink:

Punkt 2: 'In der Theorie soll eine Seite mit relevanter Cookie-Verwendung nicht bedienbar sein, das heißt, der Gast soll keine relevanten Inhalte sehen können, bei denen persönliche Daten des Gastes verwendet werden, die eine spätere Identifikation des Besuchers z.b. an Hand von eingegebenen oder automatisch ermittelten Daten ermöglichen. Dazu zählen u.a. Registrierungen, Formulare, aber auch eine einfache GoogleMap. Selbst für unser recht einfaches Gästebuch gab es mal eine geo-IP-Erweiterung (ich weiß, wo dein Haus steht...)
Nun gibt es aber solche und solche Cookies. Der WB-Cookie, der bereits beim Betreten der Seite gesendet wird und nichts weiter als eine ID enthält, zählt zu den SystemCookies, für die es eigentlich keine Zustimmung benötigt. Eine einfache Seite mit reinen wysiwyg-Inhalten benötigt keinen Cookie-Hinweis. Nun kommt aber der Cookie-Wahn und die Abmahnangst und jeder muß solch Hinweis haben. Dazu kommt, das es aktuell keine Möglichkeit gibt, den Cookie-Hinweis explizit da darzustellen, wo es in Frage käme, Formulare, News mit Kommentar, Gästebücher, eben alles, wo Usereingaben erfolgen. Es würde auch ziemlich nerven, auf jeder Seite eine neue Einwilligung zu geben, darum erscheint der Hinweis automatisch beim Betreten irgendeiner Seite des Projekts.

Was folgt aus Punkt 1 + 2?
Man verhindert mit dem Cookie-Hinweis die Bedienung des Hauptmenüs oder man nervt den Gast, bis er sein Okay gibt
Die Verhinderung erfolgt durch Platzierung des Cookie-Hinweises über dem Hauptmenü (dann sind aber Links zu impressum-ähnlicher Seite und ggf der Datenschutzerklärun g an anderer Stelle notwendig, z.b. im Hinweisbalken oder in einem Footermenü. Die ganz Harten verwenden ein sog. Overlay - eine Art Folie, die über der Seite liegt - da geht ohne Zustimmung garnichts mehr. Manch einer färbt dieses Overlay dann auch noch ein, z.b. halbtransparent, so, das man nicht mal mehr etwas lesen kann.
In meinen Projekten verwende ich meist einen Mix, recht auffällig groß und oben, zwei Zeilen Text über dem Hauptmenü gelegt, Links zu Impressum und Datenschutz sowohl im Hinweis wie auch im Footermenü. Auf anderen Seiten dann mal unten, ist eher ein Zeitproblem, überall die gleiche Version nachzurüsten.

Die Position des Hinweisbalkens läßt sich über CSS verschieben
#CookieNoticeBar hat original den Wert top:40%;
mit top:0; zwing ich sie an den oberen Rand, mit bottom:0; statt top:xx; zwing ich sie nach unten
mit height: 100%; erzeuge ich ein Overlay über die komplette Höhe

Quote
Die sauberste Lösung wäre ja, wenn der User aus der Cookiezeile zwei Links hat, einen zur Datenschutzerklärun g und eine zum Impressum was ja sicher machbar ist....
Lässt sich das realisieren oder denke ich da falsch?

Nein, ist nicht falsch, aber das muß man von Projekt zu Projekt sehen. Ich habe z.B. auch Seiten, in denen die Datenschutzerklärun g Teil des Impressums ist. Für dich siehe unten

Zum Ändern der Inhalte einfach den von hgs geposteten Code abändern und die hier verwendeten WbLinks entsprechend anpassen mit den Page-ID's der betreffenden Seiten

Code: [Select]
<div id="CookieNotice">
    <div id="CookieNoticeBar">
        <span id="CookieNoticeClose">Ich stimme zu</span>
        <span id="CookieNoticeInfo">Diese Webseite benutzt Cookies. Wenn Sie die Webseite weiter benutzen, stimmen Sie zu! Mehr Info gibt es <a href="[wblink2]" title="Datenschutz">hier</a> und in unserem  <a href="[wblink1]" title="Datenschutz">Impressum</a></span>
    </div>
</div>
<script charset="utf-8" type="text/javascript" src="<?php echo TEMPLATE_DIR?>/js/CookieNotice.js"></script>

Für mehrsprachige Seiten sollte man erst die aktuelle Seitensprache ermitteln und danach entsprechend umschalten
Probleme sind da, um sie zu lösen, nicht, um nach Ausreden zu suchen.

Offline derschutzhund

  • Posts: 165
Re: Cookie - Nutzung Bestätigen
« Reply #18 on: November 07, 2018, 10:19:15 PM »
Funktioniert soweit wie gewünscht!
Eine Kleinigkeit nur noch.
Wie kann ich das Infofeld waagerecht genau zentrieren?
Die Breite hab ich schon auf 750 eingestellt aber jetzt sitzt es links fast am Rand und es sollte mittig sitzen.

LG

Wolfgang

Offline jacobi22

  • Posts: 5201
  • Gender: Male
  • Support also via PM or EMail
    • Jacobi22
Re: Cookie - Nutzung Bestätigen
« Reply #19 on: November 07, 2018, 11:14:02 PM »
Abstand vom linken Rand = 50% minus der halben Boxbreite

zum besseren Lesen mal alles untereinander (die vertikale Position mußt du selber anpassen, hier mit bottom:0; ganz unten)

Code: [Select]
#CookieNoticeBar{
    position:absolute;
    width:750px;
    left: 50%;
    margin-left: -375px;
    bottom:0;
    background-color:rgba(244,239,195,.8);
    text-align:center;
    color:#777;
    font-size:1.2em;
    padding:6px 4px;
    border-radius:6px;
    border:1px solid red;
    z-index:9999;
    position:fixed;
}
Probleme sind da, um sie zu lösen, nicht, um nach Ausreden zu suchen.

Offline derschutzhund

  • Posts: 165
Re: Cookie - Nutzung Bestätigen
« Reply #20 on: November 08, 2018, 09:45:44 PM »
Läuft alles perfekt!
Vielen Dank für die Unterstützung!

LG

Wolfgang

 

postern-length