Guite edited this page Nov 12, 2014 · 2 revisions

Der Login-Block

Der Login Block geht zum Liederumfang des Zikula Core. Er erlaubt den Login von allen Seiten. Dazu müssen keine besonderen Einstellungen vorgenommen werden. Der Block muss einfach aktiviert und einer vorhandenen Blockzone zugewiesen werden.

Anpassung

versteckter CSS Block

Oftmals gibt es Seiten, die keine Userintaktion benötigen. Natürlich benötigen auch diese Sites Logins für ihre Admins. Dann kann man auf die Loginseite verlinken, oder man erspart den Admins den Klick und die Wartezeit, indem man das Loginfeld per CSS versteckt und erst erscheinen lässt, wenn das Feld aktiviert wird. Ein Beispiel dafür kannst Du auf twitter.com oder unten rechts auf dieser Demo-Seite sehen.

Dazu musst Du verschieden Templates bearbeiten:

Theme Template

Zunächst musst Du einen Log-Off- und ein Admin-Button in Dein Theme (z.B. master.htm) einbauen, der nur erscheint, wenn Du eingeloggt bist, sonst soll das Login-Overlay angezeigt werden:

<span id="footer-right">
<!--[pnuserloggedin assign=loggedin]-->
<!--[if $loggedin]-->
<a href="<!--[pngetbaseurl]-->">Home</a> | <a href="admin.php">Admin</a> | <a href="module-Users-logout.html">Logout</a>
<br />
<!--[else]-->
<!--[include file="login.htm"]-->
<!--[/if]-->
</span>

login.htm

Unter /themes/DEINTHEME/templates/ legst Du jetzt eine neue Datei an: login.htm

<!--[pnmodgetvar module='Users' name='loginviaoption' assign='loginviaoption']-->
<div class="loginblock">
<div id="menu">
<a href="#">Login
<span>
<form action="<!--[pnmodurl modname="Users" type="user" func="login"]-->" method="post">
    <div style="text-align:left">
    <!--[if $loginviaoption eq 0]-->
      <div><label for="loginblock_username">Username</label></div>
      <div><input id="loginblock_username" type="text" name="uname" size="20" maxlength="25" value="<!--[pnml name=_USERNAME]-->" onblur="if(this.value=='')this.value='<!--[pnml name=_USERNAME]-->';" onfocus="if(this.value=='<!--[pnml name=_USERNAME]-->')this.value='';" /></div>
    <!--[else]-->
      <div><label for="loginblock_email">Email</label></div>
      <div><input id="loginblock_email" type="text" name="email" size="20" maxlength="64" /></div>
    <!--[/if]-->
    <div><label for="loginblock_password">Password</label></div>
    <div><input id="loginblock_password" type="password" name="pass" size="20" maxlength="20" /></div>
    <!--[if $seclevel neq 'High']-->
      <input id="loginblock_rememberme" type="checkbox" value="1" name="rememberme" /> Remember me
    <!--[/if]-->
    <input type="hidden" name="url" value="<!--[$returnurl|pnvarprepfordisplay]-->" />
    <input type="hidden" name="authid" value="<!--[ insert name="generateauthkey" module="Users" ]-->" />
    <div><input type="submit" value="<!--[pnml name="_LOGIN"]-->" /></div>
    </div>
    </form>

</span></a>
</div>
</div>

style.css

In dein Themestylesheet fügst Du folgendes ein:

.loginblock a {}
/* Above: controls how 'loginblock' anchors behave */

.loginblock a:hover {}
/* Above: controls how 'loginblock anchor on-hover' behave */

#menu {position:relative; margin 0; padding 0;}
/* Above: the link div */

#menu a span {display:none;}
/* Above: hides the span by default */

#menu a:hover span {
    display:block;
    position:absolute;
    top:-150px; right:10px;
    width:auto;
    z-index:100;
    color:black;
    background-color:#ccc;
    font:1em Verdana, sans-serif;
    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;
/* Above: how the <span>login form</span> is handled when hovering over the visible link-text (the 'pop-up') use the top, left or right to determine its hover location on your page */
}

Customization

You will need to customize the CSS file to fit your site's design and most importantly, edit the top and right/left elements to get your desired hover location. I left many of the elements unformatted to show that you can apply different looks to them. For example, look at the twitter.com∞ home page and the same type of deign could be applied to this.

Example

I did this for a client site and thought I would show you how it functions so you can try before you buy so to speak. (It's free :)) Take a look at the lower right hand corner of this site and mouse over the login:

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.