Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Jak Zmienić Wygląd panelu logującego ?

Założony przez  LaGGeR.

10.07.2013, 07:29
#1
wersja skryptu MyBB: 1.6.10
adres forum: http://skiluj.xaa.pl/index.php
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): nazwa Stylu : edevision

Witam mam taką prośbę/pytanko , da się zmienić panel logujący ?

http://scr.hu/11uf/y1cl1
http://scr.hu/11uf/c75ks


Chodzi mi o zmienienie Wyglądu na jakiś bardziej dynamiczny :)

I prosiłbym o podrzucenie jakiegoś Tego panelu.. :D , oraz Wytłumaczenie jak go wgrać :P

Ps; Czekam na Różne propozycje :p
10.07.2013, 09:29
#2
Ja używam loginboxa: http://community.mybb.com/thread-117646.html Tam masz wszystko ładnie opisane.
10.07.2013, 10:21
#3
oco z tym Biega ?

Mają wyglądać w ten szablon i zobaczyć, czy można zauważyć żadnej wzmianki o jQuery. Jeśli nie, dodaj je do samego dna matrycy:

< script src = "/ / ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"  typ = "text / javascript" > </ script>

http://scr.hu/11uf/4chuy

U mnie tak wygląda dół tabelki :) i co ja mam to dodać ten kod pod tą Linike :
<script type="text/javascript">


czy Gdzie ?
10.07.2013, 10:25 (Ten post był ostatnio modyfikowany: 10.07.2013, 10:26 przez GiboneKPL.)
#4
Masz to dodać w ACP -> Style i Szablony -> Szablony -> Twój_Szablon -> headerinclude.

Możliwe że już masz bibliotekę jQuery to już nie musisz tego wklejać.

Ps. Na wszelki wypadek pokaż headerinlucde.
10.07.2013, 10:36
#5
LaGGeR napisał(a):oco z tym Biega ?

Mają wyglądać w ten szablon i zobaczyć, czy można zauważyć żadnej wzmianki o jQuery. Jeśli nie, dodaj je do samego dna matrycy:

< script src = "/ / ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"  typ = "text / javascript" > </ script>

http://scr.hu/11uf/4chuy

U mnie tak wygląda dół tabelki :) i co ja mam to dodać ten kod pod tą Linike :
<script type="text/javascript">


czy Gdzie ?
Masz już dodaną bibliotekę jQuery w szablonie.
Przejdź do następnych punktów.
BTW: Nieźle ten tłumacz google tłumaczy... :E
10.07.2013, 21:17
#6
Jeszcze mam jeden problem z tym : Tam Pisze :

Teraz, mamy JavaScript w miejscu, nadszedł czas, aby dodać aktualny kod dla modalnego okna logowania. Aby to zrobić, musimy zmienić header_welcomeblock_guest szablon (ACP> Templates & Style> Szablony> Twój Set szablon > Szablony Header header_welcomeblock_guest>). Na tym etapie, że bardzo wiele zależy od tematu, którego używasz, co masz " będzie potrzebne. Oto nagie minimal przykładem tego, co powinien wyglądać szablon jednak:
< div id = "maska" > </ div >
Witaj gość !  Proszę  < lub < a href = " { $ MyBB -> ustawienia [ 'bburl' ]} ? / member.php action = register " > { $ lang -> welcome_register } </ >
< div id = "loginModal"  class = "modalBox loginModalBox " >
    < div  class = "thead" >
        Zaloguj się  { $ tłumaczenie -> ustawienia [ 'bbname' ]}
    </ div >
    < div  class = "loginModalContent modalContent" >
        < metoda forma = "post"  action = "członek. php " >
            < table border = "0"  width = "100%" >
                < tr >
                    < td >
                        < label  dla = "login_username" > Nazwa użytkownika : </ label >
                    </ td >
                    < td >
                        < input type = "text "  value = ""  style = "width:







typ = "password"  value = ""  style = "width:




zaznaczona, hasła zostaną zapamiętane na tym komputerze, w przeciwnym razie będziesz się wylogować zaraz po zamknięciu przeglądarki. " > < input


typ = "submit"  value = "Login"  name = "submit"  class = "button"  />
                    </ td >
                </ tr >
            </ table >
            < input type = "hidden"  value = "do_login"  name = "action "  />
            < input type = "hidden"  value = ""  name = "url"  />
        </ forma >
    </ div >
</ div >
Jak powiedziałem, to gołe minimalne trzeba, aby ta do pracy w ogóle. Wreszcie, trzeba dodać następujące motywu w pliku global.css:
# Maska
    
    
    
    
    
    



    
    
    
    
    
    stałe  # 000000;
    - webkit - box - shadow :  0px 7PX 10px 0px rgba ( 0 , 0 , 0 , 0.81 );
    - moz - box - shadow :  0px 7PX 10px 0px rgba ( 0 , 0 , 0 , 0.81 );
    box - shadow :  0px 7PX 10px 0px rgba ( 0 , 0 , 0 , 0.81 );
}
    . modalBox  . thead  {
        font - waga :  bold ;
    }
    . modalBox  . modalContent  {
        wyściółka :  5px 10px ;
    }
U Mnie wygląda to tak ?
http://scr.hu/11uf/megeg


jak TO mam Zrobić i gdzie to Wkleić bo nie bardzo Rozumiem To chyba przez ten Google Tłumacz :(

Mam To podmienić ten kdo który mam na ten Co on Pisze :) te 2 ... ?
10.07.2013, 21:22
#7
@up: Po pierwsze wyłącz tłumacza, bo taki szablon rozwali Ci całe forum.
Po drugie wchodzisz w szablony -> nagłówek -> header_welcomeblock_guest czyścisz cały szablon i wklejasz szablon nr. 1 podany przez Ciebie.
Wchodzisz w style -> twój styl -> global.css -> edycja zaawansowana -> jedziesz na sam dół -> wklejasz szablon nr. 2.
10.07.2013, 21:25
#8
O Jezu.. Masz tutaj poradnik po polsku:

0. Pierw usuń tamte kody co dodawałeś.

1. 1 i najważniejszą rzeczą jest bilbioteka jQuery bez której nie zadziaął Ci ten loginbox. A więc do headerinclude (ACP -> Style i Szablony -> Szablony -> Twój_Szablon -> Niezgrupowane szablony) dodaj:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
Jednak jeśli masz już ten wpis to go nie dodawaj!

2. 2 Także istotną rzeczą jest dodanie kodu javascript bez którego ten loginbox nie będzie się pokazywał. Wklej to na koniec headerinclude (ACP -> Style i Szablony -> Szablony -> Twój_Szablon -> Niezgrupowane szablony) :
<script type="text/javascript">
/**
 * Modal Boxes JS
 *
 * @author Euan T. <euan@euantor.com>
 * @version 1.0.0
 */

jQuery.noConflict();

jQuery(document).ready(function($)
{
    // Make the jQuery modal login redirect you back to the page you're currently on //
    jQuery('#loginModal input[name="url"]').attr("value", window.location);
    // /Login redirect //

    // Modal Boxes //
    jQuery('a[name="modal"]').on('click', function(event)
    {
        event.preventDefault();
        
        var target = $(this).attr('rel');
        
        // Set up the shadowing
        var maskWidth = $(window).width();
        var maskHeight = $(document).height();
        jQuery('#mask').css({'width': maskWidth, 'height': maskHeight});
        jQuery('#mask').fadeIn(1000);    
        jQuery('#mask').fadeTo("slow", 0.8);  
        
        // Position the actual modal
        var winH = $(window).height();
        var winW = $(window).width();
        jQuery(target).css('top',  (winH / 2) - ($(target).height() / 2));
        jQuery(target).css('left', (winW / 2) - ($(target).width() / 2));
        jQuery(target).fadeIn(2000); 
    });
    
    jQuery('.modalBox a[rel="closeModal"]').on('click', function(event)
    {
        event.preventDefault();
        jQuery('#mask, .modalBox').hide();
    }); 
    
    jQuery('#mask').on('click', function ()
    {
        jQuery(this).hide();
        jQuery('.modalBox').hide();
    }); 
    // /Modal Boxes //
});
</script> 

3. W tym kroku nadamy ręce i nogi naszemu panelu logowania, po przerz edycję szablonu i dodanie kodu CSS.

a) Wejdź w ACP -> Style i Szablony -> Szablony -> Twój_Szablon -> Nagłówek -> header_welcomeblock_guest i zamień jego zawartość na tą:
<div id="mask"></div>
Welcome guest! Please <a href="{$mybb->settings['bburl']}/member.php?action=login" name="modal" rel="#loginModal">{$lang->welcome_login}</a> or <a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a>
<div id="loginModal" class="modalBox loginModalBox">
    <div class="thead">
        Login at {$mybb->settings['bbname']}
    </div>
    <div class="modalContent loginModalContent">
        <form method="post" action="member.php">
            <table border="0" width="100%">
                <tr>
                    <td>
                        <label for="login_username">Username:</label>
                    </td>
                    <td>
                        <input type="text" value="" style="width: 200px;" maxlength="30" size="25" name="username" class="textbox" id="login_username" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="login_password">Password:</label>
                    </td>
                    <td>
                        <input type="password" value="" style="width: 200px;" size="25" name="password" class="textbox" id="login_password" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="smalltext" title="If ticked, your login details will be remembered on this computer, otherwise, you will be logged out as soon as you close your browser."><input type="checkbox" value="yes" checked="checked" name="remember" class="checkbox"> Remember?</label>
                    </td>
                    <td>
                        <input type="submit" value="Login" name="submit" class="button" />
                    </td>
                </tr>
            </table>
            <input type="hidden" value="do_login" name="action" />
            <input type="hidden" value="" name="url" />
        </form>
    </div>
