قالب تلگرام بیان بلاگ حرفه ای به همراه ابزار ویرایش و پلاگین

چطور بفهمیم نظری که ارسال کردیم به یک وبلاگ توسط نویسنده همون وبلاگ خونده شده؟

۲۹

۱۷ مهر ۱۴۰۱

طریقه حذف "بخش‌هایی از این نظر که با * مشخص شده، توسط مدیر سایت حذف شده است" از نظرات کاربران در وبلاگ!

۱۱

۱ مرداد ۱۴۰۱

قالب تلگرام بیان بلاگ حرفه ای به همراه ابزار ویرایش و پلاگین

۱۲

در حال مشاهده

۲۷ تیر ۱۴۰۱

طریقه آدرس دهی فایل های صندوق بیان بدون رمزنگاری! (بدون مخفی کردن ادرس)

۲۵ تیر ۱۴۰۱

طریقه ارتباط با وبلاگنویسی که قابلیت ارسال نظر رو خاموش کرده

۲۰ تیر ۱۴۰۱

نرم افزار قالب های پرو وب پلاس برای اندروید!

۲۳

۲۲ مرداد ۱۴۰۰

نکات و ترفند های سرویس بیان بلاگ + آفلاین ساز فایل پشتیبان بیان!

۲۹

۱۵ خرداد ۱۴۰۰

ابزار پشتیبان گیر پست های بیان بلاگ به همراه اطلاعات و مشخصات وبلاگ

۲۵

۱۴ ارديبهشت ۱۴۰۰

قالب اینستاگرام نسخه حرفه ای و پیشرفته برای وبلاگ های بیان بلاگ + قابلیت ثبت استوری!!

۱۸

۳۱ فروردين ۱۴۰۰

نکاتی در رابطه با بررسی فعال بودن جاوا اسکریپت وبلاگ همراه با دانستی های مفید !

۲۰

۱۵ آذر ۱۳۹۹

نویسنده آشنا @پرو وب پلاس

۱۷ مهر ۱۴۰۱

قالب تلگرام بیان بلاگ حرفه ای به همراه ابزار ویرایش و پلاگین

قبل از هر چیز لازم است اشاره کنم این پست کامل نیست و بروزرسانی های زیادی قراره اعمال بشه

طراحی و ایده و ساختش طی دوره زمانی نزدیک به 2 سال طول کشیده و مطمئنن اگر ارزشی برای کار من قائل باشید لینکی که داخل قالب به کار برده شده رو پاک نمیکنید، چون این تنها چیزی هست که انتظار دارم از شما، قرار بود این قالب برای فروش باشه، ولی بعد از این همه سال و دیدن اینکه شما وبلاگ نویس ها نسبت به نوشتن دلسرد شدید، و روز به روز دارید از این محیط فاصله میگیرید، برام سخت بود، و فروختن قالب هیچ کمکی به من نمیکرد، تصمیم گرفتم بیخیال وقت و هزینه ای که کردم بشم و به رایگان در اختیار شما در این عید مبارک قرار بدم و باعث بشه شما دوستان از شبکه های اجتمایی کمی فاصله بگیرید و اینجا فضای گرم و صمیمی تری رو ایجاد کنید، درک میکنم شرایط سخت شده و مثل قدیم نمیشه ولی به این ایمان دارم با حضورمون تو این سرویس و فعالیت بیشتر میتونیم حال هم دیگه رو ، هر چند کم خوب کنیم و روزمون رو سپری کنیم و حتی کمک حال هم توی شرایط سخت و همدیگه رو دلداری بدیم.

امیدوارم با حفظ کپی رایت ، این قالب باعث پیشرفت و موفقیتتون بشه🌹من هم از طریق این وبلاگ هوای شما ها رو دارم و به شما سر میزنم:) و هر سوالی داشته باشید پاسخگوی شما هستم.

مراحل نصب قالب:
1.ورود به پنل وبلاگ > تنظیمات > تنظیمات ساده>انتخاب:
الف)از قسمت نمایش جعبه دنبال کنندگان > تیک زدن نمایش در مکان دلخواه
ب)از قسمت نمایش کادر جستجو > تیک زدن نمایش در مکان دلخواه
✅ در انتها ذخیره ✅
2. تنظیمات > تنظیمات پیشرفته > از قسمت "نمایش تاریخ و ساعت" > تیک خودکار (بر اساس منطقه زمانی) رو بزنید > ✅ ذخیره تنظیمات ✅
3.کپی کردن کد HTML و قرار دادن اون در قسمت "ساختار قالب فعلی". > ذخیره
4.کپی کردن کد CSS و قرار دادن اون در قسمت "ویرایش CSS قالب فعلی". > ذخیره
از قالب لذت ببرید!

ویژگی خاص این قالب: دارا بودن حالت شب و روز
برای استفاده از این قابلیت، دارک مود(حالت شب) گوشی خودتون رو فعال کنید(اندروید 10 به بالا)

برای کاربران ویندوز 10 و 11 با کلیک راست روی دستکتاپ ، و انتخاب Personalize و فعال کردن تم تیره به ویندوز، قالب وبلاگ هم به رنگ تیره در میاد.
این قالب هیچ جاوا اسکریپتی نداره و تمامی منو ها با استفاده از selector ها ساخته شدن!

کد html قالب (ساختار قالب فعلی):

<!DOCTYPE html><html lang="en"><head> <head:meta></head:meta> <head:script></head:script> <head:style></head:style> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"> <link rel="shortcut icon" href="icon-avatar-shoma.png"> <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet"> </head> <body class="night"> <section class="mainApp"> <span id="limei"></span> <a id="sid" href="#"></a> <div class="leftPanel"> <header> <span id="cside"></span> <a href="#" class="trigger"> <svg viewBox="0 0 24 24"> <path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"></path> </svg> </a> <div class="menu-sidebar"> <a class="float-exit" href="#cside"></a> <div class="me tasvirzamineh"> <check:if not blog_image> <div class="image"> <div class="let-pro">(*blog_title*)</div> </div> </check:if> <check:if blog_image> <div class="image" style='background-image: url("(*blog_image*)");'></div> </check:if> <a class="cloud" href="#"><i class="ri-line-chart-fill"></i></a> <box:stat> <div class="statbox"> <view:stat> (*stat_title*)(*stat_value*) </view:stat> </div> </box:stat> <a class="settings"><i class="nightmode"></i></a> <div class="alldata"> <p class="name">(*blog_title*)</p> <p class="todate">(*now format="%e %B %Y"*)</p> </div> </div> <nav> <box:menu> <li><a href="#"><i class="ri-menu-add-fill"></i>منوی اصلی</a> <ul class="dropdown"> <view:menu> <li class="(*menu_item_selected*)"><a href="(*menu_item_link*)">(*menu_item_title*)</a></li> </view:menu></ul> </li> </box:menu> <box:categories> <li><a href="#"><i class="ri-folder-open-fill"></i>موضوعات</a> <ul class="dropdown"><view:categories> <check:if category_selected><li><a>(*category_name*)((*category_post_count*))</a></li></check:if> <check:if not category_selected><li><a href="(*category_link*)">(*category_name*)((*category_post_count*))</a></li></check:if> <check:if category_children><view:category_children></view:category_children></check:if> </view:categories></ul> </li> </box:categories> <box:tag_cloud> <li><a href="#"><i class="ri-bookmark-3-fill"></i>کلمات کلیدی</a> <ul class="dropdown"><view:tag_cloud> <li><a class="(*tag_selected*)" href="(*tag_link*)">(*tag_name*)</a></li> </view:tag_cloud></ul> </li> </box:tag_cloud> <box:archive> <li><a href="#"><i class="ri-archive-drawer-fill"></i>بایگانی</a> <ul class="dropdown"><view:archive> <check:if archive_selected><li class="(*archive_selected*)"><a href="#">(*link_name*)</a></li></check:if> <check:if not archive_selected><li><a href="(*link_url*)">(*link_name*)</a></li></check:if> </view:archive></ul> </li> </box:archive> <box:most_visited_posts> <li><a href="#"><i class="ri-eye-fill"></i>مطالب پربازدید</a> <ul class="dropdown"><view:most_visited_posts> <li class="(*post_selected*)"><a href="(*post_link*)">(*post_title*)</a></li> </view:most_visited_posts></ul> </li> </box:most_visited_posts> <box:popular_posts> <li><a href="#"><i class="ri-medal-2-line"></i>مطالب محبوب</a> <ul class="dropdown"><view:popular_posts> <li class="(*post_selected*)"><a href="(*post_link*)">(*post_title*)</a></li> </view:popular_posts></ul> </li> </box:popular_posts> <box:most_commented_posts> <li><a href="#"><i class="ri-discuss-line"></i>مطالب پربحث</a> <ul class="dropdown"><view:most_commented_posts> <li class="(*post_selected*)"><a href="(*post_link*)">(*post_title*)</a></li> </view:most_commented_posts></ul> </li> </box:most_commented_posts> <box:authors> <li><a href="#"><i class="ri-user-2-fill"></i>نویسندگان</a> <ul class="dropdown"><view:authors> <li><a href="(*author_link*)">(*author_name*) ((*author_post_count*))</a></li> </view:authors></ul> </li> </box:authors> <box:daily_links> <li><a href="#"><i class="ri-links-line"></i>پیوند های روزانه</a> <ul class="dropdown"><view:daily_links> <li><a alt="(*link_alt*)" href="(*link_url*)">(*link_name*)</a></li> </view:daily_links></ul> </li> </box:daily_links> <box:links> <li><a href="#"><i class="ri-external-link-line"></i>پیوند ها</a> <ul class="dropdown"><view:links> <li><a alt="(*link_alt*)" href="(*link_url*)">(*link_name*)</a></li> </view:links></ul> </li> </box:links> <li><a href="#"><i class="ri-information-fill"></i>درباره قالب</a> <ul class="dropdown ltrs"> <li><a href="#">Telegram Temp</a></li> <li>Ver 1.0<a href="//prowebplus.blog.ir">About</a></li> <li>Desgined By: <a href="//prowebplus.blog.ir">Prowebplus</a></li> </ul> </li> </nav> </div> <a class="li-close" href="#limei"><i class="ri-close-fill"></i></a> <a id="cnt" href="#"></a> (*search_form*) </header> <div class="chats"> <box:recent_posts> <view:recent_posts> <a href="(*post_link*)" class="chatlink"> <div class="chatButton (*post_selected*)"> <div class="chatInfo"> <check:if post_pinned><check:if post_image> <div class="image my-image pinned" style="background-image: url('(*post_image*)')"></div> </check:if></check:if> <check:if not post_pinned><check:if post_image> <div class="image my-image" style="background-image: url('(*post_image*)')"></div> </check:if></check:if> <check:if post_pinned><check:if not post_image> <div class="image my-image text-pic pinned"><div class="letter-img">(*post_title*)</div></div> </check:if></check:if> <check:if not post_pinned><check:if not post_image> <div class="image my-image text-pic"><div class="letter-img">(*post_title*)</div></div> </check:if></check:if> <check:if post_title><p class="name">(*post_title*)</p></check:if> <check:if not post_title><p class="name">..............</p></check:if> </div> <div class="status normal"> <check:if post_has_comments_section> <p class="count">(*post_comment_count*)</p> </check:if> <check:if post_selected> <p class="message">در حال مشاهده</p> </check:if> <check:if post_date> <p class="date">(*post_date format="%G{%e %B %Y}"*)</p> </check:if> <check:if post_selected> <i class="ri-check-double-line"></i> </check:if> <check:if not post_selected> <i class="ri-check-line"></i> </check:if> <check:if post_pinned><i class="material-icons fixed"></i> <svg class="fixed" viewBox="0 0 24 24"> <path d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z"></path> </svg> </check:if> </div> </div> </a> </view:recent_posts> <style>.plist{display: none;}</style> </box:recent_posts> <box:post_list> <view:post_list> <a href="(*post_link*)" class="chatlink plist"> <div class="chatButton (*post_selected*)"> <div class="chatInfo"> <check:if post_pinned><check:if post_image> <div class="image my-image pinned" style="background-image: url('(*post_image*)')"></div> </check:if></check:if> <check:if not post_pinned><check:if post_image> <div class="image my-image" style="background-image: url('(*post_image*)')"></div> </check:if></check:if> <check:if post_pinned><check:if not post_image> <div class="image my-image text-pic pinned"><div class="letter-img">(*post_title*)</div></div> </check:if></check:if> <check:if not post_pinned><check:if not post_image> <div class="image my-image text-pic"><div class="letter-img">(*post_title*)</div></div> </check:if></check:if> <check:if post_title><p class="name">(*post_title*)</p></check:if> <check:if not post_title><p class="name">..............</p></check:if> </div> <div class="status normal"> <check:if post_has_comments_section> <p class="count">(*post_comment_count*)</p> </check:if> <check:if post_selected> <p class="message">در حال مشاهده</p> </check:if> <check:if post_date> <p class="date">(*post_date format="%G{%e %B %Y}"*)</p> </check:if> <check:if post_selected> <i class="ri-check-double-line"></i> </check:if> <check:if not post_selected> <i class="ri-check-line"></i> </check:if> <check:if post_pinned><i class="material-icons fixed"></i> <svg class="fixed" viewBox="0 0 24 24"> <path d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z"></path> </svg> </check:if> </div> </div> </a> </view:post_list> </box:post_list> </div> </div> <div class="rightPanel"> <div class="topBar"> <a class="returnmp" href="#sid"><i class="ri-arrow-left-line"></i></a> <box:recent_posts max="1"><view:recent_posts> <check:if post_author_avatar><div class="image" style="background-image: url('(*post_author_avatar*)');"></div></check:if></view:recent_posts></box:recent_posts> <div class="rightSide"> <a class="linkme morelink" href="#"> <i class="ri-more-2-fill"></i> </a> <box:menu> <div class="more-menu"> <ul class="more-ul"> <view:menu> <li class="more-li (*menu_item_selected*)"><a href="(*menu_item_link*)">(*menu_item_title*)</a></li> </view:menu></ul> </div> </box:menu> <span id="clprofile"></span> <a id="profile" class="linkme layout" href="#"><i class="ri-side-bar-line"></i></a> <div class="layout-menu"> <div class="top-exit"><span class="btitle">درباره وبلاگ</span><a class="ex" href="#clprofile"><i class="ri-close-line"></i></a></div> <check:if blog_image><div class="user-av"><img src="(*blog_image*)"></div></check:if> <check:if not blog_image><div class="user-av tel"><i class="ri-telegram-fill"></i></div></check:if> <check:if blog_description><div class="desc-usr">(*blog_description*)</div></check:if> <check:if follow_box><div class="fb-st">(*follow_box*)</div></check:if> </div> <a class="linkme search" href="#cnt"> <i class="ri-search-line"></i> </a> </div> <a href="#profile"><div class="leftSide"> <box:recent_posts max="1"> <view:recent_posts> <check:if post_author><p class="chatName">(*post_author*) <span>@(*blog_title*)</span></p></check:if> <check:if not post_author><p class="chatName">Unknown <span>@(*blog_title*)</span></p></check:if> <check:if post_date><p class="chatStatus">(*post_date format="%G{%e %B %Y}"*)</p></check:if> <check:if not post_date><p class="chatStatus">آخرین فعالیت : اخیراً</p></check:if> </view:recent_posts> </box:recent_posts> </div></a> </div> <box:post_list> <div class="convHistory tasvirzamineh"> <view:post_list> <div class="msg messageReceived centermsg"> <check:if post_image><a class="post-img" href="(*post_link*)"><img src="(*post_image*)" alt="(*post_title*)"></a></check:if> <a href="(*post_link*)"><h2>(*post_title*)</h2></a>(*post_summary*)<br> <check:if post_has_read_more><a class="read-more" href="(*post_link*)">بیشتر بخوانید...</a></check:if> <div class="ico-mang"> <check:if post_date><span class="timestamp" title='(*post_date format="%G{%e %B %Y}"*)'>(*post_date format="%G{%e %B %Y}"*)</span></check:if> <span class="visits"><i class="ri-eye-fill"></i> (*post_visits*)</span> <check:if post_author><span class="author"><a href="#" class="ri-user-fill"></a><div class="nameauth"><img src="(*post_author_avatar*)"> (*post_author*)</div></span></check:if> <check:if post_rating><box:post_rating><span class="rating"><span class="rate-box (*user_rated*)"> <span class="rate-button-box rate-up (*user_rated_up*)"> <a href="(*rate_up_link*)" rel="nofollow" class="rate-button ri-heart-2-line" title="لایک">(*up_rates*)</a></span></span></span> </box:post_rating></check:if> </div> </div> </view:post_list> </div> </box:post_list> <box:pagination> <div class="pagination"> <check:if page_prev> <a class="pagePrev" href="(*page_prev*)">صفحه قبلی</a> <check:if not page_next> <style>.pagination{grid-template-columns: 30% 70%!important;}</style> </check:if> </check:if> <check:if not page_prev><style>.pagination{grid-template-columns: 70% 30%!important;}</style></check:if> <div class="pagesList"> <view:pages spec="5,2,4,2,3,2"> <check:if page_num> <a class="(*page_current*)" href="(*page_link*)">(*page_num*)</a> </check:if> </view:pages> </div> <check:if page_next> <a class="pageNext" href="(*page_next*)">صفحه بعدی</a> </check:if> </div> <div class="clear"></div> </box:pagination> <box:post_detail> <div class="convHistory tasvirzamineh"> <div class="msg messageSent centermsg"> <check:if post_image><a href="(*post_link*)"><img src="(*post_image*)"></a></check:if> <a href="(*post_link*)"><h2>(*post_title*)</h2></a>(*post_full_content*) <div class="ico-mang"> <span class="timestamp" title='(*post_date format="%G{%e %B %Y}"*)'>(*post_date format="%G{%e %B %Y}"*)</span> <check:if post_author><span class="author"><a href="#" class="ri-user-fill"></a><div class="nameauth"><img src="(*post_author_avatar*)"> (*post_author*)</div></span></check:if> <check:if post_rating><box:post_rating><span class="rating"><span class="rate-box (*user_rated*)"> <span class="rate-button-box rate-up (*user_rated_up*)"> <a href="(*rate_up_link*)" rel="nofollow" class="rate-button ri-heart-2-line" title="لایک">(*up_rates*)</a></span></span></span></box:post_rating></check:if> </div> </div><check:if post_has_send_comment><span id="clcom"></span><a class="sendcomment" href="#">ارسال نظر</a></check:if> <check:if post_has_send_comment><div class="replyBar"><a class="clcom" href="#clcom"><i class="ri-close-fill"></i></a>(*comment_add_form*)</div></check:if> <check:if not post_has_send_comment><a class="sendcomment" href="#profile">این کانال رو دنبال کنید</a></check:if> <box:post_comments> <view:post_comments> <a name="comment-(*comment_id*)"></a> <div class="cmang"> <div class="avap"> <check:if comment_avatar><img class="avaimg" src="(*comment_avatar*)"></check:if> <check:if not comment_avatar><img class="avaimg" src="//blog.ir/media/images/guest.png?1"></check:if> </div> <div class="msg messageReceived"> <check:if comment_website><a href="(*comment_website*)"><h2>(*comment_fullname*)</h2></a></check:if> <check:if not comment_website><a href="(*comment_link*)" title="(*comment_link*)"><h2>(*comment_fullname*)</h2></a></check:if> (*comment_body*) <div class="ico-mang"> <check:if comment_date><span class="timestamp">(*comment_date format="%G{%e %B %Y}"*)</span></check:if> </div> </div> </div> <check:if comment_reply> <div class="cmang rea"> <div class="avap"> <check:if comment_reply_avatar><img class="avaimg" src="(*comment_reply_avatar*)"></check:if> </div> <div class="msg messageSent"> <div class="replyb"> <div class="namer">(*comment_fullname*)</div> <span class="commenter">(*comment_body*)</span> </div> (*comment_reply*) <div class="ico-mang"> <check:if comment_reply_date><span class="timestamp">(*comment_reply_date format="%G{%e %B %Y}"*)</span></check:if> <i class="ri-check-double-line readStatus"></i> </div> </div> </div> </check:if> </view:post_comments> </box:post_comments> </div> </box:post_detail> <box:page_detail> <div class="convHistory tasvirzamineh"> <div class="msg messageSent centermsg"> <a href="(*page_link*)"><h2>(*page_title*)</h2></a>(*page_content*) </div><check:if page_has_send_comment><span id="clcom"></span><a class="sendcomment" href="#">ارسال نظر</a></check:if> <check:if page_has_send_comment><div class="replyBar"><a class="clcom" href="#clcom"><i class="ri-close-fill"></i></a>(*comment_add_form*)</div></check:if> <check:if not page_has_send_comment><a class="sendcomment" href="#profile">این کانال رو دنبال کنید</a></check:if> <box:page_comments> <view:page_comments> <a name="comment-(*comment_id*)"></a> <div class="cmang"> <div class="avap"> <check:if comment_avatar><img class="avaimg" src="(*comment_avatar*)"></check:if> <check:if not comment_avatar><img class="avaimg" src="//blog.ir/media/images/guest.png?1"></check:if> </div> <div class="msg messageReceived"> <check:if comment_website><a href="(*comment_website*)"><h2>(*comment_fullname*)</h2></a></check:if> <check:if not comment_website><a href="(*comment_link*)" title="(*comment_link*)"><h2>(*comment_fullname*)</h2></a></check:if> (*comment_body*) <div class="ico-mang"> <check:if comment_date><span class="timestamp">(*comment_date format="%G{%e %B %Y}"*)</span></check:if> </div> </div> </div> <check:if comment_reply> <div class="cmang rea"> <div class="avap"> <check:if comment_reply_avatar><img class="avaimg" src="(*comment_reply_avatar*)"></check:if> </div> <div class="msg messageSent"> <div class="replyb"> <div class="namer">(*comment_fullname*)</div> <span class="commenter">(*comment_body*)</span> </div> (*comment_reply*) <div class="ico-mang"> <check:if comment_reply_date><span class="timestamp">(*comment_reply_date format="%G{%e %B %Y}"*)</span></check:if> <i class="ri-check-double-line readStatus"></i> </div> </div> </div> </check:if> </view:page_comments> </box:page_comments> </div> </box:page_detail> </div> </section> </body></html>کپی کد اچ تی ام ال (ساختار قالب) تلگرام(کلیک کنید)

