قالب دو ستونه بیان :: رایانه فردا

ویژگی های این قالب :

دارای دو ستون مجزا
ریسپانسیو است
دارای فونت زیبای تنها

کد Html قالب :

<!DOCTYPE html><html><head>

<head:meta></head:meta>
    <head:script></head:script>
    <head:style></head:style>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<div class="all ">
        <div class="top">
            <div class="">
                <div class="menubox">
    
                    <ul class="nav bg-light  mb-0 border-light-1 ">
                        <box:menu>
                            <view:menu>
    
                                <li class="nav-item"><a href="(*menu_item_link*)" class="text-decoration-none">(*menu_item_title*)</a>
                                </li>
    
                            </view:menu>
                        </box:menu>
                    </ul>
    
                </div>
            </div>
    
            <div class="boxheader">
    
                <div class="boxtitleheader">
    
                    <check:if blog_title>
                        <div class="text-center"><a href="(*blog_link*)" class="text-decoration-none">(*blog_title*)</a>
                        </div>
                    </check:if>
    
                    <check:if blog_short_description>
                        <div class="text-center">
                            <span>(*blog_short_description*)</span>
                        </div>
                    </check:if>
                </div>
            </div>
            
    
            <box:messages>
                <view:messages>
                    <div class="boxmessage alert alert-info">
                        <div class="text-center">
                            <p class=""> (*message*)</p>
                        </div>
                    </div>
                </view:messages>
            </box:messages>
        </div>

<check:if post_list_title>
                            <div class="post_list_title" style=";">
                                <span class="text-center">(*post_list_title*)</span>
                            </div>
                        </check:if>
                        <view:post_list>
                       
                            <div class="card bg-light mb-3 mr-4 mt-4" style="max-width: 100%">
                                
                                <check:if post_image>
                                    <a href="(*post_link*)/#section" class="text-decoration-none">
                                        <img class="" title="(*post_title*)" src="(*post_image*)" alt="(*post_title*)" style="width:100%;">
                                    </a>
                                </check:if>
                                <check:if post_title>
                                    <div class="card-header text-center bg-secondary text-white"> 
                                        <a href="(*post_link*)/#section" class="text-decoration-none">
                                            
                                                    (*post_title*)
                                        </a>
                                    </div>
                                </check:if>
                                <div class="card-body">
                                    <article class="">(*post_summary*)</article>
                                    <div class="">
                                        <br>
                                        <div>
                                            <p>
                                                <check:if post_has_read_more>
                                                    <a href="(*post_link*)/#section" class="btn btn-light float-left m-1 p-1 btn-sm text-decoration-non">
                                                        ادامه مطلب ...
                                                    </a>
                                                </check:if>
                                            </p>
                                        </div>
                                        <div class="">

<span class=""><span class=""></span>(*post_date format="%y-%n-%d"*)
                                                    </span>
                                                    <check:if post_has_comments_section>
                                                        <a href="(*post_link*)#comments" class="postcomment text-decoration-non"><span class=""><span class=""></span> نظرات
                                                                (*post_comment_count*)</span></a>
                                                    </check:if>
                                                    <box:post_rating>
                                                        <span class="">
                                                            <span class="">
                                                                <a class="text-decoration-non" href="(*rate_up_link*)" rel="nofollow" title="لایک پست">
                                                                    <span class="">
                                                                        <span class=""></span>
                                                                        <span class=""><svg class="bi bi-heart" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                                                            <path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 01.176-.17C12.72-3.042 23.333 4.867 8 15z" clip-rule="evenodd"/>
                                                                          </svg> (*up_rates*)</span>
                                                                    </span>
                                                                </a>
                                                            </span>
                                                        </span>
                                                    </box:post_rating>

</div>
                                            </div>

</div>

</div>
                            
                            <div class="clear"></div>
                        </view:post_list>
                    </box:post_list>
                </div>

<box:pagination>
                    
                <div class=" p-1 ">
                    <ul class="pagination pagination-sm justify-content-center">
                       
                        
                     
                        <check:if page_prev>
                            <li class="page-item">
                                <a href="(*page_prev*)" class="page-link" title="صفحه قبل">صفحه قبل</a>
                                
                            </li>
                        </check:if>

<view:pages spec="3,2,2,2,3,2">
                            <check:if page_num>
                                <check:if page_current>
                                    <li class="page-item">
                                        <a href="(*page_link*)" class="page-link (*page_current*)">(*page_num*)</a>
                                        
                                    </li>
                                    
                                    
                                </check:if>
                                <check:if not page_current>
                                    <li class="page-item">
                                        <a class="page-link" href="(*page_link*)">(*page_num*)</a>
                            
                                    </li>
                                   
                                </check:if>
                            </check:if>
                            <check:if not page_num>
                                <span>...</span>
                            </check:if>
                        </view:pages>

<check:if page_next>
                            <li class="page-item"><a href="(*page_next*)" class="page-link "  title="صفحه بعد">صفحه بعد</a></li>
                            
                        </check:if>

</ul>
                </div>
                    
                </box:pagination>

<box:post_detail>

<check:if post_title>
                            <div class="card-header text-center bg-secondary text-white">
                                <a href="(*post_link*)/#section" class="text-decoration-non">
                                    
                                            (*post_title*) 
                                </a>
                            </div>
                        </check:if>

<div class="card-body">
                            <article class="">(*post_full_content*)</article>
                
                        </div>
                       
                        <check:if post_image>
                            <a href="(*post_link*)/#section" class="text-decoration-non">
                                <img class="postimg" title="(*post_title*)" src="(*post_image*)" alt="(*post_title*)" style="">
                            </a>
                        </check:if>
                    </div>

<check:if post_author>
                                        <a href="/by_author/(*post_author_id*)/#section" class="postauthor text-decoration-non" style="padding-top:5px;"><span class=""><span class=""></span>(*post_author*)</span></a>
                                    </check:if>

<span class=""><span class=""></span>(*post_date format="%d %B %y ، %H:%M"*)</span>

<check:if post_has_comments_section>
                                        <a href="(*post_link*)#comments" class=""><span class=""><span class=""></span>تعدادنظرات :(*post_comment_count*) </span></a>
                                    </check:if>

<box:post_rating>
                                        <span class="like">
                                            <span class="">
                                                <a class="text-decoration-non" href="(*rate_up_link*)" rel="nofollow" title="لایک پست">
                                                    <img src="https://8pic.ir/uploads/facebook-like-button-facebook-like-button-computer-icons-symbol-like-png-clip-art.png" alt="">

</a>
                                            </span>
                                            <div>تعداد لایک :(*up_rates*)</div>
                                        </span>
                                    </box:post_rating>

<box:post_categories>
                                        <span class="">
                                            <span class=""></span>
                                            <view:post_categories>
                                                <span class="">
                                                    <a class="text-decoration-non" href="(*category_link*)" title="همه مطالب با موضوع (*category_name*)"> (*category_name*)
                                                    </a>
                                                </span>
                                            </view:post_categories>
                                        </span>
                                    </box:post_categories>

<box:post_tags>
                                        <span class="">
                                            <span class=""></span>
                                            <br><span>برچسب ها :</span>
                                            <view:post_tags>
                                                <span class="tags">

</div>
                            </div>

</div>
                    </div>

<br>

<box:post_comments>
                        <a name="comments" class="text-decoration-non"></a>
                        <div class="comments">
                            <h4 class="titlecomment"><a href="(*post_link*)#comments">نظرات ((*post_comment_count*))</a>
                            </h4>
                            <view:post_comments>
                                <a name="comment-(*comment_id*)" class=""></a>
                                <ul id="comments-list" class="comments-list">
                                    <li>
                                        <div class="comment-main-level border border-primary p-2">
                                            
                                            <div class="comment-avatar"><img src="(*comment_avatar*)" alt=""></div>
                                            
                                            <div class="comment-box">
                                                <div class="comment-head">
                                                    <h6 class="comment-name"><a href="(*comment_link*)">(*comment_fullname*)</a></h6>
                                                    <span>(*comment_date format="%A %e %B %y , %H:%M"*)</span>

</div>
                                                <div class="comment-content">
                                                    (*comment_body*)
                                                </div>
                                            </div>
                                        </div>
                                        
                                       
                                        <check:if comment_reply>
                                            <div class="answer" style="font-size: 18px;">پاسخ:</div>
                                            <ul class="comments-list-reply-list border border-success p-2">
                                                
                                                <li>
                                                    
                                                    <div class="comment-avatar"><img src="(*comment_reply_avatar*)" alt="author avatar">
                                                    </div>
                                                    
                                                    <div class="comment-box">
                                                        <div class="comment-head">
                                                            <h6 class="comment-name by-author"><a href="(*comment_link*)">(*comment_reply_fullname*)</a>
                                                            </h6>
                                                            <span>(*comment_reply_date*)</span>
                                                            
                                                        </div>
                                                        <div class="comment-content">
                                                            (*comment_reply*)
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </check:if>
                                    </li>
                                </ul>
                            </view:post_comments>
                        </div>

