మీ బ్లాగ్ యొక్క టెంప్లేట్ CSSతో టెంప్లేట్ డిజైనర్ని ఉపయోగించడానికి, మీరు ఫాలో కావాల్సిన కొన్ని మార్గదర్శకాలు ఉన్నాయి.
వేరియబుల్స్ సెటప్ చేయండి
మీ కోడ్లోని <head>
విభాగంలో, మీకు <b:skin> </b:skin>
ట్యాగ్ల పెయిర్ ఉండాలి.
CSS స్టైల్ ప్రకటనలు ఆ ట్యాగ్ల మధ్యలో అలాగే ఫాంట్లు, రంగుల పేజీతో మీ డిజైన్ని పని చేసే విధంగా వేరియబుల్ పేర్లతో ఉంటాయి.
<head>
...
<b:skin>
<style type='text/css'>
/*
* Variable definitions:
* <Variable name='bgcolor' description='Page Background Color'
type='color' default='#fff'/>
*/
body {
background: $bgcolor;
margin: 0;
padding: 40px 20px;
}
</style>
</b:skin>
</head>
/* మరియు */ కామెంట్ ట్యాగ్ల మధ్యలో ఉండే CSS కోడ్ మీ బ్లాగ్లో చూపబడదు.
ఇక్కడ వివిధ వేరియబుల్ల లిస్ట్ ఉంటుంది, మీరు “ఫాంట్లు, రంగులు” ట్యాబ్లో ఎడిట్ చేయాలనుకునే ప్రతి ఫాంట్ లేదా రంగు కోసం ఒకటి ఉంటుంది. పైన ఉదాహరణలో చూపించిన సమాచారం కోసం ప్రతి వేరియబుల్ అవసరం, ఇక్కడ వివరించబడ్డాయి:
- పేరు – అక్షరాలు లేదా సంఖ్యలు ఉండవచ్చు. మీ టెంప్లేట్లోని ప్రతి పేరు భిన్నంగా ఉండాలి.
- వివరణ – “ఫాంట్లు, రంగులు" విభాగంలో చూపడానికి వివరణను యాడ్ చేయండి.
- రకం – "ఫాంట్" లేదా "రంగు".
- డిఫాల్ట్ – డిఫాల్ట్ విలువ. రంగుల కోసం, ఇది హెక్సాడెసిమల్ రంగు కోడ్ని కలిగి ఉండాలి, ఉదాహరణకు #FF0066. ఫాంట్ల కోసం, ఇది ఫారమ్ ఫాంట్-స్టైల్ ఫాంట్-మందం ఫాంట్-సైజ్ ఫాంట్-ఫ్యామిలీ లిస్ట్గా ఉంటుంది .
వేరియబుల్స్ని ఉపయోగించండి
వేరియబుల్స్ సెటప్ చేసిన తర్వాత, మీరు ఒక వేరియబుల్ విలువను ఉపయోగించాలనుకున్నప్పుడు, b:skin
cssలోని $variable_name
ని ఎంటర్ చేయండి.
టెంప్లేట్ డిజైనర్లో నిర్దిష్ట CSS వేరియబుల్ రకాల సెట్ కోసం ఎడిటింగ్ సపోర్ట్ ఉంటుంది. వేరియబుల్ రకాన్ని సెట్ చేయడానికి:
- రంగు వేరియబుల్లు టెంప్లేట్ డిజైనర్లో ఎంపిక కోసం రంగుల పాలెట్ని అందిస్తాయి.
- ఫాంట్ వేరియబుల్లు అన్నవి టెంప్లేట్ డిజైనర్లో మందం, బోల్డ్ లేదా ఇటాలిక్ ఆప్షన్లతో ఫాంట్ సెలెక్షన్ని అందిస్తుంది.
పైన ఉదాహరణలో, bgcolor
వేరియబుల్ ఉంది, ఇది తెలుపు రంగు (#fff)కి సెట్ చేసి ఉంది. తర్వాతి కోడ్లో, ఇలా చెబుతుంది: background: $bgcolor.
ఇది బ్యాక్గ్రౌండ్ని తెలుపు రంగుకి మారుస్తుంది, మీరు దీనిని “ఫాంట్లు, రంగులు” విభాగంలో మార్చవచ్చు.
గమనిక: ఇతర రకాల CSS లక్షణాల కోసం, మీరు వేరియబుల్స్ క్రియేట్ చేయాల్సిన అవసరం లేదు. సాధారణంగా ఉండే మాదిరిగా వీటిని CSSలో జోడించవచ్చు (ఎగువ ఉదాహరణలో margin:
, padding:
లక్షణాలతో ఉన్నట్లుగా).