{"_id":"5600b11c0c703d19009531fb","user":"54844d7b0e12060b0058339e","version":{"_id":"5600abf781a9670d006d1499","__v":2,"project":"5600abf781a9670d006d1496","createdAt":"2015-09-22T01:16:39.699Z","releaseDate":"2015-09-22T01:16:39.699Z","categories":["5600abf881a9670d006d149a","5600b0d30c703d19009531f9"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"5600abf881a9670d006d149a","version":"5600abf781a9670d006d1499","__v":7,"pages":["5600abf981a9670d006d149c","5600b11c0c703d19009531fb","56046d810c78b00d0039b1b1","56046d8a90ee490d00440576","56046f378d58900d0051eb5d","56046f588d58900d0051eb60","56046f97e5102a0d0070f992"],"project":"5600abf781a9670d006d1496","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-22T01:16:40.245Z","from_sync":false,"order":9999,"slug":"documentation","title":"Documentation"},"githubsync":"","__v":12,"project":"5600abf781a9670d006d1496","updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-22T01:38:36.628Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"This section host default options for the Theme. Those options can be overwritten with more specific options (such as blog options, pages options, authors options, etc.)\n\nThis section is available on Customizer Screen and on WordPress dashboard. This section host unique parameter on Sub sections.\n**On Dashboard**\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/i2CSowtPTVGqSpOpK3AF_198c4f5f-f23a-415a-b806-19edb8bf2a51.png\",\n        \"198c4f5f-f23a-415a-b806-19edb8bf2a51.png\",\n        \"921\",\n        \"623\",\n        \"#0e74ae\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n**On Customizer Screen** \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/KSAgOrgYQBeyWMTyGTWH_d4e70fd4-82bc-4bca-89b4-57dad88e1da4.png\",\n        \"d4e70fd4-82bc-4bca-89b4-57dad88e1da4.png\",\n        \"863\",\n        \"516\",\n        \"#eb3435\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"How to customize TopBar\"\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/Pns5K8lQm22svVTeOj1t_50298511-dc7e-480a-92f5-1833c3b237da.png\",\n        \"50298511-dc7e-480a-92f5-1833c3b237da.png\",\n        \"1061\",\n        \"144\",\n        \"#0882f4\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nThe TopBar is the bar located at the top edge of the web browser. This bar displays some usefull information such as Social Links, Contact details.\n\nThis TopBar can be managed from \"General Options > TopBar\" location on both Customizer and WordPress Dashboard.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/w3dVrlHTSh2fO8xL8ldA_4b708507-9738-48ae-b6dc-6614c0173e83.png\",\n        \"4b708507-9738-48ae-b6dc-6614c0173e83.png\",\n        \"578\",\n        \"656\",\n        \"#1973a5\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nYou can see that this section host 4 differents section.\n\n### 1. Social Links\n\nYou can add up to 6 differents links to various social networks. If a fields is left empty (you may need to delete a hastag and replace it by the obverse social link) this social links will be ignored.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/ozG0oJL4SQmeczc6GQ86_2cf6aa18-d8a4-4837-a71a-cfc018c9c65c.png\",\n        \"2cf6aa18-d8a4-4837-a71a-cfc018c9c65c.png\",\n        \"294\",\n        \"295\",\n        \"#56739c\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nYou can even drag links to order them as you need.\n\n### 2. Contact Details\nThis section let you specify 3 differents contact information. Those fields has a hastag as value their represent the type of the information displayed. Remove the hastag and replace it by your obverse contact detail.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/tTPwyrbQJqS7PHeLjX0Q_ca00acde-141e-4490-9d50-ba073fdb4f97.png\",\n        \"ca00acde-141e-4490-9d50-ba073fdb4f97.png\",\n        \"308\",\n        \"206\",\n        \"#4b81c7\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nYou can also drag theses fields.\n\n### 3. Enabling  TopBar\nThis title talks about himself, this seciton let you enable the topbar. As you may already know each option defined under \"General Options\", are used as default option. They can be ovewritten by more specific options.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/DaN7R7D5RAOIfHhX8Yya_82fb488c-d52a-4c89-9933-91fab2247b4c.png\",\n        \"82fb488c-d52a-4c89-9933-91fab2247b4c.png\",\n        \"372\",\n        \"129\",\n        \"#1f78ab\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n### 4. Using Skin\nSpan offer you various skin that can be applyied over your blog. If this option is set to yes, the TopBar will use Skin color as background, else Dark background will be used.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/GTH6ygD1QESWbxSDN7Pt_ab80596c-de05-4358-8ff4-700c25a2704c.png\",\n        \"ab80596c-de05-4358-8ff4-700c25a2704c.png\",\n        \"307\",\n        \"146\",\n        \"#0b79b2\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"How to customize the Header\"\n}\n[/block]\nThis section host options for header (with menu and logo)\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/mq07xhhaTmeWHmJaROGK_eb7485fb-227b-4991-a150-73627997ce8b.png\",\n        \"eb7485fb-227b-4991-a150-73627997ce8b.png\",\n        \"324\",\n        \"641\",\n        \"#117baf\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nThe first option (Display Header) let you enable Header Section.\nYou can choose specific mobile menu and desktop menu. If those field a left blank, default menu defined on \"**Appearence > Menus\" **will been used instead.\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Keep that in mind\",\n  \"body\": \"If the following message is displayed \\\"No items of this type were found.\\\", you must create at least one menu on \\\"**Appearence > Menus**\\\". See this section [from WordPress.org](https://codex.wordpress.org/WordPress_Menu_User_Guide).\"\n}\n[/block]\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/LsKWPiFtSbGlyKpeIfRW_ed35d880-8ae2-4742-bb1e-b15e46ccbc57.jpg\",\n        \"ed35d880-8ae2-4742-bb1e-b15e46ccbc57.jpg\",\n        \"598\",\n        \"390\",\n        \"#7c9c9c\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"How to customize the footer\"\n}\n[/block]\nThis section let you handle Footer options (it can be overwritten by more specific options). This sub section has unique parameters.\n\n### 1. Footer Copyright\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/tA8Z9Bq6T0aKgUvLxBYD_73e8f814-6edf-4055-af97-a1f6c322ce6b.jpg\",\n        \"73e8f814-6edf-4055-af97-a1f6c322ce6b.jpg\",\n        \"756\",\n        \"302\",\n        \"\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nWith this section, you can specify a unique Copyright, which will be displayed almost everywhere. This option can only be changed through \"General Options\".\n\n### 2. Footer Menu\n\nSpan theme has 3 differents menus location. On footer there is also a footer location. You can use this feature to display a custom menu on your footer (at the edge). This options can been overwritten.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/wOvevWwmSKKE0KuxszOK_7f3e09f5-d909-4f19-98fd-b8f0efca0da4.jpg\",\n        \"7f3e09f5-d909-4f19-98fd-b8f0efca0da4.jpg\",\n        \"388\",\n        \"197\",\n        \"#2f3c52\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n### 3. Color Palette\n\nThis option let you customize the footer. You can choose various color scheme that you want to apply on the footer, do it according to your theme skin.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/wTta6JIoQGWKEbrPit04_5a363e36-c92d-49be-91fc-103b2945d79d.jpg\",\n        \"5a363e36-c92d-49be-91fc-103b2945d79d.jpg\",\n        \"668\",\n        \"343\",\n        \"#27435c\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n### 4. Color Type\n\nThis option let you choose whether you want to use \"Footer Palette\" Colors or \"Custom Colors Fields\" to define footer color style.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/TIQg7eYSbm4YRu0g9qEQ_095bfb3e-0b01-4309-94a3-6acf3114392a.jpg\",\n        \"095bfb3e-0b01-4309-94a3-6acf3114392a.jpg\",\n        \"432\",\n        \"159\",\n        \"#1e77a4\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nIf you select, \"Use Custom Colors\", colors defined on those fields : Footer Background Color, Footer Text Color, Footer link Color, Footer Link Color on Hover will be used.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/QArYUDjiQ42fBqZr3TIJ_5477ac77-e578-4cb2-98e9-c673a80f75ef.jpg\",\n        \"5477ac77-e578-4cb2-98e9-c673a80f75ef.jpg\",\n        \"628\",\n        \"443\",\n        \"#484950\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n### 5. Change text color and footer padding\n\nThe following fields : Footer Padding and Footer Text size, let you change footer padding and footer text size.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/tHlVEWy0RoOdqUQXEGEr_cffc2564-ca21-4e2a-a188-90ba45cb903d.jpg\",\n        \"cffc2564-ca21-4e2a-a188-90ba45cb903d.jpg\",\n        \"641\",\n        \"329\",\n        \"#d93c3c\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"How to change the layout and the skin\"\n}\n[/block]\nThis section groups options about layout and skin. Those options can be ovewritten by more specific options.\n\n### 1. Select the layout type\n\nSpan let you choose between the boxed version and the wide version.\n\n**Boxed Version** : \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/Nvz1GtbQSDGk8KVwvSjg_aae1c653-2d59-4bdb-8c35-1f0b799f7182.jpg\",\n        \"aae1c653-2d59-4bdb-8c35-1f0b799f7182.jpg\",\n        \"463\",\n        \"508\",\n        \"#e03a3a\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nHis option : \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/nFeSuFcVSdiU2mhaTnZE_d993d1fe-e43a-46ae-b47f-01b25b944c65.jpg\",\n        \"d993d1fe-e43a-46ae-b47f-01b25b944c65.jpg\",\n        \"563\",\n        \"306\",\n        \"#0d73a9\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n** Wide Version ** : \n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/oXjgiQbgS6acY86wsBxn_80d09b4d-61ae-49a4-9f36-d54d6e47988e.jpg\",\n        \"80d09b4d-61ae-49a4-9f36-d54d6e47988e.jpg\",\n        \"463\",\n        \"508\",\n        \"#e03a39\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nHis option :\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/hIUwMQx2R6ef6hiZbdTM_87e40750-674b-4dc9-9604-e699b8606463.jpg\",\n        \"87e40750-674b-4dc9-9604-e699b8606463.jpg\",\n        \"547\",\n        \"309\",\n        \"#0e72a6\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n### 2. Choose background image for boxed version\n\nIf boxed version is selected, a background image (for left and right border) can be selected. This will add more vibes to the page. Span is build of 14 differents background.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/2bsHcGyR62tzbJGhRUNA_9532e87a-a8ff-4c26-8da0-c86c13b67bd7.jpg\",\n        \"9532e87a-a8ff-4c26-8da0-c86c13b67bd7.jpg\",\n        \"614\",\n        \"447\",\n        \"#e13837\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n### 3. Select a Skin color\n\nAs it possible to choose a footer skin, it also possible to choose a page skin (this does'nt affect footer colors). Span is build of 12 differents skins :\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/TFHzOiNTemoHyaAhXNLk_e5fb1f15-f9e8-4f40-9d7f-6476b4cf61e4.jpg\",\n        \"e5fb1f15-f9e8-4f40-9d7f-6476b4cf61e4.jpg\",\n        \"628\",\n        \"521\",\n        \"#284c5b\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"How to change sidebars\"\n}\n[/block]\nDefault WordPress sidebars options are used if no more specific options are set. This option is very usefull for specific options like : blog, pages, archives. You can set there differents sidebars according to your requirements.\n\n### 1. Sidebar position\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/5GpM8ZZiQmkl0tfNyygb_cc3aeb1e-d1b3-4d2d-bfb4-125a9d96f3d6.jpg\",\n        \"cc3aeb1e-d1b3-4d2d-bfb4-125a9d96f3d6.jpg\",\n        \"483\",\n        \"275\",\n        \"#0a72a6\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nYou can change the layout and choose to display a sidebar on the sides (left or right) or disable sidebar.\n\n### 2. Choose a custom sidebar\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/Z2BtTB1RL2nXppiqHvrD_e94c4bd3-9fe1-4f42-bddb-1704da72c10f.jpg\",\n        \"e94c4bd3-9fe1-4f42-bddb-1704da72c10f.jpg\",\n        \"443\",\n        \"653\",\n        \"#1e5b80\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\nYou can choose a custom sidebar (You can create sidebar from this screen \"**Appearence > Widgets**\"), and set it active in the left of right side.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/seBNXhbRv2SL3AKwzRgk_b000d49c-1d66-4676-9003-7a2853be017a.jpg\",\n        \"b000d49c-1d66-4676-9003-7a2853be017a.jpg\",\n        \"521\",\n        \"395\",\n        \"#1d6c95\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"How to control page banner\"\n}\n[/block]\nPage banner is horizontal banner which usually displays page title and breadscrumb.\n\n### 1. Enable or disable Page banner\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/XCHVxY5RCexGwujfFFOg_54cb0c78-3f79-4cf8-972a-1cf52a37d969.jpg\",\n        \"54cb0c78-3f79-4cf8-972a-1cf52a37d969.jpg\",\n        \"368\",\n        \"205\",\n        \"#0872a8\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n### 2. How to enable or disable breadcrumb\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/AZ5rqPbQnuwozHgjKBlZ_25215dee-c556-4b71-a62c-d5a50333401d.jpg\",\n        \"25215dee-c556-4b71-a62c-d5a50333401d.jpg\",\n        \"338\",\n        \"118\",\n        \"#0f79af\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"How to add logo\"\n}\n[/block]\nYou can feature your brand by adding a logo on the page header.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/gyYrBE1yTz20Yh2OhLDC_b9cb8e49-025c-47a1-b046-d1a90b6c26f6.jpg\",\n        \"b9cb8e49-025c-47a1-b046-d1a90b6c26f6.jpg\",\n        \"453\",\n        \"377\",\n        \"#14709f\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Advanced Settings\"\n}\n[/block]\nThis section is only available on General Options, and let you set advanced settings such as :\n\n ### 1. Enable or disable debug mode\n\nWhen this mode is enabled, you can see a notice on each unused items. This let you be informed of any part of the theme which is not currently in use. Disabling this mode, will hide such notices.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/TDwd2WhTxmQnclcDJFaS_2433e935-68db-48f2-9051-f177fd58aa33.jpg\",\n        \"2433e935-68db-48f2-9051-f177fd58aa33.jpg\",\n        \"1394\",\n        \"313\",\n        \"#12a4d3\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n### 2. Adding Custom CSS Code\n\nThis field let you add more styles to the theme. It's using a pretty visual editor with syntax highlight.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/8hzFh71FTliEYD7g6dOH_d786520d-12ef-426e-9bc4-7cc0905be840.jpg\",\n        \"d786520d-12ef-426e-9bc4-7cc0905be840.jpg\",\n        \"755\",\n        \"329\",\n        \"#34a4d4\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n### 3. Addiing Google Analytics Tracking Code\n\nThis field can also be used to execute custom JS script.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/7KWE8pNnT8O8zSAPoefN_51c4b9e9-ea51-42c0-b152-74184d9044ff.jpg\",\n        \"51c4b9e9-ea51-42c0-b152-74184d9044ff.jpg\",\n        \"544\",\n        \"343\",\n        \"#1c93bc\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"general-options","type":"basic","title":"General Options"}
This section host default options for the Theme. Those options can be overwritten with more specific options (such as blog options, pages options, authors options, etc.) This section is available on Customizer Screen and on WordPress dashboard. This section host unique parameter on Sub sections. **On Dashboard** [block:image] { "images": [ { "image": [ "https://files.readme.io/i2CSowtPTVGqSpOpK3AF_198c4f5f-f23a-415a-b806-19edb8bf2a51.png", "198c4f5f-f23a-415a-b806-19edb8bf2a51.png", "921", "623", "#0e74ae", "" ] } ] } [/block] **On Customizer Screen** [block:image] { "images": [ { "image": [ "https://files.readme.io/KSAgOrgYQBeyWMTyGTWH_d4e70fd4-82bc-4bca-89b4-57dad88e1da4.png", "d4e70fd4-82bc-4bca-89b4-57dad88e1da4.png", "863", "516", "#eb3435", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "How to customize TopBar" } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/Pns5K8lQm22svVTeOj1t_50298511-dc7e-480a-92f5-1833c3b237da.png", "50298511-dc7e-480a-92f5-1833c3b237da.png", "1061", "144", "#0882f4", "" ] } ] } [/block] The TopBar is the bar located at the top edge of the web browser. This bar displays some usefull information such as Social Links, Contact details. This TopBar can be managed from "General Options > TopBar" location on both Customizer and WordPress Dashboard. [block:image] { "images": [ { "image": [ "https://files.readme.io/w3dVrlHTSh2fO8xL8ldA_4b708507-9738-48ae-b6dc-6614c0173e83.png", "4b708507-9738-48ae-b6dc-6614c0173e83.png", "578", "656", "#1973a5", "" ] } ] } [/block] You can see that this section host 4 differents section. ### 1. Social Links You can add up to 6 differents links to various social networks. If a fields is left empty (you may need to delete a hastag and replace it by the obverse social link) this social links will be ignored. [block:image] { "images": [ { "image": [ "https://files.readme.io/ozG0oJL4SQmeczc6GQ86_2cf6aa18-d8a4-4837-a71a-cfc018c9c65c.png", "2cf6aa18-d8a4-4837-a71a-cfc018c9c65c.png", "294", "295", "#56739c", "" ] } ] } [/block] You can even drag links to order them as you need. ### 2. Contact Details This section let you specify 3 differents contact information. Those fields has a hastag as value their represent the type of the information displayed. Remove the hastag and replace it by your obverse contact detail. [block:image] { "images": [ { "image": [ "https://files.readme.io/tTPwyrbQJqS7PHeLjX0Q_ca00acde-141e-4490-9d50-ba073fdb4f97.png", "ca00acde-141e-4490-9d50-ba073fdb4f97.png", "308", "206", "#4b81c7", "" ] } ] } [/block] You can also drag theses fields. ### 3. Enabling TopBar This title talks about himself, this seciton let you enable the topbar. As you may already know each option defined under "General Options", are used as default option. They can be ovewritten by more specific options. [block:image] { "images": [ { "image": [ "https://files.readme.io/DaN7R7D5RAOIfHhX8Yya_82fb488c-d52a-4c89-9933-91fab2247b4c.png", "82fb488c-d52a-4c89-9933-91fab2247b4c.png", "372", "129", "#1f78ab", "" ] } ] } [/block] ### 4. Using Skin Span offer you various skin that can be applyied over your blog. If this option is set to yes, the TopBar will use Skin color as background, else Dark background will be used. [block:image] { "images": [ { "image": [ "https://files.readme.io/GTH6ygD1QESWbxSDN7Pt_ab80596c-de05-4358-8ff4-700c25a2704c.png", "ab80596c-de05-4358-8ff4-700c25a2704c.png", "307", "146", "#0b79b2", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "How to customize the Header" } [/block] This section host options for header (with menu and logo) [block:image] { "images": [ { "image": [ "https://files.readme.io/mq07xhhaTmeWHmJaROGK_eb7485fb-227b-4991-a150-73627997ce8b.png", "eb7485fb-227b-4991-a150-73627997ce8b.png", "324", "641", "#117baf", "" ] } ] } [/block] The first option (Display Header) let you enable Header Section. You can choose specific mobile menu and desktop menu. If those field a left blank, default menu defined on "**Appearence > Menus" **will been used instead. [block:callout] { "type": "info", "title": "Keep that in mind", "body": "If the following message is displayed \"No items of this type were found.\", you must create at least one menu on \"**Appearence > Menus**\". See this section [from WordPress.org](https://codex.wordpress.org/WordPress_Menu_User_Guide)." } [/block] [block:image] { "images": [ { "image": [ "https://files.readme.io/LsKWPiFtSbGlyKpeIfRW_ed35d880-8ae2-4742-bb1e-b15e46ccbc57.jpg", "ed35d880-8ae2-4742-bb1e-b15e46ccbc57.jpg", "598", "390", "#7c9c9c", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "How to customize the footer" } [/block] This section let you handle Footer options (it can be overwritten by more specific options). This sub section has unique parameters. ### 1. Footer Copyright [block:image] { "images": [ { "image": [ "https://files.readme.io/tA8Z9Bq6T0aKgUvLxBYD_73e8f814-6edf-4055-af97-a1f6c322ce6b.jpg", "73e8f814-6edf-4055-af97-a1f6c322ce6b.jpg", "756", "302", "", "" ] } ] } [/block] With this section, you can specify a unique Copyright, which will be displayed almost everywhere. This option can only be changed through "General Options". ### 2. Footer Menu Span theme has 3 differents menus location. On footer there is also a footer location. You can use this feature to display a custom menu on your footer (at the edge). This options can been overwritten. [block:image] { "images": [ { "image": [ "https://files.readme.io/wOvevWwmSKKE0KuxszOK_7f3e09f5-d909-4f19-98fd-b8f0efca0da4.jpg", "7f3e09f5-d909-4f19-98fd-b8f0efca0da4.jpg", "388", "197", "#2f3c52", "" ] } ] } [/block] ### 3. Color Palette This option let you customize the footer. You can choose various color scheme that you want to apply on the footer, do it according to your theme skin. [block:image] { "images": [ { "image": [ "https://files.readme.io/wTta6JIoQGWKEbrPit04_5a363e36-c92d-49be-91fc-103b2945d79d.jpg", "5a363e36-c92d-49be-91fc-103b2945d79d.jpg", "668", "343", "#27435c", "" ] } ] } [/block] ### 4. Color Type This option let you choose whether you want to use "Footer Palette" Colors or "Custom Colors Fields" to define footer color style. [block:image] { "images": [ { "image": [ "https://files.readme.io/TIQg7eYSbm4YRu0g9qEQ_095bfb3e-0b01-4309-94a3-6acf3114392a.jpg", "095bfb3e-0b01-4309-94a3-6acf3114392a.jpg", "432", "159", "#1e77a4", "" ] } ] } [/block] If you select, "Use Custom Colors", colors defined on those fields : Footer Background Color, Footer Text Color, Footer link Color, Footer Link Color on Hover will be used. [block:image] { "images": [ { "image": [ "https://files.readme.io/QArYUDjiQ42fBqZr3TIJ_5477ac77-e578-4cb2-98e9-c673a80f75ef.jpg", "5477ac77-e578-4cb2-98e9-c673a80f75ef.jpg", "628", "443", "#484950", "" ] } ] } [/block] ### 5. Change text color and footer padding The following fields : Footer Padding and Footer Text size, let you change footer padding and footer text size. [block:image] { "images": [ { "image": [ "https://files.readme.io/tHlVEWy0RoOdqUQXEGEr_cffc2564-ca21-4e2a-a188-90ba45cb903d.jpg", "cffc2564-ca21-4e2a-a188-90ba45cb903d.jpg", "641", "329", "#d93c3c", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "How to change the layout and the skin" } [/block] This section groups options about layout and skin. Those options can be ovewritten by more specific options. ### 1. Select the layout type Span let you choose between the boxed version and the wide version. **Boxed Version** : [block:image] { "images": [ { "image": [ "https://files.readme.io/Nvz1GtbQSDGk8KVwvSjg_aae1c653-2d59-4bdb-8c35-1f0b799f7182.jpg", "aae1c653-2d59-4bdb-8c35-1f0b799f7182.jpg", "463", "508", "#e03a3a", "" ] } ] } [/block] His option : [block:image] { "images": [ { "image": [ "https://files.readme.io/nFeSuFcVSdiU2mhaTnZE_d993d1fe-e43a-46ae-b47f-01b25b944c65.jpg", "d993d1fe-e43a-46ae-b47f-01b25b944c65.jpg", "563", "306", "#0d73a9", "" ] } ] } [/block] ** Wide Version ** : [block:image] { "images": [ { "image": [ "https://files.readme.io/oXjgiQbgS6acY86wsBxn_80d09b4d-61ae-49a4-9f36-d54d6e47988e.jpg", "80d09b4d-61ae-49a4-9f36-d54d6e47988e.jpg", "463", "508", "#e03a39", "" ] } ] } [/block] His option : [block:image] { "images": [ { "image": [ "https://files.readme.io/hIUwMQx2R6ef6hiZbdTM_87e40750-674b-4dc9-9604-e699b8606463.jpg", "87e40750-674b-4dc9-9604-e699b8606463.jpg", "547", "309", "#0e72a6", "" ] } ] } [/block] ### 2. Choose background image for boxed version If boxed version is selected, a background image (for left and right border) can be selected. This will add more vibes to the page. Span is build of 14 differents background. [block:image] { "images": [ { "image": [ "https://files.readme.io/2bsHcGyR62tzbJGhRUNA_9532e87a-a8ff-4c26-8da0-c86c13b67bd7.jpg", "9532e87a-a8ff-4c26-8da0-c86c13b67bd7.jpg", "614", "447", "#e13837", "" ] } ] } [/block] ### 3. Select a Skin color As it possible to choose a footer skin, it also possible to choose a page skin (this does'nt affect footer colors). Span is build of 12 differents skins : [block:image] { "images": [ { "image": [ "https://files.readme.io/TFHzOiNTemoHyaAhXNLk_e5fb1f15-f9e8-4f40-9d7f-6476b4cf61e4.jpg", "e5fb1f15-f9e8-4f40-9d7f-6476b4cf61e4.jpg", "628", "521", "#284c5b", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "How to change sidebars" } [/block] Default WordPress sidebars options are used if no more specific options are set. This option is very usefull for specific options like : blog, pages, archives. You can set there differents sidebars according to your requirements. ### 1. Sidebar position [block:image] { "images": [ { "image": [ "https://files.readme.io/5GpM8ZZiQmkl0tfNyygb_cc3aeb1e-d1b3-4d2d-bfb4-125a9d96f3d6.jpg", "cc3aeb1e-d1b3-4d2d-bfb4-125a9d96f3d6.jpg", "483", "275", "#0a72a6", "" ] } ] } [/block] You can change the layout and choose to display a sidebar on the sides (left or right) or disable sidebar. ### 2. Choose a custom sidebar [block:image] { "images": [ { "image": [ "https://files.readme.io/Z2BtTB1RL2nXppiqHvrD_e94c4bd3-9fe1-4f42-bddb-1704da72c10f.jpg", "e94c4bd3-9fe1-4f42-bddb-1704da72c10f.jpg", "443", "653", "#1e5b80", "" ] } ] } [/block] You can choose a custom sidebar (You can create sidebar from this screen "**Appearence > Widgets**"), and set it active in the left of right side. [block:image] { "images": [ { "image": [ "https://files.readme.io/seBNXhbRv2SL3AKwzRgk_b000d49c-1d66-4676-9003-7a2853be017a.jpg", "b000d49c-1d66-4676-9003-7a2853be017a.jpg", "521", "395", "#1d6c95", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "How to control page banner" } [/block] Page banner is horizontal banner which usually displays page title and breadscrumb. ### 1. Enable or disable Page banner [block:image] { "images": [ { "image": [ "https://files.readme.io/XCHVxY5RCexGwujfFFOg_54cb0c78-3f79-4cf8-972a-1cf52a37d969.jpg", "54cb0c78-3f79-4cf8-972a-1cf52a37d969.jpg", "368", "205", "#0872a8", "" ] } ] } [/block] ### 2. How to enable or disable breadcrumb [block:image] { "images": [ { "image": [ "https://files.readme.io/AZ5rqPbQnuwozHgjKBlZ_25215dee-c556-4b71-a62c-d5a50333401d.jpg", "25215dee-c556-4b71-a62c-d5a50333401d.jpg", "338", "118", "#0f79af", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "How to add logo" } [/block] You can feature your brand by adding a logo on the page header. [block:image] { "images": [ { "image": [ "https://files.readme.io/gyYrBE1yTz20Yh2OhLDC_b9cb8e49-025c-47a1-b046-d1a90b6c26f6.jpg", "b9cb8e49-025c-47a1-b046-d1a90b6c26f6.jpg", "453", "377", "#14709f", "" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Advanced Settings" } [/block] This section is only available on General Options, and let you set advanced settings such as : ### 1. Enable or disable debug mode When this mode is enabled, you can see a notice on each unused items. This let you be informed of any part of the theme which is not currently in use. Disabling this mode, will hide such notices. [block:image] { "images": [ { "image": [ "https://files.readme.io/TDwd2WhTxmQnclcDJFaS_2433e935-68db-48f2-9051-f177fd58aa33.jpg", "2433e935-68db-48f2-9051-f177fd58aa33.jpg", "1394", "313", "#12a4d3", "" ] } ] } [/block] ### 2. Adding Custom CSS Code This field let you add more styles to the theme. It's using a pretty visual editor with syntax highlight. [block:image] { "images": [ { "image": [ "https://files.readme.io/8hzFh71FTliEYD7g6dOH_d786520d-12ef-426e-9bc4-7cc0905be840.jpg", "d786520d-12ef-426e-9bc4-7cc0905be840.jpg", "755", "329", "#34a4d4", "" ] } ] } [/block] ### 3. Addiing Google Analytics Tracking Code This field can also be used to execute custom JS script. [block:image] { "images": [ { "image": [ "https://files.readme.io/7KWE8pNnT8O8zSAPoefN_51c4b9e9-ea51-42c0-b152-74184d9044ff.jpg", "51c4b9e9-ea51-42c0-b152-74184d9044ff.jpg", "544", "343", "#1c93bc", "" ] } ] } [/block]