Odoo تھیم ڈویلپمنٹ گائیڈ: Odoo 17/18 کے لیے حسب ضرورت تھیمز بنائیں

Odoo تھیم کا ماحولیاتی نظام Odoo App Store پر سالانہ $12 ملین سے زیادہ کماتا ہے، پھر بھی 8% سے کم تھیمز کو 5 اسٹار کی درجہ بندی ملتی ہے۔ بھول جانے والی تھیم اور سب سے زیادہ فروخت ہونے والے کے درمیان فرق Odoo کی رینڈرنگ پائپ لائن، QWeb ٹیمپلیٹ وراثت، اور ویب سائٹ بنانے والے کے ڈریگ اینڈ ڈراپ فن تعمیر کو سمجھنے کے لیے آتا ہے۔

یہ گائیڈ Odoo تھیم ڈیولپمنٹ کی ہر پرت کا احاطہ کرتا ہے — پروجیکٹ کے سہاروں سے لے کر جدید SCSS فن تعمیر تک، اپنی مرضی کے مطابق ٹکڑوں کی تعمیر سے لے کر Odoo کے ویب سائٹ بلڈر کے ساتھ آپ کی تھیم کو بغیر کسی رکاوٹ کے کام کرنے تک۔

اہم نکات

• Odoo تھیمز معیاری ماڈیولز ہیں ایک مخصوص ڈائریکٹری ڈھانچے کے ساتھ — وہ website ماڈیول کو بڑھاتے ہیں اور اثاثہ بنڈلنگ سسٹم کے ذریعے ٹیمپلیٹس، SCSS، اور JavaScript کو رجسٹر کرتے ہیں۔
• QWeb Odoo کا سرور سائیڈ ٹیمپلیٹ انجن ہے — یہ XML ہدایات (t-if, t-foreach, t-call, t-inherit) استعمال کرتا ہے جو HTML میں مرتب ہوتا ہے۔ ویب سائٹ کے کسی بھی حصے کو حسب ضرورت بنانے کے لیے XPath کے ساتھ ٹیمپلیٹ وراثت کو سمجھنا ضروری ہے۔
• SCSS پائپ لائن Odoo کے اثاثہ مینیجر کے ذریعے مرتب ہوتی ہے — حسب ضرورت متغیرات Bootstrap 5 ڈیفالٹس کو اوور رائیڈ کرتے ہیں، اور _variables.scss کو فریم ورک سے پہلے لوڈ کیا جانا چاہیے۔
• ویب سائٹ بلڈر انٹیگریشن کے لیے اسنیپٹ آپشنز، کسٹم بلڈنگ بلاکس، اور ڈائنامک مواد بلاکس کی وضاحت کی ضرورت ہوتی ہے جنہیں غیر تکنیکی صارفین ڈریگ اینڈ ڈراپ ایڈیٹر کے ذریعے ترتیب دے سکتے ہیں۔
• Odoo میں ریسپانسیو ڈیزائن بوٹسٹریپ 5 کے گرڈ سسٹم کو Odoo سے متعلق مخصوص یوٹیلیٹیز کے ساتھ فائدہ اٹھاتا ہے — تمام بریک پوائنٹس پر ٹیسٹ کریں اور بین الاقوامی تعیناتیوں کے لیے RTL زبانوں پر غور کریں۔

1. تھیم ماڈیول کا ڈھانچہ

ایک Odoo تھیم ویب سائٹ کے مخصوص اضافے کے ساتھ معیاری ماڈیول ڈھانچے کی پیروی کرتا ہے:

theme_ecosire/
├── __init__.py
├── __manifest__.py
├── data/
│   ├── theme_data.xml           # Default pages, menus
│   └── images.xml               # Pre-loaded image library
├── static/
│   ├── description/
│   │   ├── icon.png             # Module icon (128x128)
│   │   └── icon.svg             # SVG version
│   ├── src/
│   │   ├── img/                 # Theme images
│   │   ├── fonts/               # Custom fonts
│   │   ├── scss/
│   │   │   ├── _variables.scss  # Bootstrap variable overrides
│   │   │   ├── _mixins.scss     # Custom SCSS mixins
│   │   │   ├── _typography.scss # Font stacks, sizes
│   │   │   ├── _header.scss     # Header styles
│   │   │   ├── _footer.scss     # Footer styles
│   │   │   ├── _snippets.scss   # Snippet-specific styles
│   │   │   └── primary.scss     # Main entry point
│   │   ├── js/
│   │   │   ├── snippets/        # Snippet JS (animations, interactions)
│   │   │   └── theme.js         # Theme-wide JS
│   │   └── xml/
│   │       └── snippets.xml     # OWL snippet templates
│   └── img/                     # Public images (backgrounds, icons)
├── views/
│   ├── assets.xml               # Asset bundle registration
│   ├── layout.xml               # Header/footer templates
│   ├── pages.xml                # Pre-built page templates
│   └── snippets/
│       ├── options.xml          # Snippet options (color pickers, etc.)
│       └── s_custom_block.xml   # Custom snippet definitions
└── tests/
    └── test_theme.py            # Theme installation tests

تھیم مینی فیسٹ

# __manifest__.py
{
    'name': 'Theme Ecosire',
    'description': 'Modern, performance-optimized theme for Odoo Website',
    'category': 'Theme',
    'version': '18.0.1.0.0',
    'author': 'ECOSIRE Private Limited',
    'website': 'https://ecosire.com',
    'license': 'LGPL-3',
    'depends': ['website'],
    'data': [
        'views/assets.xml',
        'views/layout.xml',
        'views/pages.xml',
        'views/snippets/options.xml',
        'views/snippets/s_custom_block.xml',
    ],
    'assets': {
        'web.assets_frontend': [
            # Variables MUST come before Bootstrap
            ('prepend', 'theme_ecosire/static/src/scss/_variables.scss'),
            'theme_ecosire/static/src/scss/primary.scss',
            'theme_ecosire/static/src/js/theme.js',
        ],
        'website.assets_wysiwyg': [
            'theme_ecosire/static/src/js/snippets/*.js',
        ],
    },
    'images': [
        'static/description/banner.png',
        'static/description/theme_screenshot.jpg',
    ],
    'snippet_lists': {
        'website.snippets': [
            ('replace', 'theme_ecosire.s_custom_hero'),
        ],
    },
    'installable': True,
    'application': False,
    'auto_install': False,
}

assets کلید کے بارے میں اہم نوٹ: Odoo 17+ میں، __manifest__.py میں assets ڈکشنری جامد فائلوں کو رجسٹر کرنے کا ترجیحی طریقہ ہے۔ <template inherit_id="web.assets_frontend"> کا استعمال کرتے ہوئے پرانا views/assets.xml نقطہ نظر اب بھی کام کرتا ہے لیکن مرحلہ وار کیا جا رہا ہے۔ زیادہ سے زیادہ مطابقت کے لیے دونوں کا استعمال کریں۔

2. QWeb ٹیمپلیٹنگ ڈیپ ڈائیو

QWeb Odoo کا XML پر مبنی ٹیمپلیٹ انجن ہے۔ یہ t- کے ساتھ پہلے سے لگی ہدایات پر کارروائی کرتا ہے اور HTML کو آؤٹ پٹ کرتا ہے۔ تھیم ڈویلپمنٹ کے لیے QWeb کو سمجھنا غیر گفت و شنید ہے۔

بنیادی ہدایات

<!-- Conditional rendering -->
<div t-if="website.is_publisher()">
    <span>Edit mode controls here</span>
</div>
<div t-elif="request.env.user._is_internal()">
    <span>Internal user view</span>
</div>
<div t-else="">
    <span>Public visitor view</span>
</div>