<check:if comment_add_form>
                            <div class="comment_add_form">

<div class="comment-add-form">(*comment_add_form*)</div>
                                <br>

</div>
                          
                        </check:if>

</box:post_comments>

</box:post_detail>

<box:page_detail>

<check:if page_title>
                            <div class="card-header bg-secondary text-white" >
                                <a href="(*page_link*)/#section" class="">
                                   
                                            (*page_title*) 
                                </a>
                            </div>
                        </check:if>

<div class="card-body">
                            <article class="">(*page_content*)</article>
                        </div>

</div>

<box:page_comments>
                        <a name="comments"></a>
                        <div class="comments">
                            <h4 class="titlecomment"><a href="(*page_link*)#comments">نظرات ((*page_comment_count*))
                                </a></h4>
                            <view:page_comments>
                                <a name="comment-(*comment_id*)"></a>
                                <ul id="comments-list" class="comments-list">
                                    <li>
                                        <div class="comment-main-level border border-primary p-2">

<div class="comment-avatar"><img src="(*comment_avatar*)" alt=""></div>
                                            
                                            <div class="">
                                                <div class="comment-head">
                                                    <h6 class="comment-name"><a href="(*comment_link*)">(*comment_fullname*)</a></h6>
                                                    <span>(*comment_date format="%A %e %B %y , %H:%M"*)</span>
                                                    
                                                    <check:if comment_website>
                                                        <a href="(*comment_website*)"><i class="fa fa-globe"></i></a>
                                                    </check:if>

<div class="comment-avatar"><img src="(*comment_reply_avatar*)" alt="author avatar">
                                                    </div>
                                                    
                                                    <div class="">
                                                        <div class="comment-head">
                                                            <h6 class="comment-name by-author"><a href="(*comment_link*)">(*comment_reply_fullname*)</a>
                                                            </h6>
                                                            <span>(*comment_reply_date*)</span>
                                                            
                                                        </div>
                                                        <div class="comment-content">
                                                            (*comment_reply*)
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </check:if>
                                    </li>
                                </ul>
                            </view:page_comments>
                        </div>
                    </box:page_comments>

<check:if comment_add_form>
                        <div class="comment_add_form">

<div class="comment_add_form">(*comment_add_form*)</div>
                            <br>

</div>
                        
                    </check:if>

</box:page_detail>

</div>
            
            
            
            

            <div class="leftpaper">

<box:blog_info>
                    
                    <div class="card bg-light mb-3 mr-4 mt-4 " style="width: 98%;">
                        <check:if blog_image>
                            <img class=" m-2 center-block" src="(*blog_image*)" style="max-width:100%">
                        </check:if>
                        <check:if blog_description>
                            <div class="card-body p-2 m-2 ">
                                <p class="">
                                    (*blog_description*)
                                </p>

</div>

</check:if>

</div>
                </box:blog_info>

<box:ads>
                    <div class="card bg-light mb-3 mr-4 mt-4 ml-4">
                        <div class="card-header bg-secondary text-white">
                            تبلیغات
                        </div>
                        <div class="card-body text-center" style="width: auto;">
		
                            <view:ads>
		<div>(*ad*)</div>											 
                            </view:ads>
                        </div>
                    </div>
                </box:ads>

<box:most_visited_posts>
                    <div class="card bg-light mb-3 mr-4 mt-4 ml-4">
                        <div class="card-header bg-secondary text-white">
                            پربیننده ترین مطالب
                        </div>
                        <ul class="card-body">
                            <view:most_visited_posts>
                                <li class="">
                                    <a class="" href="(*post_link*)/#section" title="تعداد بازدید: (*post_views*)"><i class=""></i> (*post_title*)
                                        </a>
                                </li>
                                <br>
                            </view:most_visited_posts>
                        </ul>
                    </div>
                </box:most_visited_posts>

