LastPost PopUp بسیار زیبا به سبک VB

[CSS]

سلام دوستان

در این اموزش شما با نحوه ی ایجاد منوی پاپ اپ بسیار زیبا به سبک ویبولتین برای اخرین ارسال کننده در ایندکس انجمنتون اشنا میشین.

نمونه:




رنگ های مختلفی میتونید براش تعریف کنید. این تصاویر فقط نمونه بودن.

نکته: همیشه قبل از تغییرات از اطلاعاتتون Backup تهیه کنید.
نکته2: کد های موجود رو ابتدا در NotePad و سپس در قالب کپی کنید.

نویسنده: handshake
ترجمه: CSS
انتشار پارسی: مای بی بی ایران

اموزش
ابتدا مسیر زیر رو دنبال کنید.

کنترل پنل مدیر کل »قالب‌ها و پوسته‌ها » پوسته‌ها » پوسته مورد نظر » افزودن قالب بندی

حالا در این بخش فیلد ها رو بصورت زیر پر کنید.



خب حالا در کادری که در پایین باز شده کد زیر رو کپی کنید و سپس توسط گزینه ی ذخیره ی قالب بندی فایل جدید رو ذخیره کنید.

کد php:

.popupmenu {
    *z-index:999;
    position: relative;
}



.popupbody {
    font:   normal 11px Tahoma, Calibri, Verdana, Geneva, sans-serif;
    color: #3E3E3E;
    padding:2px;
    background:#E1E1E1 none   ;
    border: 1px solid rgb(153, 153, 153);
    position:absolute;
    z-index:1000;
    top:1.5em;
    left:0;
    display:none;
    min-width:200px;
}

.popupmenu:hover ul.popuphover {
    display:block;
}


.popupbody li a,
.popupbody li label {
    display:block;
    color: #3E3E3E;
    background:rgb(204, 204, 204) none   ;
    padding:6.235px 10px;
    text-decoration:none;
    text-align:left;
    white-space:nowrap;
}



.memberaction_body.popupbody li a:hover {
    color:#3E3E3E;
    background-color:#FFEB90;
}


.memberaction.popupmenu {
    position: relative;
    top: 0;
    display: inline-block;
}
.postdetails .memberaction.popupmenu {
    position: static; /* Opera 10.10 Fix */
}
.memberaction.popupmenu a.popupctrl {
    background: none;
    padding: 0;
}
.memberaction_body.popupbody {
    width: 280px;
    background: #e9e9e9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 4px 7px #c8c8c8;
    -webkit-box-shadow: 0px 4px 7px #c8c8c8;
    box-shadow: 0px 4px 7px #c8c8c8;
}
.memberaction_body.popupbody li {
    border: none;
    width: 140px;
}
.memberaction_body.popupbody li.left {
    float: left;
    clear: left;
}
.memberaction_body.popupbody li.right {
    float: right;
    clear: right;
}

.memberaction_body.popupbody li .siteicon_profile { 
    background:url(images/popup/profile.png) left 2px no-repeat; 
}
.memberaction_body.popupbody li .siteicon_forum { 
    background:url(images/popup/forum.png) left 2px no-repeat; 
}
.memberaction_body.popupbody li .siteicon_message { 
    background:url(images/popup/message.png) left 2px no-repeat; 
}
.memberaction_body.popupbody li .siteicon_blog { 
    background:url(images/popup/blog.png) left 2px no-repeat; 
}
.memberaction_body.popupbody li .siteicon_homepage { 
    background:url(images/popup/homepage.png) left 2px no-repeat; 
}
.memberaction_body.popupbody li .siteicon_article { 
    background:url(images/popup/article.png) left 2px no-repeat; 
}
.memberaction_body.popupbody li .siteicon_add { 
    background:url(images/popup/add.png) left 2px no-repeat; 
}
.memberaction_body.popupbody li .siteicon_email { 
    background:url(images/popup/email.png) left 2px no-repeat; 
}

.memberaction_body.popupbody li > a {
    padding: 4px;
    padding-left:20px;
}
.memberaction_body.popupbody hr {
    float: left;
    height: 96px;
    width: 0;
    display: inline;
}


ul,ol,li{margin:0;padding:0;}li{list-style:none;} 


حالا به مسیر زیر مراجعه کنید.

کنترل پنل مدیر کل »قالب‌ها و پوسته‌ها » قالب ها » قالب مورد نظر » Forum Bit Templates

سپس وارد forumbit_depth2_forum_lastpost بشین و تمامی کد های موجود رو حذف و کدهای زیر رو جایگزین کنید.

کد php:

