General

Heimo Paffhausen edited this page Jun 2, 2016 · 3 revisions

Deutsch / German

Clone this wiki locally

Responsive Design

With this checkbox activated, an additional style sheet is included for the responsive design. Plus, there is the possibility to create a theme.responsive.css over the Child Theme in addition to the theme.css, which will be loaded additionally when generating and activating the theme.

HTML5 Output

With this checkbox activated, Xtreme One displays your pages as HTML5. If it's not activated, they are displayed as XHTML 1.1.

Body font size

Body Font Size determines the basic font size of the document. The chosen font size does not only affect the legibility of the font, but also parts of the layout, when they are marked in em or %. These are the possible values:

  • 62,5 % – 10px
  • 68,75 % – 11px
  • 75 % – 12px
  • 81,25 % – 13px
  • 87,5 % – 14px
  • 100 % – 16px

Layout

flexible

Enter a value for the width of the layout in pixels. The permitted range is between 740 px and 1600 px. flexible layout: Enter one value each for the minimum and maximum width. The minimum width value determines when a horizontal scrollbar appears. The smallest permitted value is 740 px. The maximum width must be within these ranges: 60-120 em oder 50-100 %.

fixed

All main containers use the whole width of the browser window. These containers given a minimum width via the xf-container class. The page_margins class is given a maximum width or just a width in a fixed layout.

Alignment

With this setting, you can determine the alignment of your page. These settings are possible:

  • centered - page is centered in browser window
  • left - page is aligned along the left margin
  • right - page is aligned along the right margin

Design

Blog Layout

All main containers are enclosed by the containers ym-wrapper and ym-wbox. The ym-wrapper container has the width you set for a fixed layout or the minimum and maximum width you set for a flexible layout. The ym-wbox container can be used for spacing, frames, etc.

<div class="ym-wrapper">
    <div class="ym-wbox">
        <div id="secondarynav" class="xf-container clearfix linearize-level-1">
            <div class="ym-hlist">
                <!-- secondary navigation -->
            </div>
        </div>
        <div id="header" class="xf-container clearfix linearize-level-1">
            <!-- header -->
        </div>
        <div id="primarynav" class="xf-container clearfix linearize-level-1">
            <div class="ym-hlist">
                <!-- primary navigation -->
            </div>
        </div>
        <div id="main" class="xf-container clearfix linearize-level-1">
            <!-- main content -->
        </div>
        <div id="siteinfo" class="xf-container clearfix linearize-level-1">
            <!-- footer site info -->
        </div>
    </div>
</div>

Fullpage Layout

All main containers use the whole width of the browser window. These containers given a minimum width via the class xf-container. The ym-wrapper class is given a maximum width or just a width in a fixed layout. Within the ym-wrapper the ym-wbox ym-clearfix container determines the internal spacing.

<div id="secondarynav" class="xf-container clearfix linearize-level-1">
        <div class="ym-hlist">
                <div class="ym-wbox">
                        <div class="ym-hlist">
                                <!-- secondary navigation -->
                        </div>
                </div>
        </div>
</div>
<div id="header" class="xf-container clearfix linearize-level-1">
        <div class="ym-hlist">
                <div class="ym-wbox">
                        <!-- header -->
                </div>
        </div>
</div>
<div id="primarynav" class="xf-container clearfix linearize-level-1">
        <div class="ym-hlist">
                <div class="ym-wbox">
                        <div class="ym-hlist">
                                <!-- primary navigation -->
                        </div>
                </div>
        </div>
</div>
<div id="main" class="xf-container clearfix linearize-level-1">
        <div class="ym-hlist">
                <div class="ym-wbox">
                        <!-- main content -->
                </div>
        </div>
</div>
<div id="siteinfo" class="xf-container clearfix linearize-level-1">
        <div class="ym-hlist">
                <div class="ym-wbox">
                        <!-- footer site info -->
                </div>
        </div>
</div>

Activating WAI Aria Roles

WAI Aria is a specification of W3C that helps describing roles, conditions and properties, to make them recognizable and usable for users of assistive technologies. Use this option to make your website more handicapped accessible!

Embed YAMLs nav_vlist.css

This gives you the possibility to embed nav_vlist.css. The style sheet is a vertical navigation that is very useful for pages and categories. To use the style sheet in the theme, you create your own sidebar in the /includes/sidebars/ folder of your Child Theme and give the list the ym-vlist class.