تعديلات مخصصة على قالب الفاتورة: علامة مائية، فاتورة من صفحتين، وغيرها

نظرة سريعة

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

قبل أن تبدأ

• أن تملك صلاحية تعديل الإعدادات العامه.
• خذ نسخة من التصميم قبل التعديل باستخدام نسخ، وجرّب التعديلات على النسخة؛ فتعديل HTML لا يمكن التراجع عنه.
• معرفة أساسية بلغة CSS أو HTML. وإذا لم تكن لديك هذه الخبرة، تواصل مع فريق الحلول المخصصة كما في طلب التعديل من فريق الحلول المخصصة.
• إذا كنت ستستخدم صورة، فيجب ألا يزيد حجمها عن 1 ميجابايت، وأن تكون بصيغة JPG أو PNG أو GIF. ويُفضَّل PNG بخلفية شفافة للعلامة المائية.

طريقة الوصول

• من القائمة الرئيسية: الإعدادات ثم إعدادات المبيعات، ثم تصاميم الفواتير/عروض الأسعار.
• مباشرة من الرابط: تصاميم الفواتير/عروض الأسعار.

أداتا التعديل المخصص

الأداة	مكانها	تُستخدم لـ
كود التنسيق (CSS)	محرر التصميم › التنسيق › كود التنسيق	العلامة المائية، تغيير الأحجام والألوان والمسافات، إخفاء عنصر. وهي الأداة الموصى بها لأنها لا تغيّر هيكل التصميم.
تعديل HTML	قائمة الإجراءات بجوار التصميم › تعديل HTML	إضافة عناصر جديدة، أو نقل أجزاء الفاتورة، أو تعديل المقدمة والتذييل الثابتين.

إضافة ختم الشركة أو التوقيع على الفواتير وعروض الأسعار

لا يوجد في دفترة إعداد مستقل لرفع ختم الشركة، لكن يمكنك إضافة صورة الختم (أو التوقيع) إلى تصميم الفاتورة من المحرر المرئي مباشرة ودون أكواد، فتظهر تلقائيًا في كل الفواتير وعروض الأسعار التي تستخدم هذا التصميم.

قبل البدء

• جهّز صورة الختم بصيغة PNG بخلفية شفافة (أو JPG أو GIF)، وبحجم لا يزيد عن 1 ميجابايت.
• يُفضَّل قص الصورة حول الختم فقط، حتى لا تأخذ مساحة كبيرة في الفاتورة.

الخطوات

1. افتح تصاميم الفواتير/عروض الأسعار، واضغط تعديل بجوار التصميم المستخدم.
2. من القائمة الجانبية اختر المكان الذي تريد ظهور الختم فيه:
   • التذييل: أسفل كل صفحة، وهو المكان الأنسب للختم والتوقيع.
   • الملاحظات: أسفل الفاتورة بعد البنود والإجمالي.
   • المقدمة: أعلى كل صفحة.
3. في المحرر، ضع المؤشر في المكان المطلوب، واضغط زر إدراج صورة في شريط الأدوات.
4. اختر صورة الختم من جهازك وارفعها، ويمكنك تحديد عرضها وارتفاعها من نافذة الصورة.
5. حدد محاذاة الصورة (يمين أو وسط أو يسار) من أزرار المحاذاة في شريط الأدوات. ويمكنك كتابة نص بجوارها مثل “الختم” أو “التوقيع”.
6. اضغط حفظ.
7. افتح فاتورة أو عرض سعر يستخدم هذا التصميم، وراجع شكل الختم في العرض والطباعة وملف PDF.

إظهار الختم في عروض الأسعار أيضًا

نفس التصميم يمكن استخدامه للفواتير وعروض الأسعار معًا. ليظهر الختم في الاثنين:

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

الخطوات: إضافة كود تنسيق (CSS)

1. افتح تصاميم الفواتير/عروض الأسعار، واضغط تعديل بجوار التصميم (أو النسخة التي أنشأتها).
2. من القائمة الجانبية اضغط التنسيق.
3. في خانة كود التنسيق اكتب كود CSS بدون وسم <style>.
4. اضغط حفظ، ثم افتح فاتورة تستخدم هذا التصميم وراجع شكلها في العرض والطباعة وملف PDF.

الخطوات: تعديل HTML