<a href="{$lastpost_link}" title="{$full_lastpost_subject}"><strong>{$lastpost_subject}</strong></a>
<br />{$lastpost_date} {$lastpost_time}<br />
{$lang->by}
<div class="popupmenu memberaction">
{$lastpost_profilelink}
<ul class="popupbody popuphover memberaction_body">
        <li class="left">
            <a class="siteicon_profile" href="member.php?action=profile&uid={$lastpost_data['lastposteruid']}">
                مشاهده پروفایل
            </a>
        </li>
        
        <li class="right">
            <a rel="nofollow" class="siteicon_forum" href="search.php?action=finduser&uid={$lastpost_data['lastposteruid']}">
                مشاهده تمام ارسال ها
            </a>

        </li>
        
        
        <li class="left">
            <a rel="nofollow" class="siteicon_message" href="private.php?action=send&amp;uid={$lastpost_data['lastposteruid']}">
                ارسال پیام خصوصی
            </a>
        </li>
    
    </ul>
</div> 


حالا در همون مسیر یعنی
کنترل پنل مدیر کل »قالب‌ها و پوسته‌ها » قالب ها » قالب مورد نظر » Forum Bit Templates

وارد forumbit_depth2_forum بشین و تمام کدها رو حذف و کدهای زیر رو جایگزین کنید.

کد php:

<tr>
<td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></td>
<td class="{$bgcolor}" valign="top">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
</td>
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor}" valign="top" align="left" style="white-space: nowrap">{$lastpost}</td>
</tr> 


خب کار تمام فقط شما باید فایل زیر رو دانلود و محتویاتش رو در پوشه Images اپلود کنید.
دانلود فایل
لذت ببرید .

عذرخواهی میکنم چون من پیوست ندارم که پیوست کنم.

موفق باشید.

[Amin Yaghubi]

سپاس از دوست عزیزمون , بنده انجام دادم بسیار زیبا شد

[میدوری]

تمام کدها رو حذف و کدهای زیر رو جایگزین کنید

با درود و سپاس از راه کار خوب شما .
اما در بخش هایی که دستور حذف داده اید , کسانی هستند مثل خود من که چیزهایی اضافه بر سازمان مای بی بی دارند و با پاک کردن کدها , بخش های دیگری از انجمنشان ممکن است که از کار بیافتد . راه حل مناسبی ارائه می کردید بدون حذف بهتر نبود ؟ .

[CSS]

بررسی میکنم و بزودی کد مربوطه رو قرار میدم.

با تشکر

---

دوستانی که در forumbit_depth2_forum_lastpost و forumbit_depth2_forum قبلا تغییرات ایجاد کردن و امکان حذف ندارن پس از ایجاد popups.css بصورت زیر عمل کنن.

در forumbit_depth2_forum نیازی به تغییر نیست.

وارد forumbit_depth2_forum_lastpost بشین و کد زیر رو پیدا کنید.

کد php:

<br />{$lastpost_date} {$lastpost_time}<br />{$lang->by} {$lastpost_profilelink}</span> 


با کد زیر جایگزین کنید.

کد php:

<br />{$lastpost_date} {$lastpost_time} <br /> {$lang->by} </span> 


نکته: در این تغییر فقط قطعه کد {$lastpost_profilelink} حذف میشه.

بعد از انجام تغییرات کد زیر رو در ادامه ی کد بالا قرار بدین.

کد php:

<div class="popupmenu memberaction">
{$lastpost_profilelink}
<ul class="popupbody popuphover memberaction_body">
        <li class="left">
            <a class="siteicon_profile" href="member.php?action=profile&uid={$lastpost_data['lastposteruid']}">
                مشاهده پروفایل
            </a>
        </li>
        
        <li class="right">
            <a rel="nofollow" class="siteicon_forum" href="search.php?action=finduser&uid={$lastpost_data['lastposteruid']}">
                مشاهده تمام ارسال ها
            </a>

        </li>
        
        
        <li class="left">
            <a rel="nofollow" class="siteicon_message" href="private.php?action=send&amp;uid={$lastpost_data['lastposteruid']}">
                ارسال پیام خصوصی
            </a>
        </li>
    
    </ul>
</div> 


لذت ببرید.....

موفق و سربلند باشید.

[Rezakashefi]

بسيار عالي / اميدوارم پس از حل مشكل پيوست ها فايل هاي مربوطه در ماي بي بي ايران پيوست گردد.

باتشكر

[mgt1234]

سلام
این تصاویر رو اگه ممکنه یه جایی آپلود کنید ببینیم این اصلا چی چی هست
ممنون

[firstboy000]

با تشکر فراوان از CSS و handshake عزیز.
چیز خوبیه جالب میشه اگه استفاده کنی.
متاسفانه من هنوز استفاده نکردم چون کد قالبم قدیمیه و یکمی مشکل داره باید روش کار کنم.
بازم مرسی فقط اینو بگم که تصاویرش رو توی همین سایت اگه میشه آپلود کنید که بعد از مدتی حذف نشن.

[CSS]

سلام

دوستان تصاویر مشکلی ندارن


