Add Optimized Icons to Oxwall Forum Groups

You might have seen icons on each of the forum boards (in Oxwall, Boards are called Groups) on some forums built with platforms such as smf, vbullenting, etc.

“Images” they say, “are louder than words.” Adding icons to your Oxwall forum Groups adds a little extra to the way people see your forum. Placing icons on your forum Groups will help to describe the contents of each Group, hence improving user experience.

The icons on Oxwall main menu items was welcome with open arms (you can check it here) by several Oxwall users across the globe. Today I’m bringing you a similar tutorial that will guide you on how to add highly-optimized icons to your Oxwall forum Groups.

Image
Figure 1: Icons on SMF forum Groups (EWT Images)

I’m going to try and keep this tutorial as simple as possible, providing images where necessary.

Optimizing Icons

Css is one of the best things that happened to the modern age of web development. Among other things, css can be used to define a custom dimension for your images. This means that an image of 380px*400px can be easily resized to 64px*36px with the use of css. But is that really enough?

When you compress your images with css you are likely to face the following problems:

  • Images may appear bluish.
  • Some images may become over stretched.
  • Makes your page load time even slower
The act of using only css to optimize your image or icons (when a larger image is involved) often slow down your page load-time. As a good web developer, it is advisable to resize your images to your desired dimension before uploading them to the web. There are so many softwares out there that you can use to resize your images, I personally use Adobe Fireworks but softwares like Photoshop, Photoshine, even Microsoft Picture Manager does the job perfectly.

Recommendations

  • To give your forum an appealing look, I recommend you use 45px*45px for your icons. You can as well use the Findicons service to look up free icons you can use on your forum Groups.
  • Avoid the use of images you see on the google image search results (copyrighted images)
  • Your icons should be able to describe the actual contents of your respective forum Groups.

Uploading Icons

In this section I will show you how to upload your optimized icons to your Oxwall-Poweredwebsite.
When you are done optimizing your icons, launch your web browser and proceed tohttp://yoursite.com/admin/theme/graphics
  • Click on Choose File and choose an Icon
  • Hit the Upload button
    Image
    Figure 2. Upload icons to your website (Screen shot)
  • Repeat the above steps until you have uploaded all your icons.

Adding Icons To Oxwall Forum Groups

After uploading your icons to your website, navigate to your forum page (http://yoursite.com/forum) as an admin and click on CUSTOMIZE THIS PAGE button just at the top of the page. This will take you to http://yoursite.com/forum/customize (you can enter this address on your browser manually if you can’t find the above button.) where you will be able to add and customize your forum categories and Groups.
  • Place your cursor over a Group you want to edit.
  • Click on the edit button at the far right.
  • Copy the following code to the Description section

<img src=’YOUR ICON URL’ style=”width:45px;height:45px;border:0;margin:2px;” />

  • Hit the save button.
Image
Figure 3. This is how your group description should look like (EWT Images)

* You need to add the above code before writing the actual description for the forum group.

  • Replace YOUR ICON URL with the url of your icon (Check below to see how to obtain your icon url)
  • Set a different dimension for your icons by changing the values in width:45px;height:45px
  • Remove or modify margin:2px to define a different margin between icon and site contents.

How To Obtain Icon URL

To obtain your icon URL, kindly visit http://yoursite.com/admin/theme/graphics again, copy the url in each box corresponding to the icon you want to obtain its url (see image below).

Figure 4. Your icon [left]  Your icon URL [right] (EWT images)

My Advice

If this tutorial works for you, leave us a comment. If it doesn’t, still leave us a comment. Remember to bookmark this page for future reference and share these tips your pals on twitter and Facebook.
Charles Benson,  OxwallAccessories
Looking for quality OxWall Hosting? Look no further than Arvixe Web Hosting!
Credit to Ewtnet.com for the blog content.
Thanks, Ebenezer for the well thought out instructions to pull off this awesome mod.
Tags: , , , , , , , , , , , | Posted under Oxwall | RSS 2.0

Author Spotlight

Charles Benson

Charles Benson

I'm here to find you answers and give you tips on running an oxwall based website through Arvixe Web hosting. If you need anything at all feel free to get in touch with me!

Leave a Reply

Your email address will not be published. Required fields are marked *


6 − = 4

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>