9/09/2017

settings_overscan print announcement

Palette.js أداة رائعة لإضافة ألوان اللوح المسطح flat ui  لمشروعك أو لزوار مدونتك يتم تخصيص هذه المكتبة فقط بتضمين سطر واحد من التعليمات البرمجية والمتمثل في كود اللون المراد إدراجه مع القائمة ...مع ميزة النسخ السريع بمجرد الضغط على اللون المطلوب تحصل على الشفرة ...كما تم تخصيص واجهة ذات تأثيرات أنيقة على عرض مريح وبسيط حتى لاتشوش على تدرج الألوان .
يمكن إضافت الأداة في مشاركة أو الأحسن تكون على صفحة مستقلة في مدونتك مع حجب جميع العناصر الغير ضرورية.








تركيب الأداة


الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى صفحات >> أنشأ صفحة جديدة ثم إنتقل لوضع  HTML  
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب

الخطوة الثانية

  • قم بوضع كود.html داخل الصفحة التى أنشأتها ثم ضع لها عنوان مناسب

  • 
     
    
    <div class="colors-main">
    <header>
    <a class="home-container" href="ضع رابط مدونتك هنا" target="_blank"><i aria-hidden="true" class="fa fa-home"></i></a>
     <svg viewBox="0 0 800 600">
      <symbol id="s-text">
        <text text-anchor="middle"
              x="50%"
              y="35%"
              class="text--line"
              >
          Flat UI
        </text>
        <text text-anchor="middle"
              x="50%"
              y="68%"
              class="text--line"
              >
           Colors
        </text>
      </symbol>
      <g class="g-ants">
        <use xlink:href="#s-text"
          class="text-copy"></use>     
        <use xlink:href="#s-text"
          class="text-copy"></use>     
        <use xlink:href="#s-text"
          class="text-copy"></use>     
        <use xlink:href="#s-text"
          class="text-copy"></use>     
        <use xlink:href="#s-text"
          class="text-copy"></use>     
      </g>
    </svg>
    </header>
    <section class="palette-colors">
    <div class="colors-flat"></div>
    </section> <!-- palette colors -->
    <!-- coooooood -->
     <style>
    /*-----------------------------
    body
    ------------------------------*/
    body {font-size: 14px!important;background: #f1f1f1!important;margin: 0!important;}
    /* -------------------------------- 
    home-container 
    -------------------------------- */
    a.home-container{position:absolute;top:0;right:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:1.2em;padding:0;margin:10px;overflow:hidden;background-color:#e9573f;color:#ffffff;-webkit-animation:color-change 3s linear 0s infinite;animation:color-change 3s linear 0s infinite;text-decoration: none!important;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;-o-border-radius: 6px;-ms-border-radius: 6px;}
    /* -------------------------------- 
    Main components 
    -------------------------------- */
    header{position:relative;height:180px;line-height:180px;text-align:center;background-color:#ffffff;}
    @media only screen and (min-width:1024px){header{height:240px;line-height:240px;}}
    @media only screen and (min-width:768px){ul.nav-container-font li a{font-size:1em;padding:2px 25px;margin:10px;}}
    /* -------------------------------- 
    colors flat
    -------------------------------- */
    .colors-flat{max-width: 700px;margin: 0 auto;}
    /*------------svg + link------------*/
    .text--line{font-size:10rem;}
    svg{width:100%;height:100%;}
    .text-copy{fill:none;stroke:white;stroke-dasharray:7% 28%;stroke-width:3px;-webkit-animation:stroke-offset 9s infinite linear;animation:stroke-offset 9s infinite linear;}
    .text-copy:nth-child(1){stroke:#e9573f;stroke-dashoffset:7%;}
    .text-copy:nth-child(2){stroke:#8cc152;stroke-dashoffset:14%;}
    .text-copy:nth-child(3){stroke:#fcbb42;stroke-dashoffset:21%;}
    .text-copy:nth-child(4){stroke:#967adc;stroke-dashoffset:28%;}
    .text-copy:nth-child(5){stroke:#d770ad;stroke-dashoffset:35%;}
    @-webkit-keyframes stroke-offset{50%{stroke-dashoffset:35%;stroke-dasharray:0 87.5%;}}
    @keyframes stroke-offset{50%{stroke-dashoffset:35%;stroke-dasharray:0 87.5%;}}
    @-webkit-keyframes color-change{0%{background:#8cc152;}33%{background:#fcbb42;}66%{background:#967adc;}100%{background:#d770ad;}}
    @keyframes color-change{0%{background:#8cc152;}33%{background:#fcbb42;}66%{background:#967adc;}100%{background:#d770ad;}}
      </style>
    <script type="text/javascript">
    //<![CDATA[
    "use strict";const palette=(t,e)=>{function n(){Array.from(document.querySelectorAll("#paletteUI li")).forEach(t=>{t.classList.remove("copy")})}let o=`\n\t\t<ul id="paletteUI">\n\t\t\t${t.map(t=>`
    <li style="background: ${t}"><input type="text" value="${t}" readonly></input></li>
    `).join("")}\n    \t</ul>
    \n    `;e.innerHTML=o,o&&Array.from(document.querySelectorAll("#paletteUI li")).forEach(t=>{t.addEventListener("click",t=>{let e=t.target;e.querySelector("input").select(),n();try{document.execCommand("copy"),e.classList.add("copy")}catch(t){console.log("Unable to copy",t)}})})},style="#paletteUI{margin:0;padding:0;font-size:12px;width:100%;display:flex;flex-wrap:wrap;justify-content:center;list-style:none}#paletteUI li{font-family:'Arial','sans-serif'!important;cursor:pointer;text-transform:uppercase;margin:10px;position:relative;background-size:100% 75%!important;width:140px;height:120px;padding:5px;box-sizing:border-box;border-radius:4px;overflow:hidden;transition:all .15s ease-in-out;-webkit-box-shadow:0 3px 0 0 rgba(226,228,231,0.75);-moz-box-shadow:0 3px 0 0 rgba(226,228,231,0.75);-ms-box-shadow:0 3px 0 0 rgba(226,228,231,0.75);-o-box-shadow:0 3px 0 0 rgba(226,228,231,0.75);box-shadow:0 3px 0 0 rgba(226,228,231,0.75);}#paletteUI li:hover{box-shadow:0 2px 20px rgba(0,0,0,0.15)}#paletteUI li input{font-family:'Arial','sans-serif';font-size:11px;text-transform:uppercase;position:absolute;padding:10px 0;bottom:0;right:0;white-space:nowrap;overflow:hidden;display:block;width:100%;text-align:center;text-overflow:ellipsis;color:#666;border:none;pointer-events:none;background:#ffffff;}#paletteUI li input::selection{background:transparent}#paletteUI li:after{display:flex;align-items:center;justify-content:center;height:80%;opacity:0;content:'Copied!';letter-spacing:1px;text-align:center;color:#fff;font-size:8px;text-transform:uppercase;text-shadow:0 1px rgba(0,0,0,0.2)}#paletteUI li.copy:after{animation:copy 1.6s ease-in-out both}@keyframes copy{0%{opacity:0;transform:translateY(10px)}15%,80%{transform:translateY(0);opacity:1}100%{opacity:0;transform:translateY(-10px)}}";!function(t){var e=document.createElement("style");e.innerHTML=t,document.body.appendChild(e)}(style);
    const colors = [
     "#E9573F",
     "#FC6E51",
     "#DA4453",
     "#ED5565",
     "#8CC152",
     "#A0D468",
     "#FCBB42",
     "#FFCE54",
     "#3BAFDA",
     "#4FC1E9",
     "#37BC9B",
     "#48CFAD",
     "#967ADC",
     "#AC92EC",
     "#4A89DC",
     "#5D9CEC",
     "#E6E9ED",
     "#F5F7FA",
     "#D770AD",
     "#EC87C0",
     "#434A54",
     "#656D78",
     "#AAB2BD",
     "#CCD1D9",
    ];
    
    palette(colors, document.querySelector('.colors-flat'));
    //]]>
    </script>
    </div>
     
    

    كيف تتعامل مع الأداة؟
    مع هذه الأداة لن تحتاج إلى تعديل أو إظافة أكواد في كل مرة تريد فيها إظافة لون جديد كل ماعليك فعله هو الآتي...
    التعديل على الكود
    ضع رابط مدونتك في المكان المحدد بهذا اللون الذي هو عبارة عن زر توجيه للصفحة الرئيسية تستطيع حذفه إذا رأيت أنه لا داعي لوجوده
    في مجموعة الأكواد المحددة بهذا اللون إنزل إلى آخر الكود ثم قم بإظافة شفرة اللون الجديد تستطيع كذلك أن تضيف إسم اللون بدل الشفرة مثلا هذه شفرة اللون الأحمر "#ff0000", وهكذا نضيف الإسم "red",
    حذاري!!...ركز أن تنسى مراعات علامة التنصيص المزدوجة" " والفاصلة , بين كوداللون والذي بعده وإلا لن يظهر اللون المضاف...هذا كل شيء.
    ماذا عن الواجهة؟
    ستظهر الواجهة داخل محتوى الصفحة لذلك إذا أردت أن تجعل الأداة كما شاهدتها في المعاينة أي تظهر بكامل العرض علينا أن نظيف بعض أكواد css مع الكود الذي أضفناه سابقا.
  • قم بوضع الكود التالي في نفس الصفحة داخل الوسم <style>مع بقية الأكواد
  • 
     
    #top-header, .post-title, .up-meta,  #sidebar-wrapper,  .sidebar-wrapper,  #comments,  footer,  #footer,  .footer #credit,  #menu,  nav,  #header {
        display: none!important;
    }
    .sjps, .grid-cover, .recent-wrap,  #main-wrapper,  .main-wrapper,  #outer-wrapper,  #outer-wrapper {
        background-color:  transparent!important;
        background: transparent!important;
        width: 100%!important;
        padding: 0!important;
        padding-top: 0!important;
        background: none!important;
        margin-bottom: 0!important;
        padding: 0!important;
        margin: 0!important;
        float:  none!important;
    }
    
     
    
    ملاحظة أخيرة
    تم ضبط الكود الذي أضفناه الآن حتى يخفي ويعدل حجم بعض الأدوات وبما أن تنسيق القوالب يختلف وجب أن تعرف إسم كل عنصر في قالبك من خلال فتح شفرة المصدر...هذا في حالة لم يتعدل معك أحد العناصر...فقم بوضع الوسم الخاص به في المكان المناسب...وهو كالتالي...
    التعديل على الكود
    الكود المحدد بهذا اللون هو لإخفاء عنصر أو أداة.
    الكود المحدد بهذا اللون هو للتحكم في حجم وحشو وحواف والجهة ولون ...العنصر.
    حذاري!!...ركز أن تنسى مراعات علامة الفاصلة, بين وسم العنصر والذي بعده.




add_commentإرسال تعليق

إرسال تعليق