TIP/Trick/Hack 2.0: Injecting CSS into Mobile Version & Fixing Mobile Groups Style

[⚡JFarrow⌁]

I'd be willing to bet that most anyone reading this who has a 2.0 Ning community is currently facing the the same problem - no apparent way to style the mobile version of the community.  However, when it comes to the way our mobile versions display links, navigation, group info, etc.this struggle is over. 

Here is a tip for changing the way your mobile community looks and feels.

For example:  Typical Mobile 2.0 Button block inside a group

Currently, inside most every 2.0 community mobile version, inside a group, everything is smushed together.    Here is a solution I discovered today kinda by accident, while rearranging my mobile pages.

You can add CSS styles inside your Mobile Analytics page in the dashboard.     http://YOURNINGCOMMUNITY.com/main/mobileanalytics/

By adding the following code snippet to your Mobile Analytics, you will be able to once and for all fix this problem.

<style> div.ui-controlgroup-controls {width:100%!important;}</style>

a couple other styles you might like to pack in

Change Link Color:     a.ui-link {color:#a12712!important;}

Change background color of Navigation:  div.panel {background:#eee!important;}

This goes to show that you can always learn something new everyday.  Even though i have been working with this platform since 2008, there is still so much that can be learned.

Everything is suddenly SO much better..

Let me know if you have questions or if you found a new style to add to the mobile..

[⚡JFarrow⌁]

A couple more styles I have added, which you might like to try too

Change the colors of the numbers for comment and like counts

span.likeCount,a.comment.ui-link {color:#eee!important}

Change the color of the background in the search bar and footer

div.search-bar,div.actionBar {background:linear-gradient(#a12712, #FF0000);!important;}

[George H. Compton IV]

[⚡JFarrow⌁]

thanks George!

[Ambroise]

Thank you very much, it's very interesting!

[⚡JFarrow⌁]

you're very welcome.. glad you found it useful..