{"id":6018,"date":"2016-06-13T14:31:26","date_gmt":"2016-06-13T14:31:26","guid":{"rendered":"https:\/\/manuals.qantumthemes.xyz\/sonik\/?post_type=ht_kb&#038;p=6018"},"modified":"2016-06-13T16:54:34","modified_gmt":"2016-06-13T16:54:34","slug":"customizing-your-website","status":"publish","type":"ht_kb","link":"https:\/\/manuals.qantumthemes.xyz\/sonik\/knowledge-base\/customizing-your-website\/","title":{"rendered":"1.6 Customizing your website"},"content":{"rendered":"<p>This theme is customizable using the standard WordPress theme customizer function.<\/p>\n<p>You can access to the\u00a0customizer visiting Appearance-&gt;Customize.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6019\" src=\"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.25.35.png\" alt=\"Screen Shot 2016-06-13 at 15.25.35\" width=\"319\" height=\"151\" srcset=\"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.25.35.png 319w, https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.25.35-300x142.png 300w, https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.25.35-50x24.png 50w\" sizes=\"(max-width: 319px) 100vw, 319px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Here you can find all the list of available style customizations. For options not contained in the list, you may ask for an integration that we will provide only in case most of the users will agree to add it as feature. Otherwise, for customizations not listed below, you may need to hire a developer.<\/p>\n<hr \/>\n<h1 id=\"_\" ><\/h1>\n<h1 id=\"available-customization-settings\" >Available customization settings:<\/h1>\n<p>&nbsp;<\/p>\n<h2 id=\"site-identity\" >Site identity<\/h2>\n<p>define the title and the tagline. The title will be used if you don&#8217;t upload a Logo in the Header section.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-6020\" src=\"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.28.04.png\" alt=\"Screen Shot 2016-06-13 at 15.28.04\" width=\"301\" height=\"395\" srcset=\"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.28.04.png 301w, https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.28.04-229x300.png 229w, https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.28.04-38x50.png 38w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/p>\n<hr \/>\n<h2 id=\"_\" ><\/h2>\n<h2 id=\"colors-customization\" >Colors customization<\/h2>\n<h4 id=\"from-here-you-can-customize-different-parts-of-the-website-as\" ><a href=\"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.29.57.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-6021\" src=\"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.29.57.png\" alt=\"Screen Shot 2016-06-13 at 15.29.57\" width=\"152\" height=\"467\" srcset=\"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.29.57.png 297w, https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.29.57-98x300.png 98w, https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.29.57-16x50.png 16w\" sizes=\"(max-width: 152px) 100vw, 152px\" \/><\/a>from here you can customize different parts of the website, as:<\/h4>\n<ul>\n<li>Page background<\/li>\n<li>Menu background (if using sticky header, when scrolled, the menu will assume the page background color)<\/li>\n<li>Secondary color: used for some borders and secondary texts<\/li>\n<li>Text: normal text color. In Negative sections text and background will be reversed.<\/li>\n<li>Accent color\/accent color hover: this theme is based on a Material Design framework (materializecss) and the Accent color defines the main color of active elements. Choose a color that stands out from the background.<\/li>\n<li>Text color on accent background: is the text color of buttons or other elements with accent color background.<\/li>\n<li>Background dark (used in some sections as comments)<\/li>\n<li>Background darker\u00a0(used in some sections as footer)<\/li>\n<li>Footer widgets background<\/li>\n<li>Footer widgets text<\/li>\n<li>Footer background<\/li>\n<li>Footer text<\/li>\n<li>Preloader background<\/li>\n<li>Preloader background<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3 id=\"special-customizations-and-advanced-tip\" >Special customizations and advanced tip:<\/h3>\n<p>This theme is based on a Material Design Framework: this means that the 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.<br \/>\nThis is the standard way Material Design works, to maintain a harmony between the elements and provide a consistend color pattern.<\/p>\n<p>You can calculate cool color palettes on websites like:<\/p>\n<ul>\n<li>http:\/\/paletton.com\/<\/li>\n<li>https:\/\/coolors.co\/browser<\/li>\n<\/ul>\n<p>If you want to change the color of a specific element indipendently from the framework, or to change the color of elements not customizable by the customizer, you may need to add your own custom CSS.<\/p>\n<p>You can add it in the styles.css file of the Child theme folder in wp-content\/themes\/sonik-child\/styles.css<\/p>\n<p>To edit the CSS file you may also use the function in Appearance-&gt;Editor.<\/p>\n<p>Please note that these advanced customizations are generally beyond the normal product support boundaries.<\/p>\n<h3 id=\"performance-and-seo-tip\" >Performance and SEO tip:<\/h3>\n<p>To provide the customized colors, the theme adds some custom CSS in the Header of the HTML.<br \/>\nIt is not much, but to improve the SEO score of a site, you may want to change this behaveior.<\/p>\n<p>To do so, you can proceed as folow:<\/p>\n<ol>\n<li>Complete your color and settings customizations in the theme&#8217;s customizer<\/li>\n<li>Copy the custom styles from the header of the HTML and put it in the styles.css of the child theme contained in&lt;!&#8211; QT STYLES DYNAMIC CUSTOMIZATIONS =========== &#8211;&gt;<\/li>\n<li>In the functions.php of your child theme, create an empty function called\u00a0<strong>qt_css_customizations<\/strong> which will prevent the theme from outputting the custom CSS<\/li>\n<\/ol>\n<hr \/>\n<h2 id=\"_\" ><\/h2>\n<h2 id=\"social-networks\" >Social Networks<\/h2>\n<p><a href=\"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.42.27.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-6024 \" src=\"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.42.27.png\" alt=\"Screen Shot 2016-06-13 at 15.42.27\" width=\"150\" height=\"482\" \/><\/a>Add your social network links. You can also add your Twitter username to add a &#8220;via&#8221; attribute when sharing the page via the built-in page sharing function. Available social icons:<\/p>\n<p>Twitter username<br \/>\nBeatport<br \/>\nAmazon<br \/>\nFacebook<br \/>\nBlogger<br \/>\nBehance<br \/>\nBebo<br \/>\nFlickr<br \/>\nPinterest<br \/>\nRSS<br \/>\nTriplevision<br \/>\nTumblr<br \/>\nTwitter<br \/>\nVimeo<br \/>\nWordpress<br \/>\nWhatpeopleplay<br \/>\nYoutube<br \/>\nInstagram<br \/>\nSoundcloud<br \/>\nMyspace<br \/>\nGoogleplus<br \/>\nItunes<br \/>\nJuno<br \/>\nLastfm<br \/>\nLinkedin<br \/>\nMixcloud<br \/>\nResident-advisor<br \/>\nReverbnation<\/p>\n<hr \/>\n<h2 id=\"_\" ><\/h2>\n<h2 id=\"menus\" >Menus<del><\/del><\/h2>\n<p><a href=\"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.57.10.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-6027\" src=\"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.57.10.png\" alt=\"Screen Shot 2016-06-13 at 15.57.10\" width=\"179\" height=\"194\" srcset=\"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.57.10.png 301w, https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.57.10-275x300.png 275w, https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.57.10-46x50.png 46w\" sizes=\"(max-width: 179px) 100vw, 179px\" \/><\/a>This theme features 2 menu locations:<\/p>\n<ol>\n<li><strong>Header menu: supports 2 levels of depth\u00a0<\/strong><\/li>\n<li><strong>Footer menu: supports 1 level of depth<\/strong><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 id=\"_\" ><\/h2>\n<h2 id=\"header-customization\" >Header customization<\/h2>\n<p><a href=\"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.58.27.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-6029\" src=\"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-15.58.27.png\" alt=\"Screen Shot 2016-06-13 at 15.58.27\" width=\"79\" height=\"314\" \/><\/a><\/p>\n<ul>\n<li>Sticky menu<\/li>\n<li>Menu container<\/li>\n<li>Logo header (in alternative the site title will appear)<\/li>\n<li>Display navigation breadcrumb<\/li>\n<li>Display social icons<\/li>\n<li>Default header background image<\/li>\n<li>Header background image opaticy<\/li>\n<li>Volume control button<\/li>\n<li>Widgets button<\/li>\n<li>Share button<\/li>\n<li>Search button<\/li>\n<li>Cart button<\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"_\" ><\/h2>\n<h2 id=\"typography-google-fonts\" >Typography (Google Fonts)<\/h2>\n<ul>\n<li>Body font [Family, Variant, Subset, Font size]<\/li>\n<li>Headings\u00a0 [Family, Variant, Letter Spacing, Text Transform]<\/li>\n<li>Menu\u00a0[Family, Variant, Letter Spacing, Font Size, Text Transform]<\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"_\" ><\/h2>\n<h2 id=\"radio-player\" >Radio Player<\/h2>\n<ul>\n<li>Autoplay On\/Off<\/li>\n<\/ul>\n<p>This parameter works if you enable the header&#8217;s radio player but doesn&#8217;t affect the Featured Player (see further section about Radio Integration)<\/p>\n<p>The header radio integration requires to add a radio station with a valid MP3 stream URL (more infos further in this manual).<\/p>\n<hr \/>\n<h2 id=\"_\" ><\/h2>\n<h2 id=\"footer-customizations\" >Footer customizations<\/h2>\n<ul>\n<li>Footer text: supports HTML basic tags like &lt;a&gt; or &lt;br&gt;<\/li>\n<li>Show top arrow<\/li>\n<li>Show footer widgets<\/li>\n<li>Particles animation (Animation background of the Footer Widgets section)<\/li>\n<li>Particles lines connections (changes the design of particle animation)<\/li>\n<li>Particles color<\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"_\" ><\/h2>\n<h2 id=\"posts-layout\" >Posts layout<\/h2>\n<ul>\n<li>Default archives layout:\u00a0Defines the design of all the archives of posts, anyway you can create pages of posts with a different design by choosing specific page templates (see pages-&gt;Add New-&gt;Template in Page properties)<\/li>\n<li>Single post default picture: used as header if no featured image is defined<\/li>\n<li>Archives default picture: used for Blog List layout if the featured image is missing<\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"_\" ><\/h2>\n<h2 id=\"releases-podcast-settings\" >Releases \/ Podcast settings<\/h2>\n<ul>\n<li><a href=\"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-16.19.19.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-6031\" src=\"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-content\/uploads\/2016\/06\/Screen-Shot-2016-06-13-at-16.19.19.png\" alt=\"Screen Shot 2016-06-13 at 16.19.19\" width=\"200\" height=\"425\" \/><\/a>Default featured image for releases and podcasts: used in some templates when the release&#8217;s featured image is missing<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 style=\"text-align: justify;\" id=\"_\" ><\/h2>\n<h2 style=\"text-align: justify;\" id=\"events-settings\" >Events settings<\/h2>\n<ul>\n<li style=\"text-align: justify;\">Hide past events: based on the event date attribute<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h2 id=\"pagination-layout\" >Pagination layout<\/h2>\n<p>For each specific post type you can choose if you want a Lod More button o normal pagination (list of page numbers)<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h2 id=\"widgets\" >Widgets<\/h2>\n<p>Here you can manage the widgets of each sidebar. Please note that you can only manage the widgets of the page you are customizing, for this reason we recommend to use the sidebar customizer in Appearance-&gt;Widgets and not this one in the theme design customizer.<\/p>\n<p><strong>Extra sidebars:<\/strong> are the sidebars used in the header when you enable the Header Widgets, in the Header customization section.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h2 id=\"related-contents\" >Related contents<\/h2>\n<p>Choose to show or hide related contents for any different post type:<\/p>\n<p><strong>Supperted types:<\/strong><\/p>\n<ul>\n<li>Display related artist<\/li>\n<li>Display related charts<\/li>\n<li>Display related members<\/li>\n<li>Display related podcast<\/li>\n<li>Display related album releases<\/li>\n<li>Display related shows<\/li>\n<li>Display related schedule<\/li>\n<\/ul>\n<p>You can also customize the text of the title for each related section.<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<p>&nbsp;<\/p>\n<h2 id=\"advanced-settings\" >Advanced settings<\/h2>\n<ul>\n<li>Container max width:\u00a0Maximum width of the container.<strong> Specify measure unit<\/strong> like 1250<strong>px<\/strong> or 80<strong>%.<\/strong><\/li>\n<li>Preloader: preload and unload the page with fading. Useful if your pages appear smashed when opening. note: is not an Ajax loading.<\/li>\n<li>Enable debug settings: Load separated JS instead of minified version and enable console output for javascript. Useful in case of issues or custom theme\u00a0variations.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht_kb_category":[498],"ht_kb_tag":[537,530,528,529,536,531,538,533,534,532,535],"class_list":["post-6018","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-installation","ht_kb_tag-buttons","ht_kb_tag-colors","ht_kb_tag-customization","ht_kb_tag-customizer","ht_kb_tag-events","ht_kb_tag-font","ht_kb_tag-footer","ht_kb_tag-heading","ht_kb_tag-menu","ht_kb_tag-title","ht_kb_tag-widgets"],"_links":{"self":[{"href":"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-json\/wp\/v2\/ht_kb\/6018"}],"collection":[{"href":"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-json\/wp\/v2\/ht_kb"}],"about":[{"href":"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-json\/wp\/v2\/comments?post=6018"}],"version-history":[{"count":11,"href":"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-json\/wp\/v2\/ht_kb\/6018\/revisions"}],"predecessor-version":[{"id":6051,"href":"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-json\/wp\/v2\/ht_kb\/6018\/revisions\/6051"}],"wp:attachment":[{"href":"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-json\/wp\/v2\/media?parent=6018"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-json\/wp\/v2\/ht_kb_category?post=6018"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/manuals.qantumthemes.xyz\/sonik\/wp-json\/wp\/v2\/ht_kb_tag?post=6018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}