Enhancing Your Qodly Pet Contest App with CSS

Enhancing Your Qodly Pet Contest App with CSS

Qodly 02/20/2025

<p>Welcome back to our <a href="https://qodly.com/blog/calling-all-qodly-newbies-build-simple-pet-contest-app" target="_blank">pet contest app</a> journey!&nbsp;</p><p><a href="https://qodly.com/blog/calling-all-qodly-newbies-build-simple-pet-contest-app" target="_blank">In the previous post</a>, we built the core functionality of our application using Qodly’s powerful low-code tools. Now, it’s time to make it visually appealing with CSS!&nbsp;</p><p><strong>Best part? We won’t use a single line of CSS code!</strong> Everything will be configured directly from Qodly’s Property List, making styling effortless—even if you have no prior experience with CSS.&nbsp;</p><p>In this post, we’ll explore how to customize colors, fonts, and spacing and add stylish buttons and pet cards.</p><p>Let’s get started!</p><p>This is the <strong>mockup I received from our designer</strong>, so let’s try to <strong>make it as close as possible</strong> using Qodly’s built-in styling tools.</p><p>&nbsp;</p><img src="/sites/default/files/pet-1.png" data-entity-uuid="e8358ea8-8939-42fd-848b-d84ec67dd1a2" data-entity-type="file" alt="" width="1020" height="372"><p>&nbsp;</p><h2>Customizing the Overall Look&nbsp;</h2><h3>Adding a Background Image</h3><p>A great background sets the mood for our app. Here’s how to add one:</p><ol><li>Drag and drop a background image of your choice (in my case, the one with cute cat paws) into your <strong>Shared → visual</strong> folder:</li><li>Open the <strong>Background</strong> section in the Property List.</li><li>Under Background → Image,</li><li>Drop the image from your visuals folder into the webform, and voilà—the background is set! 🐾</li></ol><h3>Using a Solid Color Instead</h3><p>If you prefer a clean look, you can use a light beige color instead:&nbsp;</p><ol><li>In the Property List, find Color -&gt; Background.</li><li>Set the color to #FFF4E6 (light beige).&nbsp;</li></ol><p>Either option instantly transforms your app's feel, making it warm and inviting!</p><p>&nbsp;</p><h2><img src="/sites/default/files/pet-2.png" data-entity-uuid="e39c8f38-e935-4889-ab93-b81c10d3b086" data-entity-type="file" alt="" width="1020" height="295"></h2><p>&nbsp;</p><h2>Styling the Voting Section</h2><h3>Enhancing the Random Pet Display</h3><p>To ensure the pet images look great:&nbsp;</p><ol><li>Select the image component.</li><li>In the Property List, apply:</li></ol><ul><li>Border Radius: 50px (for round images)</li><li>Display: Flex</li><li>Justify Content &amp; Align Items: Center&nbsp;</li></ul><p>This makes each pet image look clean and perfectly centered!</p><p>&nbsp;</p><h3>Enhancing the Voting Buttons</h3><p>Let’s make the "Cute" and "Not Cute" buttons stand out:&nbsp;</p><ol><li>Select the button component and go to the Property List.</li><li>Adjust the Background Color to Light Carmine Pink (#E85D66) for "Not Cute" and Keppel (#41B6A6) to "Cute" .</li><li>Set the Text Color to White (#FFFFFF).</li><li>Increase the Border Radius to 6px for rounded edges.</li><li>Feel free to adjust the height and width as well.</li><li>💡 Want icons? Add a <strong>read heart </strong><span class="s1">♥️</span> and <strong>thumbs-down</strong> 👎 to make them even more engaging!<br>&nbsp;</li></ol><p><img src="/sites/default/files/pet-3.png" data-entity-uuid="f023dd3d-8fdb-4b85-8451-d3b3aa26574d" data-entity-type="file" alt="" width="1020" height="295"></p><p>&nbsp;</p><h2>Refining the Pet Matrix</h2><p>Before, the pet matrix looked cluttered, with overlapping entries. Here’s how to fix it:</p><ol><li>In the Property List, set the height of the matrix to 400px.</li><li>Use Flexbox. Justify Content &amp; Align Items: Center</li><li>Apply a Border Radius of 50px for a cute, rounded effect for the images.&nbsp;</li></ol><p>Now, our pet list looks clean and well-organized!</p><p>&nbsp;</p><img src="/sites/default/files/pet-4.png" data-entity-uuid="8d1ebfb5-6626-4842-bd4b-0a5acfdb2648" data-entity-type="file" alt="" width="1020" height="253"><p>&nbsp;</p><h2>Styling the Add Pet Section</h2><h3>Enhancing the Add Pet Button</h3><p>Make the <strong>"Add New Pet"</strong> button visually appealing:</p><ol><li>Select the button in the webform.</li><li>In the Property List, set:<ol><li>Background Color: Indian Yellow (#E5A04B)</li><li>Text Color: White (#FFFFFF)</li><li>Font Size: 14px,</li><li>Bold Border Radius: 6px</li></ol></li><li>Add a plus (+) icon, position it to the left, and set the color to #FFFFFF.</li><li>Adjust the Padding for a balanced layout.</li></ol><h3>Perfecting the Modal</h3><ol><li>Set a Default Pet Image<ol><li>Select the <strong>image component</strong>.</li><li><em>Follow the steps in the section Adding a Background Image to add a default image</em>. This can provide a visual cue to users about what kind of image they should upload.</li></ol></li><li>Center the modal<ol><li>In the <strong>Layout</strong> section, set <strong>Alignment</strong> to <strong>Center</strong>.</li><li>Adjust <strong>Margins &amp; Padding</strong> for proper spacing.</li></ol></li><li>Style the Upload Button<ol><li>Select the Upload Image component.</li><li>Choose a camera icon 📷 from the Icon Picker.</li><li>Set the Button Color to #E5A04B (to match the "Add Pet" button).</li></ol></li><li>Refine Input Field<ol><li>Add a <strong>light border</strong> and <strong>6px rounded corners</strong>.</li><li>Adjust the <strong>font size</strong> for readability.</li></ol></li><li>Customize the Save Button<ol><li><strong>Background Color</strong>: <strong>#E5A04B</strong></li><li><strong>Text Color</strong>: <strong>#FFFFFF</strong></li><li>Adjust <strong>padding</strong> for a well-proportioned look.</li></ol></li></ol><p><img src="/sites/default/files/pet-5.png" data-entity-uuid="0fd117bc-0103-4202-9362-1f4a8c8a9d3d" data-entity-type="file" alt="" width="1020" height="295"></p><p>&nbsp;</p><h2>Bringing It All Together&nbsp;</h2><p>With just a few tweaks in the <strong>Property List</strong>, we transformed our app from screen 1 to 2:</p><p>&nbsp;</p><img src="/sites/default/files/pet-6_0.png" data-entity-uuid="3656363e-9ecf-4a80-a8c0-28032e73c774" data-entity-type="file" alt="" width="1020" height="295"><p>&nbsp;</p><p>And we did it all <strong>without writing a single line of CSS</strong>—just using Qodly’s built-in styling tools!</p><p>Feel free to play around with different styles! If you have questions or styling ideas, connect with us on the <strong>Qodly Forums</strong>! 🚀</p>