<box:popular_posts>
                    <div class="card bg-light mb-3 mr-4 mt-4 ml-4">
                        <div class="card-header bg-secondary text-white">
                            محبوب ترین مطالب
                        </div>
                        <ul class="card-body">
                            <view:popular_posts>
                                <li class="">
                                    <a class="" href="(*post_link*)/#section"><i class="fa fa-caret-left"></i> (*post_title*)</a>
                                </li>
                                <br>
                            </view:popular_posts>
                        </ul>
                    </div>
                </box:popular_posts>
                
                <box:most_commented_posts>
                    <div class="card bg-light mb-3 mr-4 mt-4 ml-4">
                        <div class="card-header bg-secondary text-white">
                            مطالب پربحث‌تر
                        </div>
                        <ul class="card-body">
                            <view:most_commented_posts>
                                <li class="">
                                    <a class="" href="(*post_link*)/#section"> (*post_title*)</a>
                                </li>
                                <br>
                            </view:most_commented_posts>
                        </ul>
                    </div>
                </box:most_commented_posts>

<box:recent_posts>
                    <div class="card bg-light mb-3 mr-4 mt-4 ml-4">
                        <div class="card-header bg-secondary text-white">
                            آخرین مطالب
                        </div>
                        <ul class="card-body">
                            <view:recent_posts>
                                <li class="">
                                    <a class="" href="(*post_link*)/#section"> (*post_title*)</a>
                                </li>
                                <br>
                            </view:recent_posts>
                        </ul>
                    </div>
                </box:recent_posts>
							        <check:if follow_box>
                    <div class="card bg-light  mb-3 mr-4 mt-4">

<div class="card-body text-center border border-secondary">
                            (*follow_box*)
                        </div>
                    </div>
                </check:if>

<box:categories>
                    <div class="card bg-light mb-3 mr-4 mt-4">
                        <div class="card-header bg-secondary text-white">
                            طبقه بندی موضوعی
                        </div>
                        <ul class="card-body">
                            <view:categories>
                                <li class="">
                                    <check:if category_selected>
                                        <span class="">
                                            <a class="text-decoration-non"><i class="">
                                                (*category_name*)</i> <span class="btn btn-info float-left btn-sm">(*category_post_count*)</span> </a>
                                        </span>
                                    </check:if>
                                    <check:if not category_selected>
                                        <a class="text-decoration-non" href="(*category_link*)/#section" title=" تعداد موضوع : (*category_post_count*)"><i class=""></i>
                                            (*category_name*) <span class=" btn btn-info float-left btn-sm">(*category_post_count*)</span></a>
                                    </check:if>
                                </li>
                                <br>
                            </view:categories>
                        </ul>
                    </div>
                </box:categories>
                <box:recent_comments>
                    <div class="card bg-light mb-3 mr-4 mt-4 ml-4">
                        <div class="card-header bg-secondary text-white">
                            آخرین نظرات
                        </div>
                        <ul class="card-body">
                            <view:recent_comments>
                                <li class="">
                                    <a class="text-decoration-non" href="(*comment_link*)" style="height:53px;">
                                        <img src="(*comment_avatar*)" alt="comment avatar" class="" style="width:35px">
                                        <span class="">
                                            
                                            (*comment_body_text max="15"*)</span><br>
                                    </a>
                                </li>
                            </view:recent_comments>
                        </ul>
                    </div>
                </box:recent_comments>

                <box:archive>
                    <div class="card bg-light mb-3 mr-4 mt-4 ml-4">
                        <div class="card-header bg-secondary text-white">
                            بایگانی
                        </div>
                        <ul class="card-body">
                            <view:archive>
                                <li class="">
                                    <a class="" href="(*link_url*)/#section" title="تعداد پست : (*link_count*)"><i class=""></i> (*link_name*)
                                        <span>((*link_count*))</span></a>
                                </li>
                                <br>
                            </view:archive>
                        </ul>
                    </div>
                </box:archive>

