كيفية عمل البحث فورم بتقنية CSS3 – بشكل جميل – شرح كاملة لـ WordPress – vBulletin
الأربعاء سبتمبر 05, 2012 4:25 am
السلام عليكم ورحمة الله وبركاته – بسم الله الرحمن الرحيم
اخباركم يالغاليين ان شاء الله تكون بخير دايماً ، وصحة يا رب
دلوقتي ستقدم الشرح كيفية عمل البحث فورم بتقنية CSS3
اخباركم يالغاليين ان شاء الله تكون بخير دايماً ، وصحة يا رب
دلوقتي ستقدم الشرح كيفية عمل البحث فورم بتقنية CSS3
شرح كيفية تركيب فى منتديات
vBulletin
1. انسخ الكود التالي ثم الصق فى اخر قالب الهيدر او اى مكان تريده
2. انسخ اكواد CSS التالي ثم الصق فى تعاريف CSS الإضافية
شرح كيفية تركيب فى المدونة
WordPress
1. انسخ اكواد التالي ثم الصق اخر فى ملف Header.php او اى مكان تريده
2. انسخ اكواد CSS التالي ثم الصق اخر فى ملف style.css
انتهى الشرح بحمد لله
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
vBulletin
1. انسخ الكود التالي ثم الصق فى اخر قالب الهيدر او اى مكان تريده
- الكود:
<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
1. انسخ اكواد التالي ثم الصق اخر فى ملف Header.php او اى مكان تريده
- الكود:
<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;
}
انتهى الشرح بحمد لله
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
- كيفية البحث عن السريال نمبر في Google.com
- [ Css ]كود css لجعل حقل الدخول و البحث و اسم المستخدم و كلمة السر بشكل منحرف
- [ Css ]ماوس رصاصي بشكل جميل
- [ Css ]كود css لجعل حقل الدخول و البحث و اسم المستخدم و كلمة السر بشكل منحرف من صنعى على منتدى اشهار
- استايل Firefox التطويري بتقنية Css اهداء من واحد من الناس
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى