How to make Active Forums match your site skin.
21 Nov 2008 12:03 PM
    So you say you don’t like the default Active Forums skins? I won’t take offense… I’ll just show you how to give your forums a quick facelift, making them blend in with your site skin. I think the most noticeable visual feature of the forums is the colored bar, which happens to be called afgrouprow.png. 



    Before we start, go to the DesktopModules/ActiveForums/themes directory and make a copy of one of the folders, renaming it to whatever you want. In my example I will make a copy of the _default folder and rename it yellow.



    In this folder, you will need to locate the afgrouprow.png, and open it in your favorite image editing software; I’ll be using photoshop personally. The image looks like a very thin sliver of the colored forum bar. That’s because the forums simply duplicate the small image many times to create the effect of the longer bar. This reduces bandwidth usage, since users only have to download a very small image.

    Anyways, create a new image that is 32 pixels tall. I’ll go with 32h x 100w so I can get a better sense of how it will look.



    Here you will need to either copy a section of your website or create the image how you want it to look. This will obviously depend on your own tastes. Here is what I chose to create with a simple gradient layer:



    Once you have it looking how you want, crop the image down so it is only 1 pixel wide.



    Save the image as afgrouprow.png, making sure to overwrite the previous image.

    Navigate to your website, login as an administrator and open the Active Forums control panel. Under the settings tab you will notice the drop-down list labeled “Theme.” The name of your new folder should be in this list. Select it, exit the control panel and admire your beautiful new theme.



    The white font color kind of blends in too much, but if you are looking for a more advanced guide on changing images, templates, text colors or other CSS properties, please consult the skinning guide located in the downloads section. It will be helpful for advanced customizations.


    Ben
    21 Nov 2008 08:48 PM
    Another great tip. Thanks Ben!
    22 Nov 2008 01:12 AM
    Great tip indeed!!

    For those of you who don't know how to create gradient, here is an example of a photoshop tutorial:
    http://blog.typpz.com/2007/05/11/cr...photoshop/

    You are not authorized to post a reply.
    test
    Copyright 2012 by DotNetNuke Corporation / Terms of Use / Privacy