એડિટરમાં કસ્ટમ CSS

ભણવાના પરિણામો

1. ક્રોમ માં ઇન્સ્પેક્ટરનો ઉપયોગ કરીને શૈલી શોધવી.
2. સમજણ બ્લોક્સમાં CSS હોય છે.
3. અદ્યતન CSS ઇનપુટ ફીલ્ડનો ઉપયોગ કરીને.
4. CSS ની મૂળભૂત બાબતો: વારસો, પ્રવાહ, બ્રેકિંગ ફ્લો, રંગો.
5. કસ્ટમાઇઝર અને થીમ એડિટમાં તમારી થીમમાં કસ્ટમ CSS કેવી રીતે ઉમેરવું તે બતાવી રહ્યું છે

સમજણના પ્રશ્નો

એવું વિચારીને કે કોઈ વ્યક્તિ ફક્ત CSS ઉમેરી શકે છે, તે વાસ્તવમાં ધારી રહ્યું છે કે તેઓ એક સુંદર બેહદ પર્વત પર ચઢી શકે છે. સમાયોજિત કરવામાં સક્ષમ હોવાને કારણે, તમે તમારી પાસે જે ID ને વિઝ્યુઅલાઈઝ કરો છો તે ડિઝાઇન બનાવો અને તેને તમારા માટે યોગ્ય બનાવો. આ શક્ય તેટલા વધુ લોકો દ્વારા શક્ય તેટલી સરળતાથી પ્રાપ્ત કરી શકાય તેવું હોવું જોઈએ. તમે થોડા સરળ પગલાઓનો ઉપયોગ કરીને તે કરી શકો છો. અને તે જ આપણે આજે આવરી લેવા જઈ રહ્યા છીએ. પરંતુ પ્રથમ, ચાલો CSS શું છે તેની સાથે અને તેના વિશે થોડું શરૂ કરીએ.

હવે, આનો હેતુ CSS વિભાવનાઓમાં ઊંડા ડૂબકી મારવાનો નથી. આમાં કેટલીક સરળ મૂળભૂત બાબતો આવરી લેવામાં આવી છે, જે સંપાદકમાં ડૂબકી મારતા પહેલા અમને મદદ કરશે. હવે તે “કાસ્કેડીંગ સ્ટાઇલ શીટ” માટે વપરાય છે. આનો અર્થ એ છે કે શૈલીઓ કાસ્કેડ અથવા પ્રવાહમાં વાંચે છે. તમે બનાવો ત્યારે આ વિશે વિચારવાની ચાવી છે. અને જેમ તમે CSS માં કામ કરો છો, ઉદાહરણ તરીકે, શૈલીનો પ્રવાહ શું છે અને તે અન્ય શૈલીઓ સાથે કેવી રીતે ક્રિયાપ્રતિક્રિયા કરે છે, તમે ઉદ્ગારવાચક ચિહ્ન અથવા “મહત્વપૂર્ણ” નિવેદનનો ઉપયોગ કરીને કાસ્કેડને ઓવરરાઇડ કરી શકો છો અથવા ઉપર જઈ શકો છો. જો કે, આ કરવામાં એક કેચ છે. રૂમમાં બૂમો પાડવા જેવું થોડુંક વિચારો. જો તમારી પાસે ઘણી બધી બૂમો હોય, તો રૂમ ખરેખર ઘોંઘાટવાળો, મૂંઝવણભર્યો અને ઝડપથી બને છે, તમે કંઈપણ સાંભળી શકતા નથી અને ખરેખર શું થઈ રહ્યું છે તે સાંભળવામાં અસમર્થ છો, સામાન્ય રીતે તેનો ઉપયોગ કરવો એ સારો વિચાર નથી અને તેને છેલ્લો ઉપાય માનવામાં આવવો જોઈએ.

તો ચાલો હવે જોઈએ કે આપણે આ શૈલીઓનું અન્વેષણ કેવી રીતે શરૂ કરી શકીએ અને પછી તેમની સાથે ક્રિયાપ્રતિક્રિયા કરવા માટે ખરેખર તપાસ કરી શકીએ. આ ભાગ માટે, અમે ક્રોમ નો ઉપયોગ કરવા જઈ રહ્યા છીએ, ખાસ કરીને, નિરીક્ષણ ક્રોમ. જો તમે શૈલી શોધવા માંગતા હોવ તો આ ખૂબ ઉપયોગી છે. અને અહીં અમારી પાસે એડિટર માટેનું ડેમો પેજ છે. અને મેં પેનલ સાથે આ દૃશ્યને કહ્યું કે જો તમે ઇચ્છો તો તમે જુદા જુદા દૃશ્યોને ગોઠવી શકો છો. નિરીક્ષક પાસે ઘણી બધી વિવિધ વિશેષતાઓ છે. અને આખી વર્કશોપ માત્ર કેવી રીતે સુયોજિત કરવી અને તેની અંદર સુવિધાઓનો ઉપયોગ કેવી રીતે કરવી તેના પર લખી શકાય છે અને તેમાં નિરીક્ષક પોતે હોય છે.

જો તમે એકદમ નવી શૈલી ઉમેરવા માંગતા હો, તો તમે સીધા ટોચ પર જશો, તમે તત્વ શૈલી શું જુઓ છો તે જુઓ, અને આ તમારી પાસેની શૈલી પર લાગુ થાય છે. તેથી જો આપણે બોર્ડર લેફ્ટ કરવા માંગીએ છીએ, તો અમે અહીં છોડીને બોર્ડર કરવા જઈ રહ્યા છીએ.

બૉર્ડર લેફ્ટ એટલે અહીં આ અવતરણની ડાબી બાજુએ એક કિનારી. અને પછી આપણે જે કરવા જઈ રહ્યા છીએ તે એ છે કે આપણે ચાર પિક્સેલ્સ કરવાના છીએ, આપણે નક્કર કરવા જઈ રહ્યા છીએ, તેનો અર્થ એ છે કે નક્કર સરહદ અને તે રંગ છે. હવે આપણે પેડિંગ કરવા જઈ રહ્યા છીએ, તેઓ બધી રીતે પેડિંગ કરવા જઈ રહ્યા છે, અમારી પાસે તે અહીં છે, પરંતુ અમે ફક્ત એક બાજુ પેડિંગ કરવા માંગીએ છીએ. તેથી આપણે ખરેખર શું કરી શકીએ છીએ તે એ છે કે આપણે વાસ્તવમાં પેડિંગ ડાબી બાજુએ કહી શકીએ છીએ, તે જ આપણે હવે કરવા જઈ રહ્યા છીએ અને પછી આપણે તેને વાસ્તવિક સમયમાં જોઈ શકીએ છીએ.

અમે શું કરવા જઈ રહ્યા છીએ તે એ છે કે અમે તે શૈલીને સાચવવા જઈ રહ્યા છીએ અને અમે થોડી વાર પછી તેનો ઉપયોગ કરવાનું વિચારીશું. એક વસ્તુ જે તમે કરી શકો છો તે નિરીક્ષક વિશે ધ્યાન આપવા માટે ખરેખર સરળ છે જે વિવિધ સ્ક્રીન કદમાં જોવાનું છે. અહીં તમે કદ બદલાતા જોઈ શકો છો. તમે શું બનાવી રહ્યા છો તેના પર ઝડપી તપાસ મેળવવાની આ ખરેખર મદદરૂપ રીત છે વાસ્તવિક ઉપકરણ પર ચેક ઇન કરવું ખૂબ સરસ છે. પરંતુ કેટલીકવાર ઝડપી તપાસ પણ ઉપયોગી છે. અથવા કદાચ તમારી પાસે તે ઉપકરણ નથી. તેથી અમે જોઈ રહ્યા છીએ કે તમે વર્ગ કેવી રીતે શોધી શકો છો. પરંતુ તમે વર્ડપ્રેસ માં કસ્ટમ CSS ક્યાં મૂકી શકો છો? ઠીક છે, જવાબ તદ્દન થોડા સ્થળો છે. પ્રથમ “અતિરિક્ત CSS” વિકલ્પનો ઉપયોગ કરીને કસ્ટમાઇઝર છે. અહીં, તમે જોઈ શકો છો, તમે મૂળભૂત રીતે કસ્ટમાઇઝર પર જાઓ છો, અને પછી “વધારાની CSS” અને તમારી પાસે કેટલીક મદદરૂપ માહિતી છે, તમે તેને અહીં ટાઈપ કરી શકો છો. કોઈપણ ફાઇલોને સમાયોજિત કર્યા વિના તમારી સાઇટમાં ચોક્કસ સાઇટ ઉમેરવાની આ એક સરસ રીત છે. અને જો તમે ફાઇલોને સંપાદિત કરવામાં સક્ષમ છો, તો વધારાના CSS માંથી આગળનું પગલું થીમ ફાઇલોને સંપાદિત કરવાનું છે. તમે થીમ એડિટર દ્વારા જ આ કરી શકો છો.

હવે તમે દેખાવમાંથી આને ક્લિક કરી શકો છો, અને તમે અહીં જોશો કે તે ખરેખર અહીં કેટલીક માહિતી ધરાવે છે જે કહે છે કે, શું તમે જાણો છો કે તમે બિલ્ટ ઇન CSS એડિટરનો ઉપયોગ કરીને આ કરી શકો છો અને તે ફેરફારોનું પૂર્વાવલોકન કરી શકો છો. તેથી તે વાસ્તવમાં તમને તે રીતે કરવા માટે પ્રોત્સાહિત કરે છે જે અમે પહેલા કર્યું હતું કારણ કે તે વધુ કાયમી સંપાદન છે, તમે થીમને જ સીધી અસર કરી રહ્યાં છો.

એક અંતિમ રીત અલબત્ત, થીમમાં જ ફાઇલ ઉમેરીને છે. આ ખરેખર એવી વસ્તુ છે જેના માટે તમારે આશ્ચર્ય કરવાની જરૂર છે અને થીમના કોડમાં જ ઊંડાણપૂર્વક ડાઇવિંગ કરવાની જરૂર છે. આ વર્કશોપના હેતુ માટે, અમે વધારાના CSS નો ઉપયોગ કરવા પર ધ્યાન કેન્દ્રિત કરવા જઈ રહ્યા છીએ. તેથી તે એક સુંદર વિશાળ ઝાંખી છે.

તેથી હવે માત્ર ડાઇવ કરવાનો અને એક પ્રારંભિક બિંદુ બનાવવાનું શરૂ કરવાનો સારો સમય છે જે ડિફોલ્ટ થીમ 2020 નો ઉપયોગ કરી રહ્યું છે. આ પછી આપણી પોતાની સામગ્રી બનાવવા માટે આ એક શ્રેષ્ઠ સ્થળ છે. પરંતુ આપણે શું કરવા જઈ રહ્યા છીએ, પ્રથમ વસ્તુ જે આપણે કરવા જઈ રહ્યા છીએ તે એ છે કે આપણે એકદમ નવો વર્ગ બનાવવા જઈ રહ્યા છીએ. અને પછી અમે સંપાદકમાં અદ્યતન ફીલ્ડનો ઉપયોગ કરીને તેને થોડા બ્લોગ્સમાં ઉમેરવા જઈ રહ્યા છીએ, પછી અમે અસ્તિત્વમાંના બ્લોગ વર્ગ માટે કસ્ટમ શૈલી બનાવીશું. તો ચાલો બ્લોક્સમાં વર્ગ ઉમેરવાનું શરૂ કરીએ. તેથી આ ખરેખર એક સરળ વર્ગ બનશે જે હાઇલાઇટ પૃષ્ઠભૂમિ બનાવે છે, ખરેખર સરળ, માત્ર અલગ પૃષ્ઠભૂમિ રંગ અને થોડું પેડિંગ છે. તેથી અમે આને સાચવવા જઈ રહ્યા છીએ, તે માત્ર અડધી વાર્તા છે. ચાલો એડિટરમાં લાઈવ જઈએ અને આ અદ્યતન ફીલ્ડ જોઈએ. અને પછી આ, અમે અહીં એક વર્ગ ઉમેરી શકીએ છીએ, અમે તેને થોડા બ્લોકમાં ઉમેરીશું. અને તમે આશ્ચર્ય પામી શકો છો, કંઈપણ કરવાનું વલણ રાખતું નથી. તેથી હું જાઉં છું કે અમે અપડેટ કરીશું અને પછી અમે પૂર્વાવલોકન કરીશું. અને અમે ત્યાં છીએ, તમે બ્લોક્સમાં મેં ઉમેરેલા વર્ગોમાં તફાવત જોઈ શકો છો. તમે અહીં કરી શકો તેવી ઘણી બધી શક્યતાઓ હતી. તે અહીં ખરેખર ઉપયોગી ક્ષેત્ર છે. પરંતુ બોનસ પોઈન્ટ્સ, ચાલો નાની સ્ક્રીન પર તપાસ કરીએ કે જે કામ આપણે આ સ્પેક્ટરમાં પહેલાથી યાદ રાખ્યું હતું, જ્યાં આપણે આપણું કામ ચકાસી શકીએ અથવા તે કરીએ, ચાલો આપણે હમણાં શું કર્યું તે તપાસીએ. તેથી તે તે જ પૃષ્ઠ છે, જ્યાં અમે કરવા જઈ રહ્યા છીએ તે ખાતરી કરવા માટે અમે આને તપાસવા જઈ રહ્યા છીએ કે ખાસ કરીને કારણ કે અમારી પાસે પેડિંગ હતું, અમે ખાતરી કરવા માંગીએ છીએ કે તે નાના ઉપકરણો પર કામ કરે છે. અને આ ખરેખર સારી રીત છે, ખાસ કરીને જ્યારે અમે પેડિંગ, માર્જિન્સ અને વિવિધ શૈલીઓ સાથે રમતા હોઈએ છીએ તેની ખાતરી કરવા માટે કે તે કંઈપણ તૂટતું નથી અને તે તે વિવિધ ઉપકરણો પર કોઈ સમસ્યા ઊભી કરતું નથી. તો ચાલો CSS અને સંપાદકની દુનિયામાં થોડા ઊંડા જઈએ. ચાલો એક કસ્ટમ શૈલી બનાવીએ જે હાલની શૈલીને ઓવરરાઇડ કરે છે. સદસ્ય, આ પહેલાની વાત છે, જ્યારે અમે નિરીક્ષણમાં હતા, ત્યારે અમે ડાબી બાજુએ એક બોર્ડર ઉમેરી હતી જેમાં સમીકરણ માટે થોડું પેડિંગ હોય છે, ચાલો ખરેખર તેને અમારી થીમમાં જ એક શૈલી બનાવીએ. તો સૌ પ્રથમ, આપણે એ જાણવા માંગીએ છીએ કે આ ખરેખર કયો વર્ગ છે. તેથી અમે જઈશું, આ વખતે અમે સાઇટની આગળ જવાને બદલે સંપાદકમાંથી જ જઈ રહ્યા છીએ.

હવે જ્યારે આપણે આ કરીએ છીએ, ત્યાં એક વિશિષ્ટ રેપર છે જેને અમે અમારી કસ્ટમ શૈલીમાં શામેલ કરવા માંગીએ છીએ, કારણ કે તે એક વિશિષ્ટ રેપર છે જે ફક્ત સંપાદક માટે જ છે. અને તે એડિટર સ્ટાઇલ રેપર છે. તેથી જ્યારે અમે શૈલી પસંદ કરીએ છીએ ત્યારે અમે તે ન રાખવા માંગીએ છીએ. હું તમને એડિટરનો ઉપયોગ કરીને બતાવું છું, ખાસ કરીને પસંદ કરવા માટે કારણ કે તે ફક્ત ઘણાં બધાં બ્લોક્સ ઉમેરવા અને ખરેખર વિવિધ શૈલીઓનું પરીક્ષણ કરવાની એક ઝડપી રીત છે. અને જો તમને આ ટિપ યાદ છે, તો જ્યારે તમે ઇન્સ્પેક્ટરનો ઉપયોગ કરી રહ્યાં હોવ ત્યારે તેને છોડી દેવાનો એક સારો રસ્તો છે. તેથી જો તમે જોશો તો WP બ્લોકક્વોટ શૈલી મોટી છે, અને તે બિંદુઓ એકસાથે આપણા માટે આગળ જતા યાદ રાખવા માટે ખરેખર મહત્વપૂર્ણ છે કારણ કે અમને આ ક્વોટ માટે વિશાળ શૈલી પસંદ કરવામાં આવી છે. ઠીક છે, તેથી અમે આને વધારાના CSSમાં લઈ જઈશું, અને અમે તેને અહીં ઉમેર્યું છે તેથી અમે તેને ઉમેરવા જઈ રહ્યા છીએ. તેથી અમારી પાસે આ વર્ગ છે અને પછી હે મિત્રો, તે બ્લોગ પર કસ્ટમ સાઇન આઉટ છે. ખૂબ સરસ, તે નથી. જેમ તમે કેશમાં જોઈ શકો છો, તે તરત જ બહાર નીકળી જાય છે. અને પછી અહીં અમારી પાસે તે સાઇટના આગળના ભાગમાં પણ છે. તે બરાબર તે રીતે છે. વધારાના CSSનો ઉપયોગ કરવો અને તેને માત્ર નિરીક્ષક સાથે પસંદ કરવાનું ખરેખર સરળ છે. તેથી જેમ તમે જોઈ શકો છો, બ્લોક્સ અને તેનાથી આગળ તમે ઇચ્છો છો તે સંપૂર્ણ શૈલી બનાવવા માટે CSS નો ઉપયોગ કરીને ઘણી બધી શક્યતાઓ છે. અને તે પહેલાથી જ કેટલીક વસ્તુઓ પર આવે છે. તમે નિરીક્ષકને જુઓ અને તેમાં તમે જે પ્રકારનું કાર્ય કરવા માંગો છો તે બરાબર શોધો. યાદ રાખો, તેને કારણસર કેસ્કેડીંગ કહેવામાં આવે છે. અને આ ખરેખર તમને ડીબગ કરવામાં અને તે વસ્તુ શોધવામાં મદદ કરે છે. વર્ગને અવરોધિત કરવા માટે તે CSS ફીલ્ડનો ઉપયોગ કરો જે તેમાં બનેલ છે તે ખરેખર, ખરેખર શક્તિશાળી સાધન છે જેનો તમે ઉપયોગ કરી શકો છો. હંમેશા નાના ઉપકરણો પર પૂર્વાવલોકન કરો અને, અને જ્યારે તમે કંઈક બનાવી શકો છો, ત્યારે તે વધારાના પગલા પર જાઓ અને તમે તેના માટે નિરીક્ષકનો ઉપયોગ કરી શકો છો. વધારાના CSS પસંદ કરો, તે એક સુરક્ષિત વિકલ્પ છે અને તે તમારા માટે પણ ખરેખર શક્તિશાળી વિકલ્પ છે. અને સૌથી ઉપર, આનંદ કરો અને પ્રયોગ કરો, કારણ કે મને આશા છે કે મેં તે કેટલાક ખરેખર નાના ફેરફારો અને ખરેખર ઝડપી અપડેટ્સ સાથે બતાવ્યું છે. તમે ખરેખર તમારી થીમ અને કસ્ટમાઇઝર અને દરેક વસ્તુને તમે જે ઇચ્છો છો તે બરાબર અનુકૂલિત કરી શકો છો. તમારો ખૂબ ખૂબ આભાર. આનંદ કસ્ટમાઇઝ કરો