תכנות לוורדפרס
הקהילה מיועדת למתכנתות העוסקות בפיתוח וורדפרס
php | js | HTML | CSS | jquery
שרשור סניפטים שימושיים לבניית אתרים | מחפשת איך לשדרג את האתר שלך? מוזמנת 😊
-
שרשור סניפטים שימושיים לבניית אתרים | מחפשת איך לשדרג את האתר שלך? מוזמנת 😊
שלום לכוולן 😀
קרה לכן שחיפשתן משהו מגניב לשדרג איתו את האתר אבל לא מצאתן מה?
או שלא היה לכן את הזמן “לחפור” בגוגל ולדלות משם קוד קליל שבטוח יעבוד?
בדיוק בשביל זה נועד השרשור:)
שרשור לסניפטים שימושיים בבנית אתרים, מקודי CSS פשוטים ועד JSים מורכבים וכו.
חשוב שאלו יהיו קודים קצרים, מתומצתים שבטוח עובדים ואולי שאפילו השתמשתן בהם פעם.
בכל הקודים שייכתבו – יש למצוא את נתוני העיצוב ולשחק איתם על פי הדרישות של כל אתר.
אם רוצים שיתבצע על כל האתר – לשים בCSS בהתאמה אישית הכללית.
אם לווידג’ט מסויים – ב-CSS מותאם של אותו ווידג’ט.
(שמנה לב שיש כאן למטה אפשרות הפיכת טקסט רגיל לחלוניות קוד (בלחיצה על הAa) , כמו ששמתי למטה)
אני אתחיל:
קוד לעיצוב סקרול בר
/* width */
::-webkit-scrollbar {
width: 7px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #98DED9;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}קוד להחלפת הצבע לבחירה כלשהי (כשתופסים עם העכבר את המילים)
::selection {
color: #000000;
background-color: red;
}
/* for firefox */
::moz-selection {
color: #000000;
background-color: red;
}קוד להטמעת לוגו מונפש בטעינת דף (יש לשים בווידג’ט HTML בעמוד שבו רוצים שהטעינה תקרה)
<div class="loader" ></div>
<script>
window.onload = function() {
jQuery(function($){
$('.loader').fadeOut('slow');
});
};
/*document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.loader').fadeOut('slow');
}); });*/
</script>
<style>
.loader {
position: fixed;
animation-duration: 500ml;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://touchdesign.co.il/wp-content/uploads/2020/10/לוגו-לטעינת-אתר.gif') 50% 50% no-repeat #fff; /* Change the #fff here to your background color of choice for the preloader fullscreen section */
}
.elementor-editor-active .loader{
display: none;
}
</style>בהמשך בעז”ה אעלה עוד.
יש מישהי שמכירה נוספים? אשמח שתשרשר לכאן
כותרת עם הסדר קצר ולאחריה הקוד.
בהצלחה!! 😇
Log in to reply.