منتدى دعم PBBoard الرسمي
(نسخة قابلة للطباعة من الموضوع)
https://pbboard.info/forums/t20651
أنقر هنا لمشاهدة الموضوع بهيئته الأصلية

تحويل الاستايلات - تأطير القوالب
Mr King 03-12-2017 11:56 صباحاً
السلام عليكم ورحمة الله،

سبق أن وعدت الإخوة بتكويد استايل مخصص للتحويل، وقد تمّ بحمد الله الانتهاء منه

عدد القوالب التي تمّ تأطيرها هو 112 قالب

سيتطلب تأطير قوالب الاستايل 4 خلفيات مختلفة
أ- خلفيات كبيرة الحجم لتأطير القوالب التي تشغل مساحة كبيرة (مثل تأطير الموضوع)
ب- خلفيات متوسطة الحجم لتأطير القوالب التي تشغل مساحة متوسطة (مثل تأطير القائمة الجانبية)
ج- خلفيات صغيرة الحجم لتأطير القوالب التي تشغل مساحة صغيرة (مثل تأطير فورم تقييم العضو في الردّ أو الموضوع )
د- خلفيات مخصصة للإعلانات

قمت بتقسيم التأطير إلى 9 أقسام حسب حجم الإطار وحسب عرض المساحة التي سيتم تأطيرها :
1- خلفيات كبيرة بعرض 98% ،
يتمّ استبدال الوسم التالي
CODE

<!--big98.cadre.start-->


بكود الإطار العلوي الكبير الحجم مع إضافة الكلاسات التالية
CODE

wd98
a-center



ويتمّ استبدال الوسم التالي
CODE

<!--big98.cadre.end-->


بكود الإطار السفلي الكبير الحجم

2- خلفيات كبيرة بعرض 80% ،
يتمّ استبدال الوسم التالي
CODE

<!--big80.cadre.start-->


بكود الإطار العلوي كبير الحجم مع إضافة الكلاسات التالية
CODE

wd80
a-center



ويتمّ استبدال الوسم التالي
CODE

<!--big80.cadre.end-->


بكود الإطار السفلي كبير الحجم

3- خلفيات متوسطة بعرض 98% ،
يتمّ استبدال الوسم التالي
CODE

<!--middle98.cadre.start-->


بكود الإطار العلوي المتوسط الحجم مع إضافة الكلاسات التالية
CODE

wd98
a-center



ويتمّ استبدال الوسم التالي
CODE

<!--middle98.cadre.end-->


بكود الإطار السفلي المتوسط الحجم

4- خلفيات متوسطة بعرض 80% ،
يتمّ استبدال الوسم التالي
CODE

<!--middle80.cadre.start-->


بكود الإطار العلوي متوسط الحجم مع إضافة الكلاسات التالية
CODE

wd80
a-center



ويتمّ استبدال الوسم التالي
CODE

<!--middle80.cadre.end-->


بكود الإطار السفلي متوسط الحجم

5- خلفيات متوسطة بعرض 50% ،
يتمّ استبدال الوسم التالي
CODE

<!--middle50.cadre.start-->


بكود الإطار العلوي متوسط الحجم مع إضافة الكلاسات التالية
CODE

f-details-l
mrgTable
wd50
a-center



ويتمّ استبدال الوسم التالي
CODE

<!--middle50.cadre.end-->


بكود الإطار السفلي متوسط الحجم


6- خلفيات متوسطة بعرض 33% ،
يتمّ استبدال الوسم التالي
CODE

<!--middle33.cadre.start-->


بكود الإطار العلوي متوسط الحجم مع إضافة الكلاسات التالية
CODE

f-details-l
mrgTable
wd33-3



ويتمّ استبدال الوسم التالي
CODE

<!--middle33.cadre.end-->


بكود الإطار السفلي متوسط الحجم


7- خلفيات صغيرة ،
يتمّ استبدال الوسم التالي
CODE

<!--small.cadre.start-->


بكود الإطار العلوي صغير الحجم

ويتمّ استبدال الوسم التالي
CODE

<!--small.cadre.end-->


بكود الإطار السفلي صغير الحجم

8- خلفيات صغيرة بعرض 14% ،
يتمّ استبدال الوسم التالي
CODE

<!--small14.cadre.start-->


بكود الإطار العلوي صغير الحجم مع إضافة الكلاسات التالية
CODE

f-details-s
mrgTable
wd14



ويتمّ استبدال الوسم التالي
CODE

<!--small14.cadre.end-->


بكود الإطار السفلي متوسط الحجم

9- خلفيات مخصصة لتأطير الإعلانات
يتمّ استبدال الوسم التالي
CODE

<!--ads.cadre.start-->


بكود الإطار العلوي

ويتمّ استبدال الوسم التالي
CODE

<!--ads.cadre.end-->


بكود الإطار السفلي


مثال لتكويد إطار ذو خلفيات كبيرة :
لنفترض أنّ تكويد التأطير هو كالآتي
CODE

<div class="bg-center">
<div class="bg-left">
<div class="bg-right">

<div class="bg-top-center">
<div class="bg-top-left"></div>
<div class="bg-top-right"></div>
</div>

المحتوى هنا

<div class="bg-bottom-center">
<div class="bg-bottom-left"></div>
<div class="bg-bottom-right"></div>
</div>

</div>
</div>
</div>



نضيف الكلاسات الخاصة بعرض الإطار في الوسم الأول ليصير بهذا الشكل

CODE

<div class="bg-center wd98 a-center">
<div class="bg-left">
<div class="bg-right">

<div class="bg-top-center">
<div class="bg-top-left"></div>
<div class="bg-top-right"></div>
</div>

المحتوى هنا

<div class="bg-bottom-center">
<div class="bg-bottom-left"></div>
<div class="bg-bottom-right"></div>
</div>

</div>
</div>
</div>




ثمّ يتمّ تقسيم التكويد إلى قسمين، الجزء العلوي
CODE

<div class="bg-center wd98 a-center">
<div class="bg-left">
<div class="bg-right">

<div class="bg-top-center">
<div class="bg-top-left"></div>
<div class="bg-top-right"></div>
</div>


يتمّ استبداله مع
CODE

<!--big98.cadre.start-->




والجزء السفلي
CODE

<div class="bg-bottom-center">
<div class="bg-bottom-left"></div>
<div class="bg-bottom-right"></div>
</div>

</div>
</div>
</div>


يتمّ استبداله مع
CODE

<!--big98.cadre.end-->



MjQxNTMzMQ77convert

يفضّل التعديل على ملف الاستايل converter_style.xml بمحرّر php ويفضّل لو تكون فيه خاصية استبدال النصوص، مثل
محرر editpadline
أو تركيب الاضافة التالية للمحرر ++notepad المشهورhttp://phdesign.com.au/npptoolbucket/ (طريقة التركيب : فقط انقل الملف NppToolBucket.dll للمجلد plugins الخاص بالمحرر)
أو استخدم خدمة بحث واستبدال النص التي توفّرها بعض المواقع مثل http://textmechanic.com/text-tools/basic-text-tools/find-and-replace-text/

مثال مباشر لتأطير مخصص :http://www.pbboard.cf/index.php?page=change_style&change=1&id=10
منتدى دعم PBBoard الرسمي

Copyright © 2009-2024 PBBoard® Solutions. All Rights Reserved