Forums / Cotonti / General / New p.m. question and remark

Kingsley
#1 2012-01-12 16:33

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.

When we're on that subject. the number appears on the my file space icon, instead of on the p.m. icon. I use the latest version of FF

Twiebie
#2 2012-01-12 16:50

Something like this maybe?

XML/XHTML
1
2
3
4
5
<!-- 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
#3 2012-01-12 17:09

I'd expected some Javascript.. ;)

Thx twieb.. will play around with it.

Twiebie
#4 2012-01-12 17:33

Not sure what they use on Cotonti.com, but that's what worked fine for me.

lukgoh
#5 2012-01-12 18:13

I use this method as well. Works great and is easy to implement. 

uznik73
#6 2012-01-15 18:16

Всем привет. Я плохо знаю английский, и не хочется писать на кривом английском используя google translate. Но суть должна быть понятна и без описания.

Full topbar like on cotonti.com

header.tpl

XML/XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- 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

XML/XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<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

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
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

XML/XHTML
1
<p class="strong">{PM_ROW_TITLE}</p>

to

XML/XHTML
1
<p id="message_theme" class="strong">{PM_ROW_TITLE}</p>

and

XML/XHTML
1
<td class="centerall {PM_ROW_ODDEVEN}">{PM_ROW_USER_NAME}</td>

to

XML/XHTML
1
<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, 13 years ago)
Kingsley
#7 2012-01-15 20:58

Coooooooolll very much appriciated.. ;)