Turkialawlqy

Turkialawlqy

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

Turkialawlqy

:: عضو رائع ::
1 فبراير 2012
2,127
1,999
شبوة
غير متواجد
#2
سنعمل على تغيير الاقسام بهذا الشكل​
proxy.php?image=http%3A%2F%2Fupload.xf-ar.com%2Fimagef-xf_31e1dfce36311-png.html&hash=c3acf59af0ce47bae770aa2c2c4c0709
نتوجه الى لوحة التحكم ->اللغات ولااستايلات -> الاستايلات -> أختر من الاستايل الذي تريد التعديل عليه -> القوالب ->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
27
غير متواجد
#3
مرحبا فكرة رائع ما رأيكم بجعل الرئيسية بشكل الميترو مثل windows 8 أنا جاهزة لتصميمه أمتلك خبرة في css و html و php متى نبدأ؟
وما رأيكم ...
 
key13

key13

:: عضو ::
rankrankrankrank
31 مايو 2014
322
200
غير متواجد
#4
بارك الله فيكم اخ تركي على المبادرة الطيبة .. الحقيقة العبد الفقير لربه طويلب علم و متابع حتى أتعلم .
و كملاحظة الصورة التي أدرجتها لا تظهر .
و شكرا كرة ثانية
 
key13

key13

:: عضو ::
rankrankrankrank
31 مايو 2014
322
200
غير متواجد
#5
الفكرة جميلة و لكن للاسف فيه تداخل .. بحيث لا يظهر اسم القسم ع الكامل و الاسهم توضح
 

المرفقات

أعلى