تطوير ويب » ثغرات اسكربتات و منتديات » كيفية عمل البحث فورم بتقنية CSS3 – بشكل جميل – شرح كاملة لـ WordPress – vBulletin
السلام عليكم ورحمة الله وبركاته – بسم الله الرحمن الرحيم
اخباركم يالغاليين ان شاء الله تكون بخير دايماً ، وصحة يا رب
دلوقتي ستقدم الشرح كيفية عمل البحث فورم بتقنية CSS3
شرح كيفية تركيب فى منتديات vBulletin
<form action="search.php?do=process" method="get">
<input type="hidden" name="do" value="process" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="childforums" value="1" />
<input type="hidden" name="exactname" value="1" />
<p><input type="text" name="query" placeholder="ادخل كلمات البحث" id="search" required></p>
<p><input type="submit" value="ابحث" id="submit"></p>
</form>
2. انسخ اكواد CSS التالي ثم الصق فى تعاريف CSS الإضافية
/* مربع البحث */
.form-wrapper {
width:450px; /* مقاس العرض */
padding:8px;
margin:20px auto;
overflow:hidden;
background:#f3f3f3; /* لون خلفية */
/* منحني */
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
/* ظل الخلفية */
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 15px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
.form-wrapper p {
margin:0px;
padding:0px;
}
/* كتابة البحث */
.form-wrapper #search {
width:330px; /* مقاس العرض */
height:20px; /* مقاس الطول */
padding:10px 5px;
float:right;
font:12pt Tahoma; /* نوع وحجم الخط */
border:1px solid #bababa; /* حدود الخلفية */
text-align:right;
background:#e7e7e7; /* لون الخلفية */
color:#999; /* لون الخط */
/* عمل ظل الخلفية داخلي */
-moz-box-shadow: inset 0px 0px 10px 0px #d0d0d0;
-webkit-box-shadow: inset 0px 0px 15px 0px #d0d0d0;
box-shadow: inset 0px 0px 10px 0px #d0d0d0;
}
/* كتابة البحث عند الضغط بالماوس */
.form-wrapper #search:focus {
outline:0;
border-color:#ccc;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
/* زر ابحث */
.form-wrapper #submit {
float:left;
width:100px; /* مقاس العرض */
height:42px; /* مقاس الطول */
padding:0;
cursor:pointer;
font:bold 12pt Arial; /* نوع وحجم الخط */
color:#fafafa; /* لون الخط */
text-transform:uppercase;
background:#af3131; /* لون الخلفية */
border:1px solid #932929; /* حدود الخلفية */
}
/* زر ابحث عند الضغط بالماوس */
.form-wrapper #submit:hover, .form-wrapper #submit:focus {
background-color: #932929; /* لون الخلفية */
border:1px solid #af3131; /* حدود الخليفة */
}
.form-wrapper #submit:active {
-moz-box-shadow: inset 0px 0px 10px 0px #320f0f;
-webkit-box-shadow: inset 0px 0px 15px 0px #320f0f;
box-shadow: inset 0px 0px 10px 0px #320f0f;
}
شرح كيفية تركيب فى المدونة WordPress
<form action=
"<?php bloginfo('siteurl'); ?>"
id=
"searchform"
method=
"get"
>
<input type=
"text"
name=
"s"
id=
"search"
placeholder=
"ادخل كلمات البحث"
required>
<input type=
"submit"
value=
"go"
id=
"submit"
>
</form>
2. انسخ اكواد CSS التالي ثم الصق اخر فى ملف style.css
/* مربع البحث */
.form-wrapper {
width:450px; /* مقاس العرض */
padding:8px;
margin:20px auto;
overflow:hidden;
background:#f3f3f3; /* لون خلفية */
/* منحني */
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
/* ظل الخلفية */
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 15px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}
.form-wrapper p {
margin:0px;
padding:0px;
}
/* كتابة البحث */
.form-wrapper #search {
width:330px; /* مقاس العرض */
height:20px; /* مقاس الطول */
padding:10px 5px;
float:right;
font:12pt Tahoma; /* نوع وحجم الخط */
border:1px solid #bababa; /* حدود الخلفية */
text-align:right;
background:#e7e7e7; /* لون الخلفية */
color:#999; /* لون الخط */
/* عمل ظل الخلفية داخلي */
-moz-box-shadow: inset 0px 0px 10px 0px #d0d0d0;
-webkit-box-shadow: inset 0px 0px 15px 0px #d0d0d0;
box-shadow: inset 0px 0px 10px 0px #d0d0d0;
}
/* كتابة البحث عند الضغط بالماوس */
.form-wrapper #search:focus {
outline:0;
border-color:#ccc;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
/* زر ابحث */
.form-wrapper #submit {
float:left;
width:100px; /* مقاس العرض */
height:42px; /* مقاس الطول */
padding:0;
cursor:pointer;
font:bold 12pt Arial; /* نوع وحجم الخط */
color:#fafafa; /* لون الخط */
text-transform:uppercase;
background:#af3131; /* لون الخلفية */
border:1px solid #932929; /* حدود الخلفية */
}
/* زر ابحث عند الضغط بالماوس */
.form-wrapper #submit:hover, .form-wrapper #submit:focus {
background-color: #932929; /* لون الخلفية */
border:1px solid #af3131; /* حدود الخليفة */
}
.form-wrapper #submit:active {
-moz-box-shadow: inset 0px 0px 10px 0px #320f0f;
-webkit-box-shadow: inset 0px 0px 15px 0px #320f0f;
box-shadow: inset 0px 0px 10px 0px #320f0f;
}
ااتمنى اكون وفقت فى شرح هذا الدرس بطريقة مبسطه ، فان اصبت فمن الله وان أخطأت فمن نفسي والشيطان .
وانتظروني مع المفاجئات القادمه باذن الله راح تعجبكم
أصدقاء(تطوير ويب)
0تعليقات Blogger
لا توجد تعليقات على موضوع "كيفية عمل البحث فورم بتقنية CSS3 – بشكل جميل – شرح كاملة لـ WordPress – vBulletin"
إرسال تعليق
التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .