Style Oxwall Message/Alert Bar

Style Oxwall Message/Alert Bar

As the title suggested, I wasn’t sure what to call the red or green bar that shows up on top of your website each time you submit an incomplete form, accept a friendship request or sign-in successful into you Oxwall powered website.

I really don’t know which name describe it most; whether ‘oxwall alert bar’ or ‘oxwall message bar’. But whichever it is, the bar seems to be one of the biggest bug of the Oxwall software. (I bet you don’t agree with me?) I will explain why.

Essence of Oxwall Message/Alert Bar

This little gadget (as it appears) is one of the most essential core system plugin of the oxwall software. The message/alert bar is an ajax system plugin found on the oxwall base files. It is programmed to display ajax error, warning and success messages or notification in a pop-up box that disappears within seconds. This gadget is very essential in every oxwall powered site as it helps its users to know when they are successfully logged in, send or accept a friend request, make a mistake in a form and developers in their plugin development.

How Oxwall Message/Alert Bar Affect User Experience

ImageYou might have noticed it before (or you are just hearing it for the first time), when you have multiple friend request, accepting them becomes a problem. you basically have to wait for at least 10 sec. interval to accept each friend request. Reason being that our all-important message/alert bar will have to stick up there for at least 10 sec.
Sometimes, users get bored of clicking the close button each time they accept a friend request. Is really boring indeed. Isn’t it? For me it was, that’s why I started seeking for a remedy to grant my users a better user experience and viz… here is what I found!

Remedy For Oxwall Message/Alert Bar

My remedy is quite a simple one but does the job just perfectly. I was able to cook up a css trick that will bring the oxwall message/alert bar down to the bottom of the page and re-size it’s width. This way your users can have enough breathing space to accept multiple friend request and perform other activities without the message/alert bar interrupting.
Demo Preview
In the above image, observe that the message/alert bar (in red) is now at the bottom- left of the page instead of it’s default location (top of the page)

The Fun Part: Installing My Remedy

Like the css trick for customizing oxwall IM, this part is quite simple and does not require you to be careful. simply
  • Login to your admin dashboard (yoursite.com/admin)
  • Goto Appearance and click on edit theme 
  • Click on css 
  • Copy the following css code into your custom css

  •  Now click save.

Customization

I understand if you want yours to be different. The following customization can be made:
  • Change 600 to change the vertical position of the message/alert bar. Note that the higher the number goes, the lower the message/alerts bar position becomes (i.e: the bar stick to the top at 0px)
  • Change 400 to re-size the with of the bar.

Result

This article was shared by me to help you customize your oxwall message/alert bar. Always remember that someone else needs to hear about this, that’s why we placed those social media buttons below this article. Feel free to use 5 secs. of your time to share this article to your facebook friends and twitter followers.
If you applied this tutorial, that means you are an Oxwall user. Here are some other tutorial related to oxwall custom code modification:
This section was made for me and the comment section for you. Feel free to leave your comments and opinion regarding this tutorial on the comment section below!

The following two tabs change content below.

Ebenezer Obasi

Senior executive editor at EwtNet
A web developer, IT undergrad, terrible entrepreneur, internet freak and a man of a few other incongruous talents, Ebenezer has been writing on technology since 2012, and plans to do so until a few days before his ultimate fate: cryogenic preservation. If resurrected, he is likely to go back to writing on technology.
  • TAGS :

Recieve Free Email Updates!

Leave a Reply