1. من تصاميم الفواتير/عروض الأسعار اضغط على قائمة الإجراءات (…) بجوار التصميم، واختر تعديل HTML.
2. تظهر ثلاث خانات: HTML (كود التصميم كاملًا)، وSticky Header (المقدمة المتكررة في كل صفحة)، وSticky Footer (التذييل المتكرر في كل صفحة).
3. عدّل الكود المطلوب، مع الحفاظ على المتغيرات مثل {%invoice_no%} و{%client_name%} كما هي. وللاطلاع على كل المتغيرات افتح دليل المتغيرات الكامل.
4. اضغط حفظ، فتظهر رسالة الحفظ وتنتقل إلى محرر التصميم.
5. راجع الفاتورة في العرض والطباعة وملف PDF.

مثال: إضافة علامة مائية

علامة مائية نصية

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

body::before {
  content: "نسخة أصلية";
  position: fixed;
  top: 45%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 90px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.08);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  z-index: 0;
  pointer-events: none;
}

علامة مائية بصورة (مثل شعار الشركة)

1. احصل على رابط الصورة: في محرر التصميم افتح المقدمة، واضغط زر إدراج صورة وارفع الصورة، ثم اعرض الكود المصدري للمحرر وانسخ رابط الصورة (يبدأ بـ https وينتهي بمسار الصورة)، ثم احذف الصورة من المقدمة إذا لم تكن تريدها فيها.
2. الصق الكود التالي في كود التنسيق، وضع رابط الصورة مكان https://رابط-الصورة:

body::before {
  content: "";
  position: fixed;
  top: 30%;
  left: 15%;
  width: 70%;
  height: 40%;
  background: url("https://رابط-الصورة") no-repeat center;
  background-size: contain;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}

غيّر قيمة opacity للتحكم في شفافية العلامة (0.05 أخف، و0.2 أوضح)، وقيم top وleft وwidth للتحكم في مكانها وحجمها.

شرح الحقول

الحقل	المكان	الوصف
كود التنسيق	التنسيق	كود CSS يُطبَّق على الفاتورة في العرض والطباعة وPDF والبريد. يُكتب بدون وسم style.
حجم الورق	التنسيق	مقاس صفحة الطباعة وملف PDF، مثل A4.
هامش الصفحة	التنسيق	هوامش الصفحة، ولا تقبل قيمًا سالبة.
HTML	تعديل HTML	كود التصميم كاملًا.
Sticky Header / Sticky Footer	تعديل HTML	المقدمة والتذييل المتكرران في أعلى وأسفل كل صفحة في ملف PDF.

الرسائل وحلولها

الرسالة	السبب	الحل
Saved Successfully.	تم حفظ تعديل HTML بنجاح.	—
تم حفظ تصميم الفاتورة	تم حفظ التصميم من المحرر.	—
حجم الصورة أكبر من المسموح	الصورة أكبر من 1 ميجابايت.	صغّر حجم الصورة.
نوع ملف خطأ. الأنواع المسموح بها هي JPG , PNG , GIF	صيغة الصورة غير مدعومة.	حوّل الصورة إلى PNG أو JPG.
غير مسموح لك بدخول هذه الصفحة	لا تملك صلاحية تعديل الإعدادات العامه.	اطلب الصلاحية من مدير الحساب.

الحالات المؤثرة على التعديل

• المقدمة والتذييل: إذا عدّلت المقدمة أو التذييل من تعديل HTML ثم فتحتها وحفظتها من المحرر المرئي، فقد يعيد المحرر صياغة الكود. لذلك اجعل تعديلاتك المخصصة في كود التنسيق أو في خانة HTML الرئيسية.
• ملف PDF: يُنشأ بمحرك طباعة قد يختلف قليلًا عن عرض المتصفح، فراجع النتيجة في PDF دائمًا. والعناصر بخاصية position: fixed تتكرر في كل صفحة.
• الطباعة من المتصفح: إذا لم تظهر العلامة المائية عند الطباعة، فعّل خيار طباعة الخلفيات (Background graphics) في نافذة الطباعة.
• الفواتير السابقة: يظهر التعديل في كل الفواتير التي تستخدم التصميم عند فتحها أو طباعتها، بما فيها الفواتير القديمة.
• اختيار التصميم: يُطبَّق التصميم على الفواتير التي تستخدمه فقط؛ إما لأنه التصميم الأساسي، أو لأنه مختار في حقل قالب الفاتورة داخل الفاتورة.

قالب فاتورة من صفحتين

هناك حالتان لطباعة الفاتورة على صفحتين:

1. الفاتورة تمتد لصفحتين تلقائيًا

إذا زادت البنود عن مساحة الصفحة الواحدة، تنتقل البنود الباقية إلى صفحة ثانية تلقائيًا في الطباعة وملف PDF. ولتنسيق الصفحات:

