الاثنين، 23 سبتمبر 2019

احصل على هذة الاداة من هنا

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



السلام عليكم
ورحمة الله
وبركاته

تدوينتنا اليوم عبارة عن اداة تعمل على أساس 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>

      هناك 3 تعليقات

      1. أخي اذا اردت ان يتغير لون الهيدر ماذا اضيف

        ردحذف
        الردود
        1. تضيف للوسم <header
          هذا الكود data-blast="bgColor"

          حذف


      EmoticonEmoticon