Jump to content
Sign in to follow this  
xaap

Domyślna nazwa przy logowaniu oraz hover w buttonach w menu MyBB

Recommended Posts

Mam dwa pytania.

Jak zrobić aby domyślna nazwa przy logowaniu (Username, Password) usuwały się automatycznie po najechaniu po kliknięciu na dane miejsce?
Przykładowo wpisuje mój login i username automatycznie się usuwa, z hasłem tak samo.

 

Drugie pytanie, jak zrobić hover w menu? chciałbym aby po najechaniu np na napis Forum pojawił się tjb. button.

Share this post


Link to post

Dodaj sobie takie coś:

placeholder="Login..."

To to pole będzie po kliknięciu usuwane i puste.

 

:hover do menu dodaj i zrób efekt jaki chcesz.

  • Like 1

Share this post


Link to post

Dzięki wielkie, pierwszy problem rozwiązany.

Jeżeli chodzi o drugi, to robię coś takiego:

 

#panel .upper a:hover { background: #dbd880; padding: 9px 14px 8px 12px; text-decoration: none; }

Działa niby, ale jak wyświetla to tak jakby główny panel (cała belka) powiększała się w dół, oczywiście przy najechaniu myszką na button.
A gdy zjadę już z tego buttonu to wraca i normalnie jest.

Share this post


Link to post

@Astrius Nie rozumiem, jest to powiększenie spowodowane padding'iem.

Share this post


Link to post

To jak zastąpić padding aby zrobić powiększenie buttonu?
Oczywiście tak aby belka się nie powiększała w dół po najechaniu kursorem.

Share this post


Link to post

Daj kod cały lub link do forum.

Daj padding przed najechaniem i powinno OK być.

Share this post


Link to post
<span class="float_left"> <a href="{$mybb->settings[bburl]}/member.php?action=login" onclick="$(#quick_login).modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== undefined ? modal_zindex : 9999) }); return false;" class="login bradius"><i class="fa fa-key fa_xtra" style="margin-top: -2px !important;"></i> {$lang->welcome_login}</a> <a href="{$mybb->settings[bburl]}/member.php?action=register" class="register bradius"><i class="fa fa-user-plus fa_xtra"></i>{$lang->welcome_register}</a> </span> <div class="modal" id="quick_login" style="display: none;"> <form method="post" action="{$mybb->settings[bburl]}/member.php">
							<input name="action" type="hidden" value="do_login" /> <input name="url" type="hidden" value="" /> <input name="quick_login" type="hidden" value="1" /> <table width="100%" cellspacing="{$theme[borderwidth]}" cellpadding="{$theme[tablespace]}" border="0" class="tborder"> <tr> <td class="thead" colspan="2" style="border-radius: 0 !important;"><i class="fa fa-user fa_xtra"></i> {$lang->login}</td> </tr> <tr> <td class="trow1"><input name="quick_username" id="quick_login_username" type="text" placeholder="Username" class="textbox initial_focus" style="width: 350px; margin: 11px 8px 0px 8px;" /><i class="fa fa-user adj_log"></i></td> </tr> <tr> <td class="trow1"><input name="quick_password" id="quick_login_password" type="password" placeholder="Password" class="textbox" style="width: 350px; margin: -5px 8px 1px 8px;" /><i class="fa fa-unlock-alt adj_log"></i></td> </tr> <tr> <td class="trow1 remember_me" style="padding-left: 22px; padding-right: 30px;"> <input name="quick_remember" id="quick_login_remember" type="checkbox" value="yes" class="checkbox" checked="checked" /> <label for="quick_login_remember">{$lang->remember_me}</label> <a href="{$mybb->settings[bburl]}/member.php?action=lostpw" class="lost_password float_right">{$lang->lost_password}</a> </td> </tr> <tr> <td class="trow2" colspan="2"><div align="center"><input name="submit" type="submit" class="button" value="{$lang->login}" style="margin: 10px 0 8px; width: 97% !important; border: 0; padding: 8px; color: #fff; font-size: 14px; background: #2c82c9;"/></div></td> </tr> </table> </form> </div> <script type="text/javascript">
					$("#quick_login input[name=url]").val($(location).attr(href)); </script> <ul class="menu top_links"> <li><a href="{$mybb->settings[homeurl]}"><i class="fa fa-comments"></i> Forum</a></li> <li><a href="{$mybb->asset_url}/search.php"><i class="fa fa-search"></i> {$lang->toplinks_search}</a></li> <li><a href="{$mybb->asset_url}/memberlist.php"><i class="fa fa-users"></i> Użytkownicy</a></li> <li><a href="{$mybb->asset_url}/calendar.php"><i class="fa fa-calendar-check-o"></i> {$lang->toplinks_calendar}</a></li> <li><a href="{$mybb->asset_url}/misc.php?action=help" class="help"><i class="fa fa-question-circle"></i> {$lang->toplinks_help}</a></li> </ul> </div> </div>

 

Z tym 

placeholder="Login..."

mam problem, ponieważ wyświetla mi takie coś w błędach:

 

Natomiast ten hover nadal nie wiem jak to zrobić, kod podałem.

#panel .upper {
	background: #0074c1; /* Old browsers */
	color: #fff;
	clear: both;
	padding: 1.7em 0px 1.8em; }
#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:active { color: #fff; }
#panel .upper a:hover { color: #dbd880; text-decoration: none; }

Kod oczywiście przed robieniem hove

 

@pBartnik

Edited by Astrius

Share this post


Link to post

Prosiłbym o link do forum iż ten kod nie jest pełny i wolałbym to widzieć.

Share this post


Link to post

Już wspominałem, że wszystko robię na localhost bo forum będzie dopiero otwierane za kilka miesięcy, więc musiałbym stworzyć forum a za bardzo nie chce mi się bawić, kod który podałem jest cały dotyczący panelu (belki).

Share this post


Link to post
	<a href="{$mybb->settings['bburl']}/private.php" style="margin-left: 14px;">{$lang->welcome_pms}</a> <a href="{$mybb->settings['bburl']}/private.php"><span class="pmbg bradius-full">{$mybb->user['pms_unread']}</a></span>
</span>
			<ul class="menu top_links">
				<li><a href="{$mybb->settings['bburl']}"><i class="fa fa-comments"></i> Forum</a></li>
				<li><a href="{$mybb->settings['bburl']}/search.php"><i class="fa fa-search"></i> {$lang->toplinks_search}</a></li>
				<li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class="fa fa-users"></i> Użytkownicy</a></li>
				<li><a href="{$mybb->settings['bburl']}/calendar.php"><i class="fa fa-calendar-check-o"></i> {$lang->toplinks_calendar}</a></li>
				<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><i class="fa fa-question-circle"></i> {$lang->toplinks_help}</a></li>
			</ul>
	</div>
</div>

 

#header ul.menu {
	text-align: right;
	margin: 0;
	padding: 0;
	list-style: none; }

#header ul.menu li {
	margin: 0 4px;
	display: inline; }

#header ul.menu li a {
	padding-left: 20px;
	display: inline-block;
	color: #fff;
	line-height: 16px;
	font-family: "Open Sans", Sans-serif, Arial; }

#panel .upper a.logout {
	font-weight: bold;
	background: url(images/headerlinks_sprite.png) right -80px no-repeat;
	padding-right: 20px;
	margin-left: 10px; }

#panel .upper a.login,
#panel .upper a.lost_password {
	padding: 9px 14px 8px 12px;
    margin-left: 25px;
    font-weight: 300; }

#panel .upper a.register {
	padding: 9px 14px 8px 12px;
    margin-left: 5px;
    font-weight: 300; }

#panel .upper a.login:hover { background: rgba(44, 130, 201, 0.60); color: #fff; }
#panel .upper a.register:hover { background: rgba(217, 139, 58, 0.60); color: #fff; }

#panel .upper {
	background: #0074c1;
	color: #fff;
	clear: both;
	padding: 1.7em 0px 1.8em; }

#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:active { color: #fff; }
#panel .upper a:hover { color: #dbd880; text-decoration: none; }

Wstawiłem cały header.

Share this post


Link to post

Coś mi się tu nie zgadza iż #panel gdzie ma div'a albo coś? Tak samo jak .menu top_links?

 

http://codepen.io/anon/pen/BpzErR

 

Share this post


Link to post

To jest zrobione tak (szablon flatty)

header_welcomeblock_guest

 

<span class="float_left">
	<a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="$('#quick_login').modal({ fadeDuration: 250, keepelement: true, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;" class="login bradius"><i class="fa fa-key fa_xtra" style="margin-top: -2px !important;"></i> {$lang->welcome_login}</a> 
	<a href="{$mybb->settings['bburl']}/member.php?action=register" class="register bradius"><i class="fa fa-user-plus fa_xtra"></i>{$lang->welcome_register}</a>
