Knowledge Base

March 4, 2015

Styling Options

Below you will find images and explainative text on what this styling options settings is about. In the styling options color settings can be set for the available elements in the theme, but also a background image and padding can be adjusted for those elements that support that feature.

The styling options have four appearances. The options may change when you change the Design Options in the styling settings.

Changing that setting will control and change the available options in the Customizer Styling Options.

Styling Options Vertical Layout.

rt19-styling-options

  1. Activate a preset skin that comes with the theme

  2. Set Vertical or Horizontal menu layout

  3. Set the default width (content width or full width)

  4. Set a background color or image to the body class

  5. Set a color or image to the left side of the page

  6. Set a color or image to the right side of the page

  7. Enable or Hide the page titles and or breadcrumbs

  8. Set the height and padding for the logo

  9. Modify the color settings and padding for the menu

  10. Adjust the color settings for color preset group 1

  11. Adjust the color settings for color preset group 2

  12. Adjust the color settings for color preset group 3

  13. Adjust the color settings for color preset group 4

  14. Set the Icon location before or after the menu and modify the color settings for the sidebar elements

  15. Modify the width and color settings of the footer area

Styling Options Horizontal Layout.

rt19-styling-options-horizontal

  1. Activate a preset skin that comes with the theme

  2. Set Vertical or Horizontal menu layout

  3. Set the default width (content width or full width)

  4. Set a background color or image to the body class

  5. Set the Stick Header, Menu items padding, Header bar width, color and or background image

  6. Enable or Hide the page titles and or breadcrumbs

  7. Set the height and padding for the logo

  8. Modify the color settings and padding for the menu

  9. Toggle On / Off the available icons for the horizontal menu

  10. Adjust the color settings for color preset group 1

  11. Adjust the color settings for color preset group 2

  12. Adjust the color settings for color preset group 3

  13. Adjust the color settings for color preset group 4

  14. Set the Icon location before or after the menu and modify the color settings for the sidebar elements

  15. Modify the width and color settings of the footer area

Styling Options Activate a preset skin

The theme comes with default 5 preset skins (we might add more later). You can simply select a preset skin by clicking the + Select a Skin button.

rt19-select-a-skin

A list of available skins will popup on the right of the select button.

rt19-select-a-preset-skin

The moment you select a skin you need to confirm the action.

rt19-confirm-skin-activation

After confirming the action the new skin will be loaded and will show in the preview area which might look like this

rt-skin-notes

Note : The popup confirmation is because any settings you did in the current skin which you did not save are lost. You can still exit the customizer without saving even if you preview another skin. Only your unsaved changes to the previous skin are lost.

Note : The moment you Save and Publish the new skin will be applied and the old skin settings will be gone. As long as you don’t save and publish the customizer with new skin activated you can leave the customizer and open it up again and the old skin will be back.

rt19-leave-customizer

Note : It is wise to export you current skin settings first so in case you want to revert you can import the settings of that skin back into your install.

rt19-skin-import-export

  1. Export the current skin and it’s settings
  2. Import a saved skin and it’s settings

Styling Options Design Options

In the Design Options the menu appearance of the theme can be changed. The choices are :

  1. Vertical menu design.
  2. Horizontal menu design.

rt19-styling-options-design-options

Content Row Settings

In the content row settings the default width for a content row can be set. Available options are

  1. Content Width (boxed mode). This means the content area does not extend all the way to the left / right side of the browser.
  2. Full Width. This means the content area does extend all the way to the left / right side of the browser.

rt19-styling-options-content-rows

Styling Options Body Settings

In the Body settings of the styling options a background color or background image can be set globally for all pages and posts.

Note : This can also be done in the page or post itself on a individual basis.

rt19-styling-body-settings

  1. Upload a (self hosted) MP4 file
  2. Upload a (self hosted) WebM file
  3. Set and select a background color.

     

    rt-bg-color-selector

  4. Upload and set a background image. The moment you click on the Image Upload button the WordPress Media Library will popup and give you the ability either to upload a new image or to select a current one.

  5. Set the position of the background image.

  6. Set it fixed or scrollable.

    Note : Fixed background in certain area’s can cause issues in certain browsers.

  7. Select and set if the image should be repeated in horizontal or vertical or both ways.

    Note : Only works on scrollable images.

  8. Select and set the size of the background.

    rt19-bacground-size-setting

    • Auto: The background-image contains its width and height
    • Contain: Ensures that the entire background-image will display by showing the image at a scaled size.
    • Cover: Scales the background image so that the smallest dimension reaches the maximum width/height of the element.
    • Percentage: Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to “auto”

Styling Options Left Side Settings

In the styling options Left side settings the color or a background-image for the area behind the menu can be set globally. Note : This can also be done in the page or post itself on a individual basis.

rt19-left-side-settings

Besides what we already mentioned in the styling options body settings there are two settings that need extra attention.

  1. Top Padding: With this setting the top padding of where the logo and menu area should start can be set.
  2. Transparency of the background-color. The color picker has a transparency slider. This is useful when you have set a background image for the body. Then the image will shine through in the background-color. But be aware old browsers dont support transparency and will fall back to the full 100% color as set.

All the other settings for background-images are already explained in the styling options body settings. Note : All these settings can also be done in the page or post itself on a individual basis.

Styling Options Right Side Settings

In the styling options Right side settings the color or a background-image for the area behind the menu can be set globally. Note : This can also be done in the page or post itself on a individual basis.

Besides what we already mentioned in the styling options body settings there are two settings that need extra attention.

  1. Top Padding : The top padding can be set in pixels for where the content should start.

All the other settings for background-images are already explained in the styling options body settings.

rt19-rigth-side-settings

Note : All these settings can also be done in the page or post itself on a individual basis.

