تصميم مواقع | خامات تصميم | برمجيات | css |design | vectors

Posts tagged ‘CSS’

طريقة زيادة ازرار المحرر المرئي للوردبريس – YourColor

yourcolor.net

YourColor.Net

yourcolor.net

السلام عليكم ورحمة الله وبركاته

المحرر المرئي في الوضع الافتراضي يعرض فقط بعض الازرار. وقد تحتاج في بعض الاحيان الى ازرار اخرى تساعدك في التنسيق ولا تجدها فتضطر الى تركيب اضافة للمحرر المرئي المتطور. ولكن اليوم وجدت حل يمكننا من اضافات الازرار بدون استعمال اي اضافة فقط ادراج كود بسيط في ملف الخصائص للقالب

بعض الازرار تحتاج تنسيق خاص بها من القالب المستعمل لهذا يرجى تعيينها في ملف تنسيق القالب style.css

طريقة اضافة هذه الازرار سهلة للغاية, فقط قم بفتح ملف الخصائص (functions.php) وقم باضافة الدالة التالي :

function enable_more_buttons($buttons) {
  $buttons[] = ´hr´;
  $buttons[] = ´sub´;
  $buttons[] = ´sup´;
  $buttons[] = ´fontselect´;
  $buttons[] = ´fontsizeselect´;
  $buttons[] = ´styleselect´;
  return $buttons;
}
add_filter("mce_buttons_3", "enable_more_buttons");

والنتيجة ستكون بالشكل التالي :

YourColor.Net
هنا قمنا باضافة ازرار لنوعية الخط و حجم الخط ,التنسيق الى اخره ويمكنك ايضا اضافة المزيد من الازرار بالاستعانة بالقائمة التالية من موقع tinymce قم باختيار اي زر واضفه اسفل المتغيرات الموجودة بالدالة ناخد مثالا هذا الزر cleanup

function enable_more_buttons($buttons) {
 $buttons[] = ´hr´;
 $buttons[] = ´sub´;
 $buttons[] = ´sup´;
 $buttons[] = ´fontselect´;
 $buttons[] = ´fontsizeselect´;
 $buttons[] = ´styleselect´;
 /** هكذا نضيف الكود */
 $buttons[] = ´cleanup´;
 return $buttons;
}
add_filter("mce_buttons_3", "enable_more_buttons");

بعض الازرار من موقع tinymce تحتاج اضافات خاصة بها  راجع وثائق الموقع لمعرفة المزيد

المهم اتمنى ان تستفيدوا من هذه الطريقة

اذا كان هناك اي استفسار يرجى وضع تعليق

والسلام عليكم ورحمة الله وبركاته

الاكاديمية العربية لفنون التصميم و الجرافيك

التصنيف:

الووردبريس wp

Tagged with:

مقدمة في الـ yourcolor – CSS

الووردبريس wp

yourcolor.net

yourcolor.net

yourcolor.net

تعريف الCSS:

الCSS هي اختصار لـ Cascading Style Sheet

تستخدم في تصميم المواقع، من خلالها تستطيع توفير الكثير من الوقت من حيث أن الاستغناء عنها يتطلب منا كتابة أكواد كثيرة في HTML

الCSS تساعد مطوري الويب (المصممين) على إنشاء تصميم موحد عبر العديد من صفحات الموقع، بدلاً من إنشاء تصميم لكل عناصر الصفحة، تستطيع عمل تصميم واحد واستخدامه في عدد لانهائي من الصفحات.

بالإضافة الى ذلك، الCSS تجعل من السهولة تغيير تصميم أي عنصر عبر جميع الصفحات

تطبيق سريع في الCSS

لنفرض أننا نملك موقع مكون من 5 صفحات، مصمم بإستخدام الHTML فقط

وأردنا تغيير لون الخلفية من الأبيض الى الأسود

سنضطر الى التعديل على جميع الصفحات وتعديل وسم الBody

<body bgcolor="black">

أو اذا اردنا تغيير حجم خط الترويسة h1
سنضطر الى تغيير كم كبير من السطور

ولكن في الCSS جل ماعليك عمله هو

لنفرض أننا أردنا تغيير حجم خط الترويسة h1 من 18 الى 24

h1 {font-size:24px;}

وسيتم تغيير جميع الترويسات المحتواه في الموقع.

الخطوة الأولى

لبداية تصميم موقع بالCSS

نعمل صفحة ويب

مثلاً :

<html>
<head>
<title> 3nkboot el wordpress </title>
 <link rel="stylesheet" type="text/css" href="style.css"> <<

لتحديد مكان ملف الستايل (هنا سيتم كتابة جميع أكواد الستايل الخاص بالموقع)

</head><body><ul><li>my first website</li>
<p><li>yourcolor.net</li><p></ul><p></body>
</html>

استخدام الCSS في الووردبريس

