فواصل » ازرار http://portal.fwasl.com Wed, 16 Oct 2019 18:49:35 +0000 ar hourly 1 https://wordpress.org/?v=3.9.40 كود css لتغيير شكل ازرار الموقع http://portal.fwasl.com/%d9%83%d9%88%d8%af-css-%d9%84%d8%aa%d8%ba%d9%8a%d9%8a%d8%b1-%d8%b4%d9%83%d9%84-%d8%a7%d8%b2%d8%b1%d8%a7%d8%b1-%d8%a7%d9%84%d9%85%d9%88%d9%82%d8%b9/ http://portal.fwasl.com/%d9%83%d9%88%d8%af-css-%d9%84%d8%aa%d8%ba%d9%8a%d9%8a%d8%b1-%d8%b4%d9%83%d9%84-%d8%a7%d8%b2%d8%b1%d8%a7%d8%b1-%d8%a7%d9%84%d9%85%d9%88%d9%82%d8%b9/#comments Sat, 21 Jan 2012 14:24:29 +0000 http://www.portal.fwasl.com/?p=11351 السلام عليكم ورحمة الله وبركاته

الكود متوفر له نوعان :

1-لمن يريد تطبيق الكود فقط على الأزرار .
2-لمن يريد تطبيق الكود على الأزرار و الفراغات .

مثال :

الطريقة :

1-افتح لوحة تحكم المنتدى

2-اختر من الستايل اللي تستخدمه “CSS رئيسي”

3-في نهايته يوجد مربعين كبيرين عند الخيار “تعاريف CSS الإضافية/Additional CSS
Definitions”

4- ضع في المربع الثاني الكود التالي :

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

رمز Code:
 .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)";
}

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

رمز Code:
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)";
}

تحياتي لكم

]]> http://portal.fwasl.com/%d9%83%d9%88%d8%af-css-%d9%84%d8%aa%d8%ba%d9%8a%d9%8a%d8%b1-%d8%b4%d9%83%d9%84-%d8%a7%d8%b2%d8%b1%d8%a7%d8%b1-%d8%a7%d9%84%d9%85%d9%88%d9%82%d8%b9/feed/ 0 تمبلت الاقتباس الاحترافي + الحل النهائي لمشكله الاقتباس http://portal.fwasl.com/%d8%aa%d9%85%d8%a8%d9%84%d8%aa-%d8%a7%d9%84%d8%a7%d9%82%d8%aa%d8%a8%d8%a7%d8%b3-%d8%a7%d9%84%d8%a7%d8%ad%d8%aa%d8%b1%d8%a7%d9%81%d9%8a-%d8%a7%d9%84%d8%ad%d9%84-%d8%a7%d9%84%d9%86%d9%87%d8%a7%d8%a6/ http://portal.fwasl.com/%d8%aa%d9%85%d8%a8%d9%84%d8%aa-%d8%a7%d9%84%d8%a7%d9%82%d8%aa%d8%a8%d8%a7%d8%b3-%d8%a7%d9%84%d8%a7%d8%ad%d8%aa%d8%b1%d8%a7%d9%81%d9%8a-%d8%a7%d9%84%d8%ad%d9%84-%d8%a7%d9%84%d9%86%d9%87%d8%a7%d8%a6/#comments Tue, 10 Jan 2012 15:10:03 +0000 http://www.portal.fwasl.com/?p=9432
شباب اليوم جبتلكم طريقة روعة وهي وضع ايقونات تغيير الوان الاستايل حتى يتمكن الاعضاء من تغيير اي لون يريدوه

المثال :

 

 

طريقة التركيب :

1- رفع جميع الملفات المرفقة (الملفات وليس المجلد) داخل مجلد المنتدى الرئيسي vb

2- من وحة التحكم نذهب الى التحكم بالاستايلات ثم نضغط زر تعديل على الاستايل الذ نريد وضع الازرار فيه

نضع في خانة تعاريف CSS الإضافية/Additional CSS Definitions الكود التالي :
ملاحظة : نضعه في الحقل الثاني وليس الاول كما في الصورة

 

الكود هو :

#topbar {
height: 32px;
background: #CCCCCC;
}
.colorchooser {
float:right;
margin-right:10px;
margin-top:10px;
}
.colorchooser span {
font-family:arial;
color:#FFFFFF;
font-size:10px;
text-decoration:none;
float:left;
display:block;
}
.colorchooser a {
width:10px;
height:10px;
display:block;
float:left;
margin-left:5px
}



3- نضع الكود التالي في اسفل قالب الهيدر header

 