</span>					
				<div class="modal" id="quick_login" style="display: none;">
					<form method="post" action="{$mybb->settings['bburl']}/member.php">
							<input name="action" type="hidden" value="do_login" />
							<input name="url" type="hidden" value="" />
							<input name="quick_login" type="hidden" value="1" />	
						<table width="100%" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" border="0" class="tborder">
							<tr>
								<td class="thead" colspan="2" style="border-radius: 0 !important;"><i class="fa fa-user fa_xtra"></i> {$lang->login}</td>
							</tr>
							<tr>
								<td class="trow1"><input name="quick_username" id="quick_login_username" type="text" placeholder="Username" class="textbox initial_focus" style="width: 350px; margin: 11px 8px 0px 8px;" /><i class="fa fa-user adj_log"></i></td>
							</tr>
							<tr>
								<td class="trow1"><input name="quick_password" id="quick_login_password" type="password" placeholder="Password" class="textbox" style="width: 350px; margin: -5px 8px 1px 8px;" /><i class="fa fa-unlock-alt adj_log"></i></td>
							</tr>
							<tr>
								<td class="trow1 remember_me" style="padding-left: 22px; padding-right: 30px;">
									<input name="quick_remember" id="quick_login_remember" type="checkbox" value="yes" class="checkbox" checked="checked" />
									<label for="quick_login_remember">{$lang->remember_me}</label>
									
									<a href="{$mybb->settings['bburl']}/member.php?action=lostpw" class="lost_password float_right">{$lang->lost_password}</a>
								</td>
							</tr>
							<tr>
								<td class="trow2" colspan="2"><div align="center"><input name="submit" type="submit" class="button" value="{$lang->login}" style="margin: 10px 0 8px; width: 97% !important; border: 0; padding: 8px; color: #fff; font-size: 14px; background: #2c82c9;"/></div></td>
							</tr>
						</table>
					</form>
				</div>
				<script type="text/javascript">
					$("#quick_login input[name='url']").val($(location).attr('href'));
				</script>
<ul class="menu top_links">
	<li><a href="{$mybb->settings['homeurl']}"><i class="fa fa-comments"></i> Forum</a></li>
	<li><a href="{$mybb->asset_url}/search.php"><i class="fa fa-search"></i> {$lang->toplinks_search}</a></li>
	<li><a href="{$mybb->asset_url}/memberlist.php"><i class="fa fa-users"></i> Użytkownicy</a></li>
	<li><a href="{$mybb->asset_url}/calendar.php"><i class="fa fa-calendar-check-o"></i> {$lang->toplinks_calendar}</a></li>
	<li><a href="{$mybb->asset_url}/misc.php?action=help" class="help"><i class="fa fa-question-circle"></i> {$lang->toplinks_help}</a></li>
</ul>
	</div>
</div>

header_welcomeblock_member

 

<!-- Continuation of div(class="upper") as opened in the header template -->

<span class="float_left">
	<a href="" id="ddnmenu">Witaj, {$mybb->user['username']} <i class="fa fa-caret-down"></i></a>
			<div id="ddnmenu_popup" class="popup_menu" style="display: none;">
				<div class="popup_item_container">
					<a href="{$mybb->settings['bburl']}/usercp.php" class="popup_item clr_gry">
						Panel użytkownika
						<i class="fa fa-user menuadj"></i>
					</a>
				</div>
				<div class="popup_item_container">
					<a href="{$mybb->settings['bburl']}/usercp.php?action=profile" class="popup_item clr_gry">Edytuj profil
						<i class="fa fa-pencil menuadj"></i></a>
				</div>
				<div class="popup_item_container">
					<a href="{$mybb->settings['bburl']}/usercp.php?action=options" class="popup_item clr_gry">Edytuj opcje
						<i class="fa fa-cogs menuadj"></i></a>
				</div>
				<div class="popup_item_container">
					<a href="{$mybb->settings['bburl']}/usercp.php?action=avatar" class="popup_item clr_gry">Edytuj awatar
						<i class="fa fa-picture-o menuadj"></i></a>
				</div>
				<div class="popup_item_container">
					<a href="{$mybb->settings['bburl']}/usercp.php?action=editsig" class="popup_item clr_gry" style="padding-bottom: 4px;">Edytuj sygnature
						<i class="fa fa-paint-brush menuadj"></i></a>
				</div>
				<div class="popup_item_container">
					<a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup&modal=1', null, true); return false;" class="popup_item clr_gry">{$lang->welcome_open_buddy_list}
						<i class="fa fa-users menuadj"></i></a>
				</div>
				<div class="popup_item_container" style="border-top: 1px solid rgba(0, 0, 0, .023);">
					<a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}" class="popup_item clr_gry">{$lang->welcome_logout}!
						<i class="fa fa-power-off menuadj"></i>
					</a>
				</div>	
		</div>
		<script type="text/javascript">
			// <!--
				if(use_xmlhttprequest == "1")
					{
						$("#ddnmenu").popupMenu();
					}
			// -->
		</script>
	
	<a href="{$mybb->settings['bburl']}/private.php" style="margin-left: 14px;">{$lang->welcome_pms}</a> <a href="{$mybb->settings['bburl']}/private.php"><span class="pmbg bradius-full">{$mybb->user['pms_unread']}</a></span>
