--- title: "Tutorials: toujou theme settings – this is toujou." url: "https://www.toujou.com/service/toujou-set-up/theme-settings/" description: "The first step to building your individual TYPO3 website: Which layout are you going to choose and how do you use it for your purposes?" date: 2019-03-14 modified: 2022-09-27 --- # Tutorials: toujou theme settings – this is toujou. 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [toujou set-up](https://www.toujou.de/service/toujou-set-up/) 4. [Theme settings](https://www.toujou.de/service/toujou-set-up/theme-settings/) Theme settings ============== In this extensive section, you control the design and basic settings of your website. Below, we have explained the most important settings you need to start your website. Tab: »Theme« On this page Step by step -------------- [ ![](https://www.toujou.de/_assets/processed/QaGdI1YgXOKWv9YPkdnO7RsMaYK0K1AH66nvODsxUYs/q:85/c:1440:808.98876404494:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtXzAxXzAxX1RoZW1lLVNpdGUtVGl0bGVfRU5fNDczMGZkZTQyYg:t/cb:4aea1272b7909d7e2df9347d953644d538030932/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDFfdGhlbWUvRU4vMDFfMDFfVGhlbWUtU2l0ZS1UaXRsZV9FTi5wbmc) ](https://www.toujou.de/_assets/processed/tsuS5RP4I4CA5NVhf7n4aAhW_w56T02eNj4_Fxmly_4/q:85/w:1024/h:640/fn:Y3NtXzAxXzAxX1RoZW1lLVNpdGUtVGl0bGVfRU5fYjM5YWQ2Y2MxOQ:t/cb:4aea1272b7909d7e2df9347d953644d538030932/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDFfdGhlbWUvRU4vMDFfMDFfVGhlbWUtU2l0ZS1UaXRsZV9FTi5wbmc) ### Select Theme - Click on the tab **Theme.** - At *Choose a Theme*, select a theme from the drop-down bar. - In the *Site Title* box, enter a title for your website. (This title can be set, for example, for display on mobile devices.) - Click on the **Save** button above the workspace. [ ![](https://www.toujou.de/_assets/processed/mrVwVPsufLURD5_IHwm1_H1WrSQxtd7_Wh-RgvC2PUY/q:85/c:1758.64:988:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtXzAxXzAyX05hdmlnYXRpb25fVG9wQmFyX0VOXzdmNGY2OTM3ZDc:t/cb:9b9356deee6f14e12ebce8376ca897eb9cbdf066/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDFfdGhlbWUvRU4vMDFfMDJfTmF2aWdhdGlvbl9Ub3BCYXJfRU4ucG5n) ](https://www.toujou.de/_assets/processed/uG3ptSD2oTxfcNRnP6xbGfqAf1fGqmuihBv5mQbpdho/q:85/w:1024/h:530/fn:Y3NtXzAxXzAyX05hdmlnYXRpb25fVG9wQmFyX0VOX2M4M2EyMTVjMmQ:t/cb:9b9356deee6f14e12ebce8376ca897eb9cbdf066/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDFfdGhlbWUvRU4vMDFfMDJfTmF2aWdhdGlvbl9Ub3BCYXJfRU4ucG5n) ### Contrast of navigation - Choose the navigation color in the **drop down menu** in *navigation color*. The options are default, primary color, secondary color and font color. ### Display of top bar on mobile devices - Select **Site Title** or **TopBar-Logo** at *Mobile Top Bar Content* in the drop-down bar. - Click on the **Save** button above the workspace. [ ![](https://www.toujou.de/_assets/processed/EEHuSsd4PXc70q6dCQpYF5kkcI5QLsmz2x_GdoeWpgk/q:85/c:1440:808.98876404494:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtXzAxXzAzX0NvbnRhY3RfSW5mb3JtYXRpb25fRU5fMjMzNWMzMGQ0ZQ:t/cb:54c174079957721006367b353119c504ddb02e26/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDFfdGhlbWUvRU4vMDFfMDNfQ29udGFjdF9JbmZvcm1hdGlvbl9FTi5wbmc) ](https://www.toujou.de/_assets/processed/Z-UNH3DPYvYBmuBMpjQ5ujdnu46J1SrtK3X91mqKorc/q:85/w:1024/h:640/fn:Y3NtXzAxXzAzX0NvbnRhY3RfSW5mb3JtYXRpb25fRU5fMWUzODhiYWNkMw:t/cb:54c174079957721006367b353119c504ddb02e26/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDFfdGhlbWUvRU4vMDFfMDNfQ29udGFjdF9JbmZvcm1hdGlvbl9FTi5wbmc) ### Display of contact information - Choose between **none**, **phone** or **full** to display contact information on mobile devices at *Contact Information Display (mobile devices)* in the drop-down bar. - Decide if your contact information is displayed on all pages (**show**) or not (**hide**) at *Show Contact in TopBar*. - With *Contact message in TopBar* you can enter a text in the input field, which appears under the contact information. - Click on the **Save** button above the workspace. Pieces of advice ---------------- toujou is based on TYPO3 and anyone familiar with TYPO3 knows that there are many different options to use to reach your desired results. We would like to point out important information and little tricks that can assist you when you’re creating and editing your website. [ ![](https://www.toujou.de/_assets/processed/Pr-4cNLFYYs9EQhVKBl73tJ5Duym9DUbb5xqluw44bE/q:85/w:433/h:271/fn:Y3NtXzAzX2VpbnN0ZWxsdW5nZW5fRU5fMDRkZWU3YjhiOQ:t/cb:b4ee2ba20f2089d9403c9d2074003ef165e8a22b/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA5X1Jlc3BvbnNpdmVfVmlldy9FTi8wM19laW5zdGVsbHVuZ2VuX0VOLnBuZw) ](https://www.toujou.de/_assets/processed/vs9pjvvSgs1cWUVosgYGquM9mnNH_zn7Tu3g6i90xq0/q:85/w:1024/h:640/fn:Y3NtXzAzX2VpbnN0ZWxsdW5nZW5fRU5fNjRmZTNmMzI2Nw:t/cb:b4ee2ba20f2089d9403c9d2074003ef165e8a22b/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzA5X1Jlc3BvbnNpdmVfVmlldy9FTi8wM19laW5zdGVsbHVuZ2VuX0VOLnBuZw) Within the »Theme« tab of the theme settings you define the behavior of your navigation and the displayed contact information. You can always return to these basic settings and make changes. Settings for alternative languages can also be made later. Click on the red icon *View page* in the module menu on the left to check your settings. Here, you can select sizes of different devices. [See tutorial: Responsive & View module](https://www.toujou.de/service/tutorials/responsive-mobile-first/) ##### Tutorials [Checklist ❯](https://www.toujou.de/service/#c1004820) [Contact data ❯ ](https://www.toujou.de/service/tutorials/contact-data/) [File list ❯ ](https://www.toujou.de/service/tutorials/file-list-module/) [Edit navigation ❯ ](https://www.toujou.de/service/tutorials/pages-navigation/) [Edit page content ❯ ](https://www.toujou.de/service/tutorials/page-content/) [Edit page properties ❯](https://www.toujou.de/service/tutorials/page-properties/) [Responsive & mobile first ❯](https://www.toujou.de/service/tutorials/responsive-mobile-first/) [Yoast SEO ❯ ](https://www.toujou.de/service/tutorials/yoast-seo/) [Redirects ❯ ](https://www.toujou.de/service/tutorials/redirects/) [Blog administration ❯](https://www.toujou.de/service/tutorials/blog-administration/) [Linkvalidator ❯](https://www.toujou.de/service/tutorials/blog-administration/) ##### toujou set-up [Theme ❯ ](https://www.toujou.de/service/toujou-set-up/theme-settings/) [Logo ❯ ](https://www.toujou.de/service/toujou-set-up/logo-settings/) [Font ❯ ](https://www.toujou.de/service/toujou-set-up/font-settings/) [Color ❯ ](https://www.toujou.de/service/toujou-set-up/color-settings/) [Social media ❯ ](https://www.toujou.de/service/toujou-set-up/social-media-settings/) [Analytics ❯](https://www.toujou.de/service/toujou-set-up/analytics-settings/) [Data protection ❯](https://www.toujou.de/service/toujou-set-up/data-protection-settings/) [Website overlay ❯](https://www.toujou.de/service/toujou-set-up/website-overlay/) ##### toujou element library [Text elements ❯ ](https://www.toujou.de/service/element-library/text-elements/) [Teaser elements ❯ ](https://www.toujou.de/service/element-library/teaser-elements/) [Blockquotes ❯ ](https://www.toujou.de/service/element-library/blockquote-elements/) [Teaser cards ❯ ](https://www.toujou.de/service/element-library/card-elements/) [Media elements ❯ ](https://www.toujou.de/service/element-library/media-elements/) [Map elements ❯ ](https://www.toujou.de/service/element-library/map-elements/) [Blog elements ❯](https://www.toujou.de/service/element-library/blog-elements/) #### [Navigation elements ❯ ](https://www.toujou.de/service/element-library/navigation-elements/) [Widgets ❯ ](https://www.toujou.de/service/element-library/widgets/) [Headline element ❯ ](https://www.toujou.de/service/element-library/text-elements/headline-element/) [Combined elements ❯](https://www.toujou.de/service/element-library/combined-elements/)