مسج واجهة المستخدم موضوع التصميم
هيكل ملف
الموضوع هو طريقة محددة لزيادة سهولة استخدامها. عادة، بنية الدليل الملف كما يلي:
-
themename/- الموضوع الخاص بك يجب أن يرد بشكل كامل في اسم الموضوع منفصل يسمى المجلد. -
themename/themename.css- وهذا هو ملف CSS الأساسي. بغض النظر عن المكونات الإضافية، ويجب الإشارة الملف في كل صفحة من الصفحات باستخدام الموضوعات. يجب أن يكون الملف خفيفة الوزن، ويشمل فقط النقاط الرئيسية. -
themename/themename.pluginname.css- كل القطعة لكم الدعم يتطلب ملف CSS. اسم البرنامج المساعد ينبغي أن تدرج مباشرة في اسم الملف. على سبيل المثال، إذا كنت تطبيق السمات من علامات (علامة التبويب) في المكونات، وهناك:themename.tabs.js. -
themename/img.png- الموضوع الخاص بك يمكن أن تحتوي على صور. يمكنهم الكشف عن اسمه وفقا لتفضيلاتك، لا يوجد اصطلاح تسمية محددة.
لمعرفة كيفية اكتمال بنية الملف موضوع الحالات، قم بزيارة الموضوع الأساسي مسج واجهة المستخدم .
نمط مخصص
إرسال اسلوب موضوع بسيط جدا، هو بسبب موضوع المرونة.
يجب أن يكون كل المواضيع فئة CSS الأساسية. الطبقة موضوع الرئيسية يسمح للمستخدم لتمكين ذوي الاحتياجات الخاصة. ينبغي أن يكون شكل الطبقة الجذر .ui-themename . واستخدامها في ملف HTML كما يلي:
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" href="themename/themename.css" />
<link rel="stylesheet" href="othertheme/othertheme.css" />
<link rel="stylesheet" href="othertheme/othertheme.dialog.css" />
</head>
<body class="ui-themename">
<div class="ui-othertheme">
<div class="ui-dialog">This is a modal dialog.</div>
</div>
</body>
</html>
في المثال أعلاه، حدث بعض الأمور الهامة:
- نحن أيضا تحميل موضوعين لهذه الوثيقة.
- جميع الآلات محتوى الصفحة بالكامل، ويتم وفقا للموضوع THEMENAME الأساليب.
- ومع ذلك، مع فئة واجهة المستخدم othertheme من
<div>وكل عنصر (بما في ذلك صناديق حوار مشروط) تنفذ وفقا للموضوع من الأساليب othertheme.
إذا فتحنا themename.css ملف للعرض، ويمكننا أن نرى التعليمة البرمجية التالية:
body.ui-themename { background:#111; color:snow; }
.ui-themename a, a.ui-themename { color:#68D; outline:none; }
.ui-themename a:visited, a.ui-themename:visited { color:#D66; }
.ui-themename a:hover, a.ui-themename:hover { color:#FFF; }
يرجى ملاحظة، themename.css يتضمن ملف المعلومات العالمية العالمية الوحيدة الاسلوب، اسلوب المعلومات عن القطعة معينة ليس هنا إلى تعريف. هنا اسلوب كل المواضيع قابلة للتطبيق. لا تقلق بشأن موضوع سوف تشغل ملفات متعددة - سيتم تبسيط هذه في عملية إنشاء وتحميل.