உங்கள் வலைப்பதிவு டெம்ப்ளேட்டில் 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: பண்புக்கூறுகளுடன் சேர்க்கப்படும்).