جميع قوالب الووردبريس لا تخلو من الCSS
للوصول الى ملف الستايل الخاص بموقعك، اذهب الى wp-content/themes/your_template
وانتقل الى ملف القالب الخاص بموقعك
افتح ملف header.php
وستجد مكان ملف الستايل

yourcolor.net

الاكاديمية العربية لفنون التصميم و الجرافيك

التصنيف:

الووردبريس wp

Tagged with:

تصميم المربعات CSS للوردبريس – yourcolor

الووردبريس wp

yourcolor.net

yourcolor.net

yourcolor.net

سأشرح لك في هذا المقال كيف تزيد من جاذبية مدونتك أو موقعك وكيف تثري تجربة زوّارك عن طريق إستخدام المربعات والصور الملائمة. لنفرض مثلاً أنك تريد لفت إنتباه الزائر إلى ملاحظة أو تحذير ما أو لتحميل ملف أو لكود في المدونة. يمكنك أن تستخدم تقنية css وأن تضع هذه الأمور في مربعات خاصة لها، ذات لون معيّن و تحتوي على صور مناسبة. كل ما عليك القيام به هو أن تعطي خصائص المربع (اللون والخلفية والخط .. إلخ) أو أن تصنع دالة جديدة للمربع وتعطيها الخصائص التي تريد.
لنفرض مثلاً أنك تضع في مدونتك أكواد html أو css أو php أو أي لغة أخرى (كما أعمل أنا في هذه التدوينة). بالطبع هذه الأكواد باللغة الإنجليزية ولذا يجب (إذا أردت أن تصنع مدونة ذات جودة عالية) أن تكون هذه الأكواد من اليسار إلى اليمين وأن تكون بصيغة Preformatted. دالة هذه الصيغة هي <pre> </pre> أي أن كل كود يوضع بين هذين القوسين هو على شكل Preformatted Code.
إذهب الآن إلى ملف style.css وعرّف خصائص دالة pre كما يلي:

pre
{
float:left;
direction:ltr;
font-size: 1.2em;
color: #000000;
margin: 10px;
padding:10px;
}

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

border: 1px solid #333333;
background-color: #dadada;

لم يتبقى سوى شيئ واحد مهم وهو خاصية overflow. تأكد من وضع هذه الخاصية حتى تمنع عرض سطور الأكواد الأعرض من مساحة المحتوى ووضع scroll bar في هذه الحالة. أضف:

overflow:auto;

إذن في هذه الحالة، سيكون الكود النهائي الذي أضفته كما يلي:

pre
{
float:left;
direction:ltr;
font-size: 1.2 em;
color: #000000;
margin: 10px;
padding:10px;
border: 1px solid #333333;
background-color: #dadada;
overflow:auto;
}

يمكنك الآن أن تضع الأكواد في مدونتك إما بين أقواس <pre> </pre> أو إذا كنت تستخدم محرر ووردبرس ذاته، فيمكنك أن تختار خط preformatted للأكواد. هذا كل شيئ… ستشاهد الآن الأكواد في مربع ذات خلفية ملوّنة. بالطبع، يمكنك أن تضيف الصور وأن تعدل كل شيئ عبرالكود الذي وفرته لك.
لنفرض مثلاً أنك تريد لفت إنتباه الزائر إلى ملاحظة أو تحذير ما أو لتحميل ملف أو لكود في المدونة. يمكنك أن تستخدم تقنية css وأن تضع هذه الأمور في مربعات خاصة لها، ذات لون معيّن و تحتوي على صور مناسبة. لمزيد من التفاصيل شاهد مثلاً هذا الموقع. ستلاحظ في أسفل بعض التدوينات مربع يشرح بعض النقاط المهمة. هذه المربعات هي ما أقصد بالضبط.
كل ما عليك القيام به هو أن تعطي خصائص المربع (اللون والخلفية والخط .. إلخ) أو أن تصنع دالة جديدة للمربع وتعطيها الخصائص التي تريد. أنظر المثال التالي:

.box {‬
padding: 12px 40px 12px 3px;
clear: both;
width: 100%;
margin-top: 20px;
margin-bottom: 30px;
float:center;
text-align:justify;
direction:rtl;
border: 1px solid #bae2f0;
font-size: 13px;
line-height: 17px;
background-color: #e3f4f9;
font-weight: 500;
-moz-border-radius: 10px;
border-radius: 10px;
}‬

أما إذا أردت أن تضع صورة فكل ما عليك القيام به هو إضافة الكود التالي إلى الدالة:

background: url(images/icon.png) no-repeat right 1px;

حيث icon.png يساوي إسم الصورة. بالطبع، يجب أن ترفع الصورة إلى مجلد images داخل مجلد القالب.
هذا كل شيئ. يمكنك تعديل وتبديل ما تريد عبر الكود الذي وفرته لك. إذا لم تعرف ال CSS حاول تغيير الخصائص وتحديد تأثيرها وستتعلم من التجربة والخطأ. بالتوفيق.

التصنيف:

ملفات التنسيق - css, الووردبريس wp

Tagged with:

معرض الوسوم