{"id":2290,"date":"2024-01-18T06:51:31","date_gmt":"2024-01-17T22:51:31","guid":{"rendered":"https:\/\/five.co\/?p=2290"},"modified":"2024-03-20T13:17:02","modified_gmt":"2024-03-20T05:17:02","slug":"how-to-make-a-custom-theme","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/blog\/how-to-make-a-custom-theme\/","title":{"rendered":"How To Make A Custom Theme"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"five-labs-making-a-custom-theme-in-five\">Five Labs: Making A Custom Theme In Five<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Welcome to Five Labs, your step-by-step guide to application development in Five. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A theme is always a crucial part of application development; it plays an important role in creating a cohesive and appealing interface, leaving a lasting impression on users. However, most developers aren&#8217;t particularly fond of writing CSS with one of the major complaints being that it&#8217;s hard to debug, and using media queries to create responsiveness is also often considered a challenging aspect.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This article will guide you on how to create custom themes in Five using the point-and-click editor. Additionally, we will explore the advanced section of the theme editor, which enables you to write CSS for your Five applications.<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#step-1-creating-a-custom-theme\">Step 1: Creating A Custom Theme<\/a><\/li><li><a href=\"#step-2-adding-a-theme-to-an-instance\">Step 2: Adding A Theme To An Instance<\/a><\/li><li><a href=\"#optional-step-importing-themes\">Optional Step: Importing Themes<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"lab-objectives\">Lab Objectives<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">By the end of this lab, you will learn how you can create and edit your own custom themes in Five and use them for your applications. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For this tutorial, you need to have an application in Five. If you don\u2019t already have one,&nbsp;<a href=\"https:\/\/preview-php85.dzine.org\/five\/use-cases\/\">you can download and import one of our template applications<\/a>&nbsp;to get started.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\"><span style=\"color: #f1ebda; background-color: #4588d8; font-size: calc(12px + 0.390625vw);\"><strong>Don&#8217;t Feel Like Reading?<\/strong><\/span><\/mark>&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Watch the YouTube video and learn how to use the Theme Editor<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How To Make A Theme | Low-Code For Real Developers | Five.Co\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/gHPWWdVusrg?start=67&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-1-creating-a-custom-theme\">Step 1: Creating A Custom Theme<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We will begin by launching Five and selecting an application. Once you enter the development environment, click on &#8220;Setup&#8221; and then select the &#8220;Themes&#8221; option.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click on the yellow &#8220;+&#8221; button to add a new theme to your application. In this interface, start by assigning it an appropriate name, and then click on the field labeled &#8220;Click to edit theme.&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Five should now open a point-and-click theme editor for your application. Developers who prefer not to write CSS will find this feature particularly useful, as it allows you to edit the theme of your application through simple point-and-click actions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, the image below shows how to change the color of the navigation bar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"592\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-63-5-1024x592.png\" alt=\"\" class=\"wp-image-2294\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-63-5-1024x592.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-63-5-300x173.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-63-5-768x444.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-63-5-1536x888.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-63-5-2048x1183.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><br>The point-and-click editor is a tool accessible to anyone for creating themes for their applications. If you desire more in-depth control, or if you are among the few developers who enjoy writing CSS, the theme editor also offers an Advanced option for more in-depth customization and greater control.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Simply click on the &#8220;Advanced&#8221; tab on top (next to the one that says &#8220;Theme&#8221;) and now you should be able to see the entire CSS file for your application in a JSON format. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here you have more freedom than the point-and-click editor as you are directly editing the CSS.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"539\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/image-1-1024x539.png\" alt=\"\" class=\"wp-image-2295\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/image-1-1024x539.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/image-1-300x158.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/image-1-768x404.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/image-1-1536x809.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/image-1.png 1916w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-amber-color\">Note<\/mark><\/strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-pale-cyan-blue-color\">:<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-black-color\"><strong>Five creates responsive applications by default, any application that a developer makes will be by default adjusted for every screen size<\/strong><\/mark><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-2-adding-a-theme-to-an-instance\">Step 2: Adding A Theme To An Instance<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now that we have created a theme, the next step is to attach it to our application. This can be done by clicking on &#8220;Instance&#8221; in the same &#8220;Setup&#8221; menu and selecting the default instance of your app (or any other instance, if you have multiple).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this menu, use the &#8220;Theme&#8221; lookup to browse and select the theme you wish to apply to your app. Additionally, you can add logos to your application from this section, which is divided into two categories: &#8220;Logo&#8221; and &#8220;Small Logo&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The &#8220;Logo&#8221; represents the default logo for your application, which appears on the sidebar, while the &#8220;Small Logo&#8221; is the logo displayed when the sidebar is collapsed into a shorter view.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"471\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-70-1024x471.png\" alt=\"\" class=\"wp-image-2296\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-70-1024x471.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-70-300x138.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-70-768x353.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-70-1536x706.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-70-2048x942.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can also toggle the user interface between &#8220;Boston&#8221; and &#8220;New York&#8221;. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8220;Boston&#8221; is the default interface that includes a sidebar where your menu items are located, as shown in the screenshot above.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&#8220;New York,&#8221; on the other hand, provides an interface similar to Five. In this layout, you won&#8217;t have a sidebar; instead, there&#8217;s a navigation bar where your menu items will be located.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"592\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-71-1024x592.png\" alt=\"\" class=\"wp-image-2297\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-71-1024x592.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-71-300x173.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-71-768x444.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-71-1536x888.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Frame-71-2048x1183.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"optional-step-importing-themes\">Optional Step: Importing Themes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you do not wish to write your own custom themes, then you can download and import themes from our website <a href=\"https:\/\/preview-php85.dzine.org\/five\/themes\/\" data-type=\"link\" data-id=\"https:\/\/preview-php85.dzine.org\/five\/themes\/\">five.co<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this section, you&#8217;ll discover a collection of themes available for direct use in your applications. Each theme comes with its own CSS code. Simply copy the code and paste it into the advanced section of the point-and-click editor, and your theme will be ready to use.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"505\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/image-2-1024x505.png\" alt=\"\" class=\"wp-image-2298\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/image-2-1024x505.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/image-2-300x148.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/image-2-768x379.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/image-2-1536x757.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/image-2.png 1913w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If you haven&#8217;t installed Five yet, feel free to download it for free and get started immediately<\/p>\n\n\n\n<div style=\"background-color: #001524;\"><hr style=\"height: 5px;\" \/>\n<pre style=\"text-align: center; overflow: hidden; white-space: pre-line;\"><span style=\"color: #f1ebda; background-color: #4588d8; font-size: calc(18px + 0.390625vw);\"><strong>Build A Database from Scratch<\/strong>\n<span style=\"font-size: 14pt;\">Download Five for Free and Start Developing Your Application<\/span><\/span><\/pre>\n<p style=\"text-align: center;\"><a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\/\" target=\"_blank\" rel=\"noopener\"><button style=\"background-color: #f8b92b; border: none; color: black; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; cursor: pointer; margin: 4px 2px; border-radius: 5px;\"><strong>Sign Up<\/strong><\/button><br \/><\/a><\/p>\n<hr style=\"height: 5px;\" \/><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Five Labs: Making A Custom Theme In Five Welcome to Five Labs, your step-by-step guide to application development in Five. A theme is always a crucial part of application development; it plays an important role in creating a cohesive and appealing interface, leaving a lasting impression on users. However, most developers aren&#8217;t particularly fond of [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":2302,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[21],"tags":[],"class_list":["post-2290","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Five.Co-How-To-Make-A-Custom-Theme.png",1280,720,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Five.Co-How-To-Make-A-Custom-Theme-150x150.png",150,150,true],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Five.Co-How-To-Make-A-Custom-Theme-300x169.png",300,169,true],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Five.Co-How-To-Make-A-Custom-Theme-768x432.png",768,432,true],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Five.Co-How-To-Make-A-Custom-Theme-1024x576.png",1024,576,true],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Five.Co-How-To-Make-A-Custom-Theme.png",1280,720,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/01\/Five.Co-How-To-Make-A-Custom-Theme.png",1280,720,false]},"uagb_author_info":{"display_name":"Pranoy Sarkar","author_link":"https:\/\/preview-php85.dzine.org\/five\/author\/f1v5_ed8_au\/"},"uagb_comment_info":0,"uagb_excerpt":"Five Labs: Making A Custom Theme In Five Welcome to Five Labs, your step-by-step guide to application development in Five. A theme is always a crucial part of application development; it plays an important role in creating a cohesive and appealing interface, leaving a lasting impression on users. However, most developers aren&#8217;t particularly fond of&hellip;","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/comments?post=2290"}],"version-history":[{"count":0,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2290\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/2302"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=2290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=2290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=2290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}