• ضع رأس الصفحة في خانة Sticky Header وتذييلها في خانة Sticky Footer من تعديل HTML، فيتكرران أعلى وأسفل كل صفحة في ملف PDF.
• أضف المتغير {%page_no%} في التذييل لإظهار رقم الصفحة. وإذا لم تضفه، يضيف ملف PDF ترقيم الصفحات (1/2، 2/2) تلقائيًا أسفل الصفحة.

2. إضافة صفحة ثانية ثابتة (مثل صفحة الشروط والأحكام)

1. خذ نسخة من التصميم بزر نسخ، واعمل على النسخة.
2. من قائمة الإجراءات بجوار التصميم اختر تعديل HTML.
3. في خانة HTML، انزل إلى نهاية الكود، والصق الكود التالي في المكان الذي تريد أن تبدأ منه الصفحة الثانية (قبل نهاية الكود):

<div style="page-break-before: always;"></div>
<h2>الشروط والأحكام</h2>
<p>اكتب هنا محتوى الصفحة الثانية...</p>

4. استبدل العنوان والنص بمحتوى الصفحة الثانية، ويمكنك استخدام المتغيرات مثل {%invoice_no%} و{%client_name%} داخلها.
5. اضغط حفظ، ثم افتح فاتورة تستخدم هذا التصميم واطبعها أو حمّلها PDF للتأكد من ظهور الصفحة الثانية.

طلب التعديل من فريق الحلول المخصصة

إذا كان التعديل الذي تحتاجه يتطلب كتابة أكواد ولا تملك خبرة في ذلك، أو كان التعديل معقدًا (مثل تصميم فاتورة كامل بهوية شركتك، أو علامة مائية بشكل خاص، أو ترتيب مختلف للبيانات)، يمكنك التواصل مع فريق الحلول المخصصة في دفترة لتنفيذه لك.

1. افتح صفحة فريق الحلول المخصصة وتواصل مع الفريق من خلالها، أو تواصل مع فريق الدعم الفني واطلب تحويل طلبك إلى فريق الحلول المخصصة.
2. وضّح التعديل المطلوب بالتفصيل، وأرفق صورة أو ملف PDF لشكل الفاتورة الذي تريده، وأي صور أو شعارات مطلوبة.
3. حدد اسم التصميم المطلوب تعديله في حسابك، أو اطلب تصميمًا جديدًا.
4. يراجع الفريق طلبك ويتواصل معك بالتفاصيل وموعد التنفيذ.

ملاحظات مهمة

• جرّب التعديل على نسخة من التصميم، وبعد التأكد اجعلها التصميم الأساسي من إعدادات التصميم.
• احتفظ بنسخة من الكود الأصلي في ملف نصي قبل تعديل HTML، لتتمكن من إعادته عند الحاجة.
• يمكن استخدام نفس التصميم للفواتير وعروض الأسعار من خيارات أكثر: في محرر التصميم. أما إذا كان لعروض الأسعار تصميم مختلف، أو لفواتير الشراء (تصاميمها منفصلة)، فكرر التعديل عليها.

الأسئلة الشائعة

كيف أضيف ختم الشركة على الفواتير وعروض الأسعار؟

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

أضفت الختم ولا يظهر في عرض السعر؟

عرض السعر يستخدم تصميمًا آخر. اجعل التصميم الذي أضفت إليه الختم التصميم الأساسي لعروض الأسعار، أو اختره في حقل القالب داخل عرض السعر.

كيف أعمل قالب فاتورة من صفحتين؟

إذا كانت الفاتورة طويلة فهي تمتد لصفحة ثانية تلقائيًا. ولإضافة صفحة ثانية ثابتة مثل الشروط والأحكام، أضف كود فاصل الصفحة من تعديل HTML كما في قالب فاتورة من صفحتين.

كيف أضيف علامة مائية على الفاتورة؟

من التنسيق › كود التنسيق في محرر التصميم، الصق كود العلامة المائية الموجود في مثال: إضافة علامة مائية واحفظ.

عدّلت HTML وتغيّر شكل الفاتورة بالكامل، كيف أرجعه؟

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

العلامة المائية تظهر في العرض ولا تظهر في PDF؟

تأكد من أن رابط الصورة كامل ويبدأ بـ https ومن نطاق حسابك، أو استخدم العلامة المائية النصية.

لا أعرف التعامل مع الأكواد، هل يمكن تنفيذ التعديل لي؟

نعم، تواصل مع فريق الحلول المخصصة، مع وصف التعديل المطلوب ونموذج للشكل الذي تريده. التفاصيل في طلب التعديل من فريق الحلول المخصصة.

هل يمكنني إخفاء عنصر معيّن من الفاتورة؟

نعم، أضف في كود التنسيق قاعدة display: none للعنصر، أو احذفه من تعديل HTML.