ஸ்டைலான [ஃபயர்பாக்ஸ் & குரோம்] மூலம் வலையில் சிறிய எரிச்சலை எப்படி சரிசெய்வது

ஸ்டைலான [ஃபயர்பாக்ஸ் & குரோம்] மூலம் வலையில் சிறிய எரிச்சலை எப்படி சரிசெய்வது

வலை வடிவமைப்பாளர்களுக்கு கிட்டத்தட்ட சாத்தியமற்ற வேலை உள்ளது. அனைவரையும் மகிழ்விக்கும் ஒரு வடிவமைப்பை அவர்கள் கொண்டு வர வேண்டும். உலகம் முழுவதும் எண்ணற்ற மில்லியன் கணக்கான மக்கள் பயன்படுத்தும் ஜிமெயில் போன்ற ஒரு சேவையைப் பற்றி பேசும்போது, ​​நீங்கள் 'கிட்டத்தட்ட' பகுதியை கைவிடலாம் - அது சாத்தியமற்றது. மறுவடிவமைப்பு பெரும்பாலான மக்களால் விரும்பப்பட்டாலும், புதிய தோற்றத்தை உண்மையில் விரும்பாத பயனர்கள் எப்போதும் இருப்பார்கள்.





கூகிள் சமீபத்தில் ஜிமெயில் ஐகான் பொத்தான்களைப் போலவே சில நேரங்களில் இந்த பயனர்கள் ஒரு நிறுவனத்தை பின்வாங்கும்படி கட்டாயப்படுத்த போதுமானவர்கள். ஆனால் நீங்கள் ஏதாவது இருந்தால் என்ன செய்வது உண்மையில் வெறுப்பு, மற்றும் நிறுவனம் அதை மீண்டும் மாற்றவில்லையா? நீங்கள் என்றென்றும் அதில் சிக்கிக்கொண்டீர்களா? பயனர் பாணிகளுக்கு நன்றி, இதுபோன்ற பிரச்சினைகளை நீங்களே சரிசெய்யலாம்.



ஸ்டைலிஷ் அறிமுகம்

ஸ்டைலிஷ் என்பது இரண்டிற்கும் ஒரு இலவச துணை நிரலாகும் பயர்பாக்ஸ் மற்றும் குரோம் , மற்றும் நீங்கள் அழகான மந்திரம் ஏதாவது செய்ய உதவுகிறது - வலைப்பக்க உறுப்புகளுக்கு உங்கள் சொந்த பாணியைப் பயன்படுத்துங்கள். நீங்கள் ஒரு வலை உருவாக்குநராக இல்லாவிட்டாலும், உங்கள் வாழ்க்கையில் நீங்கள் ஒரு சிறிய CSS ஐ எழுதவில்லை என்றாலும், இது தோன்றுவதை விட மிகவும் எளிதானது. வலைத்தளங்களை முழுவதுமாக மாற்ற நீங்கள் ஸ்டைலிஷைப் பயன்படுத்தலாம் (அடுத்த பகுதியில் நான் உங்களுக்குக் காண்பிப்பது போல), ஆனால் மிக முக்கியமாக, சிறிய தொந்தரவுகளை நிமிடங்களில் சரிசெய்ய நீங்கள் ஸ்டைலிஷைப் பயன்படுத்தலாம்.





உதாரணமாக, ஜிமெயிலில் இயல்புநிலை எழுத்துரு அளவில் எனக்கு சிக்கல் இருந்தது. இடைமுகம் நன்றாக இருந்தது - எனது உலாவியில் (Ctrl +) பெரிதாக்க நான் விரும்பவில்லை, ஏனென்றால் அது அனைத்து இடைமுக கூறுகளின் அளவை அதிகரிக்கும் மற்றும் மிகவும் அசிங்கமாக இருக்கும். மெசேஜ் எழுத்துருவை சற்று பெரிதாக்க எனக்கு ஒரு வழி வேண்டும்.

ஸ்டைலிஷுடன், இது மிகவும் எளிமையானது, எப்படி என்பதை நான் உங்களுக்குக் காண்பிப்பேன். ஆனால் உங்கள் சொந்த பயனர் பாணியை உருவாக்குவதற்கு முன், மற்றவர்களின் வேலைகளை மேம்படுத்துவது பற்றி பேசலாம்.



