Turkialawlqy

Turkialawlqy

:: عضو رائع ::
إنضم
1 فبراير 2012
المشاركات
2,266
مستوى التفاعل
2,321
النقاط
37
الإقامة
شبوة
الموقع الالكتروني
الدولة
اليمن
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
سنقوم اليوم بعمل ورشة عمل لـ تغيير شكل الصفحة الرئيسية من الشكل المعتاد عليه الى شكل جديد وغير المعتاد عليه
اتمنى مشاركة كل من لديه خبره في الـ Html و Css
وايضاً مشاركة الكل في طرح المقترحات المراد عملها
تمنياتي لكم بالتوفيق ,,
 

,vam ulg F jyddv hgwtpm hgvzdsdm D

Turkialawlqy

Turkialawlqy

:: عضو رائع ::
إنضم
1 فبراير 2012
المشاركات
2,266
مستوى التفاعل
2,321
النقاط
37
الإقامة
شبوة
الموقع الالكتروني
الدولة
اليمن
سنعمل على تغيير الاقسام بهذا الشكل​
نتوجه الى لوحة التحكم ->اللغات ولااستايلات -> الاستايلات -> أختر من الاستايل الذي تريد التعديل عليه -> القوالب ->node_list.css​
استبدل محتواه بـ​
كود:
.sectionMain
{
    overflow: hidden;
}
.nodeList .node.level_2
{
    float: left; width: 50% !important;
}
.nodeList .categoryStrip
{
    float: left; width: 97% !important;
}
.nodeList
{
    zoom: 1;
    margin-top: 10px;
}
.nodeList .node
{
    zoom: 1;
    vertical-align: bottom;
}
.nodeList .node.level_1
{
    margin-bottom: 10px;
    overflow:hidden;
    clear:both;
}
.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: 5px 5px 5px 8px;
    float: left;
    width: 40px;
    height: 40px;
    @property "/nodeIcon";
}
 
    .node .forumNodeInfo .nodeIcon,
    .node .categoryForumNodeInfo .nodeIcon
    {
        @property "nodeIconForum";
 
        @property "/nodeIconForum";
    }
 
    .node .forumNodeInfo.unread .nodeIcon,
    .node .categoryForumNodeInfo.unread .nodeIcon
    {
        @property "nodeIconForumUnread";
        background-image: url('@imagePath/xenforo/node-sprite.png');
        background-repeat: no-repeat;
        @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;
    @property "/nodeText";
}
    .node .nodeTitle
    {
        @property "nodeTitle";
        font-size: 10pt;
        @property "/nodeTitle";
    }
 
        .node .unread .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 .nodeLastPost
{
    @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";
    font-size: 11px;
    padding: 3px 10px;
    margin: 10px;
    border: 1px solid @primaryLighterStill;
    border-radius: 3px;
    position: absolute;
    top: 0;
    right: 0;
    line-height: 14px;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    width: 210px;
    height: 28px;
    @property "/nodeLastPost";
}
 
    .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";
        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[href],
    .Touch .node .tinyIcon
    {
        @property "nodeTinyIconHover";
        opacity: 1;
        @property "/nodeTinyIconHover";
    }
 
/* 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";
    }
 
/* 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: rgb(3, 42, 70);
    background: rgb(165, 202, 228) url('@imagePath/xenforo/gradients/category-23px-light.png') repeat-x top;
    padding: 5px 10px;
    margin: 3px auto 0;
    border-top: 1px solid rgb(165, 202, 228);
    border-bottom: 1px solid rgb(108, 178, 228);
    @property "/subHeading";
    @property "categoryStrip";
    margin: 0;
    border-top-color: rgb(165, 202, 228);
    border-bottom-color: rgb(108, 178, 228);
    border-radius: 5px;
    min-height: 6px;
    @property "/categoryStrip";
}
 
    .nodeList .categoryStrip .nodeTitle
    {
        @property "categoryStripTitle";
        font-size: 10pt;
        color: rgb(3, 42, 70);
        @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;
}
 
/*.nodeStats dl,
.subForumsPopup .PopupControl
{
    padding-top: 2px;
}*/
 
.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;
}
 
asya

asya

:: عضو جديد ::
rank
إنضم
19 نوفمبر 2014
المشاركات
24
مستوى التفاعل
22
النقاط
2
العمر
28
الدولة
الجزائر
مرحبا فكرة رائع ما رأيكم بجعل الرئيسية بشكل الميترو مثل windows 8 أنا جاهزة لتصميمه أمتلك خبرة في css و html و php متى نبدأ؟
وما رأيكم ...
 
key13

key13

:: عضو ::
rankrankrankrank
إنضم
31 مايو 2014
المشاركات
322
مستوى التفاعل
201
النقاط
17
الدولة
الجزائر
بارك الله فيكم اخ تركي على المبادرة الطيبة .. الحقيقة العبد الفقير لربه طويلب علم و متابع حتى أتعلم .
و كملاحظة الصورة التي أدرجتها لا تظهر .
و شكرا كرة ثانية
 
key13

key13

:: عضو ::
rankrankrankrank
إنضم
31 مايو 2014
المشاركات
322
مستوى التفاعل
201
النقاط
17
الدولة
الجزائر
الفكرة جميلة و لكن للاسف فيه تداخل .. بحيث لا يظهر اسم القسم ع الكامل و الاسهم توضح
 

المرفقات


كلمة المدير

يطيب لي أن أرحب بكافة متصفحي وزائري xenForo العربية إذ نسعى من خلال الموقع إلى توفير دروس وحلول تقنية وبرمجيات تناسب احتياجاتكم وتطلعاتكم؛.

تابعنا على المواقع الاجتماعية


إتصل بنا

خيارات الاستايل

اللون الاساسي
اللون الثاني
لون الروابط
خلفية المنتدى
تصميم الهيدر
نوع الخط
تمديد المنتدى
فصل الأقسام
إخفاء السايدبار
انتقل لصفحة الموضوع لتمكين الخيارات
الصورة الرمزية
بيانات العضو
إخفاء التوقيع

إرجاع خيارات الإستايل