تسجيل الدخول

ورشة عمل [ تغيير الصفحة الرئيسية ]

الموضوع في 'ركن تعديلات القوالب' بواسطة Turkialawlqy, بتاريخ ‏18-12-2012.

  1. Turkialawlqy

    Turkialawlqy xDeveloper

    إنضم إلينا في:
    ‏01-02-2012
    المشاركات:
    1,839
    الإعجابات المتلقاة:
    1,334
    الجنس:
    ذكر
    الإقامة:
    شبوة
    بسم الله الرحمن الرحيم
    السلام عليكم ورحمة الله وبركاته
    سنقوم اليوم بعمل ورشة عمل لـ تغيير شكل الصفحة الرئيسية من الشكل المعتاد عليه الى شكل جديد وغير المعتاد عليه
    اتمنى مشاركة كل من لديه خبره في الـ Html و Css
    وايضاً مشاركة الكل في طرح المقترحات المراد عملها
    تمنياتي لكم بالتوفيق ,,

    ,vam ulg F jyddv hgwtpm hgvzdsdm D
     
  2. Turkialawlqy

    Turkialawlqy xDeveloper

    إنضم إلينا في:
    ‏01-02-2012
    المشاركات:
    1,839
    الإعجابات المتلقاة:
    1,334
    الجنس:
    ذكر
    الإقامة:
    شبوة
    سنعمل على تغيير الاقسام بهذا الشكل​
    [​IMG]
    نتوجه الى لوحة التحكم ->اللغات ولااستايلات -> الاستايلات -> أختر من الاستايل الذي تريد التعديل عليه -> القوالب ->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;
    }

     
    أعجب بهذه المشاركة bousaid
  3. asya

    asya :: عضو جديد ::

    إنضم إلينا في:
    ‏19-11-2014
    المشاركات:
    24
    الإعجابات المتلقاة:
    22
    الجنس:
    أنثى
    مرحبا فكرة رائع ما رأيكم بجعل الرئيسية بشكل الميترو مثل windows 8 أنا جاهزة لتصميمه أمتلك خبرة في css و html و php متى نبدأ؟
    وما رأيكم ...
     
    ecko و Turkialawlqy معجبون بهذا.
  4. key13

    key13 :: عضو ::
    rankrankrank

    إنضم إلينا في:
    ‏31-05-2014
    المشاركات:
    326
    الإعجابات المتلقاة:
    197
    الجنس:
    ذكر
    بارك الله فيكم اخ تركي على المبادرة الطيبة .. الحقيقة العبد الفقير لربه طويلب علم و متابع حتى أتعلم .
    و كملاحظة الصورة التي أدرجتها لا تظهر .
    و شكرا كرة ثانية
     
  5. key13

    key13 :: عضو ::
    rankrankrank

    إنضم إلينا في:
    ‏31-05-2014
    المشاركات:
    326
    الإعجابات المتلقاة:
    197
    الجنس:
    ذكر
    الفكرة جميلة و لكن للاسف فيه تداخل .. بحيث لا يظهر اسم القسم ع الكامل و الاسهم توضح
     

    الملفات المرفقة:

    • test.png
      test.png
      حجم الملف:
      20.5 ك. ب
      المشاهدات:
      105
جاري تحميل الصفحة...