<box:tag_cloud>
                    <div class="card bg-light mb-3 mr-4 mt-4 ml-4">
                        <div class="card-header bg-secondary text-white">
                            برچسب ها
                        </div>
                        <div class="card-body">
                            <p>
                                <view:tag_cloud>
                                    <span class=""><a class="btn btn-outline-primary" href="(*tag_link*)/#section">(*tag_name*)
                                        </a>
                                    </span>
                                </view:tag_cloud>
                            </p>
                        </div>
                    </div>
                </box:tag_cloud>
                
                <box:authors>
                    <div class="card bg-light mb-3 mr-4 mt-4 ml-4">
                        <div class="card-header bg-secondary text-white">
                            نویسندگان
                        </div>
                        <ul class="card-body">
                            <view:authors>
                                <li class="">
                                    <a class="" href="(*author_link*)/#section" title="تعداد پست : (*author_post_count*)"><i class=""></i> (*author_name*)
                                        </a>
                                </li>
                            </view:authors>
                        </ul>
                    </div>
                </box:authors>

<box:daily_links>
                    <div class="card bg-light mb-3 mr-4 mt-4 ml-4">
                        <div class="card-header bg-secondary text-white">
                            پیوندهای روزانه
                        </div>
                        <ul class="card-body">
                            <view:daily_links>
                                <li class="">
                                    <a alt="(*link_alt*)" class="" href="(*link_url*)/#section" title="(*link_name*)" rel="nofollow"><i class=""></i> (*link_name*) </a>
                                </li>
                                <br>
                            </view:daily_links>
                        </ul>
                    </div>
                </box:daily_links>

<box:links>
                    <div class="card bg-light mb-3 mr-4 mt-4 ml-4">
                        <div class="card-header bg-secondary text-white">
                            پیوندها
                        </div>
                        <ul class="card-body">
                            <view:links>
                                <li class="">
                                    <a alt="(*link_alt*)" class="" href="(*link_url*)/#section" title="(*link_name*)" rel="nofollow"><i class=""></i> (*link_name*) </a>
                                </li>
                                <br>
                            </view:links>

</ul>
                    </div>
                </box:links>

<box:stat>
                    <div class="card bg-light mb-3 mr-4 mt-4 ml-4">
                        <div class="card-header bg-secondary text-white">
                            خلاصه آمار
                        </div>
                        <ul class="card-body">
                            <view:stat>
                                <li class="">
                                    <div class=""><span class="float-right">(*stat_title*) : </span><span class="btn btn-info float-left .btn-sm ">(*stat_value*)</span></div>

</li>
                                <br><br>
                            </view:stat>
                        </ul>
                    </div>
                </box:stat>
				
            </div>
            
           
        </div>

</div>

<div class="clear"></div>
    <div class="footer">
        <span class="left"><a target="_black" href="http://www.willpc.ir"> طراح قالب : رایانه فردا </a></span>
        <span class="right">تمامی حقوق مادی و معنوی این وبلاگ محفوظ است</span>
    </div>

</body></html>

کد css قالب :

@font-face {
    font-family: 'tanha';
    src: url('http://bayanbox.ir/download/2211621744315096329/Tanha.ttf');
    font-weight: normal;
}
body{
    
    background: url('https://images.template.net/wp-content/uploads/2017/01/14180026/Web-Background-Pattern.jpg');
    
    width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
   
}
.card{
    width: 98%;
    margin: 10px;

}
.card-body{
    font-size: 15px;
    text-align: justify;
    width: 100%;
}

.clear{
    clear: both;
    content: "";
}
*{
    
    font-family:'tanha','Times New Roman', Times, serif ;
    box-sizing: content-box;
    direction: rtl;
    text-align: right;
    text-decoration: none;
    
    
}
.all{
    width: 70%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
   
}
.nav{
    width: 100%;
    color: black;
    
    
    
    display: block;
    margin-left: auto;
    margin-right: auto;
    
    
    
    height: auto;
    
    
}

.menubox ul li a{
    color:black;
}
.menubox ul li a:hover{
    text-decoration: underline;
}
.menubox ul li{
display: inline-block;
margin: 10px;
}
.boxheader{
    margin-top: 0px;
    width: 100%;
    display: block;
    
    text-align: center;
    padding: 10px;
    background: #c8d6e5;
    border-radius: 0 0 30px 30px;
    font-size: 16px;
    overflow: auto;
}
.boxtitleheader{
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    color:white;
}
.boxtitleheader a{
    color:white;
}
.boxmessage{
    text-align: center;
    font-size: 15px;
    padding: 2px;
    margin: 10px;
    box-sizing: border-box;
    border-radius: 20px;
}

.row{
    /* background-color: rgba(118, 185, 30, 0.712); */
    width: 100%;
    height: 100%;
    display: block;
    margin: auto;
  
}

