In this step, we want to make our application look good by adding a theme, logos, and icons. Five gives us various customization options for our user interface. By default, every new application looks the same: blue and white. By using Five’s theme editor, applying logos to our application or giving our menu custom icons, we can build beautiful web apps that delight our users!<\/p>\n\n\n\n
\n\n\n\n
\r\n Ready to Convert Your Spreadsheet to a Web App?\r\n <\/h3>\r\n
\r\n Transform your Excel files into powerful, secure web applications without the coding headache. Our experts will convert your spreadsheet with:\r\n <\/p>\r\n \r\n
\r\n Free consultation & fixed-price quote\r\n <\/p>\r\n<\/div>\n\n\n\n
\n\n\n\n
Convert Your Spreadsheet Into a Beautiful Web App: Follow Our 5-Part Guide<\/h4>\n\n\n\n
This blog post is part 3 of a 5-part series on converting Excel spreadsheets to web apps. To view the other parts, follow the links here:<\/p>\n\n\n\n
- \n
- Step 1: Excel to Web App – Creating a Database and Forms<\/a><\/li>\n\n\n\n
- Step 2: Excel to Web App – Calculating a Field<\/a><\/li>\n\n\n\n
- Step 4: Excel to Web App – Adding Logins to Your App<\/a><\/li>\n\n\n\n
- Step 5: Excel to Web App – Creating Charts and Dashboards<\/a><\/li>\n<\/ul>\n\n\n\n
\n\n\n\nCreating an Application Theme<\/h3>\n\n\n\n
In Five, a theme describes how an application looks. To understand themes better, check out our themes library<\/a> and get a visual impression of how different themes affect your application.<\/p>\n\n\n\n
To create your theme, follow these steps.<\/p>\n\n\n\n
1. Click on Setup <\/strong>and then on Themes.<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-1-1024x641.png\")
<\/figure>\n\n\n\n
\n\n\n\n2. Click on the yellow Plus<\/strong> icon and then type a name in Name<\/strong> field. We’re using Portfolio<\/strong> as an example name, but feel free to pick something more descriptive like “Dark Theme”<\/strong>, for example.<\/p>\n\n\n\n
Next click on Click to edit theme.<\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-2-1024x449.png\")
<\/figure>\n\n\n\n
\n\n\n\n3. You will now see a theme editor in front of you. Here’s how it works: click somewhere inside the theme editor and then assign colors to the element you have chosen. You can also assign font types or field styles.<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-3-1024x656.png\")
<\/figure>\n\n\n\n
\n\n\n\nEXPERT TIP: <\/em><\/strong>The fastest way to create a beautiful theme is to download one of our theme templates<\/a>. Pick the template that you like, click on download, and copy the code. Now click on Advanced <\/strong>in the theme editor and replace the existing code with the code that you have copied. Click save and you’re already done with your theme!<\/p>\n\n\n\n
\n\n\n\n4. To apply your theme to your application, navigate to Setup ><\/strong> Instances<\/strong>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-5-1024x415.png\")
<\/figure>\n\n\n\n
\n\n\n\n5. Attach the theme by selecting the Default<\/strong> instance. Now click on the Theme<\/strong> field and select your theme. Remember, we called our theme Portfolio<\/strong> but if you have chosen a different name, then that’s the name you will see here.<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-6-1024x662.png\")
<\/figure>\n\n\n\n
\n\n\n\n6. Right below Theme, <\/strong>there are two fields where you can upload images that serve as logos in your application. If your application is supposed to have a logo, you can add its Logo <\/strong>and Small Logo<\/strong> (think of it like a thumbnail) here. <\/p>\n\n\n\n
You can also define your application’s User Interface<\/strong>. Five comes with two pre-built user interfaces: New York and Boston, which either put your menu navigation bar along the top or to the left. Pick the one you like best.<\/p>\n\n\n\n
\n\n\n\nAs always, it’s time to run the application again. Click the Run<\/strong> button in the top right corner.<\/p>\n\n\n\n
Here’s what our app now looks like. We chose “Jungle Fever” as a theme and “Boston” as a User Interface.<\/p>\n\n\n\n
![\"Five.Co](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Themed-Application-1024x651.png\")
<\/figure>\n\n\n\n
\n\n\n\nNext Step: Add User Logins to Your App<\/h2>\n\n\n\n
In the next step, we will show you how to add user logins to your application,<\/a> so that your data is secure from unauthorized access.<\/p>\n\n\n\n
\n\n\n\nFinding Help in Five<\/h2>\n\n\n\n
In case you get stuck during the development process, we’re here to help! Continue developing your application by accessing these resources:<\/p>\n\n\n\n
- \n
- Five’s User Community:<\/strong> Visit https:\/\/five.org<\/a> to ask questions or get inspiration from other users.<\/li>\n\n\n\n
- Five’s Documentation:<\/strong> Visit help.five.org<\/a> to access Five’s comprehensive documentation.<\/li>\n<\/ol>\n\n\n\n
Five’s In-App Help<\/h3>\n\n\n\n
Last, find useful tips for your application development by clicking on Five’s in-app help <\/strong>available in the top right corner or on almost any field.<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-1024x649.png\")
<\/figure>\n\n\n\n
\n\n\n\n\nGet Your App Online For US$29.99 Per Month<\/h2>\n\n\n\n
To deploy your application, sign up for one of our paid plans, starting from US$29.99 per month and application. Your plan includes unlimited end-users and provides you with a custom URL to access the application online.<\/p>\n\n\n\n
\n\n - Five’s Documentation:<\/strong> Visit help.five.org<\/a> to access Five’s comprehensive documentation.<\/li>\n<\/ol>\n\n\n\n
- Step 2: Excel to Web App – Calculating a Field<\/a><\/li>\n\n\n\n