| Kingsley |
|
|---|---|
|
seeing I was smart and accitentally deleted my genoa db.. I thought it to be a good time to switch to Sienna, so I am in the process of creating a new skin.
Now I wondered how you - on this site - did that thing with the icons and a number appearing when a new mail arrives. |
| Twiebie |
|
|---|---|
|
Something like this maybe?
<!-- IF {PHP.usr.messages} > 0 -->
<li><a href="{PHP|cot_url('pm')}" class="newpm">{PHP.usr.messages}</a></li>
<!-- ELSE -->
<li><a href="{PHP|cot_url('pm')}">No new private messages</a></li>
<!-- ENDIF -->
|
| Kingsley |
|
|---|---|
|
I'd expected some Javascript.. ;) |
| Twiebie |
|
|---|---|
|
Not sure what they use on Cotonti.com, but that's what worked fine for me. |
| lukgoh |
|
|---|---|
|
I use this method as well. Works great and is easy to implement. |
| uznik73 |
|
|---|---|
|
Всем привет. Я плохо знаю английский, и не хочется писать на кривом английском используя google translate. Но суть должна быть понятна и без описания. Full topbar like on cotonti.com header.tpl
<!-- BEGIN: GUEST -->
<section id="topbar">
<div class="container">
<ul>
<li><a href="{PHP|cot_url('index')}" id="home" title="Home">Home</a></li>
<li><a href="index.php?e=search" id="search" title="Search">Search</a></li>
</ul>
<ul id="guest">
<li><a href="/login.php" id="login" title="login" class="">Login</a></li>
</ul>
<form action="/login.php?a=check" method="post"><div style="display:inline;margin:0;padding:0"><input type="hidden" name="x" value="B8747FEE"></div>
<div id="loginbox" class="userbox hidden">
name:<br><input type="text" name="rusername" maxlength="32" class="text"><br>
password:<br><input type="password" name="rpassword" maxlength="32" class="password"><br>
<input type="hidden" name="rremember" value="1">
<button type="submit">Login</button>
<a href="{PHP|cot_url('users','m=register')}">{PHP.L.Register}</a>
<a href="{PHP|cot_url('users','m=passrecover')}">{PHP.L.users_lostpass}</a>
</div>
</form></div>
</section>
<!-- END: GUEST -->
<!-- BEGIN: USER -->
<section id="topbar">
<div class="container">
<ul>
<li><a href="{PHP|cot_url('index')}" id="home" title="Home">Home</a></li>
<li><a href="/index.php?e=search" id="search" title="Search">Search</a></li>
</ul></div>
<ul id="user">
<li id="notices"></li><li><a href="{PHP|cot_url('users','m=profile')}" id="profile" title="{PHP.L.Profile}">{PHP.L.Profile}</a></li>
<li><a href="{PHP|cot_url('pm')}" id="messages" title="{PHP.L.Private_messages}">{PHP.L.Private_Messages}</a></li>
<li><a href="{PHP|cot_url('pfs')}" id="files" title="{PHP.L.PFS}">{PHP.L.PFS}</a></li>
<li><div id="logout" title="Logout">{PHP.out.loginout}</div></li>
</ul>
</section>
<!-- END: USER -->
footer.tpl
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
(function($) {
$.fn.defaultValue = function(defaultvalue) {
return this.each(function() {
if (!$(this).val() && defaultvalue) {
$(this).val(defaultvalue);
}
if ($(this).val()) {
$(this).attr('defaultValue', $(this).val());
}
$(this).live('focus', function() {
if ($(this).attr('defaultValue') == $(this).val()) {
$(this).val('');
}
});
$(this).live('blur', function() {
if ($(this).val() == '') {
$(this).val($(this).attr('defaultValue'));
}
});
});
};
$.fn.setActiveTab = function(baseurl, currenturl, classname) {
if (baseurl.charAt(baseurl.length - 1) == '/') {
baseurl = baseurl.substr(0, baseurl.length - 1);
}
currenturl.replace(baseurl + '/', '');
if (!classname)
classname = 'active';
return this.each(function() {
$(this).find('a').each(function() {
$(this).removeClass(classname);
var linkhref = $(this).attr('href').replace(baseurl, '');
if (linkhref.charAt(0) == '/') {
linkhref = linkhref.substr(1);
}
if (currenturl == linkhref || linkhref && currenturl.indexOf(linkhref) == 0) {
$(this).parents('li:last').find('a:first').addClass(classname);
return false;
}
});
});
};
$.fn.toggleContent = function(options) {
return this.each(function() {
$(this).toggle(function(event) {
event.preventDefault();
if (options.css) {
$(this).css(options.css);
}
if (options.content) {
if (options.before) {
$(this).before(options.content);
} else {
$(this).after(options.content);
}
}
$(this).trigger('on.toggleContent');
}, function(event) {
event.preventDefault();
$(this).trigger('off.toggleContent');
});
});
};
$.fn.cot_ajaxify = function(options) {
return this.each(function() {
var $this = $(this);
var $targets = $this.find('a[href]');
var path = window.location.pathname.substr(1);
if (options && options.filter) {
$targets = $targets.filter(options.filter);
}
$targets.live('click', function(e) {
var href = $(this).attr('href');
var hash = href.replace(path, '');
if (hash) {
e.preventDefault();
if (options && options.history) {
$.history.load(hash);
} else {
if (options && options.css && options.css.before) {
$this.css(options.css.before);
}
$.get(href, function(data) {
$this.html(data);
if (options && options.css && options.css.after) {
$this.css(options.css.after);
}
});
}
}
});
if (options && options.history) {
$.history.init(function(hash) {
$.get(path + hash, function(data) {
$this.html(data);
if (options && options.css && options.css.after) {
$this.css(options.css.after);
}
});
}, {unescape: "/"});
}
});
};
})(jQuery);
;
$("#search").toggleContent({
css: { 'margin-left': '240px' },
content: '<form id="searchform" action="{PHP|cot_url('plug','e=search')}" method="post"><input id="searchfield" type="text" name="sq" title="Search" value=""></form>',
before: true
}).bind('on.toggleContent', function() {
$(this).parent().find('input').focus();
}).bind('off.toggleContent', function() {
$(this).parent().find('form').submit();
});
$("#login").toggle(function() {
$(this).addClass('active');
$("#loginbox").removeClass('hidden');
$("#loginbox input:first").focus();
}, function() {
$("#loginbox").addClass('hidden');
$(this).removeClass('active');
});
if({PHP.usr.messages}>0){
$("a#messages")
.append('<div id="pmcount">{PHP.usr.messages}</div>')
.attr('title', 'Messages (unread: {PHP.usr.messages})')
.toggle(function(){
$(this).addClass('active');
$('body').append('<div id="pmbox" class="userbox"><p><a href="{PHP|cot_url('pm')}">Inbox</a> - <a href="{PHP|cot_url('pm')}&f=sentbox">Sentbox</a></p></div>');
$.ajax({
url: '/index.php?e=pm&f=inbox&filter=unread',
dataType : "html",
success: function(html) {
rows = ''
var ajax_obj = $(html);
t = ajax_obj.find("#message_theme");
n = ajax_obj.find("#sender_name");
for (var h = 0; h < t.length; h++) {
rows += '<div id="message">';
rows += '<li>'+t[h].innerHTML+'<div id="sender">Sender: '+n[h].innerHTML+'</div></li>';
rows += '</div>';
document.getElementById('pmbox').innerHTML = rows+'<p><a href="{PHP|cot_url('pm')}">Inbox</a> - <a href="{PHP|cot_url('pm')}&f=sentbox">Sentbox</a></p>';
}
}
});
}, function(){
$(this).removeClass('active');
$('div#pmbox').remove();
});
}
});
//]]>
</script>
css
section#topbar #home, section#topbar #admin, section#topbar #search, section#topbar #profile, section#topbar #messages, section#topbar #files, section#topbar #logout {background-image: url("../img/sprite-navigation.png");}
section#topbar #guest a, section#topbar #user a {margin-left: 1px; margin-right: 0;}
section#topbar li a {display: block;margin: 1px;margin-left: 0;padding: 0 15px;height: 28px;line-height: 28px;color: #C0D2DD;background-repeat: no-repeat;background-position: center;}
section#topbar #profile {width: 30px; padding: 0; text-indent: -9999px; background-position: -90px 0;}
section#topbar #messages {width: 30px;padding: 0;text-indent: -9999px;background-position: -120px 0;}
section#topbar #files {width: 30px;padding: 0;text-indent: -9999px;background-position: -150px 0;}
section#topbar #logout {width: 30px;padding: 0;text-indent: -9999px;background-position: -180px 0;}
section#topbar {background: #012D48;height: 30px;}
section#topbar #guest, section#topbar #user {float: right;}
section#topbar ul {margin: 0;padding: 0;}
section#topbar li {list-style: none;float: left;}
#topbar {width: 960px;margin: 0 auto;padding: 0;clear: both;}
section#topbar #home {width: 30px;padding: 0;text-indent: -9999px;background-position: -30px 0;}
section#topbar #search {width: 30px;padding: 0;text-indent: -9999px;background-position: 0 0;}
section#topbar #searchfield:hover, #topbar #searchfield:focus {background-color: #0A5E91;}
section#topbar #searchfield {position: absolute;top: 1px;background: none;border: 0;outline: 0;width: 230px;height: 28px;margin: 0;padding: 0 5px;color: #C0D2DD;border-image: initial;}
#loginbox input {width: 170px;margin: 2px 0 4px 0;padding: 2px 4px;border: 1px #BBB solid;background: #EEE;height: 20px;-khtml-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;border-image: initial;}
.userbox {position: absolute;top: 29px;left: 50%;margin-left: 280px;width: 180px;padding: 10px;background: white;border-bottom: 3px #CCC solid;z-index: 1;}
section#topbar a.active {background-color: white;color: #04293F;}
#loginbox button {width: 180px;padding: 4px 0;margin: 6px 0;-khtml-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;}
#pmcount {
position: absolute;
top: 2px;
left: 50%;
margin-left: 405px;
width: 9px;
height: 9px;
line-height: 9px;
background: #C00;
color: white;
padding: 1px;
text-indent: 0;
font-size: 9px;
font-weight: bold;
border: 1px #100 solid;
overflow: hidden;
text-align: center;
-khtml-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border-image: initial;
}
#pmbox li a {
color:#0079C1;
display: block;
font-weight: bold;
}
#pmbox ol {
list-style: none;
margin: 0;
padding: 0;
}
#pmbox li {
display: block;
border-bottom: 1px #CCC solid;
padding: 5px 8px;
list-style: none;
}
#pmbox p {
margin: 0;
padding: 0 8px;
font-size: 85%;
line-height: 20px;
}
#pmbox {
padding: 0;
width: 200px;
}
#sender a { color: #667E72; display: initial!important;}
#sender {
font-size: 85%;
}
in modules/pm/tpl/pm.list.tpl change
<p class="strong">{PM_ROW_TITLE}</p>
to
<p id="message_theme" class="strong">{PM_ROW_TITLE}</p>
and
<td class="centerall {PM_ROW_ODDEVEN}">{PM_ROW_USER_NAME}</td>
to
<td id="sender_name" class="centerall {PM_ROW_ODDEVEN}">{PM_ROW_USER_NAME}</td>
I think it's all, hope it's help. I almost forgot, put this image in "themename/img" http://www.cotonti.com/thms/cotcom/img/sprite-navigation.png Sorry for my poor English
|
|
| This post was edited by uznik73 (2012-01-15 18:37, 12 years ago) |
| Kingsley |
|
|---|---|
|
Coooooooolll very much appriciated.. ;) |
