כיצד לתקן מטרד קטן באינטרנט באמצעות אופנתי [Firefox & Chrome]

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

לפעמים יש מספיק משתמשים אלה כדי לאלץ חברה לחזור אחורה, כמו שעשתה לאחרונה Google עם לחצני הסמל של Gmail. אבל מה אם יש משהו שאתה בֶּאֱמֶת שונא, והחברה לא משנה את זה בחזרה? האם אתה תקוע עם זה לנצח? הודות לסגנונות המשתמש, אתה יכול לתקן בעיות כאלה בעצמך.

היכרות עם אופנתי

מסוגנן הוא תוסף בחינם הזמין עבור שניהם פיירפוקס ו כרום , וזה מאפשר לך לעשות משהו די קסום - החלת סגנונות משלך על אלמנטים של דפי אינטרנט. גם אם אינך מפתח אתרים ומעולם לא כתבת קצת CSS בחייך, זה הרבה יותר קל ממה שזה נשמע. אתה יכול להשתמש ב- Stylish כדי להפוך אתרים לחלוטין (כפי שאראה לך בחלק הבא), אך חשוב מכך, תוכל להשתמש ב- Stylish כדי לתקן מטרדים קטנים תוך דקות.

לדוגמה, הייתה לי בעיה עם גודל הגופן המוגדר כברירת מחדל ב- Gmail. הממשק היה בסדר - לא רציתי להתקרב (Ctrl +) עם הדפדפן שלי, כי זה יגדיל את גודל כל רכיבי הממשק ויהיה ממש מכוער. רק רציתי דרך להפוך את גופן ההודעה למעט גדול יותר.

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

UserStyles.org

אם משהו עולה לך על העצבים, בהחלט ייתכן שאתה לא לבד. UserStyles.org הוא אתר המאפשר למשתמשים לשתף סגנונות שיצרו. למעלה אתה יכול לראות סגנון ( הוסף תוויות לסמלי סרגל הכלים ) המומלץ על ידי המגיב MakeUseOf RandyN בתגובה לסיפור שלנו על לחצני הסמל של Gmail. סגנון זה מאפשר לך לשמור על הסמלים, אך להוסיף תוויות טקסט - משהו ש- Google לא תאפשר לך לעשות.

UserStyles.org הוא נהדר, אך הוא אינו מושלם. חלק מהעיצובים מנסים לעשות יותר מדי (לשנות את המראה של אתר לגמרי), וחלקם מיועדים לגרסאות ישנות של אתרים ועכשיו הם שבורים. אם אתה מנסה לתקן משהו קטן ולא מוצא אותו ב- UserStyles.org, אולי הדרך הטובה ביותר היא לעשות זאת בעצמך.

יצירת סגנון משתמש פשוט משלך

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

Firefox מחשיך את שאר הדף ומצייר מסגרת מאוד ברורה סביב האלמנט שבחרת. מעל האלמנט הזה, הטקסט שאומר div#2d6.ii.gt.adP.adO , היא חבורה של שיעורי CSS, יחד עם מזהה אחד (החלק שמתחיל ב- #). זהו הבורר המשפיע על הסטיילינג של אלמנט זה. בחלק התחתון של המסך יש סרגל ניווט המאפשר לך ' לחצות את עץ ה- DOM ', או במילים פשוטות יותר, עלה ויורד בהיררכית האלמנטים המובילים לאלמנט שבחרת.

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

לחצתי על אלמנט אחד גבוה יותר, div.gs , רק כי אני אוהב את שמו (נראה כמו משהו שלא ישתנה מוקדם מדי, אבל זה ניחוש מוחלט מצידי). זה משפיע על כל אזור ההודעות. לאחר שנבחר האזור שברצונך לעצב, לחץ על סִגְנוֹן כפתור בפינה השמאלית התחתונה, כדי לפתוח את כללים לחם:

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

כאן תוכל לראות רשימה מלאה של את כל חוקי CSS. אתה יכול לגלול למטה מהרשימה עד שתמצא חוק הגיוני למה שאתה צריך (גודל הגופן במקרה שלנו), ואפילו לחץ על סימן השאלה שלידו כדי לפתוח דף הסבר. אז, עכשיו אנחנו יודעים שאנחנו רוצים לשנות את המאפיין בגודל הגופן עבור כל רכיבי div שיש להם מחלקה של ' gs '(כתוב בקצרה כ div.gs ).

השאלה היחידה שנותרה היא מה אנו רוצים שערכו יהיה. לשם כך, אנו חוזרים לחלונית החוקים ומתחילים לשחק:

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

שמירת הסגנון החדש שלך

לאחר שהחלק הזה של האתר ייראה בדיוק כמו שאתה רוצה אותו, הגיע הזמן לשמור אותו. לחץ על מסוגנן סמל בסרגל ההרחבות ובחר כתוב סגנון חדש . לאחר מכן סטייליש ירצה לדעת באילו דפים עליו ליישם את הסגנון החדש - במקרה שלנו, בחר באפשרות השנייה, mail.google.com . לאחר מכן, תראה דיאלוג זה:

כבר מילאתי אותו. ברור שבחרתי שם וכמה תגים לסגנון. אבל הדברים האמיתיים קורים בתוך הקוד: שורה 3 כבר הייתה שם - סטייליש הניח אותה במקום כך שתדע באילו עמודים הסגנון חל. אבל קו 5-7 הם שלי. בואו ננתח אותם:

שורה 5: div.gs { - את החלק הזה אתה צריך לזהות. זהו האלמנט שהחלטנו לעצב. פירוש הפתיחה פירושו שכעת נכתוב כמה כללי CSS. שורה 6: גודל גופן: 20 פיקסלים! חשוב; -זה הכלל שברצוננו לשנות (גודל גופן), ואחריו ההגדרה החדשה שלו (20 פיקסלים), ולאחר מכן הצהרה חשובה! כלומר פירושו של פיירפוקס יציית לכלל זה גם אם אלמנט הקרוב יותר לטקסט ינסה להגדיר גודל הגופן למשהו אחר. שורה 7:} - סגירת הגדרת הסגנון.

לאחר מכן, לחץ על תצוגה מקדימה והתפעל מהעבודה שלך:

ולבסוף, ברגע שאתה רואה שזה עובד, לחץ על להציל.

זה לא מדריך מלא

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

אם התבלבלת במשהו, אנא שאל אותי למטה ואעשה כמיטב יכולתי לעזור.

מחק קבצים מ- onedrive אך לא מהמחשב

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל 5 טיפים להטעין את מכונות הלינוקס של VirtualBox

נמאס לכם מהביצועים הגרועים שמציעות מכונות וירטואליות? הנה מה שאתה צריך לעשות כדי לשפר את ביצועי VirtualBox שלך.

קרא הבא נושאים קשורים

דפדפנים
בניית אתרים
כלי מנהלי אתרים
Mozilla Firefox
גוגל כרום
עיצוב אתרים

על הסופר ארז צוקרמן(288 מאמרים פורסמו) עוד מאת ארז צוקרמן

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחצו כאן להרשמה