2. Theme customizations – Kentha Music WordPress Theme manual https://manuals.qantumthemes.xyz/kentha Kentha Wordpress Theme Knowledge Base Fri, 06 Apr 2018 16:20:48 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.1 https://manuals.qantumthemes.xyz/kentha/wp-content/uploads/2017/12/cropped-QT-LOGO-SQUARED-32x32.png 2. Theme customizations – Kentha Music WordPress Theme manual https://manuals.qantumthemes.xyz/kentha 32 32 2.0 Theme Customizations https://manuals.qantumthemes.xyz/kentha/knowledge-base/2-0-theme-customizations/ Wed, 13 Dec 2017 13:58:27 +0000 http://qantumthemes.xyz/manuals/fluid/?post_type=ht_kb&p=6243

This theme is customizable using the standard WordPress theme customizer function.

You can access to the customizer visiting Appearance->Customize.

Here you can find all the list of available style customizations. For options not contained in the list, you may need to hire a developer.

The support service can’t provide CSS, PHP, JS or HTML code customization, as this service doesn’t belong to theme support service (such as when you buy a car, changing the default soundsystem is not part of the car assistance service).

]]>
2.1 Global settings https://manuals.qantumthemes.xyz/kentha/knowledge-base/global-settings/ Wed, 13 Dec 2017 14:11:22 +0000 http://qantumthemes.xyz/manuals/fluid/?post_type=ht_kb&p=6246

  1. Hide past events: if enabled, will globally hide from the archives every event with an expired event date
  2. Load more: instead of numeric pagination, display a load more for the archives
  3. Breadcrumb: display the actual page navigation path below the top menu (desktop only, hidden in home)
  4. Enable debug settings: for a massive performance improvement, this theme loads by default a single minified js file containing multiple libraries. If you experience any conflict with other plugins, or you need to customize the theme Javascript files, you can enable this option, and the javascript files will be loaded as separate unminified resources. This option can significantly increase the page loading time.
]]>
2.2 Header and menus https://manuals.qantumthemes.xyz/kentha/knowledge-base/2-2-header-and-menus/ Wed, 13 Dec 2017 14:15:46 +0000 http://qantumthemes.xyz/manuals/fluid/?post_type=ht_kb&p=6252 You can optionally upload a logo (max 70px height) and choose the header design.
For round/squared logos we suggest using the centered menu style.

Menu colors and other functions are configured in other customizer sections.

]]>
2.3 Website background https://manuals.qantumthemes.xyz/kentha/knowledge-base/2-3-website-background/ Wed, 13 Dec 2017 14:36:26 +0000 http://qantumthemes.xyz/manuals/fluid/?post_type=ht_kb&p=6255

  • Default page background: used as default background for every page where there is no custom background specified. The background image stays below the video and is used as background when no video is provided and in mobile devices.
  • Default YouTube background: you can specify the ID of a youtube video to use in every page as background. It can be customized for singular pages, overriding this global setting. Please don’t add the full url, just the video ID.Example: to use this video
    https://www.youtube.com/watch?v=XYZ123
    copy the video ID:  XYZ123
  • Fade out background on scroll: if enabled, the background will fade out to the background color for a cleaner reading, while scrolling. This option can be changed for every single page, post or any special post type.
  • Darken page background: if your backgorund pictures or videos are too light and the readability is poor, you can fix this function from 0 to 90% of opacity.
    This parameter is the opacity of a black layer that is on top of your background picture or video.

 

FAQ:

  • Best background image resolution?
    1600x900px, max 250Kb file size. Optimized for visual and performance. Will be cropped vertically in mobile.
  • Background texts are cropped?
    You are NOT supposed to add any text to the backgorund iamges, those are backgrounds, not contents, they have a decorative purpose, and they are cropped in responsive mode.
  • Video background optimization:
    Videos are forcefully loaded in 720p resolution, this optimizes performance and quality. A higher video quality, as highlighted from our extensive testing, consumes all the GPU of the computer, making the overall website rendering buggy and decreasing the framerate. So, we forced a 720p as max resolution.
    For lower bandwidth connections YouTube will automatically provide a lower quality video.
  • I see the video in bad quality:
    this is caused by a slow connection. We force the quality to 720, if you see it pixelated, YouTube is sending you a smaller video because otherwise you couldn’t see it at all. This is NOT a theme bug, nor something we can fix for you. Just try from a decent connection.
  • I don’t see the video, appears blocked:
    not every video can be used, some have copyright or territory restrictions. You should use your own videos form your own YouTube channel.
  • Can I use Vimeo/MP4?
    No, this is not possible, at all, and please don’t ask. This theme aims at one of the most important features of this decade: performance. The more extensive compatibility we add, the heavier the theme will be. Assing Vimeo, mp4 or other sources, even if possible, would increase the loading time of the page of several seconds. So, only Youtube is allowes as video backgorunds. You can still add any vimeo video in the page contents.
  • I don’t see the video on iPad, iPhone, or mobile in general:
    NO, video backgorund is totally blocked on any mobile, and we did in on purpose, to guarantee the quality of your website.
    Even thou it may technically work on very few devices, people would be SUPER annoyed if every time they enter your site from mobile it sucks all their data to display a background, plus is blocked by default on 90% of the modern devices. Ergo, upload a picture as fallback for mobile. We recommend uploading a screenshot of the video, even for a smoother video intro effect, as we do in our demo 1.

 

]]>
2.4 Second Layer https://manuals.qantumthemes.xyz/kentha/knowledge-base/2-4-second-layer/ Wed, 13 Dec 2017 15:03:39 +0000 http://qantumthemes.xyz/manuals/fluid/?post_type=ht_kb&p=6259 The second layer lays underneath the main content, can be opened using a button that will appear in the menu bar, and can contain both widgets and contents.

