رفتن به مطلب

افزونه جستجو


maldo

پست های پیشنهاد شده

سلام. ممنون از سایت خوبتون .

میخواستم بدونم امکانش هست با افزونه یا هر چیز دیگری یه نوار جستجو به شکلی که در این اول این سایت هست در سایت خودم ایجاد کنم؟ مهم برام اینکه که پشت نوار جستجو یه بکگراند به این شکل قرار بگیره: 

این سایت

لینک به ارسال
در 45 دقیقه قبل، maldo گفته است :

سلام. ممنون از سایت خوبتون .

میخواستم بدونم امکانش هست با افزونه یا هر چیز دیگری یه نوار جستجو به شکلی که در این اول این سایت هست در سایت خودم ایجاد کنم؟ مهم برام اینکه که پشت نوار جستجو یه بکگراند به این شکل قرار بگیره: 

این سایت

سلام

دوست عزیز این باکس رو خیلی راحت میشه طراحی کرد

فقط کافیه یمقدار به css تسلط داشته باشی

<div class="bglayer" id="bglayer"> 
  
<img src="اینجا عکس بکگراند موردنظر رو میزاری"/>
     
  این استایل ها رو بده به عکس
  <style>
     transform: scale(1.2)!important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width:100%;
    height:100%;
  </style>
</div>
	<?php get_header(); ?>

< اینجا باکس سرچ رو قرار میدی و بهش پوزیشن absolute میدی 
       left :50%
       top:50%
       
       
       >
  

  و مابقی ماجرا رو طراحی میکنی
  

من فقط برای بهتر متوجه شدنت کد بالارو نوشتم

درواقع اصل کار یه همچین چیزی هست

اما بازم بدید به یک طراح براتون انجام بده

لینک به ارسال
در 3 ساعت قبل، maldo گفته است :

سلام. ممنون از سایت خوبتون .

میخواستم بدونم امکانش هست با افزونه یا هر چیز دیگری یه نوار جستجو به شکلی که در این اول این سایت هست در سایت خودم ایجاد کنم؟ مهم برام اینکه که پشت نوار جستجو یه بکگراند به این شکل قرار بگیره: 

این سایت

نیاز به افزونه نیست به این شکل انجام بدید

در HTML

<div id="container">
	<div id="searchbar">
		<form action="/" method="get">
		<label for="search"><?php echo home_url( '/' ); ?></label>
		<input type="text" name="s" id="topics" style="float:left" placeholder="Search …" value="<?php the_search_query(); ?>" />
		<input id="btn"  alt="Search" style="float:left" />
		</form>
	</div>
</div>

CSS

#searchbar{
  width:540px;
  height:50px; 
  background:#718fff; 
  border-radius:5px;
  border:3px solid #718fff; 
  box-shadow: 0 0 0pt 10pt rgba(255,255,255,.5);
  margin:auto;
}

#container { 
  background:url('https://webdev.imgix.net/backdrop-filter/hero.jpg');
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
width:100%; 
height:300px; position:relative; margin:0 auto; 
padding-top:100px;
}
input { 
  width:400px ; 
  height:30px; 
  font-size:20px; 
  outline:none; 
  padding:10px;
  border:none; 
  background:white
}
#btn {
  background:#4e74ff; 
  width:100px; 
  height:30px; 
  padding:10px; 
  color:white; 
  font-family:"helvetica";
  cursor:pointer;
  text-align:center;
  line-height:30px;
}

 

ویرایش شده توسط asadiy4n
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...