કોઈ વ્યક્તિ ફક્ત CSS ઉમેરી શકે તેવું વિચારવું
વાસ્તવમાં ધારી રહ્યા છે કે તેઓ એક સુંદર ઢોળાવવાળા પર્વત પર ચઢવામાં સક્ષમ છે.
તમે વિઝ્યુઅલાઈઝ કરો છો તે ડિઝાઇનને સમાયોજિત કરવામાં સક્ષમ થવાથી, તમારી પાસે જે વિચાર છે તે બનાવો
અને તેને તમારા માટે યોગ્ય બનાવો.
આ શક્ય તેટલા વધુ લોકો દ્વારા શક્ય તેટલી સરળતાથી પ્રાપ્ત કરી શકાય તેવું હોવું જોઈએ.
તમે થોડા સરળ પગલાંનો ઉપયોગ કરીને તે કરી શકો છો.
અને આજે આપણે તેને આવરી લેવા જઈ રહ્યા છીએ.
પરંતુ પ્રથમ, ચાલો CSS શું છે તેની સાથે શરૂઆત કરીએ અને તેના વિશે થોડું.
હવે, આનો હેતુ CSS ખ્યાલોમાં ઊંડા ઉતરવાનો નથી.
ચાલો કેટલીક સરળ મૂળભૂત બાબતોને આવરી લઈએ અને તે અમને મદદ કરશે
અમે એડિટરમાં ડાઇવ કરીએ તે પહેલાં.
હવે તે "કાસ્કેડિંગ સ્ટાઇલ શીટ" માટે વપરાય છે
આનો અર્થ એ છે કે શૈલીઓ કેસ્કેડ અથવા પ્રવાહમાં વાંચે છે.
તમે બનાવો છો અને તમે CSSમાં કામ કરો છો તે વિશે વિચારવાની આ ચાવી છે.
ઉદાહરણ તરીકે, શૈલીનો પ્રવાહ શું છે?
અને તે અન્ય શૈલીઓ સાથે કેવી રીતે ક્રિયાપ્રતિક્રિયા કરે છે?
તમે ઓવરરાઇડ કરી શકો છો અથવા કાસ્કેડની ઉપર જઈ શકો છો
ઉદ્દગાર ચિહ્ન અથવા @important સ્ટેટમેન્ટનો ઉપયોગ કરીને.
જો કે, આ કરવામાં એક કેચ છે.
એક રૂમમાં બૂમો પાડવા જેવું થોડુંક વિચારો, જો તમારી પાસે ઘણી બધી ચીસો છે,
રૂમ ખરેખર ઘોંઘાટવાળો, મૂંઝવણભર્યો બને છે.
અને ઝડપથી, તમે કશું જ સાંભળી શકતા નથી
અને ખરેખર શું ચાલી રહ્યું છે તે સાંભળવામાં અસમર્થ.
સામાન્ય રીતે તેનો ઉપયોગ કરવો એ સારો વિચાર નથી અને તેને છેલ્લો ઉપાય ગણવો જોઈએ.
બે પ્રકારની શૈલીઓ છે.
આઇડી અથવા ID એ એકલ-ઉપયોગ અને વર્ગ, બહુવિધ-ઉપયોગ છે.
આ એક પ્રકારનું સરળ દૃશ્ય છે. પરંતુ ચાલો ત્યાંથી શરૂઆત કરીએ.
અમે થોડી આંતરિક માહિતી શોધીશું, તે કેવી રીતે વાંચવું તે અંગે થોડી ટીપ છે
જ્યારે તમારી પાસે આ રીતે બહુવિધ વર્ગો એકસાથે જોડાયા હોય.
કેટલાક અવકાશ સાથે, અમુક – કોઈ જગ્યા વિના એકસાથે જોડાયેલા,
અને માત્ર આના જેવા બિંદુઓ.
જો તમે બ્રેડક્રમ્સના સંદર્ભમાં તેના વિશે વિચારો છો, તો કદાચ,
અને તમે તેને કન્ટેનર તરીકે વાંચો છો
અને તે કાસ્કેડ પછી તેને વાંચો જેના વિશે અમે વાત કરી હતી
કારણ કે તેના વિશે વિચારવું થોડું સરળ છે.
તમારી પાસે કદાચ... તમારી પાસે અહીં અલગ વસ્તુઓ હોઈ શકે છે.
પણ ખરેખર તેના વિશે વિચારો
તમારી પાસે જે રેપર છે અથવા જે કન્ટેનર છે તેના સંદર્ભમાં.
અને તમારે વધારે ચિંતા કરવાની જરૂર નથી...
હમણાં, તેનાથી આગળ - તમે જોશો તે એક સામાન્ય વસ્તુ છે તે અંગે વાકેફ રહેવું.
તો ચાલો હવે જોઈએ કે આપણે આ શૈલીઓનું અન્વેષણ કેવી રીતે શરૂ કરી શકીએ
અને પછી તેમની સાથે વાતચીત કરવા માટે ખરેખર તપાસ કરવી.
આ ભાગ માટે, અમે Chrome નો, ખાસ કરીને, Chrome પર નિરીક્ષકનો ઉપયોગ કરવા જઈ રહ્યા છીએ.
જો તમે શૈલી શોધવા માંગતા હોવ તો આ ખૂબ જ ઉપયોગી છે.
અને અહીં અમારી પાસે એડિટર માટેનું ડેમો પેજ છે.
અને મેં બાજુની પેનલ્સ સાથે આ દૃશ્ય પર સેટ કર્યું છે.
જો તમે ઇચ્છો તો તમે વિવિધ દૃશ્યો ગોઠવી શકો છો.
નિરીક્ષક પાસે ઘણી બધી વિવિધ સુવિધાઓ અને સમગ્ર વર્કશોપ છે
માત્ર સુવિધાઓ કેવી રીતે સેટ કરવી અને તેનો ઉપયોગ કેવી રીતે કરવો તેના પર લખી શકાય છે
અને તેઓ પાસે છે – ઇન્સ્પેક્ટર પોતે.
હાલ માટે, હું તમને બતાવવા જઈ રહ્યો છું કે કોઈ ચોક્કસ વર્ગ કેવી રીતે શોધવો.
તો ચાલો સાઈટની આગળ જઈએ.
આ રહ્યું વીસ વીસ.
હું શોધવા માંગુ છું કે આ બ્લોકક્વોટ કયો વર્ગ ધરાવે છે.
તેથી હું આ "નિરીક્ષણ" પર ક્લિક કરવા જઈ રહ્યો છું.
અને હું ઉપર હોવર કરી શકું છું અને તમે જોઈ શકો છો કે આ ચેકબોક્સ અને તમે કેવી રીતે કરી શકો છો
આ ચેકબોક્સને ચાલુ અને બંધ કરો.
અને અહીં, તમે રીઅલ ટાઇમમાં તેમને હાઇલાઇટ કરેલા જોઈ શકો છો.
અને તમે તેમને બદલાતા પણ જોઈ શકો છો.
તેથી તમે કાસ્કેડની અંદર શું છે તેની એક પ્રકારની સમજ મેળવી શકો છો
અને તેમાં પણ શું ફેરફાર થાય છે.
અને એક વસ્તુ તમે કરી શકો છો, તમે ખરેખર અહીં ફેરફારો કરી શકો છો,
તેઓ સાચવેલી સાઇટને અસર કરશે નહીં,
પરંતુ તમે ખરેખર તેમને અહીં જોઈ શકો છો.
તેથી તમે એક શૈલી ઉમેરી શકો.
અને અમે હવે તે કરવા જઈ રહ્યા છીએ.
જો તમે એકદમ નવી શૈલી ઉમેરવા માંગતા હો, તો તમે સીધા ટોચ પર જશો,
જ્યાં તમે ઘટક શૈલી જુઓ છો,
અને આ તમારી પાસેની શૈલી પર લાગુ થાય છે.
તેથી જો આપણે બોર્ડર ડાબી બાજુએ કરવા માંગતા હોય, તો અમે અહીં એક સીમા બાકી રાખીશું.
ડાબી બાજુની સીમાનો અર્થ અહીં આ અવતરણની ડાબી બાજુની સરહદ છે.
અને પછી આપણે શું કરવા જઈ રહ્યા છીએ તે એ છે કે આપણે 4 પિક્સેલ્સ ઉમેરવા જઈ રહ્યા છીએ,
અમે નક્કર કરવા જઈ રહ્યા છીએ,
તેનો અર્થ એ છે કે નક્કર સરહદ અને તે જ રંગ છે.
હવે અમે પેડિંગ કરવા જઈ રહ્યા છીએ.
અમે બધી રીતે પેડિંગ કરવા જઈ રહ્યા છીએ અથવા અમારી પાસે તે અહીં છે.
પરંતુ અમે ફક્ત એક બાજુ પેડિંગ કરવા માંગીએ છીએ.
તો આપણે વાસ્તવમાં શું કરી શકીએ તે એ છે કે આપણે ખાસ કરીને પેડિંગ ડાબે કહી શકીએ,
અમે હવે આ જ કરવા જઈ રહ્યા છીએ.
અને પછી આપણે તેને વાસ્તવિક સમયમાં જોઈ શકીએ છીએ.
અમે શું કરવા જઈ રહ્યા છીએ તે એ છે કે આપણે તે શૈલીને સાચવીશું
અને અમે થોડી વાર પછી તેનો ઉપયોગ કરવાનું વિચારીશું.
એક વસ્તુ જે તમે કરી શકો તે ખરેખર નિરીક્ષક વિશે ધ્યાન આપવા માટે સરળ છે તે છે
વિવિધ સ્ક્રીન સાઇઝમાં જોવાનું.
અહીં તમે કદ બદલાતા જોઈ શકો છો.
તમે શું બનાવી રહ્યાં છો તેની ઝડપી તપાસ કરવા માટે આ ખરેખર મદદરૂપ રીત છે.
વાસ્તવિક ઉપકરણ પર ચેક ઇન કરવું ખૂબ સરસ છે,
પરંતુ કેટલીકવાર ઝડપી તપાસ પણ ઉપયોગી છે.
અથવા કદાચ તમારી પાસે તે ઉપકરણ નથી.
તેથી અમે જોયું છે કે તમે વર્ગ કેવી રીતે શોધી શકો છો.
પરંતુ તમે WordPress માં કસ્ટમ CSS ક્યાં મૂકી શકો છો?
સારું, જવાબ ઘણી જગ્યાએ છે.
પ્રથમ વિકલ્પ, વધારાના CSS નો ઉપયોગ કરીને કસ્ટમાઇઝર છે.
અહીં, તમે જોઈ શકો છો, તમે મૂળભૂત રીતે કસ્ટમાઇઝ અને પછી વધારાના CSS પર જાઓ છો.
અને તમારી પાસે કેટલીક મદદની માહિતી છે. તમે તેને અહીં ટાઈપ કરી શકો છો.
તમારી સાઇટમાં ચોક્કસ શૈલી ઉમેરવાની આ એક સરસ રીત છે
કોઈપણ ફાઇલોને સમાયોજિત કર્યા વિના.
અને જો તમે ફાઇલોને સંપાદિત કરવામાં સક્ષમ છો, તો વધારાના CSSમાંથી એક પગલું છે
થીમ ફાઇલોને સંપાદિત કરવા માટે, તમે થીમ એડિટર દ્વારા જ આ કરી શકો છો.
હવે, દેખાવમાંથી આને ક્લિક કરો.
અને તમે અહીં જોશો, તે ખરેખર અહીં કેટલીક માહિતી ધરાવે છે જે કહે છે,
શું તમે જાણો છો કે તમે બિલ્ટ-ઇન CSS એડિટરનો ઉપયોગ કરીને આ કરી શકો છો
અને તે ફેરફારોનું પૂર્વાવલોકન કરો
તેથી તે વાસ્તવમાં તમને તે રીતે કરવા માટે પ્રોત્સાહિત કરે છે જે અમે પહેલાં કર્યું હતું.
કારણ કે આ વધુ કાયમી સંપાદન છે.
તમે થીમ પર જ સીધી અસર કરી રહ્યા છો.
અલબત્ત, આખરી રીત એ છે કે થીમમાં જાતે ફાઇલ ઉમેરીને.
આ ખરેખર એવી વસ્તુ છે જેની તમારે સર્વર ઍક્સેસ હોવી જરૂરી છે
અને થીમના જ કોડમાં ઊંડા ઉતરો.
આ વર્કશોપના હેતુ માટે, અમે વધારાના CSSનો ઉપયોગ કરવા પર ધ્યાન કેન્દ્રિત કરવા જઈ રહ્યા છીએ.
તેથી તે ખૂબ વ્યાપક વિહંગાવલોકન છે.
તો હવે માત્ર ડાઇવ કરવા અને બનાવવાનું શરૂ કરવાનો સારો સમય છે.
એક પ્રારંભિક બિંદુ એ ડિફોલ્ટ થીમ ટ્વેન્ટી ટ્વેન્ટીનો ઉપયોગ કરવા જઈ રહ્યો છે.
આપણી પોતાની શૈલી બનાવવા માટે આ એક ઉત્તમ સ્થળ છે.
પણ આપણે શું કરવાના છીએ?
અમે જે કરવા જઈ રહ્યા છીએ તે એ છે કે આપણે એકદમ નવો વર્ગ બનાવવા જઈ રહ્યા છીએ.
અને પછી અમે તેને થોડા બ્લોક્સમાં ઉમેરીશું
એડિટરમાં અદ્યતન ફીલ્ડનો ઉપયોગ કરીને.
પછી અમે હાલના બ્લોક ક્લાસ માટે કસ્ટમ શૈલી બનાવીશું.
તો ચાલો બ્લોક્સમાં વર્ગ ઉમેરવાનું શરૂ કરીએ.
તેથી આ ખરેખર એક સરળ વર્ગ હશે જે હાઇલાઇટ પૃષ્ઠભૂમિ બનાવે છે,
ખરેખર સરળ.
તે માત્ર એક અલગ પૃષ્ઠભૂમિ રંગ અને થોડું પેડિંગ છે.
તો અમે આને સાચવવા જઈ રહ્યા છીએ, તે માત્ર અડધી વાર્તા છે.
ચાલો એડિટરમાં જઈએ અને આ અદ્યતન ફીલ્ડ જોઈએ.
અને પછી આ, આપણે અહીં એક વર્ગ ઉમેરી શકીએ છીએ,
અમે આને કેટલાક બ્લોક્સમાં ઉમેરીશું.
અને તમે કદાચ આશ્ચર્ય પામી રહ્યા હશો, તે કંઈ કરે તેવું લાગતું નથી.
પરંતુ અમે અપડેટ કરીશું અને પછી અમે પૂર્વાવલોકન કરીશું.
અને આપણે ત્યાં છીએ!
મેં બ્લોકમાં ઉમેરેલા વર્ગોમાં તમે તફાવત જોઈ શકો છો.
તમે અહીં કરી શકો તેવી ઘણી બધી શક્યતાઓ છે.
તે ખરેખર ઉપયોગી ફીલ્ડ છે.
પણ, બોનસ પોઇન્ટ!
ચાલો નાની સ્ક્રીન પર આપણે જે કામ કર્યું છે તે તપાસીએ.
અમે અમારું કામ ક્યાં તપાસી શકીએ તે નિરીક્ષકમાં અગાઉથી યાદ છે?
સારું, ચાલો તે કરીએ.
ચાલો તપાસ કરીએ કે અમે હમણાં શું કર્યું.
તેથી તે એક જ પૃષ્ઠ છે.
અમે શું કરવા જઈ રહ્યા છીએ તે આપણે આ તપાસવા જઈ રહ્યા છીએ
ખાતરી કરવા - તે ખરેખર છે -
કારણ કે અમારી પાસે પેડિંગ હતું, અમે ખાતરી કરવા માંગીએ છીએ
કે તે નાના ઉપકરણો પર કામ કરે છે
આ ખરેખર સારી રીત છે, ખાસ કરીને જ્યારે આપણે આસપાસ રમતા હોઈએ ત્યારે
પેડિંગ અને માર્જિન અને વિવિધ શૈલીઓ સાથે, તેની ખાતરી કરવા માટે કે તે તૂટી ન જાય
કંઈપણ અને તેનાથી તે અલગ-અલગ ઉપકરણો પર કોઈ સમસ્યા ઊભી થઈ નથી.
તો, ચાલો CSS અને સંપાદકની દુનિયામાં થોડા ઊંડા જઈએ.
ચાલો એક કસ્ટમ શૈલી બનાવીએ જે હાલની શૈલીને ઓવરરાઇડ કરે છે.
આ પહેલાથી યાદ છે?
જ્યારે અમે ઇન્સ્પેક્ટરમાં હતા, ત્યારે અમે થોડી ડાબી બાજુએ એક બોર્ડર ઉમેરી હતી
સમાન કરવા માટે પેડિંગનો થોડો ભાગ.
ચાલો ખરેખર તેને આપણી થીમમાં જ એક શૈલી બનાવીએ.
તો સૌ પ્રથમ, અમે જાણવા માંગીએ છીએ કે આ ખરેખર કયો વર્ગ છે.
તેથી અમે જવાના છીએ – આ વખતે આપણે પોતે એડિટરમાંથી પસાર થઈ રહ્યા છીએ,
સાઇટની આગળ જવાને બદલે.
હવે જ્યારે આપણે આ કરીએ છીએ, ત્યારે ત્યાં એક વિશિષ્ટ રેપર છે જેને અમે અમારામાં શામેલ કરવા માંગીએ છીએ
કસ્ટમ શૈલી, કારણ કે તે એક વિશિષ્ટ રેપર છે જે ફક્ત સંપાદક માટે છે.
અને તે એડિટર સ્ટાઇલ રેપર છે.
તેથી અમે ઇચ્છીએ છીએ કે જ્યારે અમે શૈલી પસંદ કરીએ ત્યારે તે ન હોય.
હું તમને એડિટરનો ઉપયોગ બતાવું છું, ખાસ કરીને પસંદ કરવા માટે, કારણ કે તે માત્ર એક ઝડપી રીત છે
બસ ઘણાં બધાં બ્લોક્સ ઉમેરવા અને ખરેખર વિવિધ શૈલીઓનું પરીક્ષણ કરવા માટે.
અને જો તમને આ ટિપ યાદ હોય, તો તેને છોડી દેવાની આ એક સારી રીત છે
જ્યારે તમે ઇન્સ્પેક્ટરનો ઉપયોગ કરી રહ્યાં હોવ.
તેથી જો તમે જુઓ, તો તે wp-block-quote.is-style-large છે
અને તે બિંદુઓ એકસાથે છે
આગળ જવાનું યાદ રાખવું આપણા માટે ખરેખર મહત્વનું છે,
કારણ કે અમને આ અવતરણ માટે "મોટી" શૈલી પસંદ કરવામાં આવી છે.
ઠીક છે, તેથી અમે આને વધારાના CSSમાં લઈ જઈશું, અને અમે તેને અહીં ઉમેર્યું છે
તેથી અમે તેને ઉમેરીશું.
તેથી અમારી પાસે આ વર્ગ છે.
અને પછી, તમે આ રહ્યા છો!
કસ્ટમ શૈલી હવે બ્લોગ પર દેખાય છે.
ખૂબ સરસ, નહીં?
જેમ તમે વર્ગમાં જોઈ શકો છો, તેણે તે તરત જ પસંદ કર્યું.
અને પછી અહીં અમારી પાસે તે સાઇટના આગળના ભાગમાં પણ છે.
એ જ રીતે છે.
વધારાના CSSનો ઉપયોગ કરવો અને તેને માત્ર ઇન્સ્પેક્ટર સાથે પસંદ કરવાનું ખરેખર સરળ છે.
જેમ તમે જોઈ શકો છો, તેને બનાવવા માટે CSS નો ઉપયોગ કરવાની ઘણી બધી શક્યતાઓ છે
તમે બ્લોક્સ અને તેનાથી વધુ માટે ઇચ્છો છો તે સંપૂર્ણ શૈલી.
અને તે હંમેશા કેટલીક બાબતો પર આવે છે.
નિરીક્ષકનો ઉપયોગ કરો અને તમે જે સ્ટાઇલ કરવા માંગો છો તે બરાબર શોધો.
ત્યાં કામ કરો.
યાદ રાખો, તેને કારણસર કેસ્કેડીંગ કહેવામાં આવે છે.
અને આ ખરેખર તમને તે વસ્તુને ડીબગ કરવામાં અને શોધવામાં મદદ કરે છે.
ક્લાસને બ્લોક પર લાગુ કરવા માટે બિલ્ટ-ઇન CSS ફીલ્ડનો ઉપયોગ કરો.
તે ખરેખર, ખરેખર શક્તિશાળી સાધન છે જેનો તમે ઉપયોગ કરી શકો છો.
હંમેશા નાના ઉપકરણો પર પૂર્વાવલોકન કરો.
અને જ્યારે તમે કંઈક બનાવો છો, ત્યારે તે વધારાનું પગલું ભરો.
અને તમે તેના માટે ઇન્સ્પેક્ટરનો ઉપયોગ કરી શકો છો.
વધારાની CSSનો ઉપયોગ કરો. તે સલામત વિકલ્પ છે,
અને તે તમારા માટે પણ ખરેખર શક્તિશાળી વિકલ્પ છે.
અને સૌથી વધુ, મજા કરો અને પ્રયોગ કરો.
કારણ કે મને આશા છે કે મેં કેટલાક ખરેખર નાના ફેરફારો અને ખરેખર ઝડપી અપડેટ્સ દર્શાવ્યા છે.
તમે ખરેખર તમારી થીમ અને કસ્ટમાઇઝરને અનુકૂલિત કરી શકો છો –
અને બધું તમે જે ઇચ્છો છો તે બરાબર હોવું જોઈએ.
ખૂબ આભાર.
કસ્ટમાઇઝ કરવાની મજા માણો!