<!-- Loops -->
<ul>
    <t t-foreach="website.menu_id.child_id" t-as="menu_item">
        <li t-attf-class="nav-item #{('active' if menu_item.is_active else '')}">
            <a t-att-href="menu_item.url" t-out="menu_item.name"/>
        </li>
    </t>
</ul>

<!-- Variable setting -->
<t t-set="company" t-value="res_company"/>
<t t-set="primary_color" t-value="'#FF6B00'"/>

<!-- Output (auto-escaped) -->
<span t-out="partner.name"/>

<!-- Raw HTML output (use with caution) -->
<div t-raw="sanitized_html_content"/>

<!-- Dynamic attributes -->
<div t-att-id="'section-' + str(section.id)"
     t-attf-class="container #{extra_class}"
     t-att-data-section="section.sequence"/>

<!-- Template calling -->
<t t-call="theme_ecosire.hero_section">
    <t t-set="title">Welcome to Our Store</t>
    <t t-set="subtitle">Premium Odoo Themes</t>
</t>

XPath کے ساتھ ٹیمپلیٹ وراثت

یہ وہ جگہ ہے جہاں تھیم کی ترقی طاقتور ہو جاتی ہے۔ آپ کسی بھی موجودہ ٹیمپلیٹ کو بدلے بغیر اس میں ترمیم کر سکتے ہیں:

<!-- views/layout.xml -->
<template id="custom_header" inherit_id="website.layout" name="Custom Header">
    <!-- Replace the entire header -->
    <xpath expr="//header" position="replace">
        <header id="top" class="ecosire-header">
            <nav class="navbar navbar-expand-lg">
                <div class="container">
                    <a class="navbar-brand" t-att-href="'/'">
                        <img t-if="website.logo"
                             t-att-src="website.image_url(website, 'logo')"
                             alt="Logo" class="img-fluid" style="max-height: 50px;"/>
                    </a>
                    <!-- Custom mega menu -->
                    <t t-call="theme_ecosire.mega_menu"/>
                    <!-- CTA button -->
                    <a href="/contactus" class="btn btn-primary ms-3">
                        Get Started
                    </a>
                </div>
            </nav>
        </header>
    </xpath>

    <!-- Add a top bar before the header -->
    <xpath expr="//header[@id='top']" position="before">
        <div class="ecosire-topbar bg-dark text-white py-1">
            <div class="container d-flex justify-content-between">
                <span t-out="res_company.phone"/>
                <span t-out="res_company.email"/>
            </div>
        </div>
    </xpath>

    <!-- Modify footer: add a newsletter section -->
    <xpath expr="//footer" position="inside">
        <div class="ecosire-newsletter bg-primary text-white py-5">
            <div class="container text-center">
                <h3>Stay Updated</h3>
                <t t-call="website.s_newsletter_block"/>
            </div>
        </div>
    </xpath>
</template>

XPath پوزیشن کا حوالہ

<!-- Modify attributes example -->
<xpath expr="//div[@id='wrapwrap']" position="attributes">
    <attribute name="class" add="ecosire-theme" separator=" "/>
</xpath>

<!-- Remove an element -->
<xpath expr="//div[hasclass('o_not_editable')]" position="replace"/>

3. SCSS فن تعمیر

Odoo کی SCSS پائپ لائن اپنے اثاثہ مینیجر کے ذریعے مرتب کرتی ہے، جس کا مطلب ہے کہ آپ کے متغیر اوور رائیڈز کو بوٹسٹریپ کے ڈیفالٹس سے پہلے لوڈ کیا جانا چاہیے۔ آپ کی _variables.scss فائل کو ترجیح دینے کو یقینی بنانے کے لیے اپنے مینی فیسٹ کے اثاثوں کی لغت میں 'prepend' ہدایت کا استعمال کریں۔ یہ واحد فائل آپ کے تھیم میں رنگوں، فونٹس، اسپیسنگ، بارڈر ریڈیئس اور ہر دوسرے بوٹسٹریپ ڈیزائن ٹوکن کو کنٹرول کرتی ہے۔