کد css قالب فعلی(بعضی قسمت ها، نوشته هایی هست که یاداشت های خودمه، نادیده بگیریدشون):

* { margin: 0; padding: 0; font-family: 'vazir', 'serif'; scroll-behavior:smooth; -webkit-scroll-behavior:smooth; } ::-webkit-scrollbar{ width: 7px; height: 7px; } ::-webkit-scrollbar-thumb{ background: linear-gradient(40deg, #FF8A8A 20%,#F771D1 40%,#A18AFF 60%,#4CD2FF 80%,#6AFC82 100%); border-radius: 0; } ::-webkit-scrollbar-thumb:hover{ background: linear-gradient(40deg, #FF5757 20%,#FF61D0 40%,#9278FA 60%,#24C5FF 80%,#43F761 100%); } ::-webkit-scrollbar-track{ background: #FFFFFF; border-radius: 0; box-shadow: inset 0 0 0 0 #F0F0F0; } a{transition: color 300ms ease} img{max-width:100%!important;height:auto!important;} @font-face { font-family: 'sahel'; src: url('//bayanbox.ir/download/270475525686006670/Sahel.woff') format('woff'); font-weight: normal; } @font-face { font-family: 'vazir'; src: url('//bayanbox.ir/download/8686539345524321992/Vazir.woff') format('woff'); font-weight: normal; } body { overflow: hidden; background: #419fd9; font-family: 'Open Sans', 'Roboto', 'Ubuntu', sans-serif; font-size: 16px; } a { text-decoration: none; word-break: break-word; } pre {white-space: break-spaces!important;} button { cursor: pointer; } button, input[type="search"], input[type="text"] { border: none; outline: none; font-family: 'vazir', serif; } .search-box.black{border:none;background: unset!important;} /* FIRST, THE OVERLAY ELEMENTS */ /*noinspection ALL*/ .alerts{ position: absolute; bottom: 10px; left: 10px; z-index: 9999; padding: 10px; color: #666; border-radius: 4px; background: #FFF; box-shadow: 0 0 7px 0 rgba(0,0,0,0.4); display: none; } /* small conversation menu */ /*noinspection ALL*/ .more-menu { position: fixed; top: 60px; right: -12em; z-index: 10; padding: 10px; color: #666; border-radius: 0 0 0 4px; background: #FFF; border-top: 1px solid #DDD; -webkit-transition: right 0.5s ease; -moz-transition: right 0.5s ease; -o-transition: right 0.5s ease; transition: right 0.5s ease; } .more-menu:focus,.more-menu:hover, .morelink:focus + .more-menu{right:0;} .more-menu .more-li a {text-align: right;direction: rtl; display: block; width: 145px; background: #FFF; font-size: 14px; color: #000; border-radius: 4px; padding: 14px 7px 14px 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .more-menu .more-li a:hover { background: #DDD; } .more-menu .more-li a:nth-last-child(1) { margin-top: 3px; } /* side menu */ .menuWrap { position: absolute; width: 30%; min-width: 240px; max-width: 320px; height: 100%; z-index: 3; display: none; } .menu { position: relative; left: -320px; width: 100%; height: 100vh; float: left; opacity: 0; } /*menu css code*/ .night i.nightmode {width: 35px;height: 28px;display:block;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E") no-repeat center;} li{list-style-type:none;} nav li { text-align: right; width: 100%; background: #ffffff; font-size: inherit; padding: inherit; color: #666; } nav li a{ display: block; color: #333; padding: 9px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } nav li ul li a{padding: inherit;padding-right: 14px;font-size: inherit;} nav li .ltrs li a{display:inline;} nav li .ltrs li{direction: ltr;text-align: center;} nav { float: left; overflow-x: hidden; position: absolute; bottom: 0; left: 0; right: 0; top: 196px; background: #fff; overflow-y: auto; } nav li:hover { background: #EEE; } nav li > i { color: #999; float: left; } nav li > span { display: inline-block; margin-top: 5px; margin-left: 20px; font-weight: 600; font-size: inherit; } nav li ul { transition: all 700ms ease-in; overflow: hidden; display: block; animation: 700ms closedd forwards; margin: 0!important; } @keyframes closedd {100%{height:0;padding:0;font-size:0;opacity:0;visibility:hidden;}} nav li ul:hover,nav li a:focus + .dropdown{animation: 700ms ddown forwards;} @keyframes ddown{100%{height:auto;padding:9px;font-size:14px;} } /*menu css code*/ .me { position: relative; width: calc(100% - 50px); background: #419fd9; padding: 16px 25px; margin-bottom: 0; } .me .image { width: 70px; height: 70px; background-color: #FFF; background-size: cover; border-radius: 100%; cursor: pointer; display:inline-flex; align-content: center; justify-content: center; align-items: center; } .me .settings,.cloud{ position:absolute; background: url(//cdn.bayan.ir/blog/templates/359/blackdot3.png); } .me .settings { left: 12px; color: #FFF; border-radius: 100%; padding: 7px 3px 7px 3px; top: 4.5em; } .me .settings:hover { background: rgba(0, 0, 0, 0.35); } .me .cloud { left: 7px; color: #FFF; border-radius: 100%; padding: 8px 3px 8px 4px; margin: 5px 5px 5px; } #stat_summary_div{ color:#fff; transition: 500ms all ease-in-out; opacity:0; position: absolute; left:-480px; top:0; width:280px; overflow-y: auto;height:142px; background: #ffffffb3 url('//cdn.bayan.ir/blog/templates/359/blackdot3.png'); } .me .cloud:focus + #stat_summary_div,#stat_summary_div:hover{ padding: 12px; opacity:1;z-index:100; left:0; } .statbox{ display: grid; grid-template-columns: 1fr 1fr; grid-row-gap: 5px; } #stat_summary_div [id^="lang"]{ font-size:12px; } #stat_summary_div [id^="value"]{ text-align:left; } #stat_summary_div [id^="lang"],#stat_summary_div [id^="value"]{ border-bottom:1px solid #fff; } .me .cloud .ri-bookmark-fill{font-size: 21px;padding: 0;} .me .cloud:hover { background: rgba(0, 0, 0, 0.35); } .me .alldata { font-size: 14px; color: #FFF; } .alldata .name {margin: 0;padding-top: 7px;} .alldata .todate:before{content:"امروز : ";}.alldata .todate{direction:rtl;text-align:right;} .alldata .todate{font-weight: 300;padding-top: 11px;} .info { width: 100%; z-index: -1; direction: ltr; display: inline-block; font-size: 12px; background: #dcdcdc; color: #666; } .info p{padding: 0 9px 0 9px;} .info p a{padding: 0 0 0 5px;font-weight: 600;color: #333;} /* configuration screen */ .config { position: absolute; width: 50%; height: 100vh; left: 0; right: -200vw; top: 0; margin: auto; background: #DDD; overflow-x: hidden; overflow-y: auto; display: block; z-index: 520; opacity: 0; } .confTitle { font-size: 24px; font-weight: 600; color: #444; margin: 10px 0 15px 0; } .configSect { float: left; width: calc(100% - 60px); padding: 15px 30px; margin-bottom: 10px; background: #FFF; } .profile .image { width: 140px; height: 140px; background: #FFF; background-size: cover; border-radius: 100%; float: left; margin-right: 30px; } .side { width: auto; height: 110px; float: none; position: relative; } .side .name { font-size: 18px; font-weight: 600; } .side .pStatus { margin-top: 5px; font-size: 14px; font-weight: 300; } .profile .changePic, .profile .edit { width: auto; font-size: 16px; font-weight: 600; background: #419fd9; color: #fff; border-radius: 4px; padding: 10px; } .profile .edit { margin-left: 10px; background: #FFF; color: #999; } .profile .edit:hover { color: #419fd9; } .second ul { float: none; margin-left: -7px; list-style-type: none; } .second ul li { margin: 7px; } .second .blue { color: #419fd9 } .second label { display: block; clear: both; } .second .information { margin-bottom: 30px; } .check { position: relative; float: left; display: block; width: 38px; height: 14px; background: #BBB; cursor: pointer; border-radius: 15px; transition: all 0.2s ease-in-out; } .check > .tracer { width: 16px; height: 16px; background: #FFF; border: 2px solid #BBB; border-radius: 100%; float: left; margin-top: -3px; transition: all 0.2s ease-in-out; } #checkNight, #deskNotif, #showSName, #showPreview, #playSounds { display: none; } .toggleTracer:checked ~ .check { background: #419fd9; } .toggleTracer:checked ~ .check > .tracer { border-color: #419fd9; margin-left: 18px; } .optionWrapper { display: block; width: 100%; height: 32px; } .optionWrapper p { float: left; margin-top: 3px; margin-left: 15px; font-size: 14px; color: #444; } /* dark overlay element */ .overlay { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 2; display: none; } /* ----------------- */ /* MAIN APP ELEMENTS */ /* ----------------- */ .mainApp{ direction:ltr; display: grid; grid-template-columns: 32% auto; grid-gap: 2px; } #sid,#limei,#clcom,#clprofile{position: fixed;} .li-close{display: none;background: #ccc;margin-right: 9px;vertical-align: middle;} .li-close .ri-close-fill{font-size: 23px;color:#333;vertical-align: middle;display: inline-block;} .leftPanel { direction:rtl; display: inline-block; background: #FFF; border-right: 1px solid #DDD; } header { width: 100%; height: 60px; background: #fff; } .trigger { float: left; width: 32px; height: 32px; margin: 20px 15px 0; color: #BBB; cursor: pointer; opacity: 0.6; background: none; } .trigger:hover { opacity: 1; } .trigger > svg { width: 24px; height: 24px; fill: #888; } .search-box {margin: 0;display: inline-block;vertical-align: super;background: transparent;width: 80%;} .search-box input.text{padding: 2px 6px 4px 6px;background: #eee;height: 30px;border-radius: 5px;display: block;color: #444;border: 2px solid #ffffff;margin: 13px 11px 0 0;} .search-box .search-wrapper {margin: 0;} .search-box .submit{display:none;} .search-box input {display: none;} .search-box input:focus {border: 2px solid #419fd9;background: #f3f3f3;} .chats { position: fixed; bottom: 0; top: 60px; left: 0; background: #ffffff; right: 68.1%; overflow-x: hidden; overflow-y: auto; font-family: vazir, serif; } .chatButton { float: left; width: 100%; height: 80px; background: #FFF; color: #555; cursor: pointer; overflow: hidden; } .chats .chatlink .selected{ background: #58a0d9; color: #eee; } .chats .selected > .status .count{ background:#fff; color:#000; } .chats .selected > .chatInfo .name{font-weight:normal;font-size:14px} .chats .selected > .status .ri-check-double-line{color:white;padding-left: 5px;} .chatButton:hover { color: #555; background: #EEE; } .active, .active:hover { color: #FFF; background: #419fd9; } .chatInfo .text-pic .letter-img,.me .let-pro{font-size:0;} .chatInfo .text-pic .letter-img::first-letter{direction: rtl;margin: auto;color: #fff;vertical-align: middle;font-size: 25px;display: block;text-align: center;text-shadow: 1px 1px 1px #607d8b;} .me .let-pro::first-letter{direction: rtl;margin: auto;color: #000;vertical-align: middle;font-size: 32px;display: block;text-align: center;text-shadow: 1px 1px 1px #607d8b;} .chatInfo p {font-size: 14px;} .chatInfo .pinned:before{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M22.314 10.172l-1.415 1.414-.707-.707-4.242 4.242-.707 3.536-1.415 1.414-4.242-4.243-4.95 4.95-1.414-1.414 4.95-4.95-4.243-4.242 1.414-1.415L8.88 8.05l4.242-4.242-.707-.707 1.414-1.415z' fill='rgba(0,128,208,1)'/%3E%3C/svg%3E");content:"";background-repeat:no-repeat;position: relative;width:30px;filter:drop-shadow(1px 0px 0px #333);height:30px;margin-top: -40px;margin-right: -43px;} .chatInfo .text-pic:before {margin-right: -31px;} .chatInfo .image {float: right; width: 55px; height: 55px; background: #bbdefb no-repeat center; background-size: cover; border-radius: 100%; margin: 13px 13px; display: inline-flex; align-items: center; justify-content: center; transition:200ms all ease-in-out; } .chatInfo .image:hover{background-color:#81D4FA;} .chatInfo .name { font-weight: 600; margin-left: 6px; display: inline-block; width: 65%; overflow: hidden; margin-top: 15px; white-space: nowrap; text-overflow: ellipsis; } .status .message { display: inline; padding-right: 0; vertical-align: middle; font-size: 11px; } .status .fixed { position: absolute; right: 10px; bottom: 10px; display: none; } div[class~="normal"] > .fixed { display: none; } div[class~="normal"] > .count {} div[class~="onTop"] > .fixed { display: block; width: 24px; height: 24px; fill: #FFF; } div[class~="onTop"] > .count { right: 49px; bottom: 7px; background: #FFF; color: #419fd9; } .status .count { padding: 3px 8px; border-radius: 20px; color: #fff; vertical-align: middle; display: inline; font-size: 11px; background: #5da7e3; } .status .ri-check-double-line, .status .ri-check-line{float: left;padding-top: 3px;padding-left: 10px;} .status .date {text-align: left;float: left;padding-left: 6px; font-size: 12px; margin-top: 2px; } .status .read { position: absolute; right: 53px; top: 6px; } .rightPanel { direction: rtl; float: right; grid-column: 2; background: #999; } .rightPanel .topBar { width: 100%; height: 60px; background: #fff; } .rightPanel .topBar .image{ background-size: cover; width: 55px; height: 55px; border-radius: 100%; margin-top: 2.3px; margin-left: 7px; float: left; display:inline-block; } .leftSide { display: inline-block; clear: none; float: left; } .returnmp{float:left;font-size: 30px;color: #444;font-weight: 900;height: 30px;padding-top: 15px;display: none;} .leftSide .chatName { margin-left: 6px; margin-top: 6px; margin-bottom: 3px; color: #444; font-weight: 600; width: 500px; white-space: nowrap; cursor: pointer; overflow: hidden; text-align: left; text-overflow: ellipsis; } .chatName > span { font-size: 12px; font-weight: 500; color: #BBB; margin-left: 0; } .leftSide .chatStatus:before{content:"آخرین فعالیت : ";}.leftSide .chatStatus {direction: rtl;} .leftSide .chatStatus { color: #419fd9; text-align: left; font-size: 12px; margin: 0 0 0 6px; font-family: 'vazir', serif; font-weight: 300; cursor: pointer; } .rightSide { display: inline-block; float: right; margin-right: 20px; } .linkme { font-size: 25px; display: inline-block; margin: 3px 0 0 7px; cursor: pointer; direction:rtl; padding: 14px 14px 0 14px; background: #FFF; color: #888; border-radius: 100%; } .linkme:hover, .otherTools .toolButtons:hover { color: #555; background: #DDD; } .layout-menu,#clprofile:target ~ .layout-menu{ position: fixed; top: 0; right: -20.5em; z-index: 9999; font-family: 'vazir', serif; width: 19em; /*noinspection CssInvalidPropertyValue*/ height: -webkit-fill-available; background: #FFF; box-shadow: 0 0 7px 0 rgba(0,0,0,0.4); color: rgba(0, 0, 0, 0.7); -webkit-transition: right 0.7s ease; -moz-transition: right 0.7s ease; -o-transition: right 0.7s ease; transition: right 0.7s ease; padding: 14px 7px; overflow: auto; } .layout-menu:hover,.layout:focus + .layout-menu{right:0;} .user-av.tel i.ri-telegram-fill {font-size: 100px;display: block;text-align: center;text-shadow: 2px 1px 2px #607d8b;color: #5da7e3;} .top-exit {background: #fff;display: grid;grid-template-columns: 50% 50%;padding: 7px 0;} a.ex {text-align: left;}a.ex i.ri-close-line {font-size: 28px;cursor: pointer;color:#333} .user-av{margin:7px 0} .btitle {text-align: right;font-weight:900;font-size:17px;} .user-av img{width:95%;margin:auto;display: block;} .user-av img{width:95%;margin:auto;display: block;} .desc-usr {direction: rtl;text-align: center;padding: 10px 14px;} #followInBx #followersLs .followImg{width:60px;height:auto;} #followInBx{max-width:100%!important;} .followThis {padding: 11px 10px 11px;background: #509500!important;font-family: 'sahel', serif;font-size: 25px;} .followThis.followed{background: #0a5794!important;} .followShow{z-index:9999;} .followShow .followThis{ font-size: 12px; padding: 7px 7px; } #followersLs {margin: 7px auto 13px;max-width: 92%;} /* THE CONVERSATION HISTORY CSS */ .convHistory { word-break: break-word; height: calc(100vh - 432px); background: #419fd9 url(//bayanbox.ir/download/8370598915499066750/105.webp) no-repeat center; background-size: cover; overflow-x: hidden; overflow-y: auto; padding-bottom: 20em; } .tasvirzamineh {background: #419fd9 url(//bayanbox.ir/download/8370598915499066750/105.webp) no-repeat center 46%;background-size: cover;} img.avaimg { border-radius: 50%; padding: 8px; } .avap { display: inline-block; vertical-align: text-bottom; } .rea .avap {float:left;margin-bottom: -90px;} .cmang { clear: both; } .msg a.post-img {text-align: center;display: block;} .msg.messageReceived { display: inline-block; margin-right: 0; } .msg { position: relative; font-family: 'vazir', serif !important; width: auto; max-width: 70%; min-width: 100px; height: auto; font-size: 16px; line-height: 2; padding: 14px; margin: 20px 15px; margin-bottom: 0; background: #FFF; direction: rtl; border-radius: 7px; clear: both; } .msg font{ font-family: 'vazir', serif !important; } .ico-mang{direction: rtl;text-align: right;} .ico-mang .visits{padding-right:14px;color:#aaa;display:inline-block;padding-top: 15px;margin-bottom: 3px;vertical-align: middle;font-size: 14px;} .ico-mang .visits .ri-eye-fill{font-size:18px;vertical-align: sub;} span.author { padding-right: 14px; color: #aaa; display: inline-block; padding-top: 0; vertical-align: bottom; margin-bottom: 2px; } .messageSent span.author{margin-bottom: -4px;} span.author > .ri-user-fill{color:#aaa;animation: 2s fzoom ease-in-out infinite;font-size: 14px;transition:700ms font-size ease-in;} @keyframes fzoom{ 0%{color:#aaa;} 50%{color:#2196F3} 100%{color:#aaa} } .nameauth { opacity: 0; position: absolute; transition: 300ms opacity ease-in; padding: 7px 7px 7px 14px; background: #fff; color: #000; border-radius: 4px; box-shadow: 1px 1px 1px #000; border: 1px solid #000; user-select: none; cursor: default; z-index: 999; } .nameauth img{width: 32px;border-radius: 20px;margin-left: 5px;} span.author > .ri-user-fill:focus ~ .nameauth{ opacity:1; } .msg:nth-last-child(1) { margin-bottom: 20px; } .msg .timestamp { padding-right: 1px; padding-top: 14px; display: inline-block; color: #AAA; vertical-align: middle; font-size: 14px; user-select: none; } .msg .ico-mang .readStatus{padding-top: 12px;} .ico-mang .readStatus{display: inline-block;vertical-align: middle;} .messageReceived { background: #FFF; } .replyb { padding: 4px 7px 28px 7px; font-size: 12px; border-right: 3px solid #198ae3; margin-bottom: 7px; transition:background 200ms ease-in; } .replyb:hover{ transition:background 200ms ease-in; background: #cad5be; } .replyb .namer { font-weight: 600; color: #198ae3; font-size: 14px; } .replyb span.commenter { width: 75%; display: -webkit-box; color: #000; position: absolute; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; border-radius: 5px; padding: 4px 0 0 0; } .messageSent { float: left; display: inline-block; margin-top: 7px; margin-left: 5em; background: #effdde; } .centermsg { float: unset; display: block!important; max-width: 75%; margin: 5px auto 5px!important; } .read-more{color: #2e5313;background:#b1d7a8;margin:0 auto 7px;text-align: center; padding:7px 14px;border:2px solid #04a90e;border-radius:5px;width:inherit;display:block;white-space:pre;} .read-more:hover{background:#cafca6;color:#000;} .centermsg:first-child{margin-top:45px!important;} .msg a h2{ color:#333; font-family: 'sahel', serif !important; font-size: 18px; padding-bottom: 14px; } .post-img{padding-bottom:14px;} .messageSent > .timestamp, .messageSent > .readStatus { color: darkgreen; user-select: none; } .messageSent > .readStatus {float: left;display: inline-block;padding-top: 6px;padding-right: 3px;} /* THE REPLY BAR CSS */ input.sendbutton{ padding:5px 15px 6px 15px; float: left; background: transparent; color: #333; display: block; border: #333 1px solid; text-shadow:none; margin:1px; cursor:pointer; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; } div.commentForm input.sendbutton:hover{ background: transparent; color: #ffffff; border: 1px solid #1a252f; -moz-box-shadow:inset 0 0 8px #222; -webkit-box-shadow:inset 0 0 8px #222; box-shadow:inset 0 0 8px #222; } .comment-add-form div.formField2 input.text, select { height: 25px; width: 100%; font-size: 15px; font-family: 'vazir', serif; } a.pagcontrol { font-size: 54.5px; display: grid; padding-right: 4px; position: fixed; background: #fff; color: #000; right: 0; bottom: 0; } .pagination{ position:fixed; bottom:0; left: 0; transition: bottom 700ms ease-in-out; -webkit-transition: bottom 700ms ease-in-out; right: 0; height: 55px; z-index:99999; background: #ffffff; width: 67.9%; display:grid; justify-content: center; grid-template-columns: 23% 50% 23%; align-items: center; justify-items: center; } /*pagination*/ .pagination { cursor: default; display: block; text-align: center; margin-bottom: 0; font: 13px "yekan", "tahoma", "arial", "Times New Roman", Times, Arial, serif; } .pagination .left { margin-left: -3px; } .pagination a { padding: 6px 12px 2px; margin-left: 3px; font-size: 12px; display: inline-block; cursor: pointer; color: #888; float: unset; border: #444 1px solid; background: #f9f9f9; border-radius: 3px; } .pageNext,.pagePrev{width:50px;padding: 0 !important;} .pagination a:hover { color: #0892cd; border: #c6e2ee 1px solid; background: #c6e2ee; } .pagination a.current { color: #0892cd; border: #2196f3 1px solid; background: #c6e2ee; } .pagination { padding-top: 0; position: fixed; bottom: 0; transition: bottom 700ms ease-in-out; -webkit-transition: bottom 700ms ease-in-out; right: 0; height: 55px; border-top: 1px solid #444; z-index: 1000; background: #ffffff; width: 68%; display: grid; justify-content: center; grid-template-columns: 23% 50% 23%; align-items: center; justify-items: center; } .pagesList { white-space: nowrap; overflow: auto; margin: 0 20px; width: 300px; display: inline-block; padding: 7px 0; } a.sendcomment.morelink{right:60px;} /*pagination ends*/ a.sendcomment { vertical-align: middle; display: grid; z-index: 997; position: fixed; bottom: 0; left: 32.1%; right: 0; text-align: center; align-content: center; justify-content: center; align-items: center; justify-items: center; padding: 9px; font-size: 24px; background: #fff; box-shadow: inset 0 0.5px 1px 1px #ccc; color: #518dd0; text-shadow: 1px 1px 0 #00bcd4; transition: 400ms all ease; } a.sendcomment i.ri-reply-line:hover{color:#fff;text-shadow:1px 1px 2px #000;background:#419fd9;cursor:pointer;} .bComForm .commentAvatar a:hover span {position: absolute;} .bComForm .commentAvatar{margin-top: 33px;} a#tpm{margin-bottom: 2.5em;display:block;} .bComForm{ font-family: 'vazir', serif; padding: 10px 10px 10px 11px; } .replyBar,#clcom:target ~ .replyBar,#bComSub:target ~ .replyBar{-moz-transform: scale(0.00005, 0.00005);-webkit-transform: scale(0.00005, 0.00005);-o-transform: scale(0.00005, 0.00005);-ms-transform: scale(0.00005, 0.00005);transform: scale(0.00005, 0.00005);transition: transform 500ms ease-in;position: fixed;left: 34.78em;right: 100px;overflow: auto;z-index: 999;box-shadow: 0 0 6px 3px #6d6b6b;background: #fff;top: 110px;border-radius: 9px;bottom: 110px;} .replyBar:focus,.replyBar:hover,a.sendcomment:focus + .replyBar { -moz-transform: scale(1, 1); -webkit-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } .formField2 label{font-size: 12px; font-family: 'vazir', serif;padding-top: 3px;} .bComForm .sendbutton {float: right;} /* menu code */ .menu-sidebar { position: fixed; top: 0; left: -20em; z-index: 999; font-family: 'vazir', serif; overflow: hidden; width: 19em; height: 100%; background: #FFF; box-shadow: 0 0 7px 0 rgba(0,0,0,0.4); color: rgba(0, 0, 0, 0.7); -webkit-transition: width 600ms ease-in, left 600ms ease-in; -moz-transition: width 600ms ease-in, left 600ms ease-in; -o-transition: width 600ms ease-in, left 600ms ease-in; transition: width 600ms ease-in, left 600ms ease-in; } .menu-sidebar:hover,.trigger:focus + .menu-sidebar{left:0;width: 19em;} .float-exit,.clcom{padding: 0 0 3px 0;background:#6c6b6b;color:#fff;display: grid;justify-content: center;} .float-exit .ri-close-fill,.clcom .ri-close-fill{font-size: 30px!important;} .float-exit:before{content:"بستن منو"} a#cnt:focus + .search-box input.text{border: 2px solid #419fd9;background: #f3f3f3;} .menu-sidebar [class^="ri-"],.menu-sidebar [class*=" ri-"]{padding: 0 6px 0 6px;vertical-align: middle;font-size: 22px;} .chats a:nth-child(1) .image{background-color:#7D29E1}.chats a:nth-child(2) .image{background-color:#C7B309}.chats a:nth-child(3) .image{background-color:#D44783}.chats a:nth-child(4) .image{background-color:#3BE927}.chats a:nth-child(5) .image{background-color:#C57B3B}.chats a:nth-child(6) .image{background-color:#4F8EDE}.chats a:nth-child(7) .image{background-color:#97684E}.chats a:nth-child(8) .image{background-color:#0C9E44}.chats a:nth-child(9) .image{background-color:#A26AA0}.chats a:nth-child(10) .image{background-color:#1F8ABA}.chats a:nth-child(11) .image{background-color:#403FA0}.chats a:nth-child(12) .image{background-color:#4BE99A}.chats a:nth-child(13) .image{background-color:#EAB7A9}.chats a:nth-child(14) .image{background-color:#EFA884}.chats a:nth-child(15) .image{background-color:#2132CA}.chats a:nth-child(16) .image{background-color:#0ADBB0}.chats a:nth-child(17) .image{background-color:#FF2665}.chats a:nth-child(18) .image{background-color:#3304ED}.chats a:nth-child(19) .image{background-color:#9EAB31}.chats a:nth-child(20) .image{background-color:#212542}.chats a:nth-child(21) .image{background-color:#53480E}.chats a:nth-child(22) .image{background-color:#3099EB}.chats a:nth-child(23) .image{background-color:#3C4861}.chats a:nth-child(24) .image{background-color:#B79572}.chats a:nth-child(25) .image{background-color:#E69F27}.chats a:nth-child(26) .image{background-color:#228679}.chats a:nth-child(27) .image{background-color:#462512}.chats a:nth-child(28) .image{background-color:#B5287A}.chats a:nth-child(29) .image{background-color:#7A3BEF}.chats a:nth-child(30) .image{background-color:#5D0702} .trigger {width: 2em;} #cside:target ~ .menu-sidebar{left: -20em;width: 19em;-webkit-transition: width 600ms ease-in, left 600ms ease-in;-moz-transition: width 600ms ease-in, left 600ms ease-in;-o-transition: width 600ms ease-in, left 600ms ease-in;transition: width 600ms ease-in, left 600ms ease-in;} /*Rating*/ .rate-box .rate-up{margin-right:1em;position: relative;top: 9px;font-size: 14px;} .rate-button-box.rated {font-weight:bold;} .rate-box .ri-heart-2-line{color:#444;text-decoration:none;transition: color .5s ease-in;} .rate-box:hover .ri-heart-2-line:before {transition: color .5s ease-in;color:red;} .rate-box.rated .ri-heart-2-line:before {transition: color .5s ease-in;color:red;} .rate-box .rate-counter{position:relative;top:-3px} /*Rating*/ .jqi { top: 15px!important; margin: auto!important; bottom: 15px!important; right: 0; left: 0; position: fixed!important; } .jqi a.btn{ display:block; text-align:center; font-family: vazir, serif !important; font-size: 16px; font-weight:100; background: #50ae54; border-radius: 6px; padding: 12px 0 14px 0; } .jqimessage {line-height: 1.7!important;text-align: justify;padding-top: 30px!important;} .jqi .jqiclose {width: 35px;height: 35px;background-size: 100%;} @media screen and (min-width: 981px){.search-box{width:75%;}} @media screen and (max-width: 1200px){.search-box{width:72%;} .leftSide .chatName{width: 388px;}} @media screen and (max-width: 980px) { .jqi { right: 0!important; left: 0!important; width: 90%; } .leftSide .chatName{width: 300px;} .chatInfo .name{width:62%;} .search-box {width:70%;} } @media screen and (max-width: 868px) { ::-webkit-scrollbar{ width: 2px; height: 2px; } .pagesList {width: 250px;} .pagination{width:100%;} a.pagcontrol:focus + .pagination,.pagination:hover{width:100%!important;} .li-close{display:inline-block;} .leftSide .chatName{width: 270px;} a.sendcomment{left:0;} .msg{max-width:65%;} .linkme.search,.linkme.layout{ position: fixed; opacity: 0; z-index: -2; } .centermsg{max-width: 85%!important;width: 85%;} .returnmp{display:block;} .menu-sidebar:focus,.menu-sidebar:hover, .trigger:focus + .menu-sidebar {width: 90%;} .replyBar{left: 0.5em;right: 0.5em;top: 66px;overflow-y: auto;bottom: 61px;} .mainApp{display:block;} .rightSide .search{display:none;} #stat_summary_div{width:95%;} .leftPanel {width: 100%;} .chats{right: 0;} .leftPanel,#limei:target ~ .leftPanel{-moz-transform: translate(-100%, 0);/* FF3.5+ */-webkit-transform: translate(-100%, 0);/*Saf3.1+, Chrome*/-o-transform: translate(-100%, 0);/* Opera 10.5 */-ms-transform: translate(-100%, 0);/* IE 9 */transform: translate(-100%, 0);transition: transform 500ms ease-in;position: fixed;z-index: 999;height: 100%;} a#sid:focus + .leftPanel, .leftPanel:hover{ height:100%; -moz-transform: translate(0, 0); -webkit-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); z-index: 9999; } .rightPanel{float:unset;} } @media screen and (max-width:450px){.pagesList {width: 175px;}.msg{max-width:58%;}.leftSide .chatName{width: 220px;}} @media screen and (max-width: 400px){ a.sendcomment.morelink{right:75px;} .returnmp{font-size:25px} .rightSide{width: 20px;margin-right: 10px;} .morelink{margin-right: -16px;} .rightPanel .topBar .image{ width: 32px; height: 32px; margin-top: 13px; } .chatName > span{font-size:12px;width: 12%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .leftSide .chatStatus{font-size:12px} .leftSide .chatName{font-size:12px;margin-top: 11px;width: 160px;} } @media screen and (max-width: 300px){.rightPanel .topBar .image{display:none;}.leftSide .chatname{width:100px;}} @media (prefers-color-scheme: dark) { html{background: #222e3e;} .night ::-webkit-scrollbar-thumb{background: linear-gradient(40deg, #FF8A8A 20%,#F771D1 40%,#A18AFF 60%,#4CD2FF 80%,#6AFC82 100%);} .night ::-webkit-scrollbar-thumb:hover{background: linear-gradient(40deg, #FF5757 20%,#FF61D0 40%,#9278FA 60%,#24C5FF 80%,#43F761 100%);} .night ::-webkit-scrollbar-track{background: #0e1621;box-shadow: inset 0 0 0 0 #F0F0F0;} .night a{color:#03A9F4;text-shadow:1px 1px 1px #000;} .night a:hover{color: #419fd9;text-shadow:1px 1px 1px #000} .night body {background: #419fd9;} .night .followersTitle{color:#fff;} .night .search-box.black{background:#fff0;} .night .alerts {color: #666;background: #FFF;box-shadow: 0 0 7px 0 rgba(0,0,0,0.4);} .night .more-menu {color: #fff;background: #17212b;border-top: 1px solid #17212b;} .night .more-menu .more-li a {background: #17212b;color: #fff;} .night .more-menu .more-li a:hover {background: #252f3e;} .night nav li {background: #17212b;color: #fff;} .night nav li a{color: #e9e8e8;} .night nav li a:hover{color: #5da7e3;} .night nav {background: #17212b;} .night nav li:hover {background: #0e1621;} .night nav li > i {color: #999;} .night .me {background: #222e3e;} .night .me .image {background-color: #FFF;} .night .me .settings {color: #FFF;} .night .me .settings:hover {background: rgba(0, 0, 0, 0.35);} .night .me .cloud {color: #FFF;} .night .me .cloud:hover {background: rgba(0, 0, 0, 0.35);} .night .me .myinfo {color: #FFF;} .night .info {background: #dcdcdc;color: #666;} .night .config {background: #DDD;} .night .confTitle {color: #444;} .night .configSect {background: #FFF;} .night .profile .image {background-color: #FFF;} .night .profile .changePic,.night .profile .edit {background: #419fd9;color: #fff;} .night .profile .edit {background: #FFF;color: #999;} .night .profile .edit:hover {color: #419fd9;} .night .second .blue {color: #419fd9} .night .check {background: #BBB;} .night .check > .tracer {background: #FFF;border: 2px solid #BBB;} .night .toggleTracer:checked ~ .check {background: #419fd9;} .night .toggleTracer:checked ~ .check > .tracer {border-color: #419fd9;} .night .overlay {background: rgba(0, 0, 0, 0.8);} .night .mainApp{background: #0e1621;} .night .li-close{background: #ccc;} .night .li-close .ri-close-fill{color:#333;} .night .leftPanel {background: #17212b;border-right: 1px solid #222e3e;} .night header {background: #17212b;} .night .trigger {color: #BBB;} .night .trigger > svg {fill: #888;} .night .search-box input.text{background: #242f3d;color: #4f5b67;border: 2px solid #242f3d;} .night .search-box input:focus {border: 2px solid #20426f;background: #151f2c;} .night .chats {background: #17212b;} .night .chatButton {background: #17212b;color: #ccc;} .night .chats .chatlink .selected{background: #222e3e;color: #eee;} .night .chats .selected > .status .count{background:#fff;color:#000;font-weight: bold;text-shadow: none;} .night .chats .selected > .status .ri-check-double-line{color:white;} .night .chatButton:hover {color: #e3e3e3;background: #252f3e;} .night .active,.night .active:hover {color: #FFF;background: #419fd9;} .night .chatInfo .text-pic .letter-img::first-letter{color: #fff;text-shadow: 1px 1px 1px #607d8b;} .night .me .let-pro::first-letter{color: #000;text-shadow: 1px 1px 1px #607d8b;} .night .chatInfo .image:hover{background-color:#81D4FA;} .night .chatInfo .name {text-shadow: 1px 1px 1px #000;} .night div[class~="onTop"] > .fixed {fill: #FFF;} .night div[class~="onTop"] > .count {background: #FFF;color: #419fd9;} .night .status .count {color: #fff;background: #444;} .night .status .ri-check-double-line,.night .status .ri-check-line{color: #72bcfd;} .night .status .date {color: #8696a8;} .night .chats .chatlink .selected > .status .date {color:#fff;} .night .rightPanel {background: #999;} .night .rightPanel .topBar {background: #222e3e;} .night .returnmp{color: #fff;} .night .leftSide .chatName {color: #e3e3e3;text-shadow: 1px 1px 1px #000;} .night .chatName > span {color: #BBB;} .night .leftSide .chatStatus {color: #419fd9;} .night .linkme {background: #222e3e;color: #e3e3e3;} .night .linkme:hover,.night .otherTools .toolButtons:hover {color: #fff;background: #2e3c51;} .night .layout-menu,.night #clprofile:target ~ .layout-menu{background: #222e3e;box-shadow: 0 0 7px 0 rgba(0,0,0,0.4);color: rgba(0, 0, 0, 0.7);} .night .user-av.tel i.ri-telegram-fill {text-shadow: 2px 1px 2px #607d8b;color: #5da7e3;} .night a.ex i.ri-close-line {color: #eee;} .night .btitle {color: #fff;} .night .desc-usr {color: #fff;} .night .followThis {background: #509500!important;} .night .followThis.followed{background: #0a5794!important;} .night .convHistory {background-color: #0e1621!important;background-image: unset;} .night .userBg {background-color: #3a6a99;} .night .msg {color: #e3e3e3;background: #FFF;} .night .ico-mang .visits{color:#aaa;} .night .msg .timestamp {color: #AAA;} .night .messageReceived {background: #222e3e;} .night .messageSent {background: #222e3e;} .night .cmang .messageSent{background:#0e263e} .night .msg a h2{color: #e3e3e3;} .night .messageSent > .timestamp,.night .messageSent > .readStatus {color: darkgreen;} .night input.sendbutton{background: transparent;color: #fff;border: #fff 1px solid;} .night div.commentForm input.sendbutton:hover{background: transparent;color: #ffffff;border: 1px solid #1a252f;-moz-box-shadow:inset 0 0 8px #222;-webkit-box-shadow:inset 0 0 8px #222;box-shadow:inset 0 0 8px #222;} .night a.pagcontrol {background: #222e3e;border-top: 2px solid #0e1621;color: #000;} .night .pagination ::-webkit-scrollbar-track{background:#222e3e;} .night a.pagcontrol:focus + .pagination,.night .pagination:hover{background: #222e3e;} .night .pagination a {color: #fff;border: #ddd 1px solid;background: #0e1621;} .night .pagination a:hover {color: #ffffff;border: #0e1621 1px solid;background: #17212b;} .night .pagination a.current {color: #ffffff;border: #0e1621 1px solid;background: #17212b;} .night .pagination {background: #222e3e;} .night a.sendcomment {background: #222e3e;border-top: 2px solid #419fd9!important;color: #ffffff;box-shadow: unset;} .night a.sendcomment i.ri-reply-line:hover{color:#fff;text-shadow:1px 1px 2px #000;background:#419fd9;} .night .replyBar,.night #clcom:target ~ .replyBar{box-shadow: 0 0 6px 3px #222e3e;background: #242f3d;} .night .smalltip,.night .smalltip-margin{color: #5da7e3;text-shadow: unset;} .night .formField2 label{color: #fff;} .night .menu-sidebar {background: #222e3e;box-shadow: 0 0 7px 0 rgba(0,0,0,0.4);color: rgba(0, 0, 0, 0.7);} .night .float-exit,.night .clcom{background: #0e1621;color: #fff;} .night a#cnt:focus + .search-box input.text{border: 2px solid #20426f;background: #151f2c;} .night .menu-sidebar [class^="ri-"],.night .menu-sidebar [class*=" ri-"]{color: #6c7883;} .night .menu-sidebar li:hover [class^="ri-"],.night .menu-sidebar li:hover [class*=" ri-"]{color:#e9e8e8} .night .rate-box .ri-heart-2-line{color: #aaaa91;} .night .rate-box:hover .ri-heart-2-line:before {color:red;} .night .rate-box.rated .ri-heart-2-line:before {color:red;} .night .read-more{color: #fff;background: #17212b;border: 2px solid #0e1621;} .night .read-more:hover {background: #0e1621;border-color: #17212b;color: #fff;} .night .top-exit{background: #222e3e;} .night .replyb span.commenter{color:#fff} .night .replyb{background: #17212b;} .night .replyb:hover{background: #222e3e;} .night .nameauth{background: #17212b;color:#fff} .night .jqimessage{color:#fff;} .night .jqi{background:#1a252f;color:#fff;} .night .jqi a.btn{background: #0a5794;color: #fff;} .night .jqi a.btn:hover{background: #0e1621;color: #fff;} .night i.nightmode {width: 35px;height: 28px;display:block;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981z' fill='rgba(108,120,131,1)'/%3E%3C/svg%3E") no-repeat center;} code {background: #333;} } کپی کد سی اس اس قالب تلگرام(کلیک کنید)

۲۷ تیر ۱۴۰۱

نویسنده آشنا

۲۱

ارسال نظر

نظر دادن تنها برای اعضای بیان ممکن است.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.

خونخوار باولکانی

آفرین پسر! آفرین پسر!!
عالی بود. خسته نباشی.
می خوام یه رازی رو بهت بگم
این تنها قالبیه که من اگر بذارمش روی وبلاگم هیچ وقت به خودم اجازه نمیدم
کپی رایتِ فوتر شو حذف کنم :)

۴ مهر ۱۴۰۱

خونخوار باولکانی

این که به من بگی حذف نمیکنی لطفی نداره، ادم باید به وجدان خودش نگاه کنه.

با این حال ممنون 🌹

۴ مهر ۱۴۰۱

‌‌‌ ‌‌‌

من که خوشم نیومد

۴ مرداد ۱۴۰۱

‌‌‌ ‌‌‌

من که خوشم نیومد

خدا رو شکر 🌹

همین که تست کردی برام کافیه

اگر انتقادی داری روی همین پست بزار تا تصحیح کنم

۴ مرداد ۱۴۰۱

song sea

واو قالب جالبیه استعداد خاصی تو این کار داری👌

۳ مرداد ۱۴۰۱

song sea

واو قالب جالبیه استعداد خاصی تو این کار داری👌

قسمت درباره من وبلاگ رو بخون تا بیشتر آشنا بشی

ممنون پسر روسیه‌ای 🌹

همه استعداد دارن، مسئله اینکه تو چه راهی استفاده میکنن👌

۳ مرداد ۱۴۰۱

Mr Ghost32

این خیلی خفنه 0_0

اصلا از اون خفن تر اینه که js نداااره 0_0

۱ مرداد ۱۴۰۱

Mr Ghost32

این خیلی خفنه 0_0

اصلا از اون خفن تر اینه که js نداااره 0_0

منتظر بروزرسانی های این پست باش، هنوز کلی کار داره🌹

۱ مرداد ۱۴۰۱

میــ ــم

بله منظورم عیدی و هدیه ی به این خوبی هست،
اشتباه تایپی بود

۲۹ تیر ۱۴۰۱

میــ ــم

بله منظورم عیدی و هدیه ی به این خوبی هست،
اشتباه تایپی بود

متوجه شدم🌹🙂

۲۹ تیر ۱۴۰۱

حصـــــــcafeh.ـــــین ..

قالبش به شدت عالی بود :)