.rightpaper{
    width: 67.5%;
    
    float: right;
    
    
    
    
}

.postinrightpaper{
    
    direction: rtl;

}

.leftpaper{
   width: 31%;
   float: right;
    direction: rtl;
  
    font-size: 15px;
    margin-left: 10px;
    
}
.leftpaper ul{
    list-style: none;
}

.post_list_title{
    text-align: center;
    display: block;
    margin: 20px 20px;
    background-color: #dfe4ea;
    border-radius: 10px;
    width: 98%;
    padding:10px;
}
.post{
    width: 100%;
    height: fit-content;
    float: right;
    
    
    
    background-color: #95afc0;
    border-radius: 20px;
    margin: 10px 5px;
    overflow: hidden;
}
.card-body img{
    max-width: 100%;
}
.posttitle{
    width: 90%;
    text-align: center;
    font-size: 18px;
    background-color: #dff9fb;
    margin-bottom: 10px;
    display: block;
    margin: 10px auto;
    border-radius: 20px;
    color: white;
}
.posttitle a{
color: black;
}
.postsummary{
    padding: 10px 20px;
    width: 90%;
    
    border: 1px dotted red;

margin-top: 10px;
    
    border-radius: 10px;
    background-color: white;
    font-size: 15px;
    overflow: hidden;

}
.postsummary img{
    display: block;
    margin: auto;
}
.rightinfo{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-content: center;
align-self: center;
background-color: #dfe6e9;
border-radius: 20px;
width: 98%;
margin: 10px 20px;
padding: 10px;
font-size: 14px;

}
.readmore{
    height: 50px;
    
    margin: 20px;
    margin-bottom: 50px;
    
    float: left;
    padding: 5px;
    border-radius: 10px;
}

.boxpagination{
clear: both;
text-align: center;
background-color: whitesmoke;
	display: block;
margin:10px  auto;
border-radius: 10px;
font-size: 18px;
width: 95%;

padding:10px;

}
.boxpagination a:hover{
	text-decoration:none;
}
.fullcontent a img {
    width: 100%;
    max-height: 100px;
    object-fit: contain;
    margin: 10px;
    display: block;
    
}

.fullcontent{
    
    
    width: 100%;
    height: fit-content;
    background-color:white;
    border: 1px dotted red;
    margin:  auto;
    border-radius: 20px;
    overflow: hidden;
    direction: rtl;
    text-align: justify;
    
    font-size: 15px;
    display: block;
}
.postfullcontent{
padding: 10px;
display: block;
margin: auto;
}

.info{
    background-color: #a4b0beb4;
    border-radius: 20px;
    margin: 10px auto;
}
.infoimg{

height: auto;
margin:  auto;
display: block;
}
.comments{
    display: block;
    background-color:rgba(245, 245, 245, 0.781);
    width: 98%;
    height: auto;
    padding: 2px;
    border-radius: 30px;
    margin: 10px 20px;
    font-size: 14px;
    text-align: justify;
    direction: rtl;

}
.infodescription{
    padding: 10px;
    margin: 10px auto;
    text-align: justify;
    direction: rtl;
    display: block;

}
.infotitle{
    text-align: center;
    padding: 5px;
    margin: 20px 10px;
    background-color: #dff9fb;
    border-radius: 10px;
    color: black;
}
.infocontent{
    text-align: center;
    margin: 10px auto;
    padding: 10px;
    color: white;
    background-color: #badc58;
    border-radius: 20px;
   
    
}
.infocontentright{
    text-align: center;
    margin: 10px auto;
    padding: 10px;
    color: white;
    background-color: #badc58;
    border-radius: 20px;
}
.comment-avatar{
    float: right;
    width: 100px;
    height: 100px;
    margin: 5px 10px;
    border-radius: 50%;
    
}
.comment-main-level{
    background-color: #dfe4ea;
    border-radius: 20px;
    margin: 5px 10px;
}
/* .comments-container{
    background: white;
    display: block;
    margin: 30px auto;
} */
.titlecomment{
    text-align: center;
    padding: 10px ;
    font-size: 20px;
    background-color:#81ecec;
    width: 90%;
    display: block;
    margin: 10px auto;
    border-radius: 30px;
}