متغیر اوور رائیڈز (_variables.scss)

// _variables.scss — loaded BEFORE Bootstrap
// Override Bootstrap 5 defaults

// Brand Colors
$o-brand-primary: #FF6B00;
$o-brand-secondary: #1A1F36;

// Bootstrap color overrides
$primary: $o-brand-primary;
$secondary: $o-brand-secondary;
$success: #00C853;
$info: #2196F3;
$warning: #FFB300;
$danger: #FF1744;

// Typography
$font-family-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
$font-family-monospace: 'JetBrains Mono', 'Fira Code', monospace;
$font-size-base: 1rem;
$headings-font-weight: 700;
$headings-line-height: 1.2;

// Spacing
$spacer: 1rem;

// Border radius
$border-radius: 0.5rem;
$border-radius-lg: 1rem;
$border-radius-pill: 50rem;

// Shadows
$box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
$box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
$box-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

// Navbar
$navbar-padding-y: 1rem;
$navbar-brand-font-size: 1.5rem;

// Cards
$card-border-radius: $border-radius-lg;
$card-border-color: transparent;
$card-box-shadow: $box-shadow;

مین اسٹائل شیٹ (primary.scss)

// primary.scss — Main entry point

@import 'variables';   // Already prepended, but import for IDE support
@import 'mixins';
@import 'typography';
@import 'header';
@import 'footer';
@import 'snippets';

// ============================================
// Global Overrides
// ============================================

#wrapwrap.ecosire-theme {
    // Smooth scrolling
    scroll-behavior: smooth;

    // Better text rendering
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

// ============================================
// Section Spacing
// ============================================

.s_section {
    padding: 5rem 0;

    @media (max-width: 768px) {
        padding: 3rem 0;
    }
}

// ============================================
// Button Styles
// ============================================

.btn-primary {
    background: linear-gradient(135deg, $primary, darken($primary, 10%));
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba($primary, 0.4);
    }
}

// ============================================
// Card Component
// ============================================

.ecosire-card {
    background: white;
    border-radius: $border-radius-lg;
    overflow: hidden;
    transition: all 0.3s ease;

    &:hover {
        transform: translateY(-4px);
        box-shadow: $box-shadow-lg;
    }

    &__image {
        aspect-ratio: 16 / 9;
        object-fit: cover;
        width: 100%;
    }

    &__body {
        padding: 1.5rem;
    }
}

حسب ضرورت فونٹ لوڈ ہو رہا ہے۔

// _typography.scss

