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 said, “is 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-Powered website.
When you are done optimizing your icons, launch your web browser and proceed to http://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 it’s url (see image below).

Did you get the answer you were searching for?

Save hours of searching online or wasting money testing unnecessary plugins, get in touch with me and let's discuss a suitable plan for your project. Best thing about this service is that you are never placed on hold and get to talk to an expereinced Oxwall/Skadate developer.

Get Answers for Free!

Ask a question related to this topic and get immediate answers from other community members in 48hrs or less. Contribute by answering members questions.

Ask Question
Premium Service

Whether it's a custom plugin, theme or dedicated support needed to get you started on your project, get professional 24/7 support tailored to your need.

Get in Touch

Or just leave a comment...

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.
If you are an Oxwall site owner, I’m sure you will like to check out a few custom modification codes for oxwall, the only way to receive alerts for new mods is by subscribing to our email list. Find it above and submit your email address. It is totally Spam Free! And we do not use your email for any other purpose other than sending you alerts when new mods are released. 
Thanks, it’s a pleasure sharing with you,
-Ebenezer.

Leave a Reply