Szukaj w:
.

 Zobacz Temat

Strona Główna Forum | eXtreme-fusion 5.0 | Poradniki
#128237 31.05.2013 15:34:59 - [Kurs EF5] Panel logowania w nagłówku strony
Avatar Użytkownika
Ostrzeżeń: 0
Postów: 1907
Post napisano: 31.05.2013 15:34:59
Poniższy opis przedstawia tworzenie panelu w formie paska na całą szerokość strony w eXtreme-Fusion 5.0.3. Jeśli ktoś woli zwykły panel w formie chmurki opis znajduje się poniżej

_________________________________________


Otwieramy więc:
/themes/nazwa-twojej-skorki/core/view.php

Znajdujemy funkcję page(), a w niej na samym końcu znajduje się zapis:
// Wyświetlanie szablonu
$this->render('page');

Tuż nad nim umieszczamy przerobiony już kod którego możemy użyć jako gotowca:
   if ($this->_user->isLoggedIn())
   {
     $this->assign('is_logged_in', TRUE);
     $this->assign('bullet', THEME_IMAGES.'bullet.png');

     if ($this->_user->hasPermission('admin.login'))
     {
      $this->assign('is_admin', TRUE);
     }

     $this->assign('url_logout', $this->_route->path(array('controller' => 'account', 'action' => 'logout')));
     $this->assign('url_account', $this->_route->path(array('controller' => 'account')));
     $this->assign('url_messages', $this->_route->path(array('controller' => 'messages')));
     $this->assign('url_users', $this->_route->path(array('controller' => 'users')));
   }
   else
   {
     if ($this->_sett->get('enable_registration'))
     {
      $this->assign('enable_reg', TRUE);

      $this->assign('url_register', $this->_route->path(array('controller' => 'register')));
      $this->assign('url_password', $this->_route->path(array('controller' => 'password')));
     }
   }


W/w kod odpowiedzialny jest za sprawdzenie czy użytkownik jest zalogowany czy też nie oraz pobrać i utworzyć aktualne linki do zarządzania swoim profilem, prywatnymi wiadomościami itp.
Asygnując wszystkie zmienne które są nam potrzebne możemy przejść do drugiego kroku a mianowicie do edycji samej templateki.
Otwieramy więc:
/themes/nazwa-twojej-skorki/templates/page.tpl

Znajdujemy więc dla swojego logowania odpowiednie do tego miejsce, mamy je umieścić na samej górze, nad sekcją header-a.
Szukamy:
{if $Logo}
<header id="site_top">
  <h1>{$Logo}</h1>
</header>
{/if}

Nad umieszczamy kod z gotowym formularzem logowania:
{if $is_logged_in}
  <div class="tbl1">
   <div class="right">
     <a href="{$url_account}" class="side"><img src="{$bullet}" alt="{i18n("Edit profile")}"> {i18n("Edit profile")}</a>
     <a href="{$url_messages}" class="side"><img src="{$bullet}" alt="{i18n("Messages")}"> {i18n("Messages")}</a>
     <a href="{$url_users}" class="side"><img src="{$bullet}" alt="{i18n("Users")}"> {i18n("Users")}</a>
     {if $is_admin}
      <a href="{$ADDR_ADMIN}" class="side"><img src="{$bullet}" alt="{i18n("Admin Panel")}"> {i18n("Admin Panel")}</a>
     {/if}
     <a href="{$url_logout}" class="side"><img src="{$bullet}" alt="{i18n("Logout")}"> {i18n("Logout")}</a>
   </div>
  </div>
{else}
  <div class="center">
   <div class="tbl1">
     <form method="post" action="{$URL_REQUEST}">
      {if $enable_reg}<a href="{$url_register}" class="button">{i18n("Register")}</a>{/if}
      <a href="{$url_password}" class="button">{i18n("Forgot password")}</a>
      <label for="login">{i18n("Username:")}</label>
      <input type="text" name="username" id="login">
      <label for="pass">{i18n("Password:")}</label>
      <input type="password" name="password" id="pass">
      <label for="remember">{i18n("Remember me")}:</label>
      <input type="checkbox" name="remember_me" value="y" id="remember">
      <input type="submit" name="login" value="{i18n("Login")}" class="button">
     </form>
   </div>
  </div>
{/if}


Zapisujemy zmiany i powinniśmy cieszyć się oto taki widokiem:
http://screenshu....7kuj3f.jpg
A po zalogowaniu:
http://screenshu....52bh4a.jpg

Oczywiście dodanie innych arkuszy styli jest możliwe, ale to już będzie potrafił każdy w swoim zakresie :)

Pozdrawiam!
Wyślij Prywatną Wiadomość
#128238 31.05.2013 15:39:11 - RE: [Kurs EF5] Tworzenie panelu logowania w topie strony
Avatar Użytkownika
Ostrzeżeń: 0
Postów: 1435
Post napisano: 31.05.2013 15:39:11
Dobra robota. Widzę już zmiany jakie trzeba wprowadzić w aktualizacji smiley
Wyślij Prywatną Wiadomość
#128244 31.05.2013 16:48:53 - RE: [Kurs EF5] Tworzenie panelu logowania w topie strony
Avatar Użytkownika
Ostrzeżeń: 0
Postów: 1846
Post napisano: 31.05.2013 16:48:53
Pisałem ten sam poradnik w tym samym czasie co Rafik, ale mój panel ma trochę inną formę, dlatego również go dodaje ;)