UserStyles.org

உங்கள் நரம்புகளில் ஏதாவது வந்தால், நீங்கள் தனியாக இல்லை என்பது முற்றிலும் சாத்தியம். UserStyles.org பயனர்கள் தாங்கள் உருவாக்கிய பாணியைப் பகிர்ந்து கொள்ள உதவும் ஒரு இணையதளம். மேலே நீங்கள் ஒரு பாணியைக் காணலாம் ( டூல்பார் ஐகான்களில் லேபிள்களைச் சேர்க்கவும் ) ஜிமெயில் ஐகான் பொத்தான்களைப் பற்றிய எங்கள் கதைக்கு பதிலாக MakeUseOf வர்ணனையாளர் RandyN ஆல் பரிந்துரைக்கப்படுகிறது. இந்த பாணி ஐகான்களை வைத்திருக்க உங்களை அனுமதிக்கிறது, ஆனால் உரை லேபிள்களைச் சேர்க்கவும் - கூகிள் உங்களைச் செய்ய விடாத ஒன்று.

UserStyles.org சிறந்தது, ஆனால் அது சரியானதல்ல. சில வடிவமைப்புகள் அதிகமாகச் செய்ய முயற்சி செய்கின்றன (ஒரு வலைத்தளத்தின் தோற்றத்தை முற்றிலும் மாற்றவும்), சில இணையதளங்களின் பழைய பதிப்புகளுக்காகவும் இப்போது உடைந்துவிட்டன. UserStyles.org இல் நீங்கள் சிறிய ஒன்றை சரிசெய்ய முயற்சிக்கிறீர்கள் என்றால், அதை நீங்களே செய்வதே உங்கள் சிறந்த செயல்.



உங்கள் சொந்த எளிய பயனர் பாணியை உருவாக்குதல்

உங்கள் சொந்த பயனர் பாணியை உருவாக்க, நீங்கள் முதலில் பக்கத்தின் எந்த உறுப்பை மாற்ற முயற்சிக்கிறீர்கள், பின்னர் நீங்கள் என்ன மாற்றத்தை செய்ய விரும்புகிறீர்கள் என்பதை முதலில் தெரிந்து கொள்ள வேண்டும். எனவே, தொடங்குவதற்கு, நீங்கள் மாற்ற விரும்பும் எதையும் வலது கிளிக் செய்து தேர்வு செய்யவும் உறுப்பை ஆய்வு செய்யவும் . இது போன்ற ஒன்றை நீங்கள் பார்க்க வேண்டும்:

பயர்பாக்ஸ் மீதமுள்ள பக்கத்தை கருமையாக்குகிறது, மேலும் நீங்கள் தேர்ந்தெடுத்த உறுப்பைச் சுற்றி ஒரு தெளிவான சட்டத்தை வரைகிறது. அந்த உறுப்புக்கு மேலே, என்று உரை div#2d6.ii.gt.adP.adO , ஒரு ஐடி ( #உடன் தொடங்கும் பகுதி) உடன் CSS வகுப்புகளின் தொகுப்பாகும். இந்த உறுப்புக்கான ஸ்டைலிங்கை பாதிக்கும் தேர்வி இது. திரையின் அடிப்பகுதியில் ஒரு வழிசெலுத்தல் பட்டி உள்ளது. DOM மரத்தை கடந்து செல்லுங்கள் 'அல்லது எளிமையான வார்த்தைகளில், நீங்கள் தேர்ந்தெடுத்த உறுப்புக்கு வழிவகுக்கும் உறுப்புகளின் வரிசைக்கு மேலே மற்றும் கீழ்நோக்கிச் செல்லுங்கள்.



இங்கே விளையாட்டின் பெயர் நீங்கள் ஸ்டைல் ​​செய்ய விரும்பும் உறுப்பைத் தேர்ந்தெடுப்பது, மற்றும் நீங்கள் பாதிக்க விரும்பும் அனைத்தையும் பாதிக்காத அளவுக்கு பரந்த அளவில் தேர்வு செய்யாதது, அல்லது மற்ற விஷயங்களை குழப்பக்கூடிய அளவுக்கு பரந்ததாக ஆக்குவது.