كود PHP:
<!-- زر تغيير الوان الاستايل :: فواصل التطويري -->
<link rel="alternate stylesheet" type="text/css" title="orange-theme" href="orange.css" />
<link rel="alternate stylesheet" type="text/css" title="violet-theme" href="violet.css" />
<link rel="alternate stylesheet" type="text/css" title="red-theme" href="red.css" />
<link rel="alternate stylesheet" type="text/css" title="grey-theme" href="grey.css" />
<link rel="alternate stylesheet" type="text/css" title="black-theme" href="black.css" />
<link rel="alternate stylesheet" type="text/css" title="pinkish-theme" href="pinkish.css" />
<script src="colorchooser.js" type="text/javascript"></script>

<div id=”topbar”>
<div class=”colorchooser”> <span>Choose your color scheme: </span>
<a href=”javascript:ChennaigsmStyle(‘none’)” style=”background-color:#5A0000;”></a>
<a href=”javascript:ChennaigsmStyle(‘orange-theme’)” style=”background-color:#FF9900;”></a>
<a href=”javascript:ChennaigsmStyle(‘violet-theme’)” style=”background-color:#003366;”></a>
<a href=”javascript:ChennaigsmStyle(‘red-theme’)” style=”background-color:#990000;”></a>
<a href=”javascript:ChennaigsmStyle(‘grey-theme’)” style=”background-color:#999999;”></a>
<a href=”javascript:ChennaigsmStyle(‘black-theme’)” style=”background-color:#000000;”></a>
<a href=”javascript:ChennaigsmStyle(‘pinkish-theme’)” style=”background-color:#B26267;”></a> </div>
</div>
<!– زر تغيير الوان الاستايل :: بواسطة فواصل التطويري

4- نقوم بخزن التعديلات

5- الف مبروك التركيب

للتحميل من الموضوع الاصلي من هنا : هاك وضع ازرار تغيير الاستايل لاعضائك

]]> http://portal.fwasl.com/%d8%aa%d9%85%d8%a8%d9%84%d8%aa-%d8%a7%d9%84%d8%a7%d9%82%d8%aa%d8%a8%d8%a7%d8%b3-%d8%a7%d9%84%d8%a7%d8%ad%d8%aa%d8%b1%d8%a7%d9%81%d9%8a-%d8%a7%d9%84%d8%ad%d9%84-%d8%a7%d9%84%d9%86%d9%87%d8%a7%d8%a6/feed/ 0 تغيير شكل ازرار وفراغات منتداك css3 مثل فواصل التطويري http://portal.fwasl.com/%d8%aa%d8%ba%d9%8a%d9%8a%d8%b1-%d8%b4%d9%83%d9%84-%d8%a7%d8%b2%d8%b1%d8%a7%d8%b1-%d9%88%d9%81%d8%b1%d8%a7%d8%ba%d8%a7%d8%aa-%d9%85%d9%86%d8%aa%d8%af%d8%a7%d9%83-css3-%d9%85%d8%ab%d9%84-%d9%81%d9%88/ http://portal.fwasl.com/%d8%aa%d8%ba%d9%8a%d9%8a%d8%b1-%d8%b4%d9%83%d9%84-%d8%a7%d8%b2%d8%b1%d8%a7%d8%b1-%d9%88%d9%81%d8%b1%d8%a7%d8%ba%d8%a7%d8%aa-%d9%85%d9%86%d8%aa%d8%af%d8%a7%d9%83-css3-%d9%85%d8%ab%d9%84-%d9%81%d9%88/#comments Mon, 09 Jan 2012 12:19:44 +0000 http://www.portal.fwasl.com/?p=8239
بسم الله الرحمن الرحيم
نقدم لكم كود تغيير شكل الازرار والفراغات في المنتدي مثل فواصل التطويري css3الكود متوفر له نوعان :

1-لمن يريد تطبيق الكود فقط على الأزرار .
2-لمن يريد تطبيق الكود على الأزرار و الفراغات .

مثال :

اضغط هنا لترى الصورة بحجمها الطبيعى

اضغط هنا لترى الصورة بحجمها الطبيعى

الطريقة :

1-افتح لوحة تحكم المنتدى

2-اختر من الستايل اللي تستخدمه “CSS رئيسي”

3-في نهايته يوجد مربعين كبيرين عند الخيار “تعاريف CSS الإضافية/Additional CSS
Definitions”

4- ضع في المربع الثاني الكود التالي :

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

 .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)”;
}

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

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)”;
}

تحياتي لكم

]]> http://portal.fwasl.com/%d8%aa%d8%ba%d9%8a%d9%8a%d8%b1-%d8%b4%d9%83%d9%84-%d8%a7%d8%b2%d8%b1%d8%a7%d8%b1-%d9%88%d9%81%d8%b1%d8%a7%d8%ba%d8%a7%d8%aa-%d9%85%d9%86%d8%aa%d8%af%d8%a7%d9%83-css3-%d9%85%d8%ab%d9%84-%d9%81%d9%88/feed/ 0