Перейти к публикации

Рекомендованные сообщения

Хочу сделать логин-панель как в шаблоне Pisces. Стянул engine.css и login.tpl. Из style.css вытянул /*---headlinks---*/ и /*---login---*/, но когда нажимаешь на "Привет, логин" ничего не происходит. Млжет я что то упустил???

вот мой style.css:

body, html {

	height:100%;

	background:#001526 url("../img/bg.png") no-repeat center center;

	margin:0;

	padding:0; }


.menul {

	position: absolute;

	left: 21%;

	top: 43%; }

.logo {

	padding-top:13%; }


.copy {

	padding-top: 30%;

	color:#7c7c7c}


/*---headlinks---*/

	.headlinks { margin-top: 31px; overflow: hidden; }

	.headlinks ul, .headlinks ul li, .headlinks, ul.loginbox li { float: left; }

	.headlinks ul { line-height: 22px; margin-left: -2px; }

		.headlinks ul li { background: url("../images/headlinks.png") no-repeat 0 50%; padding: 0 10px 0 11px; }

		.headlinks ul a, .lvsep, .lvsep a { color: #fff; }

			.headlinks ul a:hover, .lvsep a:hover { color: #78bf1a; }


/*---login---*/

.loginbox { display: inline; }

.loginbox ul.loginbox { margin-top: 30px; float: right; height: 26px; }

	ul.loginbox li { margin-left: 10px; line-height: 23px; }

	.loginbtn a { color: #151e05; text-shadow: 0 1px 0 #c0ea78; text-decoration: none; display: block; width: 61px; height: 26px; text-align: center; background: url("../images/loginbtn.png") no-repeat; }

		.loginbtn a:hover { background-position: 0 -26px; }


.logform li.lfield { margin-bottom: 10px; }

.logform li.lbtn { text-align: center; }

	.logform li.lfield input { width: 265px; }
Вот main.tpl:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

{headers}

	<link rel="stylesheet" title="default" href="{THEME}/css/style.css" type="text/css" />

	<link rel="stylesheet" title="default" href="{THEME}/css/engine.css" type="text/css" />

</head>

<body>

{AJAX}


<div class="logo"><center><a href="/index.php"><img src="{THEME}/img/logo.png"></a></center>

<div class="menul"><a href="/index.php"><img src="{THEME}/img/home.png"></a><a href="/products"><img src="{THEME}/img/prod.png"></a><a href="/portfolio"><img src="{THEME}/img/port.png"></a><a href="/forum"><img src="{THEME}/img/help.png"></a>{login}

</div>


<div class="copy"><center>© Copyright 2011<p>infdesign.ru</p></center></div>

файлы engine.css и login.tpl стандартные из шаблона Pisces

Ссылка на сообщение
Поделиться на других сайтах

Упустили.

Функцию еще нужно добавить в libs.js


$(function() {


	$( "#logindialog" ).dialog({

		autoOpen: false,

		show: 'fade',

		hide: 'fade',

		width: 300

	});


	$('#loginlink').click(function(){

		$('#logindialog').dialog('open');

		return false;

	});

});


Изменено пользователем - Den -
Ссылка на сообщение
Поделиться на других сайтах

у меня теперь такой вопрос. Как сделать, чтобы картинка была не внизу, а в ряд, как показано на скрине: http://awesomescreenshot.com/0faba26b0

main.tpl и style.css смотрите в первом посте.

login.tpl чуть подредактировал:

[not-group=5]

<ul class="reset loginbox">

	<div class="lvsep"><a id="loginlink" href="#"><img src="{THEME}/img/prof.png"></a></div>

</ul>

<div style="display: none;" id="logindialog" title="{login}">

	<div class="userinfo">

		<div class="lcol">

			<div style="margin: 0" class="avatar"><a href="{profile-link}"><img src="{foto}" alt="{login}" 


/></a></div>

		</div>

		<div class="rcol">

			<ul class="reset">

	[admin-link]<li><a href="{admin-link}" target="_blank"><b>Админпанель</b></a></li>[/admin-link]

				<li><a href="{addnews-link}"><b>Добавить новость</b></a></li>

				<li><a href="{pm-link}">Сообщения: ({new-pm} | {all-pm})</a></li>

				<li><a href="{profile-link}">Мой профиль</a></li>

				<li><a href="{favorites-link}">Мои закладки</a></li>

				<li><a href="{stats-link}">Статистика</a></li>

				<li><a href="{logout-link}">Выход</a></li>

			</ul>

		</div>

а дальше как в стандартном login.tpl из Pisces

Ссылка на сообщение
Поделиться на других сайтах

Тег {login} вынесите из контейнера с class="menul", и поставьте тег следом за этим контейнером, а самаму div с class="menul" в css задайте float: left;

Потом просто сбросьте обтекание после всей этой конструкции. Если не сможете, просто таблицей сверстайте

Ссылка на сообщение
Поделиться на других сайтах

{login} вынес, а остальное чуть по другому сделал.

Кстати если смотреть через мозилу и ИЕ, то картинки в каких то синих рамочках, в хроме и опере такого нет, как эти рамки убрать?

Ссылка на сообщение
Поделиться на других сайтах

в login.tpl есть такое:

<div id="logindialog" title="Авторизация" style="display: none;">

Я сделал так:

<div id="logindialog" title="Авторизация" style="display: none; background:#001526 url("../img/bg.png");">

Но выходит это:

http://awesomescreenshot.com/0f3bf7g4c

Ссылка на сообщение
Поделиться на других сайтах

Я ведь не ясновидящий!.. пока. Учусь только.

Скинь весь код шаблона, полностью. Мне тяжело так соориентироваться

Ссылка на сообщение
Поделиться на других сайтах

во ся:

[not-group=5]

<ul class="reset loginbox">

	<div class="lvsep"><a id="loginlink" href="#"><img src="{THEME}/img/prof.png"></a></div>

</ul>

<div id="logindialog" title="{login}" style="display: none; background:#001526 url("../img/bg.png");">

	<div class="userinfo">

		<center>

		<div class="lcol">

			<div style="margin: 0" class="avatar"><a href="{profile-link}"><img src="{foto}" alt="{login}" 


/></a></div>

		</div>

		<div class="rcol"><br />

				[admin-link]<a href="{admin-link}" target="_blank"><b>Админпанель</b></a>[/admin-link]<br>

				<a href="{addnews-link}"><b>Добавить новость</b></a><br>

				<a href="{pm-link}">Сообщения: ({new-pm} | {all-pm})</a><br>

				<a href="{profile-link}">Мой профиль</a><br>

				<a href="{favorites-link}">Мои закладки</a><br>

				<a href="{stats-link}">Статистика</a>

		</div>

		<div class="clr"></div>

		<center>

	</div>

</div>

[/not-group]


[group=5]

<ul class="reset loginbox">

	<li class="lvsep" style="float:right;"><a href="{registration-link}">Регистрация</a></li>

	<li class="loginbtn" style="float:right; border-left: 1px solid #ddf1fc;"><a id="loginlink" 


href="#"><b>Войти</b></a></li>

</ul>

<div id="logindialog" title="Авторизация" style="display: none; background:#001526 url("../img/bg.png");">

	<center>

	<form method="post" action="">

		<div class="logform">

				<li class="lfield"><label for="login_name">Имя:</label><br /><input type="text" 


name="login_name" id="login_name" /></li>

				<br /><br><li class="lfield lfpas"><label for="login_password">Пароль (<a 


href="{lostpassword-link}">Забыли?</a>):</label><br /><input type="password" name="login_password" id="login_password" 


/></li>

				<br /><br><li class="lbtn"><button class="fbutton" onclick="submit();" type="submit" 


title="Войти"><span>Войти</span></button></li>

			<input name="login" type="hidden" id="login" value="submit" />

		</div>

	</form>

	</center>

</div>

[/group]

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...