CSS Editor module

With CSS editor, you can apply your custom styling ( custom CSS) to all markup elements in your app such as images or buttons. For example, you can change position, width or alignment of images, buttons, titles, icons etc. You can also hide elements or add  borders to them or change their indent etc. 

To access the CSS editor for your app, please click the "markup" icon in tabstrip on the top of the design section of app builder:
 
 
Clicking on this icon will open up the editor, and allow you to create a new styling for your app, by clicking on the " + New" button
 
Now that you have the tool enabled, you can go ahead, and make the design changes to your app, that go beyond the usual template styles. Unfortunately, Shoutem does't have a documented list of classes / methods used in the default designs. This is something we plan to release in the near future.

Until then, a great tool that will expose this information is a simple inspector, that you can find in your desktop web browser, such as Google Chrome. In combination with the app builder preview window, it should allow you to find the specific pieces of code that you want to modify. 

Let's take the simplest example in the world, to demonstrate this. Let's say that we want to remove the check-in button from our places module. First, we need to find the responsible element, that we want to modify.

Using the app builder preview, navigate to the random place page, like the one on the screenshot, and then inspect it to find the name of the element you are looking to modify.
 



Once you've identified the responsible element, we can write some custom styling that will affect the same. Once you do this, hit the save button, and check the results in the app preview window. In our example, we want to hide this button via it's class check-in-btn, so we're making use of the display property, and it's value of none.

Entered code should look like this.


Once the new style has been applied, the result is visible in the app preview window, after reloading the view.

 
This is a simple example that demonstrates the functionality here, but there's so much more the feature has to offer, where the only strong limitation is one's own imagination. Take a look at a few before/after examples below, where our team played around with the feature capabilities.
 

Example 1. Custom slide in menu setup


- partial slide in the menu screen coverage with transparent background
- Unique static menu element in the bottom
- different item styling starting with a specific element in the menu.

   
 

Example 2. Custom news list feed


- Dynamic leading image sizes
- Custom article arrangement
- Custom bordering and scrolling mechanisms

 
     


We hope that this article gives you an idea of possibilities here, and helps you to build your own unique app. In case you don't feel like messing around with the CSS on your own, we also offer Shoutem designer services, that will provide you with the unique designs like the ones above, without you having to do the hard work. If you're interested in this, have any questions in regards to the tool, or just need a piece of advice, feel free to get in touch with our support team at  shoutem@shoutem.com .
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us