</div> 

b) Teraz nadamy kolorki i nie tylko ;) Wejdź w ACP -> Style i Szablony -> Twój_Styl -> global.css -> tryb zaawansowany -> na końcu dodaj:
#mask {
    position: absolute;
    z-index: 9010;
    background-color: #000000;
    display: none;
    top: 0;
    left: 0;
}

.modalBox {
    position: fixed;
    width: 440px;
    display: none;
    z-index: 9015;
    background: #ffffff;
    border: 1px solid #000000;
    -webkit-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
    -moz-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
    box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
}
    .modalBox .thead {
        font-weight: bold;
    }
    .modalBox .modalContent {
        padding: 5px 10px;
    } 
10.07.2013, 21:40
#9
Panowie Możecie wejśc.. :
http://skiluj.xaa.pl/index.php

Coś jest Nie tak ? po 1 tak Sie stało :(
http://scr.hu/11uf/n63ya
Jest Aby takie coś .. Ale niech bd ja se to z waszą pomocą zmienie na Buttony :)

Ale jest problem bo gdy dam Loguj ! to - http://scr.hu/11uf/6vxvs

Tak powinno być ????
A nie powinno Się pokazać takie okienko jak na IPB jak się loguje ?
10.07.2013, 21:42
#10
Pokaż headerinclude (ACP -> Style i Szablony -> Szablony -> Twój_Szablon -> Niezgrupowane szablony).
10.07.2013, 21:46
#11
Proszę
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1600"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1600"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript">

$.noConflict();

</script>



<script type="text/javascript">

jQuery.noConflict();
jQuery(document).ready(function (){
jQuery(".widget_social").hover(function(){
jQuery(".widget_social").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".widget_social").stop(true, false).animate({right:"-205"},"medium");
},500);
return false;
});
</script>

<script type="text/javascript">

jQuery.noConflict();
jQuery(document).ready(function (){
jQuery(".widget_serwer").hover(function(){
jQuery(".widget_serwer").stop(true, false).animate({left:"0"},"medium");
},function(){
jQuery(".widget_serwer").stop(true, false).animate({left:"-536"},"medium");
},500);
return false;
});
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.cookie.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/sidebar_2.0.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>{$stylesheets}{$avvisospiti}
<script type="text/javascript">
<!--
    var cookieDomain = "{$mybb->settings['cookiedomain']}";
    var cookiePath = "{$mybb->settings['cookiepath']}";
    var cookiePrefix = "{$mybb->settings['cookieprefix']}";
    var deleteevent_confirm = "{$lang->deleteevent_confirm}";
    var removeattach_confirm = "{$lang->removeattach_confirm}";
    var loading_text = '{$lang->ajax_loading}';
    var saving_changes = '{$lang->saving_changes}';
    var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
    var my_post_key = "{$mybb->post_code}";
    var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}
10.07.2013, 21:49
#12
Zamień na:
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1600"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1600"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.cookie.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/sidebar_2.0.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
{$stylesheets}
{$avvisospiti}
<script type="text/javascript">
<!--
    var cookieDomain = "{$mybb->settings['cookiedomain']}";
    var cookiePath = "{$mybb->settings['cookiepath']}";
    var cookiePrefix = "{$mybb->settings['cookieprefix']}";
    var deleteevent_confirm = "{$lang->deleteevent_confirm}";
    var removeattach_confirm = "{$lang->removeattach_confirm}";
    var loading_text = '{$lang->ajax_loading}';
    var saving_changes = '{$lang->saving_changes}';
    var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
    var my_post_key = "{$mybb->post_code}";
    var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function (){
jQuery(".widget_social").hover(function(){
jQuery(".widget_social").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".widget_social").stop(true, false).animate({right:"-205"},"medium");
},500);
return false;
});
</script>

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function (){
jQuery(".widget_serwer").hover(function(){
jQuery(".widget_serwer").stop(true, false).animate({left:"0"},"medium");
},function(){
jQuery(".widget_serwer").stop(true, false).animate({left:"-536"},"medium");
},500);
return false;
});
</script>

<script type="text/javascript">
/**
* Modal Boxes JS
*
* @author Euan T. <euan@euantor.com>
* @version 1.0.0
*/

jQuery.noConflict();

