386
Views
9
Comments
How-to change the Feedback Messages look
Discussion

Hi there,

If you're developing mobile apps, you've for sure already noticed and been annoyed by the look of the platform feedback messages... 

And no matter how much you try not to use them, they keep appearing to you in under the form of:


Taking action

Tired of the look and feel of the feedback messages, I've decided to take action and change them. 

So I took the following design option (a bit inspired in iOS):

  • make them slightly transparent
  • slightly round corners
  • obvious a message by appearing from the top and
    not being glued to the top of the app


How to do it?

Very simple... Some magic lines of CSS do the trick:

.feedback-message {
    margin: 15px 15px auto;
    border-radius: 4px;
}

div.feedback-message-error {
    background-color: #e53935d1;
}

div.feedback-message-info {
    background-color: #0083e8d1;
}

div.feedback-message-success {
    background-color: #8BC34Ad1;
}

div.feedback-message-warning {
    background-color: #FFA000d1;
}

.iphonex.portrait .feedback-message {
    padding-top: 12px!important; 
    margin-top: 45px;
}



And the end result is....

Much better in my opinion!


Finally

Remember that even if you don't use Feedback messages in your mobile app, at least when the app gets updated, the end user will see them...


Hope that this helps you to create better looking mobile apps!


Cheers,

RG

Very good!

Rank: #2856

Ruben Goncalves wrote:

Hi there,

If you're developing mobile apps, you've for sure already noticed and been annoyed by the look of the platform feedback messages... 

And no matter how much you try not to use them, they keep appearing to you in under the form of:


Taking action

Tired of the look and feel of the feedback messages, I've decided to take action and change them. 

So I took the following design option (a bit inspired in iOS):

  • make them slightly transparent
  • slightly round corners
  • obvious a message by appearing from the top and
    not being glued to the top of the app


How to do it?

Very simple... Some magic lines of CSS do the trick:

.feedback-message {
    margin: 15px 15px auto;
    border-radius: 4px;
}

div.feedback-message-error {
    background-color: #e53935d1;
}

div.feedback-message-info {
    background-color: #0083e8d1;
}

div.feedback-message-success {
    background-color: #8BC34Ad1;
}

div.feedback-message-warning {
    background-color: #FFA000d1;
}

.iphonex.portrait .feedback-message {
    padding-top: 12px!important; 
    margin-top: 45px;
}



And the end result is....

Much better in my opinion!


Finally

Remember that even if you don't use Feedback messages in your mobile app, at least when the app gets updated, the end user will see them...


Hope that this helps you to create better looking mobile apps!


Cheers,

RG


Is possible to change icon that appear near to the text in the feedback message?

Thank you!


Clara.

mvp_badge
MVP
Rank: #134

Clara Linio wrote:

Ruben Goncalves wrote:

Hi there,

If you're developing mobile apps, you've for sure already noticed and been annoyed by the look of the platform feedback messages... 

And no matter how much you try not to use them, they keep appearing to you in under the form of:


Taking action

Tired of the look and feel of the feedback messages, I've decided to take action and change them. 

So I took the following design option (a bit inspired in iOS):

  • make them slightly transparent
  • slightly round corners
  • obvious a message by appearing from the top and
    not being glued to the top of the app


How to do it?

Very simple... Some magic lines of CSS do the trick:

.feedback-message {
    margin: 15px 15px auto;
    border-radius: 4px;
}

div.feedback-message-error {
    background-color: #e53935d1;
}

div.feedback-message-info {
    background-color: #0083e8d1;
}

div.feedback-message-success {
    background-color: #8BC34Ad1;
}

div.feedback-message-warning {
    background-color: #FFA000d1;
}

.iphonex.portrait .feedback-message {
    padding-top: 12px!important; 
    margin-top: 45px;
}



And the end result is....

Much better in my opinion!


Finally

Remember that even if you don't use Feedback messages in your mobile app, at least when the app gets updated, the end user will see them...


Hope that this helps you to create better looking mobile apps!


Cheers,

RG


Is possible to change icon that appear near to the text in the feedback message?

Thank you!


Clara.


Weldone!

Rank: #87

Nice :-)



Thank you very much!

Rank: #493

Very nice ,, 

Good job Ruben.

Champion
Rank: #317

Thanks Ruben,

Very good implementation and the main thing is we got css classes Outsystems uses for that message and now can be  modified/customized as per need. 

Rank: #183

Thanks Rubens for sharing the knowledge. The after feedback has a look much cleaner.

Thanks Rubens. Nice