The contents of the second layer are also capable of including shortcodes, which makes it the perfect place for every contact form or extra function you may want to add to your website.

Options:

  • Enable second layer: will add the button to the menu bar and make available the bottom layer sidebar in the Widgets area
  • Negative colors: will force white texts, even if you use a light skin in your colors (see following chapter about colors) enabling this option will allow you to make all texts white in the second layer, to add readability in case of background pictures or dark backgrounds.
  • Bottom layer backtround: add a picture as background for the second layer.
  • Second layer content: add any content, including shortcodes.
  • Second layer widgets: visit appearance > Widgets to add widgets to the second layer sidebar.

Second layer OffCanvas Menu

To create a 2nd layer OffCanvas menu, go in Appearance > Menu, create a new menu, and add it to the Off Canvas location. It doesn’t require to activate the second layer in customizer.

 

]]>
2.5 Colors customization https://manuals.qantumthemes.xyz/kentha/knowledge-base/2-5-colors-customization/ Wed, 13 Dec 2017 15:16:09 +0000 http://qantumthemes.xyz/manuals/fluid/?post_type=ht_kb&p=6263 This theme is based on a Material Design Framework. Please check the video to understand more:

This means that a same color is applied to multiple elements, and sometimes is not possible to assign a specific color to a specific elements without changing other parts of the site.
This is called a color pattern, and this is the standard way Material Design works, to maintain a harmony between the elements and provide a consistent color pattern.

 

You can calculate cool color palettes on websites like:

  • http://paletton.com/
  • https://coolors.co/browser

 

Important notes on how to choose your colors:

  1. You should choose contrast colors as Primary, Accent, Background and text, to make the different areas of the page recognizable.
  2. You can’t choose as Accent and Secondary the same color as otherwise your background buttons and links will disappear
  3. Prefere dark colors as Primary colors
  4. Choose similar colors as primary light and dark
  5. Choose similar colors as page background and paper background
  6. Choose a high contrast colors as text background compared to page and primary
  7. You can’t have a “chess” design (black background and white paper or opposite) as text may fall on background or on paper. The Page Background and the Paper background have to be similar.
    For a light scheme you can choose grey as page background, white for paper and black for text.
  8. Accent and secondary: those colors are for interactions. Do NOT choose black or white as accent or secondary as they won’t be visible!! You should choose bright colors as your accent and secondary for a good usability.

If you have troubles choosing your website colors, please check the Material Colors video and links provided above.

 

]]>
2.6 Typography https://manuals.qantumthemes.xyz/kentha/knowledge-base/2-6-typography/ Wed, 13 Dec 2017 16:08:22 +0000 http://qantumthemes.xyz/manuals/fluid/?post_type=ht_kb&p=6268

You can set 5 font families and variants for:

  • Baisc font [Family, Variant, Subset, Font size]
  • Bold font [used for the STRONG tag]
  • Headings  [Family, Variant, Letter Spacing, Text Transform]
  • Menu, buttons and metas (sets also buttons, metas and widget headers) [Family, Variant, Letter Spacing, Font Size, Text Transform]
  • Logo (if you use a picture logo, is suggested to set the same font as your normal text, to avoid useless font downloads)
]]>
2.7 Social Networks https://manuals.qantumthemes.xyz/kentha/knowledge-base/2-7-social-networks/ Thu, 14 Dec 2017 08:29:41 +0000 http://qantumthemes.xyz/manuals/fluid/?post_type=ht_kb&p=6271 Adding social network icons to your website is easy, just go in Appearance > Customize > Social networks.

They will be added both to header and booter at the same time.

 

For each website add the URL of your own page. In the example we use a generic website URL. Please remember to include the http:// in the url.

]]>
2.8 Footer customization https://manuals.qantumthemes.xyz/kentha/knowledge-base/2-8-footer-customization/ Thu, 14 Dec 2017 08:36:00 +0000 http://qantumthemes.xyz/manuals/fluid/?post_type=ht_kb&p=6277 The footer is made by 2 parts:

  • a bottom copyright row that is fixed and can’t be removed, it contains the copyright text, a custom menu and the social networks.
  • a widgetized footer, where you can add unlimited widgets in Appearance < Widgets. Widgets will be disposed using Masonry for an optimal space organization.

Settings:

  • Footer text: plain text and only links are allowed
  • Show footer widgets: show/hide the widgets bar
  • Background image: optional for widgets
  • Parallax: optional parallax effect for footer widgets
]]>
2.9 Menus https://manuals.qantumthemes.xyz/kentha/knowledge-base/menus/ Thu, 14 Dec 2017 08:49:36 +0000 http://qantumthemes.xyz/manuals/fluid/?post_type=ht_kb&p=6280 If you are not familiar with WordPress menus, please read the official manual regarding Menus here:

https://codex.wordpress.org/WordPress_Menu_User_Guide

Theme menus

This theme has 2 menu locations:

  • Primary Menu
  • Footer Menu

the menu design can be customized in the Header section.

Primary menu

It appears in the top bar and as the off-canvas menu for mobile. It supports 3 levels of depth.
The main menu can be converted in to an Off Canvas menu also for desktop via Customizer settings. To set a main menu, after creating your menu following the official WordPress manual, go in Appearance->Menu->Menu Locations and set it as main menu:

One level menu that appears in the footer. Doesn’t support sub-menu items. In desktop, its length can be maximum half of the width.

 

]]>