וויגט טאבים מסוג אקורדיון

פורום התמיכה פתוח למשתמשים מנויים בלבד. יש להתחבר או להרשם כדי להוסיף דיון או תגובה בפורום.

פורום התמיכה הועבר
על מנת שנוכל לתת לכם שירות ותמיכה בצורה אישית יותר, פורום התמיכה הועבר למערכת טיקטים באמצעות האימייל. בימים הקרובים יסגר הפורום לכתיבת הודעות חדשות לחלוטין.

ראשי › פורומים › תמיכה › וויגט טאבים מסוג אקורדיון

דיון זה מוגדר: סגור
מוצגות 14 תגובות – 1 עד 14 (מתוך 14 סה״כ)
  • מאת
    תגובות
  • 06/07/2015 בשעה 11:04 #26572
    plameron
    Participant

    אהלן,

    איך ניתן לבטל את הבורדר בוויגט טאבים מסוג אקורדיון ?
    הייתי רוצה להעלים את כל הקוים, כולל קו התחתון של הכותרת.

    יש אפשרות ?

    תודה,
    יוסי

    06/07/2015 בשעה 12:32 #26588
    Noa
    Participant

    שלום רב,

    נסה להכניס את הקוד הבא ל-Live CSS:

    .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
border:none;}

.pojo-tabs>li>a{
border:none;}

.pojo-tab-content{
border:none;}
    06/07/2015 בשעה 13:50 #26598
    plameron
    Participant
    תגובה זו סומנה כפרטית.
    06/07/2015 בשעה 15:09 #26603
    Noa
    Participant

    נסה את הקוד הבא:

    .pojo-accordion .panel{
border:none !important;}
    06/07/2015 בשעה 15:36 #26606
    plameron
    Participant

    עזר חלקית.

    הוספת הקוד הבא העלים את כל הבורדרים והתקבלה התוצאה הרצויה:

    .pojo-accordion .panel{
    border:none !important;
    box-shadow: none;
    }
    .panel-group .panel-heading+.panel-collapse .panel-body {
    border-top: none;
    }

    תודה רבה!
    יוסי

    06/07/2015 בשעה 23:13 #26639
    plameron
    Participant

    אהלן,

    2 שאלות נוספות בעניין האקורדיון:

    1. במידה וכותרת הפריט/טאב גולשת מהשורה, סימן ה '+' יורד שורה. כדוגמת הטאב השלישי מלמעלה בלינק הבא: http://www.tdb-law.com/articles/faq
    זה קורה גם כשעושים Zoom in בדף. הייתי רוצה ששתי השורות יתחילו 20px מסימן ה '+', וסימן ה '+' יופיע בתחילת השורה הרשאונה ולא השנייה.

    יש לציין שהכנסתי את השורות הבאות:

    body.rtl .pojo-accordion .panel .panel-heading .panel-title:after {
  float: right;
}

.pojo-accordion .panel .panel-heading .panel-title:after {
  padding-left: 20px;
}

    אבל גם בלעדיהן, המצב הוא כמתואר.

    איך אפשר ליישר את שתי השורות שיתחילו באותו הקו, כאמור 20px מסימן ה '+' ובנוסף שיופיע בשורה הראשונה ?

    2. בכניסה לדף הפריט/טאב הראשון תמיד במצב פתוח. איך אפשר שבמצב התחלתי כל הטאבים יהיו סגורים ?

    תודה מראש,
    יוסי

    07/07/2015 בשעה 12:17 #26659
    Noa
    Participant

    1. לצערי אין אפשרות לעשות את זה, ניתן רק לצמצם את הכותרת..

    2. בשביל זה יש את סגנון 'ספוילר' לווידג'ט טאבים.

    07/07/2015 בשעה 14:04 #26688
    plameron
    Participant

    הי נועה,

    תודה על התשובה לשאלה 2. קיבלתי.

    בעניין תשובתך לשאלה הראשונה, אם זה המצב זה נראה לי כמו באג או חוסר גמישות של ה וויגט. ולכן לדעתי לא הסברתי את עצמי כראוי…
    על מנת להסביר, הוספתי ספויילר ע"י תוסף shortcode בתחתית האקורדיון של הבילדר שלכם, וככה זה צריך להראות:
    http://www.tdb-law.com/articles/faq

    לא הייתי רוצה להשתמש בתוסף shortcode אלא בתוסף שלכם ולא נראה לי שזה לא פתיר באמצעות CSS

    האם אפשרי ?

    תודה,
    יוסי

    07/07/2015 בשעה 17:15 #26713
    Ariel
    Participant

    תעשה את זה בצורה הבאה זה יסדר לך את זה בצורה טובה:

    .pojo-accordion .panel .panel-heading .panel-title {
position: relative;
padding-right: 20px;
}
.pojo-accordion .panel .panel-heading .panel-title::after {
    position: absolute;
    top: 0;
    right: 0;
}
    07/07/2015 בשעה 18:42 #26728
    plameron
    Participant

    עובד אחלה!

    תודה רבה אריאל !!!

    07/07/2015 בשעה 21:59 #26740
    plameron
    Participant

    היי,

    אני מנסה להחליף את פונט '+' ב- '?' מתוך Font Awesome והכנסתי את השורות הבאות ב Live CSS:

    .pojo-accordion .panel .panel-heading .panel-title.collapsed::after {
  content: "\f059";
}

.pojo-accordion .panel .panel-heading .panel-title::after {
  content: "\f059";
}

    התוצאה היא שבמקום הפונט, הדף מראה את הצירוף 'f059' וב Inspect element זה נראה כך:

    .pojo-accordion .panel .panel-heading .panel-title::after {
  content: "f059";
}
.pojo-accordion .panel .panel-heading .panel-title.collapsed::after {
  content: "f059";
}

    איך יכל להיות שנעלם ה '\' ?

    תודה, יוסי

    08/07/2015 בשעה 10:48 #26770
    Noa
    Participant

    אם אתה רוצה רק להחליף ל '?' אתה יכול להכניס את הקוד כך:

    .pojo-accordion .panel .panel-heading .panel-title.collapsed::after{
content: "?";
font-weight: 700;}

.pojo-accordion .panel .panel-heading .panel-title::after{
content: "?";
font-weight: 700;}
    08/07/2015 בשעה 12:37 #26787
    plameron
    Participant

    האמת שרציתי במיוחד להשתמש בפונט הספציפי הזה של Font Awesome אבל משום מה בהכנסת content: "\f059"; ב Live CSS התוצאה ב Inspect element נראית כך content: "f059";
    אין פלא שהדף מציג את הסטרינג 'f059' במקום הפונט. מצד שני, בהכנסת f059\ ב Inspect element, הפונט נראה כראוי.

    איך שהוא, ה'\' לא עובר מה Live CSS לדף …

    הקוד כפי שהוכנס ל Live CSS:
    http://www.tdb-law.com/wp-content/uploads/2015/07/333.jpg

    נראות הקוד ב Chrome:
    http://www.tdb-law.com/wp-content/uploads/2015/07/111.jpg

    נראות לאחר הוספת '\' ב Chrome:
    http://www.tdb-law.com/wp-content/uploads/2015/07/222.jpg

    מה יכולה להיות הבעייה לכך ?

    תודה,
    יוסי

    08/07/2015 בשעה 13:52 #26802
    plameron
    Participant

    נפתרה הבעיה …

    הכנסתי ב Live CSS: content: "\\f059";

    מוזר …

  • מאת
    תגובות
מוצגות 14 תגובות – 1 עד 14 (מתוך 14 סה״כ)
  • הפורום 'תמיכה' נסגר לדיונים ולתגובות חדשות.