| abo-karim |
10-17-2017 10:05 PM |
قالب الكلمات الدلالية للموضوع, قالب الوسوم للموضوع بشكل جديد وحصرى
3 مرفق
السلام عليكم ورحمه الله وبركاته قالب الكلمات الدلالية من اهم القوالب التى لها تاثير كبير جدا على ارشفة المواضيع ولمن استهدم اسكريبت الفى بى يعلم جيدا امية هذا القالب ولهذه الاهمية تم اضافته ايضا داخل اسكريبت الزين فورو, xenforo لكن باسم اخر وهو الوسوم .
وحتى لا اطيل الحديث عن القالب وومميزاته اتى لكم اليوم بتعديل على هذا القالب حتى يكون اكثر عصريا وجذب اكثر وشبيه بقالب هيلبرنت
صوره من القالب التقليدى
صوره ممن القالب بعد تطويره
الخطوات
1- سجل دخول الى لوحة تحكم المنتدى >>> المظهر >>>> البحث فى القوالب >>> ابحث عن قالب اسمه helper_tag_list
2- قم باستبدال محتوياته بالكامل بهذا الكود
كود:
<div class="tagBlock TagContainer">
<div class="IconTag">
<div class="fa fa-tags">
</div></div>
{xen:phrase tags}:
<xen:if is="{$tags}">
<ul class="tagList">
<xen:foreach loop="$tags" value="$tag">
<li><a href="{xen:link tags, $tag}" class="tag"><span class="arrow"></span>{$tag.tag}</a></li>
</xen:foreach>
</ul>
</xen:if>
<xen:if is="{$editUrl}">
<a href="{xen:escape $editUrl, false}" class="OverlayTrigger tagBlockEdit"><xen:if is="{$tags}">{xen:phrase edit}<xen:else />{xen:phrase add_tags}</xen:if></a>
</xen:if>
</div>
كما بالصوره
3- ثم قم بالحفظ
4- من خلال لوحة تحكم المنتدى >>> المظهر >>>> البحث فى القوالب >>> ابحث عن قالب اسمه public.css بداخل هذا القالب قم بالبحث عن هذا الكود
كود:
.tagBlock
{
margin: 10px 0;
font-size: 11px;
}
.tagList,
.tagList li
{
display: inline;
}
.tagList .tag
{
position: relative;
display: inline-block;
background: @primaryLightest;
margin-left: 9px;
height: 14px;
line-height: 14px;
padding: 1px 4px 1px 6px;
border: 1px solid @primaryLighter;
border-left: none;
border-radius: 4px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
color: @primaryMedium;
font-size: 11px;
margin-bottom: 2px;
}
.tagList .tag:hover
{
text-decoration: none;
background-color: @primaryLighterStill;
}
.tagList .tag .arrow
{
position: absolute;
display: block;
height: 2px;
width: 0;
left: -9px;
top: -1px;
border-style: solid;
border-width: 8px 9px 8px 0;
border-color: transparent;
border-right-color: @primaryLighter;
}
.tagList .tag .arrow:after
{
content: '';
position: absolute;
display: block;
height: 2px;
width: 0;
left: 1px;
top: -7px;
border-style: solid;
border-width: 7px 8px 7px 0;
border-color: transparent;
border-right-color: @primaryLightest;
}
.tagList .tag:hover .arrow:after
{
border-right-color: @primaryLighterStill;
}
.tagList .tag:after
{
content: '';
position: absolute;
left: -2px;
top: 6px;
display: block;
height: 3px;
width: 3px;
border-radius: 50%;
border: 1px solid @primaryLighter;
background: @contentBackground;
}
ثم قم باستبداله بهذا الكود
كود:
.tagBlock {
background: none repeat scroll 0 0 #fff;
border: 1px solid #e8e8e8;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-family: "Droid Arabic Kufi","Open Sans",sans-serif;
font-size: 0.75em;
font-weight: lighter;
padding: 8px;
margin-top: 10px;
margin-bottom: 10px;
overflow: hidden;
min-height: 10px;
}
.tagBlock .IconTag {
float: left;
font-size: 32px;
width: 40px;
height: 30px;
margin-left: 10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #123465;
color: #fff;
text-align: center;
padding-top: 9px;
}
.tagBlock .IconTag {
font-size: 25px;
color: #fff;
text-align: center;
line-height: 0px;
margin-left: 5px;
margin-right: 10px;
}
.tagList,
.tagList li
{
display: inline;
}
.tagList .tag
{
position: relative;
display: inline-block;
background: rgb(245, 245, 245);
margin-right: 9px;
height: 14px;
line-height: 14px;
padding:1px 6px 1px 4px;
border: 1px solid rgb(222, 222, 222);
border-right: none;
-webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px;
-webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; -khtml-border-top-right-radius: 0; border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0; -khtml-border-bottom-right-radius: 0; border-bottom-right-radius: 0;
color: rgb(17, 68, 143);
font-size: 11px;
margin-bottom: 2px;
}
.tagList .tag:hover
{
text-decoration: none;
background-color: rgb(239, 239, 239);
}
.tagList .tag .arrow
{
position: absolute;
display: block;
height: 2px;
width: 0;
right: -9px;
top: -1px;
border-style:solid;
border-width:8px 0 8px 9px;
border-color:transparent;
border-left-color: rgb(222, 222, 222);
}
.tagList .tag .arrow:after
{
content: '';
position: absolute;
display: block;
height: 2px;
width: 0;
right: 1px;
top: -7px;
border-style:solid;
border-width:7px 0 7px 8px;
border-color:transparent;
border-left-color: rgb(245, 245, 245);
}
.tagList .tag:hover .arrow:after
{
border-left-color: rgb(239, 239, 239);
}
.tagList .tag:after
{
content: '';
position: absolute;
right: -2px;
top: 6px;
display: block;
height: 3px;
width: 3px;
-webkit-border-radius: 50%; -moz-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%;
border: 1px solid rgb(222, 222, 222);
background: rgb(252, 252, 255);
}
ثم قم بالحفظ ومبارك عليك |