@font-face {
    font-family: 'Inter';
    src: url('/theme_ecosire/static/src/fonts/Inter-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/theme_ecosire/static/src/fonts/Inter-Variable-Italic.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    font-style: italic;
}

// Heading hierarchy
h1, .h1 { font-size: 2.5rem; font-weight: 800; }
h2, .h2 { font-size: 2rem; font-weight: 700; }
h3, .h3 { font-size: 1.5rem; font-weight: 600; }
h4, .h4 { font-size: 1.25rem; font-weight: 600; }

4. حسب ضرورت اسنیپٹس (بلڈنگ بلاکس)

Odoo کے ویب سائٹ بلڈر میں اسنیپٹس ڈریگ اینڈ ڈراپ بلڈنگ بلاکس ہیں۔ حسب ضرورت اسنیپٹس بنانا ہی تھیم کو واقعی قیمتی بناتا ہے۔

ایک ٹکڑا ٹیمپلیٹ کی وضاحت کرنا

<!-- views/snippets/s_custom_block.xml -->
<odoo>
    <!-- The snippet template -->
    <template id="s_ecosire_hero" name="Ecosire Hero Section">
        <section class="s_ecosire_hero pt-5 pb-5 o_cc o_cc1">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <h1 class="display-4 fw-bold">
                            Transform Your Business
                        </h1>
                        <p class="lead text-muted mt-3">
                            Enterprise solutions that scale with your ambitions.
                        </p>
                        <div class="mt-4">
                            <a href="/contactus" class="btn btn-primary btn-lg me-3">
                                Get Started
                            </a>
                            <a href="/about" class="btn btn-outline-secondary btn-lg">
                                Learn More
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <img src="/theme_ecosire/static/src/img/hero-illustration.svg"
                             alt="Hero" class="img-fluid" loading="lazy"/>
                    </div>
                </div>
            </div>
        </section>
    </template>

    <!-- Register snippet in the builder panel -->
    <template id="snippets" inherit_id="website.snippets">
        <xpath expr="//div[@id='snippet_structure']//t[@t-snippet]/.."
               position="inside">
            <t t-snippet="theme_ecosire.s_ecosire_hero"
               t-thumbnail="/theme_ecosire/static/src/img/snippets/hero_thumb.png"/>
        </xpath>
    </template>
</odoo>

ٹکڑوں کے اختیارات (صارف حسب ضرورت)

<!-- views/snippets/options.xml -->
<odoo>
    <template id="s_ecosire_hero_options" inherit_id="website.snippet_options">
        <xpath expr="." position="inside">
            <div data-js="EcosireHeroOptions"
                 data-selector=".s_ecosire_hero">

                <!-- Layout selector -->
                <we-select string="Layout">
                    <we-button data-select-class="s_hero_left">Text Left</we-button>
                    <we-button data-select-class="s_hero_center">Centered</we-button>
                    <we-button data-select-class="s_hero_right">Text Right</we-button>
                </we-select>

                <!-- Background style -->
                <we-select string="Background">
                    <we-button data-select-class="bg-white">White</we-button>
                    <we-button data-select-class="bg-dark text-white">Dark</we-button>
                    <we-button data-select-class="bg-gradient">Gradient</we-button>
                </we-select>

                <!-- Animation toggle -->
                <we-checkbox string="Enable Animation"
                             data-toggle-class="s_hero_animated"/>
            </div>
        </xpath>
    </template>
</odoo>

Snippet JavaScript (اینیمیشن)

// static/src/js/snippets/s_ecosire_hero.js
/** @odoo-module */

import publicWidget from '@web/legacy/js/public/public_widget';

const EcosireHero = publicWidget.Widget.extend({
    selector: '.s_ecosire_hero.s_hero_animated',
    disabledInEditableMode: true,

    start() {
        this._super(...arguments);
        this._initAnimation();
        return Promise.resolve();
    },

    _initAnimation() {
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate-in');
                        observer.unobserve(entry.target);
                    }
                });
            },
            { threshold: 0.2 }
        );

        this.el.querySelectorAll('.animate-target').forEach(el => {
            observer.observe(el);
        });
    },

    destroy() {
        this._super(...arguments);
    },
});

publicWidget.registry.EcosireHero = EcosireHero;

export default EcosireHero;

5. ریسپانسیو ڈیزائن بہترین پریکٹسز

موبائل-پہلا SCSS

// _responsive.scss

// Mobile-first breakpoints (Bootstrap 5)
// xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px

