התקנתי באתר שלי תוסף בשם Advanced Post Slider שמציג פוסטים עם אנימציה אנכית מלמטה למעלה.
הבעיה עם הסליידר הזה היא שהוא לוקח את הגובה של הקונטיינר שלו לפי הגובה של התמונות בthumbnail של הפוסטים, ואני צריך שהגובה שלו יהיה לפי הגובה של הקונטיינר. כלומר, כל הגובה של המסך.
מישהו יכול בבקשה לעזור לי לערוך את הקוד css או php של התוסף הזה בהתאם?
אפשר לראות את התוסף באתר שלי בתצוגה של דסקטופ.
https://www.mantis-tours/tours/jordan-tours/petra-tours/one-day-petra-tour/
היי lior77, נסה להוסיף את קטע הקוד הבא ב-Custom CSS
.et_pb_section_1 {
height:-webkit-fill-available !important;
}
הדבר יאפשר לסליידר לקחת את כל שטח הפנים של הcontainer באופן הבא:

אני צריך לכתוב פשוט et_pb_section_1? איך הוא יודע לאיזה section להתייחס?
אני צריך לציין שהתוסף קובע את הגובה של הסליידר לפי הגובה של התמונה בthumbnail, אז צריך אולי להתעסק קצת בקוד php שלו.
אני צריך לכתוב פשוט et_pb_section_1? איך הוא יודע לאיזה section להתייחס?
אני צריך לציין שהתוסף קובע את הגובה של הסליידר לפי הגובה של התמונה בthumbnail, אז צריך אולי להתעסק קצת בקוד php שלו.
תעתיק את הקוד כפי שכתבתי כאן as is, לתוך ה-custom css של העיצוב שלך.
מה שמגביל את הסליידר שלך זה הsection עצמו – ומה ששלחתי כאן זה הclass הספציפי שלו.
מה שהקוד הזה עושה – פשוט מוטח את הsection לגובה של כל המסך.
הוספתי את הקוד שכתבת. אבל, זה לא עוזר.
הsection לא מגביל את התוסף.
אם תעשה רענון לדף, אז תראה שהתוסף משתמש בכל הגובה של הsection. אבל, אחרי חצי שניה הוא לוקח את הגובה של התמונה בthumbnail, ומשנה את הגובה שלו בהתאם.
צריך להתעסק עם הקוד php של התוסף, ולמנוע ממנו לקחת את הגובה של הthumbnail, ובמקום זה להשתמש בכל הגובה שהsection נותן לו.
נסה להוסיף (בנוסף לקוד הקודם) את הקוד הבא:
#advps_container1 .bx-wrapper .bx-viewport {
height:-webkit-fill-available !important;
}
הוספתי את הקוד השני. אבל, זה גם לא שינה שום דבר.
הבעיה היא לא בקוד css, אלא בקוד php של התוסף עצמו.
כאשר העמוד עולה, הסליידר ממלא את כל הגובה האמיתי של הsection. אבל, איפשהו בקוד של הסליידר כתוב לו לקחת את הגובה של התמונה בthumbnail, ולשנות את הגובה של הסליידר בהתאם לכך.
אפשר להיווכח בכך, באם לתמונה בפוסט יש גובה שונה, אז הסליידר משנה את הגובה שלו בהתאם לגובה של התמונה השונה.
הפתרון לאו דווקא צריך להיות ב-php.
הקוד שתמיר שלח כאן מכיל את הערך !important
המשמעות של !important ב-CSS היא בעצם לדרוס את כל מאפייני ה-CSS האחרים שיש לאובייקט.
גם אם קוד של התוסף קובע גובה מסויים – ברגע שיש לך CSS עם !important הוא צריך לדרוס את ההגדרות הנקבעו על-ידי התוסף.
אלא אם כן: הגובה שהתוסף קובע מכיל !important בעצמו – אז שום !important אחר שתשים לא ידרוס את הגדרות התוסף.
יש לך אופציה לעשות edit לקוד של הפלאגין ולראות את הקטע קוד שקובע את המימדים של הפלאגין, ייתכן גם שיש קובץ CSS של התוסף שעושה זאת…