کد خط رنگی nav بالای سایت
به نام خدا ، در خدمت شما هستیم با یک کد که با اون یک خط رنگی (nav) در بالای سایتتون قرار میگیره و همچنین می تونید با تغییر اسکرول بار توسط کاربر ، رنگش هم تغییر می کنه و به شکل رنگین کمان ! تغییر رنگ میده.
کد و استایل خط رنگی ثابت بالای سایت
برای این که یک خط رنگی به بالای قالب سایت اضافه بشه بدون اینکه تغییری در رنگش ایجاد بشه نیاز هستش که دوتا کد رو قالبتون اضافه کنید.در ابتدا کد شیوه نامه زیر رو به انتهای فایل style.css قالبتون باید اضافه کنید.
.nav {
height: 5px;
background: url(https://doctorwp.com/wp-content/uploads/2013/12/nav.png) repeat-x;
position: fixed;
width: 100%;
top: 0px;
z-index: 1000;
}
بعد فقط کافیه که یک خط کد زیر را دقیقا بعد از تگ <body> داخل قالبتون قرار بدید.
<div class="nav" style="background-position: 0% 0%;"> </div>
فقط دقت کنید که ما از کلاس nav برای استایل استفاده کردیم ، اگر همچین کلاسی داخل قالبتون دارید ممکن هستش که تداخل پیدا کنه و باید اسم کلاس رو اونوقت تغییر بدید.
کد تغییر رنگ خط بالای سایت با اسکرول بار
حالا میشه یکار دیگه هم انجام داد و این که هرموقع کاربر اسکرول بار سایت رو تکون داد و اون خط رنگی بالای سایت هم رنگش تغییر کنه . برای این کار نیاز هستش که دوتا خط کد زیر رو مابین دوتا تگ <head/> و <head> قرار بدید.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script> <script language="javascript" type="text/javascript" src="https://doctorwp.com/wp-content/uploads/2013/12/head.js"></script>
دقت کنید تو اکثر قالب ها اون فایل اولی (jquery.min.js) فراخوانی شده و ببینید که اگر تو قالبتون همچین فایلی دارید ( به احتمال خیلی زیاد دارینش ) فقط دومین فایل (head.js) نیاز هستش که فراخوانی کنید . به این نکته دقت داشته باشید.
همچنین در فایل پیش نمایش از دکمه های ثابت کنار سایت استفاده کردیم که در مطالب قدیم سایت کدهاشو قرار داده بودیم.برای تغییر رنگ اسکرول بار هم مطلبی نوشته بودیم.
سلام !
امکانش هست که بگید چکار باید بکنیم که این نوار همینطوری تغییر رنگ بده بدون اینکه اسکرول کنیم و … ؟؟؟
سلام
می خواستم بدونم این کد برای جوملا کاربرد نداره
یا اگر کدش رو برای جوملا دارید … لطفا بهم معرفی کنید
متشکرم
سلام
واقعا ممنون از مطالب سایتتون، به من که تقریبا مبتدی هستم خیلی کمک کرد و راحت تونستم کد ها رو اضافه کنم و ظاهر سایتم رو زیباتر و کاربردی تر کنم
امیدوارم موفق باشید.
سلام مجدد
به دليل نوار مديريت وردپرس ، نوار نشون داده نمي شد :دي
سلام
من سایت وردپرسی دارم
فایل استایل داره ولی body وhtml در کدوم فایل قرار داره؟
من نتونستم پیدا کنم
سلام
و رو داخل فایل header.php قالبتون می تونید پیدا کنید.تگ
دستتون درد نکنه سایتتون خیلی عالیه
اگر یوزر لاگین باشه اون نوار آبی پشت ادمین بار نمی افته؟
برای این که هدر فیکسمون پشت ادمین بار نیفته باید چه کار کرد؟
سلام
اگر منظورتون وردپرس هستش ، بله فکر کنم همینطور که شما میگین باشه اون هدر وردپرس فیکس هستش حالا اینکه اینم فیکس کنیم و این نمایش داده بشه ، چرا دروغ راستش نمی دونم …
فکر کنم اگر z-index رو با یه عدد بالاتر از هدر تعریف کنی بیفته رو…
مثلا اگر هدر z-index:2 هستش تو باید یه عدد بالاتر در نظر بگیری برای این یکی…
سلام.خیلی ممنون از مطلبت اما اون تغییر رنگ اسکرول بار برای من جواب نداد
سلام ، خواهش می کنم
اون تغییر رنگ اسکرول بار دمو هم خوب قرار دادیم تا صحت کدها رو ببینید ! دوباره با دقت امتحان کنید
فق یک نکته که این تغییر رنگ فقط در مرورگر کروم و سافاری هستش ! یعنی باید webkit باشند.