.ecosire-header {
    // Mobile default
    padding: 0.5rem 0;

    .navbar-brand img {
        max-height: 35px;
    }

    .nav-link {
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    // Tablet and up
    @include media-breakpoint-up(md) {
        padding: 0.75rem 0;

        .nav-link {
            padding: 0.5rem 1rem;
            border-bottom: none;
        }
    }

    // Desktop
    @include media-breakpoint-up(lg) {
        padding: 1rem 0;

        .navbar-brand img {
            max-height: 50px;
        }
    }
}

// Touch-friendly elements
@media (hover: none) {
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

RTL سپورٹ

// _rtl.scss — Critical for Arabic, Hebrew, Urdu markets

html[dir="rtl"] {
    .ecosire-header {
        .navbar-brand {
            margin-left: 1rem;
            margin-right: 0;
        }

        .btn + .btn {
            margin-right: 0.75rem;
            margin-left: 0;
        }
    }

    .ecosire-card__body {
        text-align: right;
    }

    // Use logical properties where possible
    .ms-3 { margin-inline-start: 1rem; }
    .me-3 { margin-inline-end: 1rem; }
}

6. کارکردگی کی اصلاح

امیج آپٹیمائزیشن

<!-- Use responsive images with srcset -->
<img t-att-src="'/web/image/ir.attachment/%s/datas/800x400' % image.id"
     t-att-srcset="'/web/image/ir.attachment/%s/datas/400x200 400w, /web/image/ir.attachment/%s/datas/800x400 800w, /web/image/ir.attachment/%s/datas/1200x600 1200w' % (image.id, image.id, image.id)"
     sizes="(max-width: 576px) 400px, (max-width: 992px) 800px, 1200px"
     loading="lazy"
     decoding="async"
     alt="Descriptive alt text"/>

تنقیدی CSS ان لائننگ

<!-- views/layout.xml -->
<template id="critical_css" inherit_id="website.layout">
    <xpath expr="//head" position="inside">
        <style type="text/css">
            /* Inline critical above-the-fold CSS */
            .ecosire-header { min-height: 72px; }
            .s_ecosire_hero { min-height: 60vh; }
            .navbar-brand img { max-height: 50px; }
        </style>
    </xpath>
</template>

اثاثہ لوڈ کرنے کی حکمت عملی

# __manifest__.py
'assets': {
    # Critical CSS — loaded in head
    'web.assets_frontend': [
        ('prepend', 'theme_ecosire/static/src/scss/_variables.scss'),
        'theme_ecosire/static/src/scss/primary.scss',
    ],
    # Non-critical JS — deferred
    'web.assets_frontend_lazy': [
        'theme_ecosire/static/src/js/animations.js',
        'theme_ecosire/static/src/js/parallax.js',
    ],
    # Editor-only assets
    'website.assets_wysiwyg': [
        'theme_ecosire/static/src/js/snippets/*.js',
        'theme_ecosire/static/src/scss/_editor.scss',
    ],
},

7. ویب سائٹ بلڈر انٹیگریشن

متحرک مواد بلاکس

<!-- A snippet that fetches products dynamically -->
<template id="s_featured_products" name="Featured Products Grid">
    <section class="s_featured_products pt-5 pb-5">
        <div class="container">
            <h2 class="text-center mb-5">Featured Products</h2>
            <div class="row" t-if="products">
                <t t-foreach="products[:8]" t-as="product">
                    <div class="col-md-3 mb-4">
                        <div class="ecosire-card h-100">
                            <img t-att-src="product.image_url"
                                 t-att-alt="product.name"
                                 class="ecosire-card__image" loading="lazy"/>
                            <div class="ecosire-card__body">
                                <h5 t-out="product.name"/>
                                <p class="text-primary fw-bold"
                                   t-out="product.list_price"
                                   t-options='{"widget": "monetary"}'/>
                                <a t-att-href="product.website_url"
                                   class="btn btn-outline-primary btn-sm">
                                    View Details
                                </a>
                            </div>
                        </div>
                    </div>
                </t>
            </div>
        </div>
    </section>
</template>

صفحہ ٹیمپلیٹس

<!-- Pre-built page templates that users can select -->
<template id="landing_page_template" name="Landing Page">
    <t t-call="website.layout">
        <div id="wrap" class="oe_structure">
            <t t-call="theme_ecosire.s_ecosire_hero"/>
            <t t-call="theme_ecosire.s_features_grid"/>
            <t t-call="theme_ecosire.s_testimonials"/>
            <t t-call="theme_ecosire.s_cta_banner"/>
        </div>
    </t>
</template>

8. اپنے تھیم کی جانچ کرنا

# tests/test_theme.py
from odoo.tests.common import HttpCase, tagged

@tagged('post_install', '-at_install')
class TestThemeEcosire(HttpCase):

    def test_01_theme_installation(self):
        """Theme installs without errors."""
        module = self.env['ir.module.module'].search([
            ('name', '=', 'theme_ecosire')
        ])
        self.assertEqual(module.state, 'installed')

    def test_02_homepage_loads(self):
        """Homepage renders with theme applied."""
        response = self.url_open('/')
        self.assertEqual(response.status_code, 200)
        self.assertIn('ecosire-theme', response.text)

    def test_03_snippets_available(self):
        """Custom snippets appear in the builder."""
        self.start_tour('/web#action=website.action_website',
                       'theme_ecosire_snippet_tour', login='admin')

    def test_04_responsive_meta(self):
        """Viewport meta tag is present."""
        response = self.url_open('/')
        self.assertIn('viewport', response.text)

9. اوڈو ایپ اسٹور پر اشاعت

اکثر پوچھے گئے سوالات

کیا میں Odoo تھیم میں Tailwind CSS استعمال کر سکتا ہوں؟

جب تک کہ تکنیکی طور پر ممکن ہو، Odoo کے بلٹ ان بوٹسٹریپ 5 کے ساتھ Tailwind CSS کا استعمال تنازعات پیدا کرتا ہے اور بنڈل کے سائز کو نمایاں طور پر بڑھاتا ہے۔ تجویز کردہ نقطہ نظر Bootstrap 5 یوٹیلیٹیز اور SCSS کسٹم پراپرٹیز کو استعمال کرنا ہے، جو Odoo کی اثاثہ پائپ لائن اور ویب سائٹ بلڈر کے ساتھ مقامی طور پر مربوط ہوتی ہیں۔ اگر آپ کو یوٹیلیٹی کلاسز کی ضرورت ہے جو بوٹسٹریپ فراہم نہیں کرتا ہے تو اس کے بجائے اپنی مرضی کے مطابق SCSS یوٹیلیٹیز بنائیں۔

میں اپنے تھیم کو Odoo 17 اور 18 دونوں کے ساتھ ہم آہنگ کیسے بناؤں؟

ہر Odoo ورژن کے لیے الگ شاخیں بنائیں۔ Odoo 17 بوٹسٹریپ 5.1 استعمال کرتا ہے جبکہ Odoo 18 بوٹسٹریپ 5.3 CSS متغیر سپورٹ کے ساتھ استعمال کرتا ہے۔ اثاثوں کا رجسٹریشن بھی بدل گیا — Odoo 18 مینی فیسٹ اثاثوں کی کلید کو ترجیح دیتا ہے جبکہ Odoo 17 XML ٹیمپلیٹ وراثت کا استعمال کرتا ہے۔ مشترکہ SCSS پارٹس اور ورژن کے ساتھ مخصوص انٹیگریشن فائلوں کو برقرار رکھیں۔

میرے SCSS متغیر اوور رائیڈز کیوں کام نہیں کر رہے ہیں؟

سب سے عام وجہ لوڈ آرڈر ہے۔ آپ کے _variables.scss کو بوٹسٹریپ کے مرتب کرنے سے پہلے لوڈ کیا جانا چاہیے۔ اپنے مینی فیسٹ میں 'prepend' ہدایت کا استعمال کریں: ('prepend', 'theme_name/static/src/scss/_variables.scss')۔ یہ بھی یقینی بنائیں کہ آپ درست متغیر ناموں کو اوور رائیڈ کر رہے ہیں — Odoo کچھ بوٹسٹریپ متغیرات کو o- prefixed ورژن جیسے $o-brand-primary کے ساتھ لپیٹتا ہے۔

ویب سائٹ بنانے والے کے ساتھ حسب ضرورت اسنیپٹس کیسے کام کرتے ہیں؟

کسٹم اسنیپٹس QWeb ٹیمپلیٹس ہیں جو ویب سائیٹ کی ٹیمپلیٹ وراثت کے ذریعے اسنیپٹ پینل میں رجسٹرڈ ہیں۔ ہر ٹکڑوں کو اس کے HTML ڈھانچے کے لیے ایک ٹیمپلیٹ، حسب ضرورت پینل کے لیے website.snippet_options میں بیان کردہ اختیاری اختیارات، اور تعاملات کے لیے publicWidget.Widget کو پھیلانے والا اختیاری JavaScript کی ضرورت ہوتی ہے۔ ویب سائٹ بنانے والا خودکار طور پر ڈریگ اینڈ ڈراپ، ان لائن ایڈیٹنگ، اور رجسٹرڈ اسنیپٹس کے لیے کالعدم/دوبارہ کرنا ہینڈل کرتا ہے۔

Odoo تھیم میں حسب ضرورت فونٹس شامل کرنے کا بہترین طریقہ کیا ہے؟

WOFF2 فونٹ فائلوں کو static/src/fonts/ میں رکھیں اور اپنے SCSS میں @font-face قواعد کی وضاحت کریں۔ کارکردگی کے لیے فونٹ ڈسپلے: سویپ استعمال کریں۔ پھر اپنے _variables.scss میں $font-family-sans-serif بوٹسٹریپ متغیر کو اوور رائیڈ کریں۔ بیرونی CDNs سے فونٹس لوڈ کرنے سے گریز کریں کیونکہ یہ DNS تلاش کا اضافہ کرتا ہے اور محدود نیٹ ورکس میں ناکام ہو سکتا ہے۔ صرف مطلوبہ حروف کی حدود کو شامل کرنے کے لیے سبسیٹ فونٹس۔

میں اپنی Odoo تھیم میں ڈارک موڈ کو کیسے سپورٹ کروں؟

Odoo 18 نے CSS حسب ضرورت خصوصیات کے ذریعے مقامی ڈارک موڈ سپورٹ متعارف کرایا۔ [data-bs-theme="dark"] سلیکٹر کا استعمال کرتے ہوئے اپنی تھیم میں ڈارک موڈ کے متغیرات کو اوور رائیڈ کریں۔ اپنے حسب ضرورت رنگوں، پس منظروں اور سائے کے ہلکے اور گہرے دونوں قسموں کی وضاحت کریں۔ ویب سائٹ بلڈر ٹوگل سوئچنگ کو ہینڈل کرتا ہے — آپ کی تھیم کو صرف دونوں طریقوں کے لیے صحیح CSS متغیر اقدار فراہم کرنے کی ضرورت ہے۔

اگلے اقدامات

تھیم کی ترقی وہ جگہ ہے جہاں ڈیزائن انجینئرنگ سے ملتا ہے۔ ایک اچھی طرح سے تیار کردہ Odoo تھیم سینکڑوں صارفین کی خدمت کر سکتی ہے اور Odoo App Store پر اہم بار بار ہونے والی آمدنی پیدا کر سکتی ہے۔

متعلقہ گائیڈز کے لیے:

• Odoo Python ڈویلپمنٹ گائیڈ — بیک اینڈ ڈویلپمنٹ کے بنیادی اصول
• Odoo Custom Module Development — ماڈیول فن تعمیر کا جائزہ
• Odoo REST API ٹیوٹوریل — API انضمام کے نمونے۔

کسٹم Odoo تھیم یا ویب سائٹ کو دوبارہ ڈیزائن کرنے کی ضرورت ہے؟ ECOSIRE کی Odoo حسب ضرورت ٹیم مکمل ویب سائٹ بلڈر انٹیگریشن، تمام بریک پوائنٹس پر ریسپانسیو ڈیزائن، اور بین الاقوامی تعیناتیوں کے لیے RTL سپورٹ کے ساتھ انٹرپرائز گریڈ تھیمز ڈیزائن اور بناتی ہے۔ ہم نے 40+ ممالک میں کلائنٹس کے لیے حسب ضرورت تھیمز فراہم کیے ہیں۔ مفت ڈیزائن مشاورت کے لیے ہم سے رابطہ کریں۔