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

Turkialawlqy

xDeveloper
طاقم الإدارة
إنضم
1 فبراير 2012
المشاركات
1,921
الإعجابات
1,502
#1
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
سنقوم اليوم بعمل ورشة عمل لـ تغيير شكل الصفحة الرئيسية من الشكل المعتاد عليه الى شكل جديد وغير المعتاد عليه
اتمنى مشاركة كل من لديه خبره في الـ Html و Css
وايضاً مشاركة الكل في طرح المقترحات المراد عملها
تمنياتي لكم بالتوفيق ,,
 

Turkialawlqy

xDeveloper
طاقم الإدارة
إنضم
1 فبراير 2012
المشاركات
1,921
الإعجابات
1,502
#2
سنعمل على تغيير الاقسام بهذا الشكل​
نتوجه الى لوحة التحكم ->اللغات ولااستايلات -> الاستايلات -> أختر من الاستايل الذي تريد التعديل عليه -> القوالب ->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

:: عضو جديد ::
إنضم
19 نوفمبر 2014
المشاركات
24
الإعجابات
22
العمر
27
#3
مرحبا فكرة رائع ما رأيكم بجعل الرئيسية بشكل الميترو مثل windows 8 أنا جاهزة لتصميمه أمتلك خبرة في css و html و php متى نبدأ؟
وما رأيكم ...
 
إنضم
31 مايو 2014
المشاركات
326
الإعجابات
198
#4
بارك الله فيكم اخ تركي على المبادرة الطيبة .. الحقيقة العبد الفقير لربه طويلب علم و متابع حتى أتعلم .
و كملاحظة الصورة التي أدرجتها لا تظهر .
و شكرا كرة ثانية
 
إنضم
31 مايو 2014
المشاركات
326
الإعجابات
198
#5
الفكرة جميلة و لكن للاسف فيه تداخل .. بحيث لا يظهر اسم القسم ع الكامل و الاسهم توضح
 

المرفقات