Dla osób, które wolą zwykły tradycyjny panel w topie - w formie ramki/chmurki:

Kod PHP jest dokładnie taki sam jak w poradniku Rafika89, dlatego pomine jego wklejanie. Nastomiast zajmę się tylko wyglądem.

Otwieramy plik:
/themes/nazwa-twojej-skorki/templates/page.tpl[/b]


Tuż przed zamknięciem </header> dodajemy ten kod:
<link href="{$THEME_TEMPLATE_STYLES}login_panel.css" rel="stylesheet">
  <div id="user_panel_top">
   <h2>{i18n('User Panel')}</h2>
   {if $is_logged_in}
     <div class="right_col">
      <div class="welcome">
        <strong>{i18n('Hello :username!', array(':username' => $username))}</strong>
      </div>
      <div>
        <a href="{$url_logout}" class="button">{i18n("Logout")}</a>
      </div>
     </div>
     <div class="left_col">
      <div><li><a href="{$url_account}">{i18n('Edit profile')}</a></li></div>
      <div><li><a href="{$url_messages}">{i18n('Messages')}</a></li></div>
      <div><li><a href="{$url_users}">{i18n('Users')}</a></li></div>
      {if $is_admin}<div><li><a href="{$ADDR_ADMIN}">{i18n('Admin Panel')}</a></li></div>{/if}
     </div>
   {else}
     <form method="post" action="{$URL_REQUEST}">
      <input type="text" name="username" id="username" class="valueSystem" value="{i18n("Username:")}">
      <input type="password" name="password" id="password" class="valueSystem" value="{i18n("Password:")}">
      <div>
        <input type="checkbox" name="remember_me" value="y" id="remember">
        <label for="remember">{i18n("Remember me")}</label>
      </div>
      <input type="submit" name="login" value="{i18n("Login")}">
     </form>
     <div class="reg_forgot">
      {if $enable_reg}<a href="{$url_register}" class="button">{i18n("Register")}</a>{/if}
      <a href="{$url_password}" class="button">{i18n("Forgot password")}</a>
     </div>
   {/if}
  </div>


Zapisujemy plik.
Tworzymy teraz nowy plik ze stylami naszego panelu użytkownika o nazwie:
/themes/nazwa-twojej-skorki/templates/stylesheet/login_panel.css


A w nim wklejamy następujący kod:
#user_panel_top {
  float: right;
  z-index: 99;
  margin-top: -155px;
  margin-right: 7px;
  padding: 10px;
  width: 350px;
  max-height: 130px;
  background: #363636;
  border-radius: 10px;
  opacity: 0.94;
}
#user_panel_top h2 {
  font-size:14px;
  font-weight:bold;
}
#user_panel_top .left_col {
  float: left;
  width: 150px;
  margin-top: 10px;
}
#user_panel_top .right_col {
  width: 100px;
  float: right;
}
#user_panel_top .welcome {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background: #646464;
  padding: 2px;
  margin-right: -9px;
}
#user_panel_top .reg_forgot {
  float:right;
  margin-top:-40px;
}
#user_panel_top li {
  list-style-image: url(../images/bullet.png);
}


Panel logowania powinien wyglądać miej więcej tak:
Dla zalogowanych:
s6.ifotos.pl/img/zalogowan_nrqnwqq.png

Dla niezalogowanych:
s6.ifotos.pl/img/wylogowan_nrqnsps.png
Wyślij Prywatną Wiadomość
#128250 31.05.2013 19:17:22 - RE: [Kurs EF5] Tworzenie panelu logowania w topie strony
Avatar Użytkownika
Ostrzeżeń: 0
Postów: 1435
Post napisano: 31.05.2013 19:17:22
Ładnie wygląda, ale style nie powinny być w body smiley
Wyślij Prywatną Wiadomość
#128278 05.06.2013 16:41:12 - RE: [Kurs EF5] Panel logowania w nagłówku strony
Avatar Użytkownika
Ostrzeżeń: 0
Postów: 137
Post napisano: 05.06.2013 16:41:12
Siema robię według instrukcji od Andrzejster i cos chyba jest nie tak, ponieważ wpisujac login oraz hasło nie loguje się.

Co jest przyczyna tego ?

Wpisujac dane loguje sie przez standardowy panel logowania ;D
Wyślij Prywatną Wiadomość
#128279 05.06.2013 17:46:54 - RE: [Kurs EF5] Panel logowania w nagłówku strony
Avatar Użytkownika
Ostrzeżeń: 0
Postów: 1846
Post napisano: 05.06.2013 17:46:54
Dodałeś tylko mój kod czy to co napisałem by dodać od Rafika też dodałeś?
Wyślij Prywatną Wiadomość
#128284 05.06.2013 21:55:24 - RE: [Kurs EF5] Panel logowania w nagłówku strony
Avatar Użytkownika
Ostrzeżeń: 0
Postów: 137
Post napisano: 05.06.2013 21:55:24
Dobra poradziłem sobiee brakowało jednego znaku smiley
Wyślij Prywatną Wiadomość
#128487 08.07.2013 16:47:50 - RE: [Kurs EF5] Panel logowania w nagłówku strony
Avatar Użytkownika
Ostrzeżeń: 0
Postów: 1907
Post napisano: 08.07.2013 16:47:50
Wykonałem aktualizację w pierwszym poście.
Wyślij Prywatną Wiadomość


Szybka Odpowiedź


Musisz się zalogować by móc zamieszczać posty w tym temacie.