تركيب سكربت تغيير ألوان الموقع

السلام عليكم

ورحمة الله

وبركاته

تدوينتنا اليوم عبارة عن اداة تعمل على أساس jquey
ربما شاهدتم مثلها على أخر أعمالنا المدفوعة " قالب أدرنالين"
وظيفة هذه الأداة السماح لزوار موقعك الالكتروني بتغييير
الالوان الى ما يريدون من ألوان لا نهائية
لذا لن أطيل عليكم وأترككم مع شرح التركيب

معاينة

طريقة التركيب

1. ابحث عن الوسم b:skin
2. ثم قم بلصق الأكواد التالية فوقه

• /* --------------------------------
• color switcher
• -------------------------------- */
• colorsBox{position:fixed;width:300px;height:300px;bottom:0;left:-260px;color:#3C8137;z-index:9999;font-family:sans-serif;transition:.5s cubic-bezier(1,1.48,.76,.95) left}colorsBox .blast-frame,colorsBox icon{position:absolute;background:#fff;text-align:center;color:#182434;border:1px solid #dde8f0;box-shadow:1px -1px 7px 0 rgba(0,0,0,.11)}colorsBox icon{color:#fff;background:#182434;width:40px;line-height:40px;right:0;bottom:0;font-size:30px;cursor:pointer;border:0 solid #3C8137;perspective:1000px;transition:.5s ease all;transform-origin:left;transition-delay:.5s;z-index:9999}colorsBox .blast-frame{width:calc(100% - 40px);height:300px;top:0;left:0;text-transform:uppercase;letter-spacing:10px;padding:20px 5px}colorsBox .blast-colors{margin:20px;padding-bottom:20px}colorsBox .blast-color{position:relative;float:left;margin:2px;height:25px;width:25px;max-height:25px;max-width:25px;background:#000;color:transparent;overflow:hidden;cursor:pointer;border:2px solid #fff}colorsBox .blast-custom-colors{clear:both;margin-top:4em!important}colorsBox input[name=blastCustomColor]{margin-top:20px;cursor:pointer;height:70px;width:100px;border:none;outline:0;background:linear-gradient(to right,red,orange,#ff0,green,#00f,indigo,violet);padding:45px 0 0 80px}.appear-it{left:0}.flip-it{transform:rotateY(180deg);border-left:none}.blast-frame p{font-family:cocon-next-arabic;letter-spacing:0;font-size:15px;background:#e6f0f7;display:table;padding:8px 10px;margin:0 auto;border-radius:2px;border:1px solid #dde8f0}

1. الان ابحث عن </body>
2. وضع الأكواد التالية فوقه

• <script type='text/javascript'>
•  /**
•  * Color Switcher
•      */
•  //<![CDATA[
• $(document).ready(function(){var a;$("colorsBox").attr("unselectable","on").css("user-select","none").on("selectstart",!1),$("colorsBox icon").on("click",function(){$("colorsBox").toggleClass("appear-it"),$(this).toggleClass("flip-it")}),$(".blast-color").each(function(b){$(".blast-color").eq(b).css("backgroundColor",$(this).text()),$(".blast-color").eq(b).on("click",function(){a=$(this).css("backgroundColor"),$(this).css("border","2px solid black").siblings().css("border","2px solid white")})}),$('input[name="blastCustomColor"]').on("change",function(){a=$(this).val(),$('[data-blast="color"]').css("color",a),$('[data-blast="bgColor"]').css("backgroundColor",a),$('[data-blast="borderColor"]').css("border-color",a)}),$("*").on("click",function(){$('[data-blast="color"]').css("color",a),$('[data-blast="bgColor"]').css("backgroundColor",a),$('[data-blast="borderColor"]').css("border-color",a)})});
•  //]]>
•     </script>
• <colorsBox>
• <icon>&#8801;</icon>
• <div class='blast-frame'>
• <p>تغيير الالوان</p>
• <div class='blast-colors'>
• <div class='blast-color'>#3D261A</div>
• <div class='blast-color'>#B6B254</div>
• <div class='blast-color'>#6B2E56</div>
• <div class='blast-color'>#48A871</div>
• <div class='blast-color'>#2D1D44</div>
• <div class='blast-color'>#3F4E92</div>
• <div class='blast-color'>#DCC218</div>
• <div class='blast-color'>#F5005E</div>
• <div class='blast-color'>#916E30</div>
• <div class='blast-color'>#D0A571</div>
• <div class='blast-color'>#379AA4</div>
• <div class='blast-color'>#216348</div>
• <div class='blast-color'>#3B3B3B</div>
• <div class='blast-color'>#CF2626</div>
• </div>
• <p class='blast-custom-colors'>تخصيص</p>
• <input name='blastCustomColor' type='color' value='#cf2626'/>
• </div>
• </colorsBox>

1. الان عليك التركيز قليلا
2. مثلا : لدينا زر بالقالب <button class="demo">زر افتراضي</button>
3. ونريد جعل لون خلفيته تتغير
4. نضيف له الكود التالي :

• <button class="demo" data-blast="bgColor">زر افتراضي</button>

1. ولجعل لون الكتابة تتغير
2. نضيف الكود التالي :

• <button class="demo" data-blast="color">زر افتراضي</button>

1. ولجعل لون الاطار أو البوردر متغير :
2. نضيف الكود التالي :

• <button class="demo" data-blast="borderColor">زر افتراضي</button>