installing themes from phpbb3styles.net

http://demo.phpbb3styles.net/Graand+%28Red%29
once you download the file they give you all the coding to make it work but when i put all in the css it doesn't work so there must be some work in the templates to go along with it. i just need to know where to put all the coding they gave me

The themes provided there are not meant for forumotion forums, they are meant for the phpbb3 software.
https://www.phpbb.com/

Forumotion uses a modified version of the software, so the templates, css, etc.. wont work without a major overhaul, and if you don't have a knowledge of those languages you're going to have a hard time.. I recommend that you get your themes forum hitskin, as that is meant for forumotion forums.
http://en.hitskin.com/

i'll just read the coding they gave me and figure it out. the css and java should still work on forumotion

While the CSS can work, there will most likely be some inconsistencies in the selectors, which means you'll have to find the correct selectors for the Forumotion version.

Just so you know ( if you don't ) :

HTML (.html or .htm) should go in --> Display > Templates

CSS (.css) should go in --> Display > Colors > CSS stylesheet

JavaScript (.js) should go in --> Modules > JS codes management

I don't specialize in converting these themes, so I cannot really be of much help. Sorry.

Code:

/*!
 * Collapse plugin for jQuery
 * http://github.com/danielstocks/jQuery-Collapse/
 *
 * @author Daniel Stocks (http://webcloud.se)
 * @version 0.9.1
 * @updated 17-AUG-2010
 *
 * Copyright 2010, Daniel Stocks
 * Released under the MIT, BSD, and GPL Licenses.
 */
 
(function($) {
   
    // Use a cookie counter to allow multiple instances of the plugin
    var cookieCounter = 0;
   
    $.fn.extend({
        collapse: function(options) {
           
            var defaults = {
                head : "div.trigger",
                group : "div",
                cookieName : "collapse",
                // Default function for showing content
                show: function() {
                    this.show();
                },
                // Default function for hiding content
                hide: function() {
                    this.hide();
                }
            };
            var op = $.extend(defaults, options);
           
            // Default CSS classes
            var active = "active",
                inactive = "inactive";
           
            return this.each(function() {
               
                // Increment coookie counter to ensure cookie name integrity
                cookieCounter++;
                var obj = $(this),
                    // Find all headers and wrap them in <a> for accessibility.
                    sections = obj.find(op.head).wrapInner('<a href="#"></a>'),
                    l = sections.length,
                    cookie = op.cookieName + "_" + cookieCounter;
                    // Locate all panels directly following a header
                    var panel = obj.find(op.head).map(function() {
                        var head = $(this)
                        if(!head.hasClass(active)) {
                            return head.next(op.group).hide()[0];
                        }
                        return head.next(op.group)[0];
                    });
   
                // Bind event for showing content
                obj.bind("show", function(e, bypass) {
                    var obj = $(e.target);
                    // ARIA attribute
                    obj.attr('aria-hidden', false)
                        .prev()
                        .removeClass(inactive)
                        .addClass(active);
                    // Bypass method for instant display
                    if(bypass) {
                        obj.show();
                    } else {
                        op.show.call(obj);
                    }
                });

                // Bind event for hiding content
                obj.bind("hide", function(e, bypass) {
                    var obj = $(e.target);
                    obj.attr('aria-hidden', true)
                        .prev()
                        .removeClass(active)
                        .addClass(inactive);
                    if(bypass) {
                        obj.hide();
                    } else {
                        op.hide.call(obj);
                    }
                });
               
                // Look for existing cookies
                if(cookieSupport) {
                    for (var c=0;c<=l;c++) {
                        var val = $.cookie(cookie + c);
                        // Show content if associating cookie is found
                        if ( val == c + "open" ) {
                            panel.eq(c).trigger('show', [true]);
                        // Hide content
                        } else if ( val == c + "closed") {
                            panel.eq(c).trigger('hide', [true]);
                        }
                    }
                }
               
                // Delegate click event to show/hide content.
                obj.bind("click", function(e) {
                    var t = $(e.target);
                    // Check if header was clicked
                    if(!t.is(op.head)) {
                        // What about link inside header.
                        if ( t.parent().is(op.head) ) {
                            t = t.parent();
                        } else {
                            return;
                        }
                        e.preventDefault();
                    }
                    // Figure out what position the clicked header has.
                    var num = sections.index(t),
                        cookieName = cookie + num,
                        cookieVal = num,
                        content = t.next(op.group);
                    // If content is already active, hide it.
                    if(t.hasClass(active)) {
                        content.trigger('hide');
                        cookieVal += 'closed';
                        if(cookieSupport) {
                            $.cookie(cookieName, cookieVal, { path: '/', expires: 10 });
                        }
                        return;
                    }
                    // Otherwise show it.
                    content.trigger('show');
                    cookieVal += 'open';
                    if(cookieSupport) {
                        $.cookie(cookieName, cookieVal, { path: '/', expires: 10 });
                    }
                });
            });
        }
    });

    // Make sure can we eat cookies without getting into trouble.
    var cookieSupport = (function() {
        try {
            $.cookie('x', 'x', { path: '/', expires: 10 });
            $.cookie('x', null);
        }
        catch(e) {
            return false;
        }
        return true;
    })();
})(jQuery);]

i'm going to convert this first. shouldn't be that hard