maldo 1 ارسال شده در اردیبهشت 99 گزارش بازنشر ارسال شده در اردیبهشت 99 سلام. ممنون از سایت خوبتون . میخواستم بدونم امکانش هست با افزونه یا هر چیز دیگری یه نوار جستجو به شکلی که در این اول این سایت هست در سایت خودم ایجاد کنم؟ مهم برام اینکه که پشت نوار جستجو یه بکگراند به این شکل قرار بگیره: این سایت نقل قول لینک به ارسال
estedadrap 4 ارسال شده در اردیبهشت 99 گزارش بازنشر ارسال شده در اردیبهشت 99 در 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% > و مابقی ماجرا رو طراحی میکنی من فقط برای بهتر متوجه شدنت کد بالارو نوشتم درواقع اصل کار یه همچین چیزی هست اما بازم بدید به یک طراح براتون انجام بده نقل قول لینک به ارسال
asadiy4n 2805 ارسال شده در اردیبهشت 99 گزارش بازنشر ارسال شده در اردیبهشت 99 (ویرایش شده) در 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; } ویرایش شده اردیبهشت 99 توسط asadiy4n نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .