|| كود تغيير شكل أزرار و فراغات منتداك إلى مظهر أجمل ||

×|| بسم الله الرحمن الرحيم ||×
السلام عليكم ورحمة الله وبركاته

اولا : اعتزر من متابعي مواضيع للتأخير
الذي حصل مني في الآونة الأخيرة في تنزيل المواضيع .

ثانيا : كيفكم رواد و زوار مدونتي ؟
اتمنا بألف خير وعافية .

ملاحظة مهمة : الكود لازم تضيفه لكل استايل وإلى لن يظهر إلا على الاستايل الذي حددته .

اليوم اقدم لكم شرح لأحد الأكواد الجميله لتزيد جمال المنتدى .
هو كود جميل و رائع و يسهل تركيبه في منتداك .




طبعا الكود من برمجة : فراس درويش  
 

×|| هيا فالنبدأ في الموضوع تابعوا معي ||×

الكود :

لمن اراد التطبيق على الأزار فقط :

كود الـ PHP:


.button::-moz-focus-inner{
    border:0;
}

.button:focus, .button:hover{
    outline:0;
    border-color:#999;
    -moz-box-shadow:0 0 3px #999;
    -webkit-box-shadow:0 0 3px #999;
    box-shadow:0 0 3px #999;
    cursor:pointer;
    cursor:hand;
}

.button:active{
    background-image:-moz-linear-gradient(top,#cccccc,#ffffff);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#cccccc),to(#ffffff));
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#cccccc,endColorStr=#ffffff);
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#CCCCCC, endColorStr=#FFFFFF)";
}

.button{
    float:none;
    outline:none!important;
    margin:0;padding:0px 6px;
    height:25px;background-color:#f6f6f6;
    border:1px solid #ccc;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    background-image:-moz-linear-gradient(top,#ffffff,#efefef);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef));
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#EFEFEF)";
} 

لمن اراد الكود على الأزرار و الفراغات :

كود الـ PHP:


input::-moz-focus-inner{
    border:0;
}
input:focus, input:hover{
    outline:0;
    border-color:#999;
    -moz-box-shadow:0 0 3px #999;
    -webkit-box-shadow:0 0 3px #999;
    box-shadow:0 0 3px #999;
    cursor:pointer;
    cursor:hand;
}
input:active{
    background-image:-moz-linear-gradient(top,#cccccc,#ffffff);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#cccccc),to(#ffffff));
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#cccccc,endColorStr=#ffffff);
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#CCCCCC, endColorStr=#FFFFFF)";
}
input{
    float:none;
    outline:none!important;
    margin:0;padding:0px 6px;
    height:25px;background-color:#f6f6f6;
    border:1px solid #ccc;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    background-image:-moz-linear-gradient(top,#ffffff,#efefef);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#efefef));
    filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#efefef);
    -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#EFEFEF)";
} 

لوحة تحكم المنتدى ( موجودة في اسفل المنتدى ) [ يجب ان تكون اداري في المنتدى ] .





كما هو موضح في الصورة اضغط على زر : التحكم بالاستايلات




تختار : خيارات جميع الاستايل
وثم اصغط على : اذهب



المكان الذي كتب فيه ( في الصورة ) الصق هنا : الصق الكود فيه


امثلة :

هذا هو الشكل النهائي اللكود









الخاتمة

اتمنى ان الموضوع حاز على رضاكم وإعجابكم

اي استفسار انا جاهز في هذا الموضوع طبعا

للتواصل :  Formspring

والسلام عليكم ورحمة الله وبركاته