.comments-list-reply-list{
    background-color: #f1f2f6;
    border-radius: 20px;
    margin: 10px;
}
.comment_add_form{
    background-color: #ecf0f1;
    font-size: 14px;
    padding: 5px;
    margin: 20px;
    border-radius: 10px;
    width: 98%;

}
.comment-content{
    
    clear: both;
    padding: 10px;
    direction: rtl;
    margin: 20px auto;
    text-align: right;
    
    
}
.reply{
    background-color: #7bed9f;
}
.comment-name{
    float: right;
    padding: 2px;
    margin: 2px;
    font-size: 14px;
}
.right{
    float: right;
    padding-right: 10px;
    
}
.left{
    float: left;
    padding-left: 10px;
    
}
/* @media screen and (max-width:1140px) {
    .leftpaper {
        
        width: 30%;
        margin: 10px;
        
    }
    .rightpaper{
        width: 65%;
        margin: 10px;
    }
} */

/* @media screen and (max-width:720px) {
    .leftpaper , .rightpaper{
        
        width: 100%;
        
       
    }
    .post{
        display: block;
        margin: auto;
        
    }
    .leftpaper::after , .rightpaper::after{
        clear: both;
    }
    .menubox ul li{
        display: block;
        text-align: center;
        font-size: 15px;
        
    }
    .posttitle{
        font-size: 15px;
        width: 100%;
        display: block;
        margin: auto;
    }
    
} */
/* .send_comment{
    display: block;
    width: 100%;
    height: auto;
    float: left;
    font-size: 10px;
} */
.card-header a{
    color:white;
}
.menubox ul li{
    font-size: 15px;
    
}
.menubox ul {
    direction: rtl;
}
.menubox ul li a:hover{
    
    border-radius: 20px;
}
.footer{
    display: block;
    box-sizing: border-box;
    background-color: #273c75b2;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    height: 35px;
    font-size: 13px;
    margin-top: 10px;
    overflow: hidden;
   color: white;
   
}
.footer .left{
    background-color: white;
    border-radius: 15px;
}
.footer .left:hover {
    background-color: rgba(28, 219, 92, 0.815);
    border-radius: 20px;
}
.footer .right:hover{
    background-color: rgba(28, 219, 92, 0.815);
    border-radius: 20px;
}
.footer a:hover{

border-radius: 20px;
}
a:hover{
    
    border-radius: 10px;
}
a:active{
    color: #e74c3c;
}
.tags{
    background-color: #636e72;
    border-radius: 10px;
    margin: 2px;
}
.tags a{
    color:white;
}
.tags a:hover{
    color: white;
}
.like{
    float: left;
    display: flex;
    flex-direction: column;
    margin: 10px;
    
}
.like img{
    border-radius: 30px;
    background-color: none;
    float: left;
    margin: 10px;
}

.infocontent a{
    color: white;
}
.infocontentright a{
    color: white;
}

img{
    max-height:350px;
    object-fit: contain;
    display: block;
    margin: auto;
    max-width: 100%;
}
video{
    display: block;
    margin: auto;
}
.card {
    text-decoration: none;
}
@media screen and (max-width:900px) {
    .answer{
        font-size: 15px;
    }
    .postinrightpaper{
        
        height: fit-content;
    }
    .postfullcontent{
        padding: 10px;
        
        width: 100%;
    }

.comment_add_form{
        font-size: 9px;
        
    }
    body , .all, .row{
        display:block;
        margin:auto;
        width: 100%;
    }
    .rightpaper , .leftpaper,.rightpaper2{
    width:96.5%;
    height: max-content;
    display: block;
    margin: 10px .5%;

} 
    
   
    .post{
        width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .postinrightpaper{
        display: block;
        margin: auto;
    }

.menubox{
      overflow: auto; 
      font-size: 13px;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

.boxpagination{
        font-size: 15px;
    }
   body{
       width: 100%;
   }
   .all{
       width: 100%;
   }
  
   .rightinfo{
       font-size: 12px;
   }
   img{
    max-height:200px;
    object-fit: contain;
    display: block;
    margin: auto;
    width: 100%;
   }
   .comment_add_form{
       font-size: 9px;
   }
 
}

.card-body a:hover{
	text-decoration: none;
}
.card-body textarea{
	display:block;
	margin:auto;
}
.rightinfo a:hover{
	text-decoration: none;
}
a:hover{
	text-decoration: none;
}
.card-header a:hover{
    text-decoration: none;
    color:white;
}
.footer a:hover{
    text-decoration: none;
}

آموزش تعویض قالب بیان :