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.
 |
| 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
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
- Click on Choose File and choose an Icon
- Hit the Upload button
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
- 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.
 |
| 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
 |
| Figure 4. Your icon [left] Your icon URL [right] (EWT images) |
