MoP Guild Website Template up and running.....

**** WALL OF TEXT INCOMING ****

Just finished (sort of) my guilds website you can see it at:
www.symbiotic-ubiquity.co.uk
When I started off, I decided 2 things:
1. I would create the site using Joomla as I am familiar with it.
2. I wanted to use a joomla template for the site.

#1 was a good decision, #2 - not so much.....
I couldnt find any decent Joomla (2.5) templates for Mists of Pandaria, so I decided, rather than taking an existing template and modifying the hell out of it, to create one myself.
Started off by using Artisteer - man, was THAT a mistake. Got me the basic layout design, but was nowhere NEAR configurable enough for my liking, so I decided to look farther afield.
I finally decided on creating a template using Gantry - mainly because I have used Rocket-theme templates before and they are all designed from gantry (they ALSO wrote gantry, so they sorta have the inside track).

I gotta say, I am pretty pleased with the result and its features.

I used blizzard MoP artwork to create the backgrounds. Stunning work by the way ;)
I started off using an entire background from the MoP site, but ran into difficulties as the layout of these backgrounds meant that the menu and the content had to be in an EXACT position. This severely curtailed the module positions available, so I opened up paint shop pro and got to work. I removed the banner/scroll/tapestry (whatever the heck you call it) that blizzard uses for the content on their MoP site and used it as the background for the main body.
Then I got to work removing the menu bar graphics and applied that to teh background for the menu.
With these two elements, I could not position modules anywhere I liked on the site, and the main content background and the menu background moved accordingly. Win !

As a downside, I now had to pull 2 or 3 blizzart artworks apart and mix them in order to fill in the blank spots.
Once that was done, I decided to create styles for the modules. As you can see on the 'Layout' link, there are 6 module styles plus an unstyled one, giving 7 in total, and 13 module title styles (hard to see the difference on the last 6 title styles, but they are over-sized as you can see from the login module - the red title box extends by 6 pixels either side of the module itself) plus an unstyled one for a total if 14.
That gives a combination of 98 styles possible for each module by combining a specific module style with a specific title style. This is done by putting two words in the 'Module Style Suffix' box when you add a module to your site (example : ' block5 title1' styles your module appropriately - or just 'block1' if you want an unstyled title). No messing about with CSS to change the styling of the modules.

I have also created 3 individual styles for the overall site (background image/font colours)
The background images can be seen on the 'Home' page, the 'Blue Posts' page and the 'Layout' page though these dont have the individual styles applied - just the backgrounds.

Now where it gets more complicated.
In Gantry, you can change a LOT of parameters:
The layout of your site: How many side-bars you want, their size, and where they go.
Your font colour used throughout the site - no need to set font colours in every article you write - in fact, DONT do that. just leave it as is when writing the article and gantry makes it use your font choice colour)
Theres a LOT more options for getting your site looking exactly how you want it to look- too much to cover here.
It may be a lot of options, but I decided it wasnt ENOUGH, so I added options to create your own custom module style incase the styles I had included didnt tickle your fancy.
NOW, in the template settings, if you go to the 'style' tab, you can do this.
This means you set the options for the Module background colour, Border style (if you want a border) border colour, border radius(wether or not you want rounded corners), content text colour, content heading colour and module padding.
the same options are available for the module title, with the addition of the title alignment.

Now, when you input these settings and click the 'save' button, you can enter 'custom' for your custom module style or 'customtitle' for the title style into the 'Module Class Suffix' box. That gives one extra title style and 1 extra module style. Since you can use any title style with any module style, adding these 2 increases the possible combinations from 98 to
120 (15 module styles X 8 title styles) - 22 more possible module variations simply by adding 1 title and 1 module style...... not too bad.

STILL not enough though, so I decided to increase the amount of custom Module styles to 10, and the number of custom title styles to 10 aswell.....
That gives a total (including the styles already built in to the template) of.....
(43 title styles X 17 module styles) = 408 possible variations of module styling.....

Holy moly.... Time to stop now I think. 408 is enough for ANYBODY I think.

You can see the site up live now on:
www.symbiotic-ubiquity.co.uk

The 'Layout' link shows the in-built styling aswell as one module created using the custom style.

If anyone is interested in using the template for their guild site, register on the site and post in the 'Site Template' section of the forum and I will mail you a link for it....

I still have a little bit of cleaning up to do with the code, but it should be available in 2 days or so.
Edited by Shirendra on 14/08/2012 05:00 BST
Reply Quote
90 Tauren Druid
10715
I like the idé
Reply Quote
1 Blood Elf Rogue
0
Shirendra, could you please give links to the wow/joomla modules you use on this site (recruitment, roster, progress, etc...)? please, please, please.... ^^
Reply Quote
Please teach me to do this! It looks amazing! :)
Do you know of any good guides, etc, on how to make a completely custom theme? I find Gantry's documentation af bit meh.

EDIT: Nvm, I've started making templates from scratch instead of using the framework ;)
Edited by Jakun on 17/11/2012 17:50 GMT
Reply Quote

Please report any Code of Conduct violations, including:

Threats of violence. We take these seriously and will alert the proper authorities.

Posts containing personal information about other players. This includes physical addresses, e-mail addresses, phone numbers, and inappropriate photos and/or videos.

Harassing or discriminatory language. This will not be tolerated.

Forums Code of Conduct

Report Post # written by

Reason
Explain (256 characters max)
Submit Cancel

Reported!

[Close]