۲۹ تیر ۱۴۰۱

حصـــــــcafeh.ـــــین ..

قالبش به شدت عالی بود :)

و منم به شدت از شما متشکرم 🙏😄🌹

۲۹ تیر ۱۴۰۱

میــ ــم

هیچی ندارم بگم...
خیلی خوبه قالبش
هیچ قالبی با این همه جزییات و خوبی ندیده بودم*_*
ممنون از عیدتون، عیدتون هم مبارک

۲۸ تیر ۱۴۰۱

میــ ــم

😅😂 ممنون از عیدم؟😄به گمونم منظورتون هدیه ای چیزی بود.

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

عید شما هم مبارک 🌹

۲۸ تیر ۱۴۰۱

ع . شکیبا

سلام
لطفا یه بررسی از قالب وبلاگ شهیدان بکنید.
دوست دارم قالب بهتری داشته باشه اما بیش از این مقدور نیست.
راهنمایی کنید ممنون میشم.
ان شاءالله موفق باشید

۲۸ تیر ۱۴۰۱

ع . شکیبا

سلام، چرا از همین قالب تلگرام استفاده نمیکنید؟

پیش نمایش قالب رو هم که زنده دارید روی وبلاگم می بینید، کاملا کاربر پسند و مناسب برای هر دستگاهی.

