Témázás

Miután a fejlesztői környezet teljesen be van állítva, elkezdheti a téma modul vázának felépítését. Ebben a fejezetben megtudhatja, hogyan:

• A Website Builder alapértelmezett opcióinak és sablonjainak engedélyezése/letiltása.

• Határozza meg a tervezéshez használandó színeket és betűtípusokat.

• Használja ki a legtöbbet a Bootstrap változókból.

• Adjon hozzá egyedi stílusokat és JavaScriptet.

Téma modul

Az Odoo egy alapértelmezett témával érkezik, amely minimális struktúrát és elrendezést biztosít. Amikor új témát hoz létre, az alapértelmezett témát bővíti.

Ne felejtse el hozzáadni a könyvtárat, amely a modulját tartalmazza az addons-path parancssori argumentumhoz, amikor az Odoo-t fejlesztői környezetben futtatja.

Technikai elnevezés

Az első lépés egy új könyvtár létrehozása.

website_airproof

Megjegyzés

Előtagként használja a website_ kifejezést, és csak kisbetűs ASCII alfanumerikus karaktereket és aláhúzásjeleket használjon.

Ebben a dokumentációban az Airproof (egy kitalált projekt) példáját fogjuk használni.

Fájlstruktúra

A témák csomagolása olyan, mint bármely Odoo modulé. Még ha egy alapvető weboldalt is tervez, a témáját modul formájában kell csomagolnia.

website_airproof
├── data
├── i18n
├── static
│   ├── description
│   ├── fonts
│   ├── lib
│   ├── shapes // Shapes for background
│   └── src
│       ├── img
│       │   ├── content // For those used in the pages of your website
│       │   └── wbuilder // For those used in the builder
│       ├── js
│       ├── scss // Theme specific styles
│       └── snippets // custom snippets
├── views
├── __init__.py
└── __manifest__.py

Mappa	Leírás
adatok	Előre beállított értékek, menük, oldalak, képek, alakzatok, … (*.xml)
i18n	Fordítások (*.po, *.pot)
lib	Külső könyvtárak (*.js)
statikus	Egyedi eszközök (*.jpg, *.gif, *.png, *.svg, *.pdf, *.scss, *.js)
nézetek	Egyedi nézetek és sablonok (*.xml)

Inicializálás

Egy Odoo modul egyben egy Python csomag is, amely tartalmaz egy __init__.py fájlt, amely import utasításokat tartalmaz a modul különböző Python fájljaihoz. Ez a fájl egyelőre üresen maradhat.

Deklaráció

Egy Odoo modult a manifest fájlja deklarál. Ez a fájl egy Python csomagot Odoo modulként deklarál, és meghatározza a modul metaadatait. Legalább a name mezőt tartalmaznia kell, amely mindig kötelező. Általában sokkal több információt tartalmaz.

/website_airproof/__manifest__.py

{
   'name': 'Airproof Theme',
   'description': '...',
   'category': 'Website/Theme',
   'version': '18.0.0',
   'author': '...',
   'license': '...',
   'depends': ['website'],
   'data': [
      # ...
   ],
   'assets': {
      # ...
   },
}

Mező	Leírás
név	A modul ember által olvasható neve (kötelező)
leírás	A modul kiterjesztett leírása, reStructuredText formátumban
kategória	Osztályozási kategória az Odoo-n belül
verzió	Az Odoo verzió, amelyre ez a modul vonatkozik
szerző	A modul szerzőjének neve
licenc	By default, we use the LGPL-3 license. More information in the module manifest page.
függőségek	Az Odoo modulokat be kell tölteni ezen modul előtt, akár azért, mert ez a modul az általuk létrehozott funkciókat használja, akár azért, mert módosítja az általuk meghatározott erőforrásokat
adatok	XML fájlok listája
eszközök	SCSS és JS fájlok listája

Megjegyzés

• The file structure above is just a suggestion. We could add as many other folders as needed in the project, such as /controllers to include controllers or /views/backend for backend views, etc.