</span>
			<ul class="menu top_links">
				<li><a href="{$mybb->settings['bburl']}"><i class="fa fa-comments"></i> Forum</a></li>
				<li><a href="{$mybb->settings['bburl']}/search.php"><i class="fa fa-search"></i> {$lang->toplinks_search}</a></li>
				<li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class="fa fa-users"></i> Użytkownicy</a></li>
				<li><a href="{$mybb->settings['bburl']}/calendar.php"><i class="fa fa-calendar-check-o"></i> {$lang->toplinks_calendar}</a></li>
				<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><i class="fa fa-question-circle"></i> {$lang->toplinks_help}</a></li>
			</ul>
	</div>
</div>

 

Share this post


Link to post

Ale gdzie masz to #panel użyte?

#panel .upper a.logout {
	font-weight: bold;
	background: url(images/headerlinks_sprite.png) right -80px no-repeat;
	padding-right: 20px;
	margin-left: 10px; 
}
#panel .upper a.login,
#panel .upper a.lost_password {
	padding: 9px 14px 8px 12px;
    margin-left: 25px;
    font-weight: 300; 
}
#panel .upper a.register {
	padding: 9px 14px 8px 12px;
    margin-left: 5px;
    font-weight: 300; }
#panel .upper a.login:hover { background: rgba(44, 130, 201, 0.60); color: #fff; }
#panel .upper a.register:hover { background: rgba(217, 139, 58, 0.60); color: #fff; }
#panel .upper {
	background: #0074c1;
	color: #fff;
	clear: both;
	padding: 1.7em 0px 1.8em; 
}
#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:active { color: #fff; }
#panel .upper a:hover { color: #dbd880; text-decoration: none; }

 

Share this post


Link to post
1 minutę temu, pBartnik napisał:

Ale gdzie masz to #panel użyte?


#panel .upper a.logout {
	font-weight: bold;
	background: url(images/headerlinks_sprite.png) right -80px no-repeat;
	padding-right: 20px;
	margin-left: 10px; 
}
#panel .upper a.login,
#panel .upper a.lost_password {
	padding: 9px 14px 8px 12px;
    margin-left: 25px;
    font-weight: 300; 
}
#panel .upper a.register {
	padding: 9px 14px 8px 12px;
    margin-left: 5px;
    font-weight: 300; }
#panel .upper a.login:hover { background: rgba(44, 130, 201, 0.60); color: #fff; }
#panel .upper a.register:hover { background: rgba(217, 139, 58, 0.60); color: #fff; }
#panel .upper {
	background: #0074c1;
	color: #fff;
	clear: both;
	padding: 1.7em 0px 1.8em; 
}
#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:active { color: #fff; }
#panel .upper a:hover { color: #dbd880; text-decoration: none; }

 

 

 

<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
			<div id="logo">
				<div class="wrapper">
					<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
				</div>
			</div>
			<div id="panchor"></div>
			<div id="panel">
				<div class="upper">
					<div class="wrapper">
						{$welcomeblock}
					<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
				<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
			</div>
		</div>
		<div id="content">
			<div class="wrapper">
					{$bbclosedwarning}
					{$unreadreports}
					{$bannedwarning}
					{$pending_joinrequests}
					{$awaitingusers}
				<navigation>
				<br />

 

 

Share this post


Link to post

@Astrius Niestety nie pomogę bez strony, możesz to wgrać na jakiś hosting albo czekać na kogoś kto jest bardziej obeznany i zna wszystkie zmienne w MyBB. Ja potrzebuje niestety linku.

Share this post


Link to post
#header ul.menu li a {
	padding: 25px 10px;
	display: inline-block;
	color: #fff;
	font-family: "Open Sans", Sans-serif, Arial;
}
#header ul.menu li a:hover {
	background-color: #000;
}

 

image

Coś takiego?

Edited by pBartnik

Share this post


Link to post

Tak, tylko jak widać belka się powiększa a chciałbym aby pozostała w rozmiarach takich jak była. ☺️

Share this post


Link to post

Na lewej stronie do float_left style="" dodaj  margin-top: 21px;.

 

#header ul.menu li a {
	display: inline-block;
	color: #fff;
	font-family: "Open Sans", Sans-serif, Arial;
	padding: 22px;
}
#header ul.menu li > a:hover {
	background-color: #000;
}

 

Edited by pBartnik
  • Like 1

Share this post


Link to post

Myślę, że łatwiej byłoby nadać line-height dla odnośników a hover z powiększeniem dać na element nadrzędny czyli na li.

Oczywiście potem zadbać o to by usunąć odpowiednie odstępy i marginesy.

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Create a New Account. It’s free and easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
×
×
  • Create New...