Styling Options Header Settings

The header settings only apply to the vertical menu and are only visible when in the Design Options in the customizer the horizontal menu layout is set.

In the header settings the following settings can be adjusted :

  1. Turn On / Off the sticky menu
  2. The breadcrumbs padding
  3. The Header bar width (full width or default whic is content width)
  4. The Header background colro or image

rt19-header-settings-horizontal-menu

Styling Options Sub Header Settings

In the header settings the title and breadcrumbs can be controlled as well as the background-color or image of that area globally. Note : This can also be done in the page or post itself on a individual basis.

Below in the image you can se which area is affected by the header settings (the one with the darker yellow color where the title and the breadcrumbs are shown.

rt19-header-settings

The Header settings look like this.

rt19-header-settings-styling-options

Besides settings we already mentioned in other parts of the styling options there are five settings that need extra attention.

  1. Hide Page Titles : The page titles can be hidden globally for all pages.
  2. Hide Breadcrumbs : The breadcrumbs can be hidden globally for all pages.
  3. Page Title Color : The page title color can get set globally for all pages with a title visible
  4. Header Bar Width : The header area can be set to “Full Width” or “Default” which is the content width.
  5. Parallax Efffect : The Background image can de set to parallax effect. Note : the image has to be big enough to have this working.
  6. Color settings for the breadcrumbs path

Note : All these settings can also be done in the page or post itself on a individual basis.

Styling Options Logo Box Settings

In the logo box settings the maximum size of the logo can be controlled, the padding around the logo can be set and controlled, as well as the logo background color, the logo border color and for text logo’s de logo text color.

rt19-logo-settings

Note : The color settings are available for the normal logo and mobile logo.

Note : Decrease the padding when you logo is bigger or use the padding to center the logo within that area the why you like it. The complete area is 290px x 150px.

Note : In the Horizontal menu you can also control the Logo maximum height.

rt19-logo-settings-horizontal-menu

Styling Options Main Navigation Settings

In the main navigation settings the color settings for the menu can be set. The text color and background-color can be set for the toplevel menu items as for the submenu items. Each color settings also has transparancy options. These settings are global and do not have individual settings in any page or post.

There is three setting that need extra attention.

  1. Item Vertical Padding : in here you can set the menu item vertical padding. The space top and bottom around the menu item text.
  2. Item Horizontal Padding : in here you can set the menu item horizontal padding. The space left and right around the menu item text.
  3. The Mobile Menu Background Color (2) setting is only available for the horizontal Menu Layout

rt19-navigation-styling-options

Shortcuts Buttons (Horizontal Menu only)

If the horizontal menu is set then a new menu option appears to turn on / off the icons in the menu.

rt19-horz-menu-icons

Styling Options Color Set 1 – 4

The RT-Theme 19 comes with 4 Color presets. Groups of color settings that can be applied to a row a section. These color presets can be selected in the visual composer and applied to a row. Each row can be set to one of these 4 presets besides the row background image or color settings. There are no individual color settings per row. You can only choose out of these 4 presets color groups.

rt19-row-color-scheme

Each preset group has 10 preset color settings.

rt19-styling-colors-presets

Check out the numbers in above image. It indicates to what element the color apply.

  1. Primary Color. Applies to highlight text and the button background color.
  2. Row Background Color. Applies to the background of the row.
  3. Text Color. Applies to the “normal”text color.
  4. Secondary Text Color. Applies to punchlines, strike out elements.
  5. Opposite Text Color. Applies to the text within the primary color that is used as a background.
  6. Link Color. Applies to any link in the text of the row.
  7. Heading Color. Applies to any H-Tag in the row or slider if it is part of that row.
  8. Border Color. Applies to the border around the row (thickness can be set in the row element).
  9. Form Button Background Color. Applies to any form button in the row.
  10. Social Media Icons Background. Applies to the background of any social media icon in the row.

Note : Most of these settings are NOT available in the row settings on a individual base.

Note : When different color schemes are selected for nested rows and columns, the results may not be what you expect it to be because of the order of loading of the scheme in the css files. Basically it will follow the order of the scheme list to overwrite the one before. So loading Preset scheme 1 into a Preset scheme 3 might not work as the Scheme 1 is loaded before scheme 3.

Styling Options Sidebar Elements

In the sidebar the colors can be set and the the icon location before or after the vertical menu.

rt19-general-settings-icon-location

  1. The theme comes with icons that are visible in the sidebar (can also be turned off). These icons can show up below the logo or below the menu. Their location can be set here.

sidebar-icons

The sidebar area also has it’s own color settings for the background and the elements that can appear in a sidebar. The ones that are most visible are explained here.

rt19-sidebar-colors

Note : The (2) text color that is not a link is indicated twice in this image just for explainative reasons.

Styling Options Footer Area

Besides the color settings which apply to the various elements as explained in below image the footer has 4 settings that deserve more attention.

  1. Footer Widgets Layout : In here you can set the column layout for the footer widget area.
  2. Footer Background Width : The width of the footer area can be set to full width of the right side page area or to default which is the normal content width.
  3. Footer Content Width : The width of the footer content can be set to full width (applies only if footer has been set to full width) or to default width, which is the normal content width.
  4. Covered Footer : This is what some might call the Sticky Footer. Classic means the Covered (sticky) Footer is turned off. Covered means the Covered (sticky) Footer is turned on.

    Note : The Covered Footer only works when there is enough content in the page. It then sticks while scrolling.

    Note : When you set the bottom rows in a page to transparency it might very well be that you can see the footer below the text in the normal content. You should be aware of this and do not set any transparency in these rows when the Covered Footer is turned on.

In the image below the color settings are explained for the most common color settings and to which element they apply.

rt19-styling-options-footer-area