jQuery(document).ready(function($)
{
    // Make the jQuery modal login redirect you back to the page you're currently on //
    jQuery('#loginModal input[name="url"]').attr("value", window.location);
    // /Login redirect //

    // Modal Boxes //
    jQuery('a[name="modal"]').on('click', function(event)
    {
        event.preventDefault();
        
        var target = $(this).attr('rel');
        
        // Set up the shadowing
        var maskWidth = $(window).width();
        var maskHeight = $(document).height();
        jQuery('#mask').css({'width': maskWidth, 'height': maskHeight});
        jQuery('#mask').fadeIn(1000);    
        jQuery('#mask').fadeTo("slow", 0.8);  
        
        // Position the actual modal
        var winH = $(window).height();
        var winW = $(window).width();
        jQuery(target).css('top',  (winH / 2) - ($(target).height() / 2));
        jQuery(target).css('left', (winW / 2) - ($(target).width() / 2));
        jQuery(target).fadeIn(2000);
    });
    
    jQuery('.modalBox a[rel="closeModal"]').on('click', function(event)
    {
        event.preventDefault();
        jQuery('#mask, .modalBox').hide();
    });
    
    jQuery('#mask').on('click', function ()
    {
        jQuery(this).hide();
        jQuery('.modalBox').hide();
    });
    // /Modal Boxes //
});
</script>
10.07.2013, 21:51
#13
The first thing to do is to include jQuery in your theme. Some themes might already have it included. It’s easy enough to find out. Simply go to the template manager for your theme and modify the headerinclude template (ACP > Templates & Style > Templates > Your template Set > Ungrouped Templates > headerinclude). Have a look in this template and see if you notice any mention of jQuery. If not, add the following to the very bottom of the template:

A może musze biblioteke jQuery zmienić ? bo mam 1.9.0 a tam pisze :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
10.07.2013, 21:53
#14
Zamień headerinclude na ten:
<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1600"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1600"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.cookie.js"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/sidebar_2.0.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
{$stylesheets}
{$avvisospiti}
<script type="text/javascript">
<!--
    var cookieDomain = "{$mybb->settings['cookiedomain']}";
    var cookiePath = "{$mybb->settings['cookiepath']}";
    var cookiePrefix = "{$mybb->settings['cookieprefix']}";
    var deleteevent_confirm = "{$lang->deleteevent_confirm}";
    var removeattach_confirm = "{$lang->removeattach_confirm}";
    var loading_text = '{$lang->ajax_loading}';
    var saving_changes = '{$lang->saving_changes}';
    var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
    var my_post_key = "{$mybb->post_code}";
    var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function (){
jQuery(".widget_social").hover(function(){
jQuery(".widget_social").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".widget_social").stop(true, false).animate({right:"-205"},"medium");
},500);
return false;
});
</script>

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function (){
jQuery(".widget_serwer").hover(function(){
jQuery(".widget_serwer").stop(true, false).animate({left:"0"},"medium");
},function(){
jQuery(".widget_serwer").stop(true, false).animate({left:"-536"},"medium");
},500);
return false;
});
</script>

<script type="text/javascript">
/**
* Modal Boxes JS
*
* @author Euan T. <euan@euantor.com>
* @version 1.0.0
*/

jQuery.noConflict();

jQuery(document).ready(function($)
{
    // Make the jQuery modal login redirect you back to the page you're currently on //
    jQuery('#loginModal input[name="url"]').attr("value", window.location);
    // /Login redirect //

    // Modal Boxes //
    jQuery('a[name="modal"]').on('click', function(event)
    {
        event.preventDefault();
        
        var target = $(this).attr('rel');
        
        // Set up the shadowing
        var maskWidth = $(window).width();
        var maskHeight = $(document).height();
        jQuery('#mask').css({'width': maskWidth, 'height': maskHeight});
        jQuery('#mask').fadeIn(1000);    
        jQuery('#mask').fadeTo("slow", 0.8);  
        
        // Position the actual modal
        var winH = $(window).height();
        var winW = $(window).width();
        jQuery(target).css('top',  (winH / 2) - ($(target).height() / 2));
        jQuery(target).css('left', (winW / 2) - ($(target).width() / 2));
        jQuery(target).fadeIn(2000);
    });
    
    jQuery('.modalBox a[rel="closeModal"]').on('click', function(event)
    {
        event.preventDefault();
        jQuery('#mask, .modalBox').hide();
    });
    
    jQuery('#mask').on('click', function ()
    {
        jQuery(this).hide();
        jQuery('.modalBox').hide();
    });
    // /Modal Boxes //
});
</script>
10.07.2013, 21:53 (Ten post był ostatnio modyfikowany: 10.07.2013, 21:55 przez LaGGeR.)
#15
http://scr.hu/11uf/3svqy


Stary Działą jesteś genialny :)))



Dziękuje za pomoc panowie Matslom , GiboneKPL

Jesteście Genialni :D
Matslom napisał 10.07.2013, 22:03:
[Obrazek: modnotice_thx.png]

Nie pisz zbędnych postów



Użytkownicy przeglądający ten wątek:

1 gości