Tutorial: A Gaming Community Theme (Part 2)

Part 2 of "Gaming Community Theme" Tutorial


You can view the test site here: Desert Combat
EDIT: (12/02/2010)
The Demo Site and the Following modifications have been Upgraded for ocPortal version 5.1 beta1
This tutorial is going a bit beyond the previously discussed Space Theme in the way it use a background image to frame the Flash movie, requiring a new CSS Class ID and a div Statement in the Header Template. I will show how to add texture to the standard Title box and replace Forum Icons. More attention is given to esthetically improve some text and the use of translucent boxes to better integrate the CMS to it's background.

I will not repeat the steps of the previous tutorial here, and I suggest you start following it first by creating a light theme with the theme wizard. Any base colors such as light brown to desert yellows to light army greens will do nicely.

You can follow the next directives blindly, just like painting with numbers and get your own theme going, or use them to try and understand what is behind the coding and learn to recognize the patterns used in the Style Sheets and Templates.

This is still a basic entry level into Themeing, but you can easily see already what difference it can make to the Default ocp Theme.

Documenting the "Desert Theme" Modifications over the "Space Theme" previously discussed:

A new Background image to replace BG from the Space Theme:

Upload this Image by using the Manage Theme Images interface from the Style Tab in the Admin Zone. Choose the BG image and change it with a new background of your choice.

Use the same interface to upload a FRAME image similar to the one below:

Use the ADD Button and Give it a Codename; I have used "FRAME" for my image.

The purpose of this image is to add a Frame or Border to the Flash movie. I could have included it directly to my flash creation, but it would be removed every time I want to change the flash, and would not exist if you choose to add your own flash movie with the same dimensions. Furthermore, it will be used as replacement image if the flash cannot be loaded from the Internet for any reasons. To keep the frame for your own project, simply place your picture in it.

GLOBAL.CSS MODIFICATIONS:
(you will add the following statements all the way at the bottom of the css file)

New width for the body_inner. The width must be equal to the "FRAME/BORDER" image you will upload. - look at the notes - Video size (931)and adjust your width + 25 to 27 pixels for the frame (958)

We will add two (2) Class id: One for the Main Website as a "Container" for the Radar Flash and one for the body_inner Flash Header - Desert flash which will enable us to superimpose a flash movie over an image (frame/border). You will have to test your own width/height/padding in order to place the movie at the center of the FRAME. We will later insert code to intercept the Safari Browser, in which case the Flash Movie will be replaced by the "Frame" Fixed Image.
Next, we start changing the backgrounds and colors of our objects on the screen. You have to look at your own color scheme, but the following statements will help you find where to apply the changes:

We will change the Bottom group white block to transparent:


NOTE: I am including the old code: "OLD:" to help you find the Statement, but only paste the code below "NEW:".
The next statements are just property color changes from the same group, so that the text can be seen better (adjust according to your own color scheme):
NEXT, ADDING TEXTURE TO COLORED TITLE BLOCKS:
Let's take care of the left and right side-panel blocks first:


Before changing the the Global.css instructions, Upload a new Image by using the Manage Theme Images interface from the Style Tab in the Admin Zone. Use the ADD Button and Give it a Codename; I have used "panel" for my image.
HERE, I'M ADDING A BORDER AROUND THESE PANELS FOR VISUAL EFFECT:
The next changes are to add Texture to the STANDARDBOX CLASSIC:

This will affect the News title box as well as the forum titles.
I'm using a picture measured on the size of the forum title boxes, which is going to be wider than my News Title Box, but don't worry, it will all fit nicely.

Upload a new Image by using the Manage Theme Images interface from the Style Tab in the Admin Zone. Use the ADD Button and Give it a Codename; I have used "standardbox/title_desert" for my image.



standardbox/title_desert
ADJUST THE PADDING AS NEEDED. THESE ARE THE ONES USED:
This is it for the Global.css modifications!

Now, for some adjustments in the ocf.css to render the forum rows in a translucent way. You do not need to do this, if you are satisfied with your forum's background and if you are concern about people still using Windows Internet Explorer. I prefer the semi-transparent properties available under the latest CSS3 directives, even if my users must browse with Firefox, because of the great look it can give to an otherwise intrusively opaque background in this theme.

MODIFY THE OCF.CSS

.ocf_row1
.ocf_row2p5
.ocf_row3
.ocf_row4
.ocf_row5
.ocf_row6
.ocf_row7
.ocf_row8
Replace the color properties only according to your color scheme.
Remember that rgb color codes can easily be found on the Internet by giving the #code and receiving an rgb translation. It is also available from Photoshop or similar graphic software.

In my case, I have changed the following color:
You might find that rows 1 through 8 use variants of the same basic color. It is ok to change them all with the same rgb color code for simplicity.
UPLOAD NEW FORUM ICONS BY JUST REPLACING EXISTING IMAGES WITH THESE:
IN MANAGE THEME IMAGES:

Replace (ocf_general/new_posts) with new image

Replace (ocf_general/no_new_posts) with new image


FINALLY, IN HEADER.tpl we will insert a div for the "Container" to receive the Radar flash with options to intercept the Safari browser and eliminate the movie. A second div will enable the flash over image discussed above and contain the Header Desert flash with an option to detect the Safari browser and replace the movie with the "Frame" Fixed image. Paste the code over body class as shown here:
That is it!
Enjoy your new Theme and don't forget to show us your creations.
Jean
You can view the test site here: Desert Combat

Very well done Jean! Well well done indead!