تجهيز المدونة، التعديلات ١

السلام عليكم،

ذكرت في التدوينة التي أعلنت فيها إطلاق المدونة أني سأشارك معكم التحديثات التي سأجريها على القالب ليتناسب معي

قمت بعمل عدة تعديلات بسيطة أود مشاركتها معكم وهي:

  • قمت بتتصيب إضافة Prismatic وهي إضافة لتنسيق الأكواد عند كتابتها مثل الشكل الذي يظهر في المحررات الخاصة بلغات البرمجة، سأكتب بعض الأكواد في الأسفل يمكنكم معاينة الشكل.
  • قمت بإضافة خط دبي الذي احبه كثيراً لبساطته وحمال حروفه وجعلته الخط الرئيسي في المدونة

كيف قمت بذلك؟

الطريقة بسيطة، قمت بذلك من لوحة التحكم بالطريقة التالية:

إذهب إلى لوحة التحكم» المظهر » تخصيص، اخر خيار هو تنسيقات (CSS) إضافية بعد فتحه نقوم بإضافة الكود التالي لإستدعاء الخط

@import url(//cdn.rawgit.com/rtaibah/dubai-font-cdn/master/dubai-font.css);

هذا الكود سيقوم بإستدعاء الخط ثم يبقى عليك استخدامه كما تريد، في حالتي جعلته إفتراضي في كل الصفحات لذلك قمت بالتالي:

body{
	font-family: 'Dubai-Regular', sans-serif;
	}
	/*
	بأي وسم تشاء body يمكنك إستبدال وسم 
	 */

بهذه البساطة! شكر خاص للشخص الذي قام بتوفيره على cdn وهذا رابط المشروع على GitHub

  • واجهتني مشكلة وهي أن عنوان الموقع لم يتغير نوع الخط فيه، الحل كان بسيط فقط قمت بفتح مصدر الصفحة لرؤية العنصر الحاوي له حتى اقوم بتنسيقه منفرداً، أيضا قمت بتلوينه وإظهار الوصف الذي كان مخفي في شاشات الجوال وهذا الكود النهائي:
.site-title a{
	font-family: Dubai-Bold;
	color:#1e824c !important;
}
.site-description{
	font-family: Dubai-Regular;
	color:#777;
	display: inline-block
}

قمت بعمل ٢ class مخصصين للنسختين المخففة والثقيلة من الخط يمكن إضافتها عند الحاجة بالضغط عند الكتابة على زر الإعدادات لإظهار إعدادات المكون ثم متقدم سيظهر حقل بعنوان وضع CSS Class إضافي يمكنك إضافة جميع الكلاسات فيه والفصل بينهم بفاصلة لاتينية , .

هذا كان الكود :

.dubai-light{
	font-family:Dubai-Light;
}
.dubai-bold{
	font-family:Dubai-Bold;
}

وهذا النص هو النتيجة بالنسبة للنسخة المخففة.

  • قمت بإضافة class لعمل تنسيق خطوط جميل كصفحة الدفتر كنت قد عملت عليه في وقت سابق وأسميته lines

هذا النص هو النتيجة، كما يمكن تعدد الأسطر بدون أن يتخربط التصميم إلا في حال قمت بغيير حجم الخط سأضيف بعض النصوص الجاهزة لتكون النتيجة أوضح : لا يصل الناس إلى حديقة النجاح دون أن يمروا بمحطات التعب والفشل واليأس، وصاحب الإرادة القوية لا يطيل الوقوف في هذه المحطات.

والكود هو التالي، إن كان لديك معرفة بسيطة في css يمكنك التعديل فيه كما تشاء وربما جعله يعمل مع الخطوط الإنجليزية من اليسار لليمين:

.lines{
 	-webkit-user-select: text; 
  	-moz-user-select: text;
  	-ms-user-select: text; 
  	user-select: text;
	font-size:16px;
	line-height:30px;
	color:#505050;
	text-align:right;
	padding:9px 20px 0px 10px;
	padding-right:calc(8% + 4px);
	background-color: rgba(250,250,250,.5);
	background-image: linear-gradient(90deg, transparent 92%, rgb(255,140,0,.5) 92%, transparent calc(92% + 1px)), linear-gradient(gray .5px, transparent .5px); 
	background-size: 100% 30px;
	background-repeat:repeat;
	background-position:0% -2px;
	}

ملاحظة: للأسف جميع ما ذُكر لا يمكنك استخدامه إن كانت مدونتك مجانية مستضافة لدى ووربريس

هذا كل شي لليوم

تعليقان (2) على “تجهيز المدونة، التعديلات ١”

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني.