Anmerkung
---------
Was mir bei jedem Template auf den Keks ging, dass ich, wenn ich angemeldet war, immer noch die Pipe '|' hinter dem ganzen Footergeseier sah. Also Hand anlegen. Hat dazu geführt, dass ich auch bei dem Dialog 'Anmeldung' und 'Anmeldung fehlgeschlagen' Hand anlegen musste. Und Arbeit zieht Arbeit nach sich!
Ich habe nach bestem Wissen und Gewissen aus meiner ellenlangen Dokumentation versucht die richtigen Code-Schnipsel herauszuholen. Bei dem Umzug von CMSimple V5.9 auf V5.11 habe ich Dank meiner Doku nur 3 Stunden gebraucht, bis es wieder so aussah wie vorher. OK, vielleicht 4. Es sei dazu gesagt, dass ich auf eine Vanilla-CMSimple V5.11 umgezogen bin. 'diff' ist manchmal ein gutes Werkzeug
Noch etwas: Beim 'Debuggen' ist mein Orakel, der Seitenquelltext, ein guter Freund oder Eine Textzeile von FURT:"Was nicht geht, geht nicht!" - Also wieder zurück rudern!
Änderungen
----------
Ich fand es doof, dass man zur 'Anmeldung' immer nach unten scrolen muss. Deshalb einen 'Button' 'Zur Anmeldung' in die 'FixedNav' eingefügt, der bei klick nach unten zur Springmarke scrollt.
Code: Select all
<?php echo loginlinkscroll();?><!-- DOR: In 'CMSroot\cmsimple\functions.php' Funktion 'loginlinkscroll()' erstellt. Hier ist es zu kompliziert und funtzt nicht beim ersten Aufruf der Site!!! Aber es geht, wenn man einen anderen 'Scroll-Link' betaetigt hat -->
Im Footer 'loginlink()' in ein span-Tag integriert, Klasse (andere Formatierung des Links) und ID (Sprungmarke) hinzugefügt.
Aus meiner/meinen 'template.html' die Pipe '|' vor 'Anmelden' entfernt.
In 'CMSroot/cmsimple/languages/de.php'
......................................
Code: Select all
$tx['menu']['login']="Anmelden"; /* DOR: Text geaendert */
$tx['menu']['login_title']="Anmeldung"; /* DOR: hinzugefuegt fuer Ueberschrift und Test Locator/Breadcrumb */
$tx['menu']['login_slide']="Zur Anmeldung"; /* DOR: hinzugefuegt */
...................................
Code: Select all
function a_scroll($i, $x) // DOR: Kopie von 'a()' und angepasst fuer Loginlink Footer
{
global $sn, $u, $cf, $adm;
if ($i == 0 && !$adm) {
if ($x == '' && $cf['locator']['show_homepage'] == 'true')
{
return '<a href="' . $sn . '?' . $u[0] . '">';
}
}
return isset($u[$i]) ? '<a href="' . $sn . '?' . $u[$i] . $x . '" alt="Y">' : '<a href="' . $sn . '?' . $x . '" alt="X">'; // DOR: mal schauen wer ich bin
}
function a_wrongpw($i, $x) // DOR: Kopie von 'a()' und angepasst fuer Kennwort neu eingeben
{
global $sn, $u, $cf, $adm;
if ($i == 0 && !$adm) {
if ($x == '' && $cf['locator']['show_homepage'] == 'true')
{
return '<a class="dor_login_falsch_neu_anmelden_link" href="' . $sn . '?' . $u[0] . '" alt="0">';
}
}
return isset($u[$i]) ? '<a class="dor_login_falsch_neu_anmelden_link" href="' . $sn . '?' . $u[
$i] . $x . '" alt="Y">' : '<a class="dor_login_submit_button dor_login_submit_button_falsches_kw" href="' . $sn . '?' .
$x . '" alt="Ich bin erster bei neuer Anmeldung">'; // DOR: mal schauen wer ich bin -> Klasse 'dor_login_falsch_neu_anmelden_link' gegen 'dor_login_submit_button' ausgetauscht und mit der anderen Klasse das Knoeppie nach rechts geschubst
}
function loginlinkscroll() // DOR: Als Kopie von loginlink() fuer scrollen zum 'Anmelde-Link' hinzugefuegt und angepasst und in 'FIXED NAVIGATION' eingefuegt
{
global $cf, $adm, $sn, $u, $s, $tx, $pth; // DOR: globale Variable '$pth' hinzugefuegt
if (!$adm)
{
//return a($s > -1 ? $s : 0, '&login') . $tx['menu']['login'] . '</a>';
return a_scroll($s > -1 ? $s : 0, '#dor_footerLoginLink') . '<img src="' . $pth['folder']['templateimages'] . 'login3.png" title="' . $tx['menu']['login_slide'] . '" class="dor_loginlinkButtonScroll">' . '</a>'; // DOR: Scroll zum "Anmelden-Link" in 'CMSroot/templates/tmpl_rezepte/template.htm' oben eingefuegt. Der verschwindet, wenn man beim CMS angemeldet ist. Bild 'login3.png' neu erstellt
}
}
function loginlinkwrongpw() // DOR: Als Kopie von loginlink() fuer falsche Anmeldung
{
global $cf, $adm, $sn, $u, $s, $tx;
if (!$adm)
{
//return a($s > -1 ? $s : 0, '&login') . $tx['menu']['login'] . '</a>';
return a_wrongpw($s > -1 ? $s : 0, '&login') . $tx['menu']['login'] . '</a>'; // DOR: Pipe/∥ vor Login-Link bei Meldung 'Falsches Kennwort' bei Link 'Anmelden' entfernt
}
}
function loginlink()
{
global $cf, $adm, $sn, $u, $s, $tx;
if (!$adm)
{
//return a($s > -1 ? $s : 0, '&login') . $tx['menu']['login'] . '</a>';
return ' ∥ ' . a($s > -1 ? $s : 0, '&login') . $tx['menu']['login'] . '</a>'; // DOR: erst Pipe, dann '∥' zwischen 'Suche-Link' und 'Login-Link' aus 'CMSroot/templates/tmpl_rezepte/template.htm' im Footer entfernt und hier eingefuegt. Das war mir schon immer ein Dorn im Auge, dass die Pipe zu sehen war, wenn man 'Eingelogt' war.! Jetzt verschwindet das Ding, wenn man angemeldet ist. War Grotte gemacht und mein Ding funzt auch bei 'Logout' (Abmelden)
}
}
In 'CMSroot/cmsimple/login.php'
...............................
Einiges auskommentiert, was mir nicht gefiel.
Code: Select all
function loginforms()
{
global $adm, $cf, $print, $hjs, $tx, $onload, $f, $o, $s, $sn, $u;
if ($f == 'login')
{
$cf['meta']['robots'] = "noindex";
$onload .= "self.focus();document.login.passwd.focus();";
$f = $tx['menu']['login_title']; // DOR: hier ist die Titeltextuebergabe an Locater/Breadcrumb
$o .= '<div id="cmsimple_loginform" class="cmsimple_loginform">
<h6>' . $tx['menu']['login_title'] . '</h6><hr><!-- DOR: Text-Variable geaendert und hr-Tag hinzugefuegt -->
<div style="/*margin-left: 15em;*/" class="dor_cmsimple_loginform">
<form id="login" name="login" action="' . $sn . '?' . $u[$s] . '" method="post">' . "\n"
. tag('input type="hidden" name="login" value="true"') . "\n"
. tag('input type="hidden" name="selected" value="' . @$u[$s] . '"') . "\n"
// DOR: fuer mich reicht das 'Anmelden'-Textfeld. Neu 'formartiert'
// . "\n" . 'User (optional): ' . tag('br') -> 'optional' kann mich mal...
// . tag('input type="text" name="user" id="user" value=""')
// . ' ' . "\n" . tag('br') . 'Password: ' . tag('br')
. '<h5 style="margin-bottom: 5px; color: #333;">' . $tx['login']['password'] . ':</h5>' . "\n" // DOR: Ueberschrift kleiner und andere Farbe
// . tag('input type="password" name="passwd" id="passwd" value="" placeholder="Kennwort" style="background: rgba(238, 238, 238, .7); /* DOR: #eee, aber mit opacity sieht man das header-bild */ color: #222; float: left; font-size: 16px; font-weight: 500; border: 1px solid #930; border-radius: 0 18px 18px 0; box-shadow: 2px 2px 2px rgba(153, 51, 00, 1), -2px 2px 2px rgba(153, 51, 00, 1), 2px -2px 2px rgba(153, 51, 00, 1), -2px -2px 2px rgba(153, 51, 00, 1); /* DOR: #930: Danke https://www.w3schools.com/cssref/css3_pr_box-shadow.php */ "') . ' ' . "\n" . tag('br') . tag('br')
// . tag('input type="password" name="passwd" id="passwd" value="" placeholder="' . $tx['login']['password'] . '" class="dor_login_textfeld"') . ' ' . "\n" . tag('br') . tag('br')
. tag('input type="password" name="passwd" id="passwd" value="" placeholder="EhneMehneMuh" class="dor_login_textfeld"') . ' ' . "\n" . tag('br') . tag('br')
// . tag('input style="cursor: pointer" type="submit" name="submit" id="submit" class="submit" value="' . $tx['menu']['login'] . '"') . '
// . tag('input type="submit" name="submit" id="submit" class="dor_login_submit_button" value="' . $tx['menu']['login'] . '"') . '
. '<button type="submit" name="submit" id="submit" class="dor_login_submit_button">' . $tx['menu']['login'] . '</button>
</form>
</div>
</div>';
$s = -1;
}
}
Für die 'Anmelden-Box' und die 'Neuer Versuch Anmelden-Box' habe ich mir auch schöne Dinge ausgedacht, weil es mir auf den Sack ging, wie sie im Standard aussehen.
CSS
---
Code: Select all
span.dor_footerLoginLink a:link {padding: 0 5px; font-weight: 800; color: rgba(221,221,221,1) /*#ddd*/; background: rgba(119,17,0,1) /* DOR: hinzugefuegt - padding l/r hinzugefuegt, Text fetter formartiert */
.dor_login_textfeld[type=password]{ /* DOR: hinzugefuegt -> inline Style aus 'login()' heraus gezogen und als 'class' eingebunden */
height: 25px; padding-left: 10px; background: rgba(238, 238, 238, .7); /* DOR: #eee, aber mit opacity sieht man das header-bild */ color: rgba(34,34,34,1) /*#222;*/ float: left; font-size: 16px; font-weight: 500; border: 1px solid rgba(153, 51, 00, 1); border-radius: 0 18px 18px 0; box-shadow: inset 0px 0px 3px rgba(153, 51, 00, 1);
}
.dor_login_textfeld[type=password]:focus {outline: rgba(153, 51, 00, 1) solid 1px; outline-offset: -5px;} /* DOR: hab das dusselige 'outline-blau' ueberschrieben */
.dor_login_falsch_bereich { /* DOR: hinzugefuegt fuer 'CMSroot/cmsimple/login.php' und inline-style abgeloest */
width: 280px;
text-align: center;
border: 1px solid rgba(153, 51, 00, 1);
/*border-radius: 3px; */
border-radius: 0 25px 25px 0; /* DOR rounded corners rechts */
box-shadow: inset 0px 0px 4px rgba(153, 51, 00, 1);
padding: 24px;
margin: 50px auto; /* DOR: Wert von 100 auf 50 runtergedreht */
}
.dor_login_falsch_neu_anmelden_link { /* DOR: hinzugefuegt fuer 'CMSroot/cmsimple/login.php' und inline-style abgeloest -> 'color' und 'font-weight' sind '!important', damit der Style wirkt! */
color: #fff!important;
font-weight: 800!important;
background: rgba(153, 51, 00, 1);
padding: 1px 6px 1px 6px;
}
.dor_login_falsch_neu_anmelden_link:hover { /* DOR: hinzugefuegt , 'color' muss '!important' sein */
color: rgba(221,221,221,1)!important; /* #ddd*/
}
div.dor_cmsimple_loginform { /* DOR: hinzugefuegt fur Anmeldung, bringt aber nix, statt dessen Inline-Style in 'CMSroot/cmsimple/login.php' -> und wenn der Arsch vor dem Fernseher es von Anfang an richtig gemacht haette, dann waere nicht so viel Bier die Kehle heruntergeflossen!!! */
display: block;
width: 9em;
/*margin-left: 15em;*/
margin: 0 auto;
padding: 0 4em 1em 3em;
border: 1px solid rgba(153, 51, 00, 1);
border-radius: 0 25px 25px 0; /* DOR rounded corners rechts */
box-shadow: inset 0px 0px 4px rgba(153, 51, 00, 1);
}
.dor_login_submit_button {
display: block; /* DOR: Wollte den 'Anmelden-Button' abrunden - hinzufuegen hat nix gebracht bei input-Tag - bei button-Tag schon */
padding: 5px;
/*margin: 10px 10px 10px 200px;*/
height: 30px;
width: 13.8em;
color: rgba(68,68,68, 1)!important;
font-weight: 600;
outline: rgba(153, 51, 00, 1) solid 1px; /* DOR: hinzugefuegt - #930 - outline-offset: -5px;*/
box-shadow: /* https://www.cssportal.com/css3-rgba-generator/ rgba = Red, Green, Blue, Opacity
https://www.color-hex.com/color/b52c07 */
rgba(204,204 ,204, 1) 0px -25px 25px 0px inset, /* DOR: #ccc, volle deckung */
rgba(153 , 51, 0, 1) 0px -10px 50px 50px inset, /* DOR: #910 oben, volle deckung mit verlauf nach unten */
rgba(68,68,68, 0.1) 4px 4px 6px; /* DOR: #444 */
cursor: pointer; /* DOR: Inline-Style aus dem Script entfernt */
text-decoration: none;
border: 0 transparent;/* DOR: hinzufuegen hat nix gebracht bei input-Tag - bei button-Tag schon*/
border-radius: 0 15px 15px 0; /* DOR: hinzufuegen hat nix gebracht bei input-Tag - bei button-Tag schon*/
transition: all 1s ease-in-out; /* DOR: hinzugefuegt und jetzt blendet sich der Button langsam wieder um in die alte Farbgebung, wenn MouseOut angesagt ist */
}
.dor_login_submit_button:hover
{
color: rgba(231,231,231,1)!important; /* #ddd; /* Textfarbe geaendert */
box-shadow: rgba(153 , 51, 0, .7) 0px -25px 25px 0px inset, /* DOR: #910 mit opacity */
rgba(204,204 ,204, 1) 0px -10px 50px 50px inset, /* #ccc oben, volle deckung mit verlauf nach unten und mehr Unschaerfe-radius, Schatten-radius als button-Tag */
rgba(68,68,68, 0.1) 4px 4px 6px; /* DOR: Schatten #444 und den unteren Rest gausgeschmissen */
text-decoration: none;
transition: all 1s ease-in-out; /* von 1s auf 5s erhoeht und ist behaebig. vielleicht mal mit @keyframes animation_link_fontane ausprobieren. NICHT JETZT!!! */
}
.dor_login_submit_button_falsches_kw { /* DOR: hinzugefuegt fuer 'Falsche Anmeldung' Dialog Werte von Knoeppi-Anmelden angepasst */
width: 10em; /* Knoeppi-Breite an Dialog angepasst */
margin: 12px auto;
/*padding: 5px;*/
height: 20px;/**/
padding-top:: 2px;
font-size: 16px;
font-weight: 600;
}
Es ist mir sch...weine egal, ob euch meine Kommentare interessieren, zumal ich die meisten schon heraus geschmissen habe. Ich behalte meine Kommentare bei Fehlschlägen, damit ich weiß, wie es nicht funktioniert. Wie sagte Edison so schön:"Ich habe nicht versagt. Ich habe nur 10.000 Wege gefunden, wie es nicht funktioniert." oder "Ich bin nicht entmutigt, denn jeder erkannte Irrtum ist ein weiterer Schritt nach vorn.".
Gruß
Gonzo
@Gert: Danke für das Prädikat 'Bastler'