• Weboldal téma létrehozásához csak a Website alkalmazást kell telepítenie. Ha más alkalmazásokra van szüksége (Blogok, Események, eCommerce, …), azokat is hozzáadhatja.

• Odoo version and major number are mandatory. However, patch number is optional. If you want to specify the required version of Odoo to run your module, you should use a five arguments structure, using the first two arguments to indicate your current Odoo version (* = 18.0).

Example: 18.0.1.0.0 odoo_major.odoo_minor.module_major.module_minor.module_patch

Figyelem

Automated file inclusion using wildcard notations (ex.: /myfolder/*.scss) doesn’t work in Odoo SaaS databases. In this case, include each file manually in the manifest.

Alapértelmezett opciók

Először próbálja meg felépíteni a témáját az Odoo alapértelmezett opcióinak használatával. Ez két dolgot biztosít:

1. Nem találja fel újra azt, ami már létezik. Például, mivel az Odoo biztosít egy opciót a láblécen lévő keret hozzáadására, nem kell újrakódolnia. Ehelyett először engedélyezze az alapértelmezett opciót, majd szükség esetén bővítse azt.

2. A felhasználó továbbra is használhatja az Odoo összes funkcióját a témájával. Például, ha újrakódolja a láblécen lévő keretet, előfordulhat, hogy az alapértelmezett opciót megszakítja vagy használhatatlanná teszi, ami rossz élményt nyújt a felhasználónak. Továbbá, az újrakódolása nem biztos, hogy olyan jól működik, mint az alapértelmezett opció, mivel más Odoo funkciók is támaszkodhatnak rá.

Javaslat

• Használjon négy szóközt minden behúzási szinthez.

• Ne használjon tabulátorokat.

• Soha ne keverje a szóközöket és a tabulátorokat.

Lásd még

Odoo kódolási irányelvek

Odoo változók

Az Odoo számos CSS szabályt deklarál, amelyek többsége teljes mértékben testreszabható a kapcsolódó SCSS változók felülírásával. Ehhez hozzon létre egy primary_variables.scss fájlt, és adja hozzá az _assets_primary_variables csomaghoz.

Deklaráció

/website_airproof/__manifest__.py

'assets': {
   'web._assets_primary_variables': [
      'website_airproof/static/src/scss/primary_variables.scss',
   ],
},

A forráskód olvasásával a lehetőségekhez kapcsolódó változók könnyen észrevehetők.

<we-button title="..."
   data-name="..."
   data-customize-website-views="..."
   data-customize-website-variable="'Sidebar'"
   data-img="..."/>

Ezek a változók például a $o-website-value-palettes térképen keresztül felülírhatók.

Globális

Deklaráció

/website_airproof/static/src/scss/primary_variables.scss

$o-website-values-palettes: (
   (
      // Templates
      // Colors
      // Fonts
      // Buttons
      // ...
   ),
);

Javaslat

Az a fájl csak SCSS változók és mixinek definícióit és felülírásait tartalmazhatja.

Lásd még

Primary variables SCSS

Betűtípusok

Bármilyen betűtípust beágyazhat a weboldalára. A Website Builder automatikusan elérhetővé teszi azokat a betűtípus-választóban.

Deklaráció

/website_airproof/static/src/scss/primary_variables.scss

$o-theme-font-configs: (
   <font-name>: (
      'family': <css font family list>,
      'url' (optional): <related part of Google fonts URL>,
      'properties' (optional): (
         <font-alias>: (
            <website-value-key>: <value>,
            ...,
         ),
      ...,
   )
)

Használat

/website_airproof/static/src/scss/primary_variables.scss

$o-website-values-palettes: (
   (
      'font':                             '<font-name>',
      'headings-font':                    '<font-name>',
      'navbar-font':                      '<font-name>',
      'buttons-font':                     '<font-name>',
   ),
);

Google betűtípusok

/website_airproof/static/src/scss/primary_variables.scss

$o-theme-font-configs: (
   'Poppins': (
      'family':                         ('Poppins', sans-serif),
      'url':                            'Poppins:400,500',
      'properties' : (
         'base': (
            'font-size-base':           1rem,
         ),
      ),
   ),
);

Egyéni betűtípusok

Először hozzon létre egy specifikus SCSS fájlt az egyéni betűtípus(ok) deklarálásához.

/website_airproof/__manifest__.py

'assets': {
   'web.assets_frontend': [
      'website_airproof/static/src/scss/font.scss',
   ],
},

Ezután használja az @font-face szabályt, hogy az egyéni betűtípus(ok) betöltődjenek a weboldalán.

/website_airproof/static/src/scss/font.scss

@font-face {
   font-family: "My Custom Font", Helvetica, Helvetica Neue, Arial, sans-serif;
   font-weight: 400;
   font-style: normal;
   src: url('/fonts/my-custom-font.woff') format('woff'),
        url('/fonts/my-custom-font.woff2') format('woff2');
}

/website_airproof/static/src/scss/primary_variables.scss

$o-theme-font-configs: (
   'Proxima Nova': (
      'family':                         ('Proxima Nova', sans-serif),
      'properties' : (
         'base': (
            'font-size-base':           1rem,
         ),
      ),
   ),
);

Javaslat

It is recommended to use the .woff and/or .woff2 format for your fonts.

Színek

A Weboldal Készítő öt megnevezett színből álló palettákra támaszkodik. Ezek meghatározása a témában biztosítja a következetességet.

Szín	Leírás
o-szín-1	Elsődleges
o-szín-2	Másodlagos
o-szín-3	Extra (Light)
o-color-4	Fehéres
o-color-5	Feketés

Deklaráció

/website_airproof/static/src/scss/primary_variables.scss

$o-color-palettes: map-merge($o-color-palettes,
   (
      'airproof': (
         'o-color-1':                    #bedb39,
         'o-color-2':                    #2c3e50,
         'o-color-3':                    #f2f2f2,
         'o-color-4':                    #ffffff,
         'o-color-5':                    #000000,
      ),
   )
);

Adja hozzá a létrehozott palettát a Weboldal Készítő által kínált paletták listájához.

$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'airproof');

Használat

/website_airproof/static/src/scss/primary_variables.scss

$o-website-values-palettes: (
   (
      'color-palettes-name':              'airproof',
   ),
);

Színkombinációk

Az előzőleg meghatározott öt színpaletta alapján a Weboldal Készítő automatikusan generál öt színkombinációt, amelyek mindegyike meghatározza a háttér, a szöveg, a címsorok, a linkek, az elsődleges gombok és a másodlagos gombok színét. Ezeket a színeket később a felhasználó testre szabhatja.

The colors used in a color combination are accessible and can be overridden through $o-color-palettes using a specific prefix (o-cc for color combination).

/website_airproof/static/src/scss/primary_variables.scss

$o-color-palettes: map-merge($o-color-palettes,
   (
      'airproof': (

         'o-cc*-bg':                     'o-color-*',
         'o-cc*-text':                   'o-color-*',
         'o-cc*-headings':               'o-color-*',
         'o-cc*-h2':                     'o-color-*',
         'o-cc*-h3':                     'o-color-*',
         'o-cc*-h4':                     'o-color-*',
         'o-cc*-h5':                     'o-color-*',
         'o-cc*-h6':                     'o-color-*',
         'o-cc*-link':                   'o-color-*',
         'o-cc*-btn-primary':            'o-color-*',
         'o-cc*-btn-primary-border':     'o-color-*',
         'o-cc*-btn-secondary':          'o-color-*',
         'o-cc*-btn-secondary-border':   'o-color-*',

      ),
   )
);

Megjegyzés

Minden o-cc* esetében cserélje le a * karaktert a kívánt színkombinációnak megfelelő számjegyre (1 - 5).

Az alapértelmezett szövegszín az o-color-5. Ha a háttér túl sötét, automatikusan megváltozik az o-color-4 színre.

Lásd még

Color combinations SCSS

Demó oldal

A Weboldal Készítő automatikusan generál egy oldalt a téma színpaletta színkombinációinak megtekintésére: http://localhost:8069/website/demo/color-combinations

Színátmenetek

You can also define gradients for the menu, header, footer and copyright bar, directly in your primary_variables.scss file.

Deklaráció

/website_airproof/static/src/scss/primary_variables.scss

$o-website-values-palettes: (
   (
      'menu-gradient': linear-gradient(135deg, rgb(203, 94, 238) 0%, rgb(75, 225, 236) 100%),
      'header-boxed-gradient': [your-gradient],
      'footer-gradient': [your-gradient],
      'copyright-gradient': [your-gradient],
   ),
);

Bootstrap változók

Az Odoo alapértelmezés szerint tartalmazza a Bootstrapot. Használhatja a keretrendszer összes változóját és mixinjét.

Ha az Odoo nem biztosítja a keresett változót, lehet, hogy van egy Bootstrap változó, amely lehetővé teszi azt. Valóban, az összes Odoo elrendezés tiszteletben tartja a Bootstrap struktúrákat, és használja a Bootstrap komponenseket vagy azok kiterjesztéseit. Ha testre szab egy Bootstrap változót, általános stílust ad hozzá az egész felhasználói weboldalhoz.

Használjon egy dedikált fájlt, amelyet az _assets_frontend_helpers csomaghoz adtak hozzá a Bootstrap értékek felülírásához, és ne a primary_variables.scss fájlt.

Deklaráció

/website_airproof/__manifest__.py

'assets': {
   'web._assets_frontend_helpers': [
      ('prepend', 'website_airproof/static/src/scss/bootstrap_overridden.scss'),
   ],
},

Használat

/website_airproof/static/src/scss/bootstrap_overridden.scss

// Typography
$h1-font-size:                 4rem !default;

// Navbar
$navbar-nav-link-padding-x:    1rem!default;

// Buttons + Forms
$input-placeholder-color:      o-color('o-color-1') !default;

// Cards
$card-border-width:            0 !default;

Javaslat

Az a fájl csak SCSS változók és mixinek definícióit és felülírásait tartalmazhatja.

Figyelem

Ne írja felül azokat a Bootstrap változókat, amelyek Odoo változóktól függenek. Ellenkező esetben előfordulhat, hogy a felhasználó nem tudja testre szabni őket a Website Builder használatával.

When an option is defined by a variable in primary_variables.scss and by a Boostrap variable, you should always go for an override through the primary variables. Do it via bootstrap_overridden.scss only if nothing exists in the primary variables.

Lásd még

Bootstrap overridden SCSS

Demó oldal

http://localhost:8069/website/demo/bootstrap

Font sizes

Odoo has CSS font size classes to separate style (font sizes) and semantic (tag and styles in general). Both logic can be combined to be more flexible.

Lásd még

Bootstrap documentation about display headings

Text style

Odoo’s Website Builder allows to select a style for your text. Some are just tag related like the Header with no extra CSS class. Other combine tag and style directly applied on them like the Header 1 Display.

<!-- h1 with display heading sizes -->
<h1 class="display-1">Heading 1 with Display Heading 1 size</h1>
<h1 class="display-2">Heading 1 with Display Heading 2 size</h1>
<h1 class="display-3">Heading 1 with Display Heading 3 size</h1>
<h1 class="display-4">Heading 1 with Display Heading 4 size</h1>

<!-- Lead text - named "Light" in the dropdown -->
<p class="lead">A text typically used as an introduction.</p>

<!-- Small text -->
<p class="o_small">Body text with a smaller size.</p>

Sizing classes

The sizing classes are added on a freshly created span tag inside the targeted element (See examples below).

Heading and body text

Assuming these classes can be applied on any text element, take h2 as an example below:

<!-- h2 sized like an h1 -->
<h2><span class="h1-fs">Heading</span></h2>

<!-- h2 sized with other heading sizes -->
<h2><span class="h2-fs">Heading</span></h2>
<h2><span class="h3-fs">Heading</span></h2>
<h2><span class="h4-fs">Heading</span></h2>
<h2><span class="h5-fs">Heading</span></h2>
<h2><span class="h6-fs">Heading</span></h2>

<!-- h2 sized like a normal paragraph (base size, 16px by default) -->
<h2><span class="base-fs">Heading</span></h2>

<!-- h2 sized like a small text (14px by default) -->
<h2><span class="o_small-fs">Heading</span></h2>

Display headings

If larger titles are needed, Odoo uses Bootstrap’s Display Headings classes, from display-1 to 6.

<h2><span class="display-1-fs">Heading</span></h2>
<h2><span class="display-2-fs">Heading</span></h2>
<h2><span class="display-3-fs">Heading</span></h2>
<h2><span class="display-4-fs">Heading</span></h2>

Megjegyzés

The Website Builder allows the user to configure only sizes from Display 1 to Display 4. You can set the other sizes (5 and 6) to use them in your code but the user won’t be able to modify them directly within the Website Builder interface.

Website settings

Global options related to the website can be set through the website record by following the structure below.

Deklaráció

/website_airproof/data/website.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo noupdate="1">
   <record id="website.default_website" model="website">
      <field name="name">Airproof</field>
      <field name="logo" type="base64" file="website_airproof/static/src/img/content/logo_airproof.png"/>
      <field name="favicon" type="base64" file="website_airproof/static/description/favicon.png" />
      <field name="shop_ppg">18</field>
      <field name="shop_ppr">3</field>
      <field name="cookies_bar" eval="True" />
      <field name="contact_us_button_url">/contact-us</field>
      <field name="social_facebook">https://www.facebook.com/Airproof</field>
      <field name="social_instagram">https://www.instagram.com/airproof</field>
      <field name="social_linkedin">https://www.linkedin.com/company/airproof</field>
      <field name="social_youtube">https://www.youtube.com/c/airproof</field>
   </record>
</odoo>

Mező	Leírás
név	Name of the website (displayed in the browser)
logo	Path to the logo (previously created into a record)
favicon	Path to the favicon (previously created into a record)
shop_ppg	Number of products shown per page in the e-commerce
shop_ppr	Number of products shown per rows (in a page) in the e-commerce
cookies_bar	Enable/disable the cookies bar
contact_us_button_url	URL of the Contact us page (For instance, used in the standard header templates).
social_facebook	URL of a Facebook profile
social_instagram	URL of a Instagram profile
social_linkedin	URL of a LinkedIn company profile
social_youtube	URL of a YouTube channel

Megjegyzés

website.default_website is the default reference whenever you work with only one website. If there are several websites in your database, this record will refer to the default site (the first one).

Nézetek

Néhány opció esetében a Website Builder változó mellett egy adott nézetet is aktiválnia kell.

A forráskód olvasásával könnyen megtalálhatók az opciókhoz kapcsolódó sablonok.

<we-button title="..."
   data-name="..."
   data-customize-website-views="website.template_header_default"
   data-customize-website-variable="'...'"
   data-img="..."/>

<template id="..." inherit_id="..." name="..." active="True"/>
<template id="..." inherit_id="..." name="..." active="False"/>

Lásd még

In such cases, the <template id="..."> syntax should be preferred over the <record id="..." model="ir.ui.view"> syntax when defining the record in XML.

See sablon, especially about the active value.

Presets

In order to activate and deactivate views as presets, you should include those inside the presets.xml file.

Használat

/website_airproof/data/presets.xml

<record id="module.view" model="ir.ui.view">
      <field name="active" eval="False"/>
</record>

Example

A menüelemek vízszintes igazításának megváltoztatása

/website_airproof/data/presets.xml

<record id="website.template_header_default_align_center" model="ir.ui.view">
   <field name="active" eval="True"/>
</record>

Ugyanez a logika alkalmazható más Odoo alkalmazásokra is.

eCommerce - Termékkategóriák megjelenítése

/website_airproof/data/presets.xml

 <record id="website_sale.products_categories" model="ir.ui.view">
    <field name="active" eval="False"/>
 </record>

Portál - A nyelvválasztó letiltása

/website_airproof/data/presets.xml

<record id="portal.footer_language_selector" model="ir.ui.view">
   <field name="active" eval="False"/>
</record>

Eszközök

Ehhez a részhez a assets_frontend csomagra fogunk hivatkozni, amely a web modulban található. Ez a csomag határozza meg a Website Builder által betöltött eszközök listáját, és a cél az, hogy hozzáadja az SCSS és JS fájljait a csomaghoz.

This is a non-exhaustive list of the frequently used bundles for a website:

Bundle	Leírás
web._assets_primary_variables	Mainly used for the primary_variables.scss file
web._assets_secondary_variables	Mainly used for the secondary_variables.scss file
web._assets_frontend_helpers	Mainly used for the bootstrap_overridden.scss file
web.assets_frontend	You can add all your custom SCSS, JS or QWeb JS files
website.assets_wysiwyg	Add your JS files related to the Website Builder options behaviors (for instance, a custom method for your custom building block)
website.assets_wysiwyg	If you need to extend Boostrap through the Bootstrap Utilities API, for example

Stílusok

A Website Builder és a Bootstrap együtt nagyszerűek a weboldal alapvető stílusainak meghatározásához. De ha valami egyedit szeretne tervezni, érdemes egy lépéssel tovább menni. Ehhez könnyedén hozzáadhat bármilyen SCSS fájlt a témájához.

Deklaráció

/website_airproof/__manifest__.py

'assets': {
   'web.assets_frontend': [
      'website_airproof/static/src/scss/theme.scss',
   ],
},

Nyugodtan használja újra a Bootstrap fájljából származó változókat és az Odoo által használtakat a theme.scss fájlban.

Example

/website_airproof/static/src/scss/theme.scss

 blockquote {
   border-radius: $rounded-pill;
   color: o-color('o-color-3');
   font-family: o-website-value('headings-font');
 }

Interaktivitás

Az Odoo három különböző típusú JavaScript fájlt támogat:

• plain JavaScript fájlok (nincs modulrendszer),

• native JavaScript modul, és

• Odoo modulok (egyedi modulrendszer használatával).

A legtöbb új Odoo JavaScript kódnak a natív JavaScript modulrendszert kell használnia. Ez egyszerűbb, és jobb fejlesztői élményt nyújt, jobb integrációval az IDE-vel.

Deklaráció

/website_airproof/__manifest__.py

'assets': {
   'web.assets_frontend': [
      'website_airproof/static/src/js/theme.js',
   ],
},

Megjegyzés

Ha külső könyvtárból származó fájlokat szeretne hozzáadni, azokat a modul /lib mappájába helyezheti.

Javaslat

• Használjon lintert (JSHint, …).

• Soha ne adjon hozzá minifikált JavaScript könyvtárakat.

• Add 'use strict'; at the top of every old-style module (this is automatic for new-style modules).

• Use js_ prefixed CSS classes on elements you target with JavaScript.

• Variables and functions should be camelCased (myVariable) instead of snake_cased (my_variable).

• Do not name a variable event; use ev instead. This is to avoid bugs on non-Chrome browsers, as Chrome is magically assigning a global event variable (so if you use the event variable without declaring it, it will work fine on Chrome but crash on every other browser).

• Használjon szigorú összehasonlításokat (=== a == helyett).

• Use double quotes for all textual strings (such as "Hello") and single quotes for all other strings, such as a CSS selector .x_nav_item.

• If you’re using native standard JS functions (start(), willStart(), cleanForSave(), etc), make sure you call this._super.apply(this, arguments); (Check if it’s necessary in the standard code).

Lásd még

• Odoo JavaScript kódolási irányelvek

• Az Odoo JavaScript keretrendszer áttekintése

• Odoo Experience Előadás: 10 Tipp, hogy a weboldal dizájnját a következő szintre emelje!