일반 테마¶
Odoo provides a range of theme customization options to define the website’s colors and fonts, and the appearance of paragraphs and headings, buttons, links, and input fields. Additional advanced settings are also available.
When setting up a website for the first time, you are prompted to select a theme. Hover the mouse over the themes to see an extended preview of each one. Click a theme to select it, or click the View more themes button to display the full list of available themes.
참고
If you leave without selecting a theme, the website is created with the default theme.
To customize the theme, open the website editor, navigate to the Theme tab, and go to the Website section. You can:
Click Switch Theme to open the theme selector. Hover the mouse over the themes to see an extended preview of each one. Click Use this theme to apply it to the website.
Add a language for the website.
Select the Page Layout to change the overall display and spacing of building blocks and website elements on pages.
Customize the layout’s Background by:
Click Save to apply the changes to the website.
색상¶
테마 색상¶
Theme colors refer to the set of colors displayed across all pages of the website. They consist of five colors: three Main colors, used mainly for buttons and links, and two Light & Dark colors, used mainly for text and headings.
To edit the website’s colors, navigate to the Colors section of the Theme tab. Then:
Click the color you want to change, then select a predefined Solid color or click Custom to pick a specific color tone manually (or add its #HEX or RGBA code). Click (Reset) to remove the color selection.
Click the paint palette icon and choose a color palette. As a result, all color customizations are reset.
Odoo automatically creates Color Presets for the chosen colors or palette. These predefined color combinations are applied to various elements of the website to create a structured and visually appealing design. When selecting a color palette, its presets define how those colors are distributed across different elements. To modify them, click Color Presets, then select a preset to open the customization dropdown. Each color preset contains colors for the building block’s Background, Text, Headings, Links, Primary Buttons, and Secondary Buttons.
팁
To apply a color preset to a building block, select the building block, go to the Style tab, click the color dot located next to Background, and choose a Theme.
참고
색상 사전 설정을 변경하면 기본 사전 설정과 이를 사용하는 구성 요소의 색상이 자동으로 업데이트됩니다.
상태 색상¶
상태 색상은 특정 작업의 상태를 나타냅니다(예:성공, 경고등). 사용자와 웹사이트 방문자에게 피드백을 제공하기 위해 나타나는 팝업 메시지에 사용됩니다. 웹사이트의상태 색상을 사용자 정의하려면고급섹션으로 스크롤하여 점을 클릭하여 색상을 변경하세요.
Example
웹사이트에서 성공적인 작업과 관련된 정보는녹색으로 나타납니다.
폰트¶
Odoo를 사용하면단락 및 제목, 버튼, 입력 필드를 포함한 웹사이트 요소의 글꼴 패밀리와 글꼴 크기를 사용자 정의할 수 있습니다.
글꼴 크기: 단락, 제목, 버튼, 입력 필드섹션에서글꼴 크기필드를 사용하여 기본 크기를 설정합니다. (추가 옵션 토글) 아이콘을 클릭하여 섹션을 확장하고 사용자 정의 크기를 정의합니다(예: 제목 수준, 버튼 크기 등에 따라).
글꼴 모음: 단락, 제목, 버튼 섹션에서 드롭다운 메뉴에서 글꼴을 선택합니다.
참고
시스템 글꼴이 선택되면 Odoo는 방문자의 운영 체제에 이미 설치된 기본 글꼴을 사용합니다. 예를 들어 Android는 기본 시스템 글꼴로 **Roboto**를 사용합니다.
사용자 지정 폰트¶
Odoo에서 기본적으로 사용할 수 없는 사용자 정의 글꼴을 추가하려면글꼴 패밀리드롭다운을 클릭하고 하단의사용자 정의 글꼴 추가를 선택합니다. Google 글꼴 추가 또는 사용자 정의 글꼴 업로드팝업에서:
Google 글꼴을 추가하려면Google 글꼴 선택드롭다운을 열고 원하는 글꼴을 선택합니다. 웹사이트가 유럽 연합의 GDPR과 같은 법률 준수를 요구하는 지역에서 운영되는 경우Google 서버에서 글꼴 제공을 끕니다. 이렇게 하면 Google 글꼴이 Google 서버가 아닌 웹사이트 서버에 저장됩니다.
컴퓨터에서사용자 정의 글꼴을 업로드하려면파일 선택을 클릭합니다.
완료되면저장 및 새로고침을 클릭합니다.
팁
선택한 글꼴의미리보기가 창의 오른쪽에 표시됩니다.
스타일¶
웹사이트 요소의 모양을 추가로 사용자 정의할 수 있습니다. 예를 들어단락 및 제목, 버튼, 링크, 입력 필드를 사용자 정의할 수 있습니다.
단락 및 제목¶
단락및제목섹션은 이러한 텍스트 요소에 대한 추가 스타일 옵션을 제공합니다. 다음을 수행할 수 있습니다:
글꼴 설정을 수정합니다.
줄 높이를 조정하여 텍스트 줄 사이의 간격을 정의합니다.
여백을 조정하여 단락과 제목 주위의 간격을 정의합니다.
버튼¶
웹사이트의 기본 및 보조 버튼 스타일을 사용자 정의하려면버튼섹션으로 이동하여 관련 옵션을 편집합니다:
를 열고기본 스타일또는보조 스타일필드 옆의 드롭다운 메뉴에서 각 버튼 유형의 스타일(예:채우기, 윤곽선또는평면)을 변경합니다. 윤곽선을 선택하면 아래에테두리 너비옵션이 나타나 버튼 윤곽선의 너비를 조정할 수 있습니다.
글꼴 설정을 수정합니다.
버튼 레이블 주위의 간격을 변경하려면Padding을 조정하세요.
버튼의 테두리 반경을 조정하려면Round Corners옵션을 사용하세요.
클릭 효과 드롭다운 메뉴에서 버튼을 클릭할 때 애니메이션을 추가합니다.
팁
버튼의Padding,Font Size,Round Corners에 대한 사용자 정의Small및Large크기를 정의하려면:icon:`fa-caret-right`(:guilabel:`Toggle more options`) 아이콘을 클릭한 다음 관련 필드를 사용하세요.
링크¶
Link섹션에서Link Style옆의드롭다운 메뉴를 열어 웹사이트에서 링크의 모양을 선택하세요. 다음 중에서 선택할 수 있습니다:
No Underline
Underline On Hover
Always Underline
입력 필드¶
웹사이트의 입력 필드 스타일을 사용자 정의하려면Input Fields섹션으로 이동하여 관련 옵션을 편집하세요:
고급 설정¶
Advanced섹션에서는헤더 표시 또는 숨기기,HTML 태그를 통한 웹사이트 확인을 위한Code Injection사용,상태 색상및Grays구성과 같은 추가 설정을 구성할 수 있습니다.
또한 Google Maps를 구성하여 웹사이트에서 지도를 표시하고 위치 정보 기능을 활성화할 수 있습니다. 예를 들어Contact Us페이지 및 특정 스니펫에서 사용할 수 있습니다. 이 옵션을 구성하려면:
`Google 계정<https://console.cloud.google.com/getting-started>`_으로 이동하세요.
Maps Static API,Maps JavaScript API,Places API를활성화하세요.
중요
Odoo에서 아직 지원되지 않으므로Places API (New)은 활성화하지 마세요.
Google API를 사용하면 `Google에 결제<https://mapsplatform.google.com/pricing/>`_가 필요할 수 있습니다.
API 키 생성후 복사합니다.
Odoo의 웹사이트 편집기에서테마탭으로 이동한 후고급섹션에서Google Map옆의사용자 지정 키를 클릭합니다.
생성된 API 키를API 키필드에 붙여넣습니다.
:guilabel:`저장`을 클릭합니다.