متشکرم از firstboy000 عزیز و باید عرض کنم که متاسفانه دسترسی پیوست من غیرفعال هست. در صورت فعال شدن حتما تمامی فایل های اموزشی که تا به الان قرار دادم رو پیوست میکنم.

با تشکر

سربلند باشید.

[firstline]

با سلام
بسیار خوب، ساده، فنی و کاربردی بود.
چجوری میشه برای نام کاربرها در پستها postbit هم اینکار را انجام داد؟
لطفا راهنمایی بفرمایید
با تشکر

[firstboy000]

خب سلام خدمت دوستان.خیلی وقت پیش خودم دنبال این تاپیک میگشتم ولی پیداش نکردم تا امروز.امروز که چک کردم دیدم تصاویرش ناقص شده.حالا اومدم به یه مدل دیگه درآوردمش.
چکار کردم؟

خب پارسی سازی کردم.یعنی راستچینش کردم.
توضیحات سی اس اس عزیز کامله و من فقط چندتا تغییرات توی کد دادم میذارم اینجا.
تصاویر هم لینک میدم.

قسمت اول وقتی فایل قالبی ساختید کدهای زیرو توش قرار بدید.

کد:

.popupmenu {
    *z-index:999;
    position: relative;
}

.popupbody {
    font:   normal 11px Tahoma, Calibri, Verdana, Geneva, sans-serif;
    color: #3E3E3E;
    padding:2px;
    background:#E1E1E1 none   ;
    border: 1px solid rgb(153, 153, 153);
    position:absolute;
    z-index:1000;
    top:1.5em;
    right:-100px;
    display:none;
}

.popupmenu:hover ul.popuphover {
    display:block;
}

.popupbody li a,
.popupbody li label {
    display:block;
    color: #3E3E3E;
    background:rgb(204, 204, 204) none   ;
    padding:6.235px 10px;
    text-decoration:none;
    text-align:right;
    white-space:nowrap;
}

.memberaction_body.popupbody li a:hover {
    color:#3E3E3E;
    background-color:#FFEB90;
}

.memberaction.popupmenu {
    position: relative;
    top: 0;
    display: inline-block;
}

.postdetails .memberaction.popupmenu {
    position: static; /* Opera 10.10 Fix */
}

.memberaction.popupmenu a.popupctrl {
    background: none;
    padding: 0;
}

.memberaction_body.popupbody {
    width: 280px;
    background: #e9e9e9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 4px 7px #c8c8c8;
    -webkit-box-shadow: 0px 4px 7px #c8c8c8;
    box-shadow: 0px 4px 7px #c8c8c8;
}

.memberaction_body.popupbody li {
    border: none;
    max-width: 280px;

}

.memberaction_body.popupbody li.left {
    float: left;
    clear: left;
    width: 140px;

}

.memberaction_body.popupbody li.right {
    float: right;
    clear: right;
    width: 140px;

}

.memberaction_body.popupbody li .siteicon_profile {

    background:url(images/popup/profile.png) right 2px no-repeat;
}

.memberaction_body.popupbody li .siteicon_forum {

    background:url(images/popup/forum.png) right 2px no-repeat;
}

.memberaction_body.popupbody li .siteicon_message {

    background:url(images/popup/message.png) right 2px no-repeat;
}

.memberaction_body.popupbody li .siteicon_blog {

    background:url(images/popup/blog.png) right 2px no-repeat;
}

.memberaction_body.popupbody li .siteicon_homepage {

    background:url(images/popup/homepage.png) right 2px no-repeat;
}

.memberaction_body.popupbody li .siteicon_article {

    background:url(images/popup/article.png) right 2px no-repeat;
}

.memberaction_body.popupbody li .siteicon_add {

    background:url(images/popup/add.png) right 2px no-repeat;
}

.memberaction_body.popupbody li .siteicon_email {

    background:url(images/popup/email.png) right 2px no-repeat;
}

.memberaction_body.popupbody li > a {
    padding: 4px;
    padding-right:20px;
}

.memberaction_body.popupbody hr {
    float: left;
    height: 96px;
    width: 0;
    display: inline;
}

ul,ol,li {
margin:0;padding:0;
}

li {
list-style:none;
}

این از قسمت اول.قسمت دومش هیچ تغییری لازم نداره همونو قراربدید.و اما قسمت سوم.برای برخی پوسته ها لازم نیست و حتی تغییرش ممکنه باعث بهم ریختگی پوسته بشه(اینو بیشتر برای پوسته های قدیمی که خودمم از پوسته قدیمی استفاده میکنم گفتم)

در نهایت میمونه تصاویر که وی بی کش رفتیمو براتون گذاشتیم اینجا.
http://javanan.xzn.ir/up/do.php?filename...594861.zip


در ادامه برای دوستمون گفته بودن برای پست بیت هم میشه ایجادش کرد!!!!
ما میگیم بله میشه.
توی پست بعدی آموزش پست بیتش رو میذارم.