| abo-karim |
07-03-2017 11:03 PM |
قالب معلومات العضو والماسدج (message) حصري لمعهد هيلبرنت
1 مرفق
السلام عليكم ورحمه الله وبركاته اليوم اطرح لكم قالب جديد وحصرى وجميع قوالبه خاص بمعهد هيلبرنت لان اسكريبت الزين فورو غير اسكريبت الفى بى ينفع تسرق التصميم وهذا مايميز الزين فورو علشان كده اكثر اصحاب المواقع اللى شغلتهم سرقت الاستايلات لايجروء على تحويل نسختهم الى xenforo لان كما قلت ياهتعرف تصممم وتطور القوالب يا اما ؟؟؟؟؟؟؟ اكيد انتم عارفين.
صوره من العمل
الخطوات
1- قم بتسجيل دحولك للوحة تحكم المنتدى >>> المظهر >>>> البحث فى القوالب >>>>> ابحث عن قالب اسمه message_user_info فى اخر القالب ستجد هذا الكود
كود:
<span class="arrow"><span></span></span>
قم بحذفه
2- من لوحة تحكم المنتدى >>> المظهر >>>> البحث فى القوالب >>>>> ابحث عن قالب اسمه message.css ابحث بداخله عن هذا الكود
كود:
.messageList .message
{
احذف ما بين علامة التنصيص
}
ثم قم بوضع هذا الكود بدلا من الكود اللى قمت بحذفه
كود:
@property "message";
background-color: #ffffff;
padding: 10px;
margin-bottom: 10px;
border: 1px solid @primaryLighter;
box-shadow: -0 0 5px 0 rgba(0,0,0,.2);
@property "/message";
3 - من لوحة تحكم المنتدى >>> المظهر >>>> البحث فى القوالب >>>>> ابحث عن قالب اسمه message_user_info.css قم بحذف مابداخله ثم قم بوضع هذا الكود
كود:
.messageUserInfo
{
@property "messageUserInfo";
border-right: 3px solid #FFB635;
border-radius: 14px;
float: left;
width: 154px;
@property "/messageUserInfo";
}
.messageUserBlock
{
@property "messageUserBlock";
background-color: #fff;
border-radius: 14px;
@property "/messageUserBlock";
position: relative;
}
.messageUserBlock div.avatarHolder
{
@property "messageAvatarHolder";
background-color: #fff;
padding: 10px;
border-radius: @fa_borderradiuss;
text-align: center;
@property "/messageAvatarHolder";
position: relative;
}
.messageUserBlock div.avatarHolder .avatar
{
display: block;
font-size: 0;
}
.messageUserBlock div.avatarHolder .onlineMarker
{
position: absolute;
top: {xen:calc 'intval(@messageAvatarHolder.padding-top) - 1'}px;
left: {xen:calc 'intval(@messageAvatarHolder.padding-right) - 1'}px;
@property "messageOnlineMarker";
border: 7px solid transparent;
border-top-color: rgb(127, 185, 0);
border-left-color: rgb(127, 185, 0);
border-top-left-radius: 5px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
left: 24px;
@property "/messageOnlineMarker";
}
.messageUserBlock h3.userText
{
@property "messageUserText";
padding: 6px;
@property "/messageUserText";
}
.messageUserBlock .userBanner
{
display: block;
margin-bottom: 5px;
}
.messageUserBlock .userBanner:last-child
{
margin-bottom: 0;
}
.messageUserBlock a.username
{
@property "messageUsername";
font-weight: bold;
font-size: @fafontsizel;
color: @facolor2;
display: block;
overflow: hidden;
line-height: 20px;
@property "/messageUsername";
}
.messageUserBlock .userTitle
{
@property "messageUserTitle";
font-size: @fafontsizes;
padding-bottom: 3px;
display: block;
@property "/messageUserTitle";
}
.messageUserBlock .extraUserInfo
{
@property "messageExtraUserInfo";
font-size: @fafontsizes;
background-color: #fff;
padding: 4px 6px;
border-radius: 14px;
@property "/messageExtraUserInfo";
}
.messageUserBlock .extraUserInfo dl
{
margin: 2px 0 0;
border-bottom: 1px #EEE solid;
padding: 5px;
}
.messageUserBlock .extraUserInfo img
{
max-width: 100%;
}
.messageUserBlock .arrow
{
position: absolute;
top: 10px;
right: -10px;
display: block;
width: 0px;
height: 0px;
line-height: 0px;
border: 10px solid transparent;
border-left-color: @messageUserBlock.border-color;
-moz-border-left-colors: @messageUserBlock.border-color;
border-right: none;
/* Hide from IE6 */
_display: none;
}
.messageUserBlock .arrow span
{
position: absolute;
top: -10px;
left: -11px;
display: block;
width: 0px;
height: 0px;
line-height: 0px;
border: 10px solid transparent;
border-left-color: @messageAvatarHolder.background-color;
-moz-border-left-colors: @messageAvatarHolder.background-color;
border-right: none;
}
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
.Responsive .messageUserInfo
{
float: none;
width: auto;
}
.Responsive .messageUserBlock
{
overflow: hidden;
margin-bottom: 5px;
position: relative;
}
.Responsive .messageUserBlock div.avatarHolder
{
float: left;
padding: 5px;
}
.Responsive .messageUserBlock div.avatarHolder .avatar img
{
width: 48px;
height: 48px;
}
.Responsive .messageUserBlock div.avatarHolder .onlineMarker
{
top: 4px;
left: 4px;
border-width: 6px;
}
.Responsive .messageUserBlock h3.userText
{
margin-left: 64px;
}
.Responsive .messageUserBlock .userBanner
{
max-width: 150px;
margin-left: 0;
margin-right: 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
position: static;
display: inline-block;
}
.Responsive .messageUserBlock .userBanner span
{
display: none;
}
.Responsive .messageUserBlock .extraUserInfo
{
display: none;
}
.Responsive .messageUserBlock .arrow
{
display: none;
}
}
</xen:if>
انتهى الشرح
اشياء لابد ان توْخذ فى الاعتبار
1- حد هيسالنى زاى يا ابو كريم خليه اسم العضو ولقبه يكونو بمنتصف القالب هقولك شاهد الموضوع ده طريقة جعل اسم ولقب العضو بمنتصف قالب معلومات العضو
2- هد هيسالنى طب شريط لقب الاداره ازاى صغرته وخليته فى المنتصف هقولك راجع الموضوع ده طريقة تغيير لون خلفية شريطة طاقم الادارة وجعله بمنتصف قالب معلومات العضو
3- واخر درس تشوفه هو ده طريقة جعل اسم ولقب العضو اعلى الصوره الرمزية
الى اللقاء ابو كريم |