நான் ஒரு உறுப்பை மேலே கிளிக் செய்தேன், div.gs , அதன் பெயரை நான் விரும்புவதால் (மிக விரைவில் மாறாத ஒன்று போல் தோன்றுகிறது, ஆனால் அது என் தரப்பில் ஒரு முழுமையான யூகம்). இது முழு செய்தி பகுதியையும் பாதிக்கிறது. நீங்கள் ஸ்டைல் ​​செய்ய விரும்பும் பகுதி தேர்ந்தெடுக்கப்பட்டவுடன், கிளிக் செய்யவும் உடை திறப்பதற்கு கீழ்-வலது மூலையில் உள்ள பொத்தான் விதிகள் ரொட்டி:

எனக்கு தெரியும், முதலில் பயமாக இருக்கிறது. ஆனால் நீங்கள் தேர்ந்தெடுத்த உறுப்பை பாதிக்கும் பல்வேறு CSS விதிகளை இங்கே நீங்கள் பார்க்கிறீர்கள், மேலும் இங்கே நீங்கள் உங்கள் சொந்த தற்காலிக மாற்றங்களைச் செய்து, பக்கத்தை ரீலோட் செய்யாமல் நிகழ்நேரத்தில் அவற்றின் தாக்கத்தைக் காணலாம். ஆனால் நீங்கள் எதை மாற்ற வேண்டும்? என்பதை கிளிக் செய்யவும் பண்புகள் பொத்தான் மற்றும் தேர்வுநீக்கவும் பயனர் பாணிகள் மட்டுமே :

இங்கே நீங்கள் ஒரு முழுமையான பட்டியலைக் காணலாம் அனைத்து CSS விதிகள். உங்களுக்குத் தேவையானதை (எங்கள் வழக்கில் எழுத்துரு அளவு) அர்த்தமுள்ள ஒரு விதியைக் கண்டுபிடிக்கும் வரை நீங்கள் பட்டியலை கீழே உருட்டலாம், மேலும் விளக்கப் பக்கத்தைத் திறக்க அடுத்த கேள்விக்குறியைக் கிளிக் செய்யவும். எனவே, ஒரு வகுப்பைக் கொண்ட அனைத்து டிவி கூறுகளுக்கும் எழுத்துரு அளவிலான சொத்தை மாற்றியமைக்க விரும்புகிறோம் என்பது இப்போது எங்களுக்குத் தெரியும். ஜிஎஸ் (என சுருக்கமாக எழுதப்பட்டுள்ளது div.gs )

அதன் மதிப்பு என்னவாக இருக்க வேண்டும் என்பது மட்டுமே கேள்வி. அதற்காக, நாங்கள் விதிகள் பலகத்திற்கு திரும்பிச் சென்று விளையாடத் தொடங்குகிறோம்:

40 பிக்சல்கள் கொஞ்சம் பைத்தியமாக இருக்கலாம், ஆனால் உங்களுக்கு பொதுவான யோசனை கிடைக்கும். இதைச் சுற்றி விளையாடுங்கள், நீங்கள் விரும்பும் தோற்றத்தைப் பெறும் வரை வேறு எந்தப் பண்புகளையும் சேர்க்கலாம். உங்கள் மாற்றங்கள் இருப்பதால், பக்கத்தை மூட வேண்டாம் இல்லை எங்கும் சேமிக்கப்பட்டது.

உங்கள் புதிய பாணியைச் சேமிக்கிறது

தளத்தின் இந்தப் பகுதியை நீங்கள் விரும்பியதைப் போல் பார்த்தவுடன், அதைச் சேமிக்க வேண்டிய நேரம் இது. என்பதை கிளிக் செய்யவும் ஸ்டைலான செருகு நிரலில் உள்ள ஐகான் மற்றும் தேர்ந்தெடுக்கவும் புதிய பாணியை எழுதுங்கள் . ஸ்டைலிஷ் எந்தப் பக்கங்களில் புதிய பாணியைப் பயன்படுத்த வேண்டும் என்பதை அறிய விரும்புகிறது - எங்கள் விஷயத்தில், இரண்டாவது விருப்பத்தைத் தேர்ந்தெடுக்கவும், mail.google.com . அடுத்து, நீங்கள் இந்த உரையாடலைக் காண்பீர்கள்:

