Home-theater-designers![స్టైలిష్ [ఫైర్‌ఫాక్స్ & క్రోమ్] తో వెబ్‌లో చిన్న చికాకులను ఎలా పరిష్కరించాలి](http://home-theater-designers.com/img/browsers/55/how-fix-small-annoyances-web-with-stylish.png)
వెబ్ డిజైనర్లకు దాదాపు అసాధ్యమైన పని ఉంది. ప్రతిఒక్కరికీ నచ్చే ఒక డిజైన్‌తో వారు రావాలి. ప్రపంచవ్యాప్తంగా లెక్కలేనన్ని మిలియన్ల మంది ప్రజలు ఉపయోగించే Gmail వంటి సేవ గురించి మాట్లాడేటప్పుడు, మీరు నిజంగా 'దాదాపు' భాగాన్ని వదలవచ్చు - ఇది కేవలం అసాధ్యం. పునesరూపకల్పన చాలా మందికి బాగా నచ్చినప్పటికీ, కొత్త రూపాన్ని నిజంగా ఇష్టపడని వినియోగదారులు ఎల్లప్పుడూ ఉంటారు.
కొన్నిసార్లు Gmail ఐకాన్ బటన్‌లతో గూగుల్ చేసినట్లుగా, కంపెనీని వెనక్కి తీసుకునేలా బలవంతం చేయడానికి కొన్నిసార్లు ఈ వినియోగదారులు తగినంత మంది ఉన్నారు. కానీ మీరు ఏదైనా ఉంటే ఏమి చేయాలి నిజంగా ద్వేషం, మరియు కంపెనీ దానిని తిరిగి మార్చలేదా? మీరు దానితో శాశ్వతంగా చిక్కుకున్నారా? వినియోగదారు శైలులకు ధన్యవాదాలు, మీరు అలాంటి సమస్యలను మీరే పరిష్కరించవచ్చు.
స్టైలిష్ పరిచయం
స్టైలిష్ అనేది రెండింటికీ అందుబాటులో ఉండే ఉచిత యాడ్-ఆన్ ఫైర్‌ఫాక్స్ మరియు క్రోమ్ , మరియు ఇది చాలా మాయాజాలం చేయడానికి మిమ్మల్ని అనుమతిస్తుంది - వెబ్‌పేజీ మూలకాలకు మీ స్వంత శైలులను వర్తింపజేయండి. మీరు వెబ్ డెవలపర్ కాకపోయినా మరియు మీరు మీ జీవితంలో కొంచెం CSS వ్రాయకపోయినా, ఇది ధ్వనించే దానికంటే చాలా సులభం. వెబ్‌సైట్‌లను పూర్తిగా మార్చడానికి మీరు స్టైలిష్‌ని ఉపయోగించవచ్చు (తరువాతి విభాగంలో నేను మీకు చూపిస్తాను), కానీ మరీ ముఖ్యంగా, నిమిషాల్లో చిన్న చికాకులను పరిష్కరించడానికి మీరు స్టైలిష్‌ని ఉపయోగించవచ్చు.
ఉదాహరణకు, Gmail లో డిఫాల్ట్ ఫాంట్ పరిమాణంలో నాకు సమస్య ఉంది. ఇంటర్‌ఫేస్ బాగానే ఉంది - నా బ్రౌజర్‌తో (Ctrl +) జూమ్ చేయాలనుకోలేదు, ఎందుకంటే అది అన్ని ఇంటర్‌ఫేస్ అంశాల పరిమాణాన్ని పెంచుతుంది మరియు నిజంగా అగ్లీగా ఉంటుంది. మెసేజ్ ఫాంట్ కొంచెం పెద్దదిగా చేయడానికి నాకు ఒక మార్గం కావాలి.
స్టైలిష్‌తో, ఇది చాలా సులభం, మరియు ఎలాగో నేను మీకు చూపుతాను. కానీ మేము మీ స్వంత యూజర్ స్టైల్‌లను సృష్టించే ముందు, ఇతరుల పనిని పెంచడం గురించి మాట్లాడుకుందాం.
UserStyles.org
మీ నరాల మీద ఏదైనా వస్తుంటే, మీరు ఒంటరిగా ఉండకపోవడం పూర్తిగా సాధ్యమే. UserStyles.org వినియోగదారులు సృష్టించిన శైలులను పంచుకోవడానికి అనుమతించే వెబ్‌సైట్. పైన మీరు ఒక శైలిని చూడవచ్చు ( టూల్‌బార్ చిహ్నాలకు లేబుల్‌లను జోడించండి ) Gmail చిహ్నం బటన్‌ల గురించి మా కథనానికి ప్రత్యుత్తరంగా MakeUseOf వ్యాఖ్యాత రాండిఎన్ సిఫార్సు చేసారు. ఈ శైలి చిహ్నాలను ఉంచడానికి మిమ్మల్ని అనుమతిస్తుంది, కానీ టెక్స్ట్ లేబుల్‌లను జోడించండి - ఏదో Google మిమ్మల్ని అనుమతించదు.
UserStyles.org చాలా బాగుంది, కానీ అది పరిపూర్ణంగా లేదు. కొన్ని డిజైన్‌లు చాలా ఎక్కువ చేయడానికి ప్రయత్నిస్తాయి (వెబ్‌సైట్ రూపాన్ని పూర్తిగా మార్చండి), కొన్ని వెబ్‌సైట్‌ల పాత వెర్షన్‌ల కోసం మరియు ఇప్పుడు విరిగిపోయాయి. మీరు చిన్నదాన్ని పరిష్కరించడానికి ప్రయత్నిస్తుంటే మరియు దానిని UserStyles.org లో కనుగొనలేకపోతే, మీ స్వంతంగా చేయడం బహుశా మీ ఉత్తమ చర్య.
మీ స్వంత సాధారణ వినియోగదారు శైలిని సృష్టించడం
మీ స్వంత వినియోగదారు శైలిని సృష్టించడానికి, మీరు మొదట పేజీలోని ఏ మూలకాన్ని మార్చాలనుకుంటున్నారో, ఆపై మీరు ఏ మార్పు చేయాలనుకుంటున్నారో తెలుసుకోవాలి. కాబట్టి, ప్రారంభించడానికి, మీరు మార్చాలనుకుంటున్న దాన్ని కుడి క్లిక్ చేసి, ఎంచుకోండి మూలకమును పరిశీలించు . మీరు ఇలాంటివి చూడాలి:
ఫైర్‌ఫాక్స్ మిగిలిన పేజీని చీకటి చేస్తుంది మరియు మీరు ఎంచుకున్న మూలకం చుట్టూ చాలా స్పష్టమైన ఫ్రేమ్‌ని గీస్తుంది. ఆ మూలకం పైన, చెప్పే టెక్స్ట్ div#2d6.ii.gt.adPadO , ఒక ID తో పాటు CSS తరగతుల సమూహం ( #తో మొదలయ్యే భాగం). ఈ మూలకం కోసం స్టైలింగ్‌ను ప్రభావితం చేసే సెలెక్టర్ ఇది. స్క్రీన్ దిగువన నావిగేషన్ బార్ ఉంది, అది మిమ్మల్ని అనుమతిస్తుంది ' DOM చెట్టును దాటండి ', లేదా సరళమైన మాటలలో, మీరు ఎంచుకున్న మూలకానికి దారితీసే అంశాల సోపానక్రమంలో పైకి క్రిందికి వెళ్ళండి.
ఇక్కడ ఆట పేరు ఏమిటంటే, మీరు స్టైల్ చేయాలనుకుంటున్న ఎలిమెంట్‌ను ఎంచుకోవడం, మరియు మీరు ప్రభావితం చేయదలిచిన ప్రతిదాన్ని ప్రభావితం చేయకుండా ఎంపికను చాలా సంకుచితంగా చేయడం లేదా ఇతర విషయాలను గందరగోళానికి గురిచేసేలా చేయడం.
నేను ఒక మూలకం ఎక్కువ క్లిక్ చేసాను, div.gs , నాకు దాని పేరు నచ్చినందుకే (చాలా త్వరగా మారని విషయంలా అనిపిస్తోంది, కానీ అది నా వైపు పూర్తి అంచనా). ఇది మొత్తం సందేశ ప్రాంతాన్ని ప్రభావితం చేస్తుంది. మీరు స్టైల్ చేయాలనుకుంటున్న ప్రాంతం ఎంచుకున్న తర్వాత, క్లిక్ చేయండి శైలి తెరవడానికి దిగువ-కుడి మూలలో బటన్ నియమాలు రొట్టె:
నాకు తెలుసు, ఇది మొదట భయానకంగా ఉంది. కానీ మీరు ఎంచుకున్న మూలకాన్ని ప్రభావితం చేసే విభిన్న CSS నియమాలను ఇక్కడ మీరు చూడవచ్చు మరియు ఇక్కడే మీరు మీ స్వంత తాత్కాలిక మార్పులను చేయవచ్చు మరియు పేజీని రీలోడ్ చేయకుండా నిజ సమయంలో వాటి ప్రభావాన్ని చూడవచ్చు. కానీ మీరు ఏమి మార్చాలి? క్లిక్ చేయండి గుణాలు బటన్ మరియు ఎంపికను తీసివేయండి వినియోగదారు శైలులు మాత్రమే :
ఇక్కడ మీరు పూర్తి జాబితాను చూడవచ్చు అన్ని CSS నియమాలు. మీకు అవసరమైన దాని కోసం అర్ధవంతమైన నియమాన్ని కనుగొనే వరకు మీరు జాబితాను క్రిందికి స్క్రోల్ చేయవచ్చు (మా విషయంలో ఫాంట్-సైజ్), మరియు వివరణ పేజీని తెరవడానికి దాని ప్రక్కన ఉన్న ప్రశ్న గుర్తును కూడా క్లిక్ చేయండి. కాబట్టి, ఇప్పుడు మేము క్లాస్ ఉన్న అన్ని డివి ఎలిమెంట్‌ల కోసం ఫాంట్-సైజ్ ప్రాపర్టీని సర్దుబాటు చేయాలనుకుంటున్నామని మాకు తెలుసు. gs '(అని సంక్షిప్త లిపిలో వ్రాయబడింది div.gs ).
దాని విలువ ఏమి కావాలన్నది మాత్రమే ప్రశ్న. దాని కోసం, మేము రూల్స్ పేన్‌కు తిరిగి వెళ్లి చుట్టూ ఆడటం ప్రారంభిస్తాము:
40 పిక్సెల్‌లు కొంచెం వెర్రిగా ఉండవచ్చు, కానీ మీకు సాధారణ ఆలోచన వస్తుంది. దీనితో ఆడుకోండి మరియు మీరు వెతుకుతున్న రూపాన్ని పొందే వరకు ఏదైనా ఇతర లక్షణాలను జోడించడానికి సంకోచించకండి. పేజీని మూసివేయకుండా చూసుకోండి, ఎందుకంటే మీ మార్పులు కాదు ఎక్కడైనా సేవ్ చేయబడింది.
మీ కొత్త శైలిని సేవ్ చేస్తోంది
సైట్ యొక్క ఈ భాగాన్ని మీరు కోరుకున్నట్లుగానే చూసుకున్న తర్వాత, దాన్ని సేవ్ చేయడానికి సమయం ఆసన్నమైంది. క్లిక్ చేయండి స్టైలిష్ యాడ్-ఆన్ బార్‌లోని ఐకాన్, మరియు ఎంచుకోండి కొత్త శైలిని వ్రాయండి . స్టైలిష్ కొత్త పేజీని ఏ పేజీలలో వర్తింపజేయాలని తెలుసుకోవాలనుకుంటుంది - మా విషయంలో, రెండవ ఎంపికను ఎంచుకోండి, mail.google.com . తరువాత, మీరు ఈ డైలాగ్‌ను చూస్తారు:
నేను ఇప్పటికే దాన్ని పూరించాను. సహజంగానే, నేను శైలి కోసం ఒక పేరు మరియు కొన్ని ట్యాగ్‌లను ఎంచుకున్నాను. కానీ కోడ్ లోపల వాస్తవమైన విషయాలు జరుగుతాయి: లైన్ 3 అప్పటికే ఉంది - స్టైలిష్ దానిని ఏ స్థానంలో ఉంచారు అంటే స్టైల్ ఏ పేజీల్లో వర్తిస్తుందో తెలుస్తుంది. కానీ 5-7 లైన్ నాది. వాటిని విశ్లేషిద్దాం:
పంక్తి 5: div.gs { - ఈ భాగాన్ని మీరు గుర్తించాలి. మేము స్టైల్ చేయాలని నిర్ణయించుకున్న అంశం ఇది. ప్రారంభ బ్రేస్ అంటే మేము ఇప్పుడు కొన్ని CSS నియమాలను వ్రాయబోతున్నాము. లైన్ 6: ఫాంట్-సైజు: 20px! ముఖ్యమైనది; -మేము మార్చాలనుకుంటున్న నియమం (ఫాంట్-సైజ్), దాని తర్వాత దాని కొత్త నిర్వచనం (20 పిక్సెల్స్), ఆపై ఒక ముఖ్యమైన ప్రకటన, అంటే టెక్స్ట్‌కు దగ్గరగా ఉండే మూలకం సెట్ చేయడానికి ప్రయత్నించినప్పటికీ ఫైర్‌ఫాక్స్ ఈ నియమాన్ని పాటిస్తుంది. ఫాంట్ పరిమాణం వేరొకదానికి. లైన్ 7:} - శైలి నిర్వచనాన్ని మూసివేస్తోంది.
తరువాత, ప్రివ్యూ క్లిక్ చేసి, మీ పనిని చూసి ఆశ్చర్యపోండి:
చివరగా, అది పనిచేస్తోందని మీరు చూసిన తర్వాత, క్లిక్ చేయండి సేవ్ చేయండి.
ఇది పూర్తి గైడ్ కాదు
ఈ చిన్న ట్యుటోరియల్‌ని ఒకే పోస్ట్ పరిధిలో ఉంచడానికి, నేను అనేక ఎత్తుపల్లాలు మరియు జంప్‌లు చేయాల్సి వచ్చిందని నాకు బాగా తెలుసు. మీరు దారిలో గందరగోళంగా ఉంటే, దయచేసి నా క్షమాపణను అంగీకరించండి. CSS మొదట్లో గమ్మత్తైనది, కానీ మీరు దాన్ని పట్టుకున్న తర్వాత ఇది అంత క్లిష్టంగా ఉండదు - మరియు స్థానికంగా వెబ్‌సైట్‌లను అనుకూలీకరించడం నేర్చుకోవడానికి ఉత్తమ మార్గాలలో ఒకటి.
మీరు ఏదైనా గందరగోళంగా ఉంటే, దయచేసి దిగువన నన్ను అడగండి మరియు నేను సహాయం చేయడానికి నా వంతు కృషి చేస్తాను.
ఫోన్ నంబర్‌కు ఇమెయిల్ చేయడం ఎలాషేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ మీ వర్చువల్‌బాక్స్ లైనక్స్ మెషిన్‌లను సూపర్‌ఛార్జ్ చేయడానికి 5 చిట్కాలు
వర్చువల్ మెషీన్స్ అందించే పేలవమైన పనితీరుతో విసిగిపోయారా? మీ వర్చువల్‌బాక్స్ పనితీరును పెంచడానికి మీరు ఏమి చేయాలో ఇక్కడ ఉంది.
తదుపరి చదవండి సంబంధిత అంశాలు- బ్రౌజర్లు
- వెబ్ అభివృద్ధి
- వెబ్‌మాస్టర్ సాధనాలు
- మొజిల్లా ఫైర్ ఫాక్స్
- గూగుల్ క్రోమ్
- వెబ్ డిజైన్
మా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి
టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!
సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి