تغيير شكل الاقسام في الاستايل style الافتراضي بالجميلة css

[Chakira]

http://www.dzbatna.com/images/icons/icon30.gif طھط؛ظٹظٹط± ط´ظƒظ„ ط§ظ„ط§ظ‚ط³ط§ظ… ظپظٹ ط§ظ„ط§ط³طھط§ظٹظ„ ط§ظ„ط§ظپطھط±ط§ط¶ظٹ ط¨ط§ظ„ط¬ظ…ظٹظ„ط© css (http://www.dzbatna.com/t2298966/)












http://upload.dzbatna.net/upfiles/Rkt97940.jpg


http://upload.dzbatna.net/upfiles/wfa65405.png


http://upload.dzbatna.net/upfiles/dnL31824.png


[اسم الشرح طريقة] :- تغيير شكل الاقسام في الاستايل style الافتراضي بالجميلة css

[وصف الشرح طريقة] :- تغيير شكل الاقسام في الاستايل style الافتراضي بالجميلة css
[التوافق مع اي اصدار] :- جميع الاصدارات

[موقع مقدم الشرح طريقة] :- تحسين شكل اقسام منتدى XenForo واعطاء منظر اكثر جاذبية css | سيمو لخدمات الويب المتكاملة - منتدى دعم xenforo (http://sd-dv.com/xenforo/resources/30/)



http://upload.dzbatna.net/upfiles/dnL31824.png

احبتي في ديزاد باتنة الكرام
اليوم باذن الله رح نعطي شكل اكثر جمالية
لشكل الاقسام في لستايل style الافتراضي في نسخة المنتديات
XenForo


مثال مصور للعمل

http://www.dzbatna.com/attachments/701543d1373790811-1.png



التركيب install
افتح قالب template
node_list.css
في لستايل style الافتراضي للنسخه

استبدلة كاملا بالاتي


رمز PHP:

<code style="white-space:nowrap"> <code> .nodeList { zoom: 1; }
.nodeList .node {
zoom: 1;
vertical-align: bottom;
}

.nodeList .node.level_1
{
margin-bottom: 20px;

}

.nodeList .node.level_1:last-child
{
margin-bottom: 0;

}

.nodeList .node.groupNoChildren + .node.groupNoChildren
{
margin-top: -20px;
}

.node .nodeInfo
{
overflow: hidden; zoom: 1;
position: relative;
}

.node .nodeInfo.primaryContent,
.node .nodeInfo.secondaryContent
{
padding: 0;
}

.node .nodeIcon
{
@property "nodeIcon";
margin: 10px 0 10px 10px;
float: left;
width: 36px;
height: 36px;
@property "/nodeIcon";
}

.node .forumNodeInfo .nodeIcon,
.node .categoryForumNodeInfo .nodeIcon
{
@property "nodeIconForum";
background-image: url('@imagePath/xenforo/node-sprite.png');
background-repeat: no-repeat;
background-position: 0 0;
@property "/nodeIconForum";

}

.node .forumNodeInfo.unread .nodeIcon,
.node .categoryForumNodeInfo.unread .nodeIcon
{
@property "nodeIconForumUnread";
background-image: url('@imagePath/xenforo/node-sprite.png');
background-repeat: no-repeat;
background-position: -36px 0;
@property "/nodeIconForumUnread";
}

.node .pageNodeInfo .nodeIcon
{
@property "nodeIconPage";
background-image: url('@imagePath/xenforo/node-sprite.png');
background-repeat: no-repeat;
background-position: -72px 0;
@property "/nodeIconPage";
}

.node .linkNodeInfo .nodeIcon
{
@property "nodeIconLink";
background-image: url('@imagePath/xenforo/node-sprite.png');
background-repeat: no-repeat;
background-position: -108px 0;
@property "/nodeIconLink";
}

.node .nodeText
{
@property "nodeText";
margin: 10px 270px 10px 56px;
@property "/nodeText";
@property "secondaryContent";
background: @primaryLightest url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 10px;
border-bottom: 1px solid @primaryLighterStill;
@property "/secondaryContent";
@property "nodeLastPost";
border-right: 4px solid #B6B7F9;
font: bold 11px tahoma;
color: #B6B7F7;
padding: 3px 10px;
margin: 10px;
line-height: 14px;
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
width: 380px;
height: 40px;

}

.node .nodeText .nodeTitle
{
@property "nodeTitle";
font-size: 12pt;
@property "/nodeTitle";
}

.node .unread .nodeText .nodeTitle
{
@property "nodeTitleUnread";
font-weight: bold;
@property "/nodeTitleUnread";
}

.node .nodeDescription
{
@property "nodeDescription";
font-size: 11px;
@property "/nodeDescription";
}

.hasJs .node .nodeDescriptionTooltip
{
/* will be shown as a tooltip */
display: none;
}

.Touch .node .nodeDescriptionTooltip
{
/* touch browsers don't see description tooltips */
display: block;
}

.node .nodeStats
{
@property "nodeStats";
font-size: 11px;
margin-top: 2px;
@property "/nodeStats";
}

.node .nodeExtraNote
{
text-align: right;
font-size: 11px;
color: @mutedTextColor;
}

.node .subForumList
{
overflow: hidden; *zoom: 1;
margin: -5px 0 @nodeText.margin-bottom;
margin-left: @nodeText.margin-left;
}

.node .subForumList li
{
float: left;
width: 31%;
margin: 2px 0 2px 2%;
}

.node .subForumList li .nodeTitle
{
font-size: 11px;
}

.node .subForumList .unread .nodeTitle
{
@property "nodeTitleUnread";
font-weight: bold;
@property "/nodeTitleUnread";
}

.node .subForumList li ol,
.node .subForumList li ul
{
display: none;
}

.node .nodeLastPost
{
@property "secondaryContent";
background-color: #FFF1C1;
padding: 10px;
border-bottom: 1px solid @primaryLighterStill;
@property "/secondaryContent";

@property "nodeLastPost";
font: bold 11px tahoma;
color: #B6B7F7;
padding: 3px 10px;
margin: 10px;
border-top: 1px solid #DBDBDB;
border-bottom: 1px solid #DBDBDB;
border-left: 1px solid #DBDBDB;
border-right: 4px solid #FFAD33;
border-left: 4px solid #FFAD33;
position: absolute;
top: 0;
right: 0;
line-height: 14px;
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
width: 380px;
height: 28px;
@property "/nodeLastPost";
}

.node .nodeLastPost .lastThreadTitle
{
text-overflow: ellipsis;
max-width: 100%;
display: block;
overflow: hidden;
}

.node .nodeLastPost .lastThreadMeta
{
display: block;
}

.node .nodeLastPost .noMessages
{
line-height: 28px;
}

.node .nodeControls
{
position: absolute;
top: 0;
right: {xen:calc '@nodeLastPost.border-left-width + @nodeLastPost.padding-left + @nodeLastPost.width + @nodeLastPost.padding-right + @nodeLastPost.border-right-width + @nodeLastPost.margin-right'}px;
margin: 20px 0;
}

.node .tinyIcon
{
@property "nodeTinyIcon";
background: transparent url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -112px -16px;
margin: 1px 4px;
display: block;
white-space: nowrap;
text-indent: 9999px;
overflow: hidden;
opacity: 0.25;
width: 14px;
height: 14px;
@property "/nodeTinyIcon";
}

.node .nodeInfo:hover .tinyIcon&#91;href&#93;,
.Touch .node .tinyIcon
{
@property "nodeTinyIconHover";
opacity: 1;
@property "/nodeTinyIconHover";
}

/*.node .feedIcon
{
background: transparent url('@imagePath/xenforo/xenforo-ui-sprite.png') no-repeat -112px -16px;
}*/

/* description tooltip */

.nodeDescriptionTip
{
@property "nodeDescriptionTip";
padding: 4px 10px;
margin-top: -22px;
line-height: 1.5;
width: 350px;
height: auto;
@property "/nodeDescriptionTip";
}

.nodeDescriptionTip .arrow
{
@property "nodeDescriptionTipArrow";
border: 6px solid transparent;
border-right-color: @tooltip.background-color;
border-left: 1px none black;
top: 6px;
left: -6px;
bottom: auto;
@property "/nodeDescriptionTipArrow";
}

.nodeDescriptionTip.arrowBottom .arrow
{
top: auto;
left: 10px;
bottom: -6px;
border: 6px solid transparent;
border-top-color: @tooltip.background-color;
border-bottom: 1px none black;
}

/* main area - used for L2 categories and most other nodes */

.nodeList .categoryForumNodeInfo,
.nodeList .forumNodeInfo,
.nodeList .pageNodeInfo,
.nodeList .linkNodeInfo
{
@property "primaryContent";
background-color: @contentBackground;
padding: 10px;
border-bottom: 1px solid @primaryLighterStill;
@property "/primaryContent";

padding: 0;
}

/* category strip - used for L1 categories and group headers */

.nodeList .categoryStrip
{
@property "subHeading";
font-size: 11px;
color: @secondaryDarker;
background: @secondaryLighter url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
padding: 5px 10px;
margin: 3px auto 0;
border-top: 1px solid @secondaryLighter;
border-bottom: 1px solid @secondaryLight;
@property "/subHeading";

@property "categoryStrip";
padding: 5px 10px;
margin: 0;
border-bottom-color: @subHeading.border-bottom-color;
border-radius: 5px;
min-height: 6px;
@property "/categoryStrip";
}

.nodeList .categoryStrip .nodeTitle
{
@property "categoryStripTitle";
font-size: 10pt;
color: @secondaryDarker;
@property "/categoryStripTitle";
}

.nodeList .categoryStrip .nodeTitle a
{
color: @categoryStripTitle.color;
}

.nodeList .categoryStrip .nodeDescription
{
@property "categoryStripDescription";
font-size: 10px;
color: @secondaryDarker;
@property "/categoryStripDescription";
}




.nodeList .categoryStrip .nodeDescription a
{
color: @categoryStripDescription.color;
}

.nodeList .node.groupNoChildren + .node.groupNoChildren .categoryStrip
{
display: none;
}

/* node stats area */

.nodeStats
{
overflow: hidden; zoom: 1;
}

.nodeStats dl,
.subForumsPopup
{
float: left;
display: block;
margin-right: 3px;
}

.subForumsPopup.Popup .PopupControl.PopupOpen
{
background-image: none;
}

.subForumsPopup a.PopupControl
{
padding-left: 5px;
padding-right: 5px;
}

.subForumsPopup .dt
{
color: @mutedTextColor;
}

.subForumsPopup .PopupOpen .dt
{
color: @body.color;
}

.subForumsMenu .node .node /* for depths 2+ */
{
padding-left: 10px;
}

.subForumsMenu .node .nodeTitle
{
font-size: 11px;
}

.subForumsMenu .node .unread .nodeTitle
{
@property "nodeTitleUnread";
font-weight: bold;
@property "/nodeTitleUnread";
}

/** new discussion button below nodelist **/

.nodeListNewDiscussionButton
{
margin-top: 10px;
text-align: right;
}

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
.Responsive .node .nodeText
{
margin-right: 0;
}

.Responsive.Touch .node .nodeDescriptionTooltip,
.Responsive .node .nodeDescription
{
display: none;
}

.Responsive .node .nodeLastPost
{
position: static;
height: auto;
width: auto;
background: none;
border: none;
padding: 0;
margin: -{xen:calc '@nodeText.margin-bottom - 2'}px 0 @nodeText.margin-bottom @nodeText.margin-left;
}

.Responsive .node .nodeLastPost .noMessages
{
display: none;
}

.Responsive .node .nodeLastPost .lastThreadTitle,
.Responsive .node .nodeLastPost .lastThreadUser
{
display: none;
}

.Responsive .node .nodeLastPost .lastThreadDate:before
{
content: attr(data-latest);
}

.Responsive .node .nodeControls
{
display: none;
}

.Responsive .node .subForumList li
{
width: 48%;
}

.Responsive .nodeDescriptionTip
{
width: auto;
max-width: 350px;
}
}

@media (max-width:@maxResponsiveNarrowWidth)
{
.Responsive .node .subForumList,
.Responsive .subForumsPopup
{
display: none;
}
}
</xen:if>
</code> </code>



بالتوفيق لكم يا رب
حسام






















ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)



https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©