நான் ஏற்கனவே அதை நிரப்பியுள்ளேன். வெளிப்படையாக, நான் பாணிக்கு ஒரு பெயரையும் சில குறிச்சொற்களையும் தேர்ந்தெடுத்தேன். ஆனால் உண்மையான விஷயங்கள் குறியீட்டிற்குள் நடக்கிறது: வரி 3 ஏற்கனவே இருந்தது - ஸ்டைலிஷ் அதை இடத்தில் வைத்தது, அதனால் பாணி எந்தப் பக்கத்தில் பொருந்தும் என்று தெரியும். ஆனால் வரி 5-7 என்னுடையது. அவற்றை பகுப்பாய்வு செய்வோம்:

வரி 5: div.gs { - இந்த பகுதியை நீங்கள் அடையாளம் காண வேண்டும். இதுதான் நாங்கள் ஸ்டைல் ​​செய்ய முடிவு செய்த உறுப்பு. தொடக்க பிரேஸ் என்றால் நாம் இப்போது சில CSS விதிகளை எழுதப் போகிறோம். வரி 6: எழுத்துரு அளவு: 20px! முக்கியமானது; -நாம் மாற்ற விரும்பும் விதி (எழுத்துரு அளவு), அதன் பிறகு அதன் புதிய வரையறை (20 பிக்சல்கள்), பின்னர் ஒரு முக்கியமான அறிவிப்பு, அதாவது உரைக்கு நெருக்கமான ஒரு உறுப்பு அமைக்க முயன்றாலும் பயர்பாக்ஸ் இந்த விதிக்குக் கீழ்ப்படிய வேண்டும். எழுத்துரு அளவு வேறு ஏதாவது. வரி 7:} - பாணி வரையறையை மூடுகிறது.

அடுத்து, முன்னோட்டத்தைக் கிளிக் செய்து உங்கள் வேலையைப் பார்த்து ஆச்சரியப்படுங்கள்:

இறுதியாக, அது வேலை செய்கிறது என்று பார்த்தவுடன், கிளிக் செய்யவும் சேமி

இது ஒரு முழுமையான வழிகாட்டி அல்ல

இந்த குறுகிய டுடோரியலை ஒரு இடுகையின் எல்லைக்குள் வைத்திருக்க, நான் பல தாவல்கள் மற்றும் தாவல்களை செய்ய வேண்டியிருந்தது என்பதை நான் நன்கு அறிவேன். வழியில் நீங்கள் குழப்பமடைந்திருந்தால், தயவுசெய்து எனது மன்னிப்பை ஏற்றுக்கொள்ளுங்கள். CSS முதலில் தந்திரமானது, ஆனால் நீங்கள் அதைப் பயன்படுத்தியவுடன் இது மிகவும் சிக்கலானது அல்ல - மேலும் வலைத்தளங்களைத் தனிப்பயனாக்குவது கற்றுக்கொள்வதற்கான சிறந்த வழிகளில் ஒன்றாகும்.

நீங்கள் ஏதேனும் குழப்பத்தில் இருந்தால், தயவுசெய்து கீழே என்னிடம் கேளுங்கள், என்னால் முடிந்த உதவியைச் செய்வேன்.

இறந்த பிக்சல்களை எவ்வாறு சரிபார்க்கலாம்
பகிர் பகிர் ட்வீட் மின்னஞ்சல் உங்கள் மெய்நிகர் பாக்ஸ் லினக்ஸ் இயந்திரங்களை சூப்பர்சார்ஜ் செய்ய 5 குறிப்புகள்

மெய்நிகர் இயந்திரங்களால் வழங்கப்படும் மோசமான செயல்திறனால் சோர்வாக இருக்கிறதா? உங்கள் VirtualBox செயல்திறனை அதிகரிக்க நீங்கள் என்ன செய்ய வேண்டும் என்பது இங்கே.

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்
  • உலாவிகள்
  • இணைய மேம்பாடு
  • வெப்மாஸ்டர் கருவிகள்
  • மொஸில்லா பயர்பாக்ஸ்
  • கூகிள் குரோம்
  • வலை வடிவமைப்பு
எழுத்தாளர் பற்றி எரேஸ் ஜுகர்மேன்(288 கட்டுரைகள் வெளியிடப்பட்டன) எரெஸ் ஜுகர்மனிடமிருந்து மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்