By Intissar Elmezrouai, Product Marketing Manager

Share this on :

Welcome back to our pet contest app journey! 

In the previous post, we built the core functionality of our application using Qodly’s powerful low-code tools. Now, it’s time to make it visually appealing with CSS! 

Best part? We won’t use a single line of CSS code! Everything will be configured directly from Qodly’s Property List, making styling effortless—even if you have no prior experience with CSS. 

In this post, we’ll explore how to customize colors, fonts, and spacing and add stylish buttons and pet cards.

Let’s get started!

This is the mockup I received from our designer, so let’s try to make it as close as possible using Qodly’s built-in styling tools.

 

 

Customizing the Overall Look 

Adding a Background Image

A great background sets the mood for our app. Here’s how to add one:

  1. Drag and drop a background image of your choice (in my case, the one with cute cat paws) into your Shared → visual folder:
  2. Open the Background section in the Property List.
  3. Under Background → Image,
  4. Drop the image from your visuals folder into the webform, and voilà—the background is set! 🐾

Using a Solid Color Instead

If you prefer a clean look, you can use a light beige color instead: 

  1. In the Property List, find Color -> Background.
  2. Set the color to #FFF4E6 (light beige). 

Either option instantly transforms your app's feel, making it warm and inviting!

 

 

Styling the Voting Section

Enhancing the Random Pet Display

To ensure the pet images look great: 

  1. Select the image component.
  2. In the Property List, apply:
  • Border Radius: 50px (for round images)
  • Display: Flex
  • Justify Content & Align Items: Center 

This makes each pet image look clean and perfectly centered!

 

Enhancing the Voting Buttons

Let’s make the "Cute" and "Not Cute" buttons stand out: 

  1. Select the button component and go to the Property List.
  2. Adjust the Background Color to Light Carmine Pink (#E85D66) for "Not Cute" and Keppel (#41B6A6) to "Cute" .
  3. Set the Text Color to White (#FFFFFF).
  4. Increase the Border Radius to 6px for rounded edges.
  5. Feel free to adjust the height and width as well.
  6. 💡 Want icons? Add a read heart ♥️ and thumbs-down 👎 to make them even more engaging!
     

 

Refining the Pet Matrix

Before, the pet matrix looked cluttered, with overlapping entries. Here’s how to fix it:

  1. In the Property List, set the height of the matrix to 400px.
  2. Use Flexbox. Justify Content & Align Items: Center
  3. Apply a Border Radius of 50px for a cute, rounded effect for the images. 

Now, our pet list looks clean and well-organized!

 

 

Styling the Add Pet Section

Enhancing the Add Pet Button

Make the "Add New Pet" button visually appealing:

  1. Select the button in the webform.
  2. In the Property List, set:
    1. Background Color: Indian Yellow (#E5A04B)
    2. Text Color: White (#FFFFFF)
    3. Font Size: 14px,
    4. Bold Border Radius: 6px
  3. Add a plus (+) icon, position it to the left, and set the color to #FFFFFF.
  4. Adjust the Padding for a balanced layout.

Perfecting the Modal

  1. Set a Default Pet Image
    1. Select the image component.
    2. Follow the steps in the section Adding a Background Image to add a default image. This can provide a visual cue to users about what kind of image they should upload.
  2. Center the modal
    1. In the Layout section, set Alignment to Center.
    2. Adjust Margins & Padding for proper spacing.
  3. Style the Upload Button
    1. Select the Upload Image component.
    2. Choose a camera icon 📷 from the Icon Picker.
    3. Set the Button Color to #E5A04B (to match the "Add Pet" button).
  4. Refine Input Field
    1. Add a light border and 6px rounded corners.
    2. Adjust the font size for readability.
  5. Customize the Save Button
    1. Background Color: #E5A04B
    2. Text Color: #FFFFFF
    3. Adjust padding for a well-proportioned look.

 

Bringing It All Together 

With just a few tweaks in the Property List, we transformed our app from screen 1 to 2:

 

 

And we did it all without writing a single line of CSS—just using Qodly’s built-in styling tools!

Feel free to play around with different styles! If you have questions or styling ideas, connect with us on the Qodly Forums! 🚀

Subscribe to Qodly Blog 
 

Your source for awesome content and news related to Low Code/No Code trends and challenges, how-to’s, tips and tricks.

By submitting this form, I agree to Qodly's Privacy Policy

Hybrid Low-code Platform For Your Business Apps

Have freedom of customization while avoiding the constraints of No-Code limitations. Try Qodly for Free!

Discover Qodly