שיבוץ דגלונים באתר דו-לשוני / תלת-לשוני

כדי להגדיר את הדגלונים (דו-לשוני או תלת-לשוני או יותר) יש לפעול לפי השלבים הבאים:

(הערה טכנית: לפעמים בשיכפול האתר הסאב-דומיין נשבר ב-uPress, ואז צריך להמיר ידנית (פיתוח > כלי אחסון נוספים > חיפוש והחלפה) מ-http://eng.eng.website.com/ ל-https://eng.website.com/)

1. יש להעלות תמונות של דגלונים בשפות המתאימות (בגרסאות חדשות של אתרים, הן קיימות בתיקייה 2021/02 בספריית המדיה ולא צריך להעלות פעם שנייה), יש דגלונים זמינים לשימוש ב-Z Drive, תחת Graphics > Flags
2. יש לשבץ אותם בסוף הקובץ includes/include-slogan.php של התבנית BeTheme, באמצעות הקוד הבא:

   <div class="flags">
   <a href="https://www.esh-inv.com/" title="Hebrew"><img src="https://www.esh-inv.com/wp-content/uploads/2021/02/Hebrew.png" /></a> 
   <a href="https://eng.esh-inv.com/" title="English"><img src="https://www.esh-inv.com/wp-content/uploads/2021/02/English.png" /></a> 
   <a href="https://ru.esh-inv.com/" title="Russian"><img src="https://www.esh-inv.com/wp-content/uploads/2021/02/Russian.png" /></a> 
   </div>

3. אם ה-Action Bar אינו מופעל, יש להפעילו ולשים <br />  במקום טקסט בסלוגן. יש למחוק את שאר השדות ב-Action Bar.
4. יש להוסיף את קוד ה-CSS הבא לסגנון:

   /* Flags */
   .flags {
    float:right;
   }
   #Action_bar, #Action_bar .container .column {
    height:0px;
    overflow:visible;
   }
   #Action_bar .container, #Action_bar .langs {
    z-index:999;
    top:4px;
   }
   #Action_bar {
    z-index:999;
   }
   #Action_bar ul.social {
    display:none;
   }
   #Top_bar {
    top:0px;
   }
   #Action_bar .container {
    max-width:100% !important;
   }
   #Top_bar:not(.is-sticky) .menu > li > a span:not(.description) {
    position:relative;
    top:5px;
   }

5. אם יש Action Bar באתר, אז מספיק להפעיל קוד ה-CSS הבא:

   /* Flags */
   .flags {
    float:left;
   }

6. ואת התיקון הרספונסיבי הבא:

   /* Flags Responsive */
   @media (max-width: 1000px) { 
    /*---ai------------------Start Mobile & V-Tablet----------------------*/
   #Action_bar {
    position:absolute;
    left:10px !important;
    top:-5px !important;
    background:transparent !important;
   }
    #Action_bar .container {
    padding-right:0px !important;
    padding-left:0px !important;
    }
   #Action_bar .contact_details li.slogan {
    display:block !important;
    float:right;
   }
   .header-classic #Action_bar .social {
    float:left;
   }
   #Top_bar #logo img.logo-mobile {
    top:-20px;
    position:relative;
   }
   }/*---ai--------------------End Mobile & V-Tablet-----------------------*/

אם הלקוח מבקש להחביא את האייקונים של המדיה החברתית, ניתן להשתמש בקוד הבא:

#Action_bar ul.social {
 display:none;
}

להוצאת הדגלים טיפה מה-GRID, יש להשתמש בקוד הבא:

#Action_bar .container {
 max-width:70% !important;
}

——

אם הלקוח מבקש קישורים טקסטואליים במקום דגלונים, אפשר להשתמש בקוד הבא:

<div class="langs">
<a href="https://www.jaffafund.co.il/" title="Hebrew">HE</a> | 
<a href="https://eng.jaffafund.co.il/" title="English">EN</a> 
</div>

ולבצע התאמת CSS כך:

#Action_bar .social { display:none; }
.flags {
 float:left;
 position:relative;
 top:5px;
}
@media (min-width: 1000px) { /*-----ai---------Start Not Mobile-Range-----------*/
.flags a, .flags {
 color:white;
}
} /*-----ai---------End Not Mobile-Range-----------*/

קוד לסגנון טקסט EN / HE – סגנון פשוט, לבן:

.langs {
 width:80px;
 float:left;
 padding-top:5px;
 color:#ccc;
}
.langs a {
 color:#f5f5f5;
}
.langs a:hover {
 color:#fff;
}
@media (max-width: 1000px) { /*-----ai---------Start Mobile-Range-----------*/
div.langs {
 width:100%;
 text-align:center;
 color:#333;
}
div.langs a {
 color:#2991d6;
}
div.langs a:hover {
 color:#2275ac;
}
} /*-----ai---------End Mobile-Range-----------*/