اگر کمک میخواین برای قرار دادنش بهم بگین تا براتون قرار بدم

قالب فعلی شما مشکلی نداره

من در خدمتم، همچنین 🙏🌹

۲۸ تیر ۱۴۰۱

.ک. .ن.

آقا عاااالی🎉🧡

۲۷ تیر ۱۴۰۱

.ک. .ن.

آقا عاااالی🎉🧡

😄🌹 ممنون عزیز ♥️

۲۸ تیر ۱۴۰۱

Amir chaqamirza

سلام. سلام.سلام

وای خدا از کله م دود بلند شد انقدر خفنه،ارسال نظرشوووو!👌😊یه مولا خیلی خیلی خوبه،خسته نباشین واقعاً،عید غدیر هم مبارک باشه:).

۲۷ تیر ۱۴۰۱

Amir chaqamirza

سلام،سلام،سلام اقا امیر گل:)

کانتشووووووو😄🌹❤️لطف داری، خوبی از خودته، 🌺ممنون 🌺

۲۷ تیر ۱۴۰۱

زری ...

2 ساللل :''''')
خسته نباشینننننن
امیدوارم بترکونه :دی

۲۷ تیر ۱۴۰۱

زری ...

2 ساللل :''''')
خسته نباشینننننن
امیدوارم بترکونه :دی

۲ سال ، اوقات بیکاری, قالب سال قبل اماده بود ولی مشکلات زیادی داشت...

سلامت باشید 🌹:)

بترکونه؟😄Yes indeed

۲۷ تیر ۱۴۰۱

نقل بلاگ

سلام
عیدت مبارک باشه و خداقوت 🌹

۲۷ تیر ۱۴۰۱

نقل بلاگ

سلام
عیدت مبارک باشه و خداقوت 🌹

سلام، عید شما هم مبارک باشه اقا محمد 🌹🙏

زنده باشی، ممنون

۲۷ تیر ۱۴۰۱