SignalMind Blog

Responsive and mobile content builder. API-enabled.

Custom CSS Classes in piJnz

This morning we've added the ability to add your own custom CSS classes to any elements on your mobile page. If you understand CSS and HTML and would like to add a certain style to a mobile page element directly via CSS - you can now do so.

Here is how this works:

custom CSS - mobile page1. First, drag a Custom HTML widget to the top of the mobile page. There you can add your class definitions, or reference an external CSS file. Note: save the Custom HTML widget into your own widget library if you plan on using it on multiple pages (that way the changes you make there will be applied to multiple mobile pages).
In this case we've created our own CSS class "myform" that defines a gray border around the element.

2. Next, let's assign this class to the text widget above the form on our mobile page. We do this by first clicking on the Style icon next to our Form widget:

 CSS HTML5 mobile page

And then we would assign our CSS class in "Custom CSS classes" setting:
custom CSS mobile page

The new CSS class is now added to our text widget, and here is what the end result looks like (you see a gray border around the form header):
custom CSS

Elena English

Mobile afficionado and tech entrepreneur. Follow on Google+

Comments are closed