HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Tutorial: A Gaming Community Theme (Part 2)

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#55912 (In Topic #12148)
Avatar

Community saint

More modifications, including framing the flash movie, adding texture and changing icons

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.

Code

/* GLOBAL.css additional divs for DESERT COMBAT */

#main_website { /* #main_website targets only the main site screen, avoiding frames etc */
/*this is the background seen around our fixed width */
background-image: url('{$IMG,BG}');
background-attachment:fixed;
}

#main_website #body_inner {
width: 960px;
position: relative;
margin: 0 auto 0 auto;
/*this is the background for the area within our fixed width */
background-color: transparent;
}

#flash {
width: 958px; /**video size 931 x 265**/
height: 280px; /** +30px **/
background-image: url('{$IMG,FRAME}');
background-color:transparent
background-repeat: no-repeat;
text-align: center;
padding-top: 12px;

}
#container {
position:fixed;
width:514px;
height:572px;
top:200px;
left:50px;
}
#container object {
width:100%;
height:100%;
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:".

Code

OLD: .bottom { background-color: #f3ecdb; /* {$,footer_bg, 61% seed + 39% W/B} */ color: #ffffff; /* {$,wizard, 100% W/B} */ padding: 10px 0; } NEW: .bottom { /*background-color: #f3ecdb; {$,footer_bg, 61% seed + 39% W/B} color: #ffffff; {$,wizard, 100% W/B} */ background-color: transparent; padding: 10px 0; }
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):

Code

OLD: .global_minilinks a:hover { color: #f5eedf; /* {$,wizard, 10% W/B + 90% footer_bg} */ } NEW: .global_minilinks a:hover { color: #ba5a0c; /* {$,wizard, 10% W/B + 90% footer_bg} */ }

Code

OLD: .global_flagrant { float: {!en_right}; font-size: .9em; color: #f9f6ef; /* {$,wizard, 45% footer_bg + 55% W/B} */ font-weight: bold; padding-bottom: 4px; } NEW: .global_flagrant { float: {!en_right}; font-size: .9em; color: #f5f4aa; /* {$,wizard, 45% footer_bg + 55% W/B} */ font-weight: bold; padding-bottom: 4px; }
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.

Code

OLD: .standardbox_title_panel { /* Structure */ border-bottom: 1px solid #f3ecdb; /* {$,wizard, 61% seed + 39% W/B} */ background-color: #fdf5e3; /* {$,wizard, 11% (seed sat_to 100) + 89% W/B} */ /* Text */ text-align: center; padding-top: .6em; padding-bottom: .6em; padding-{!en_left}: 5px; color: #2f2d27; /* {$,wizard, 20% seed + 80% !W/B} */ font-weight: bold; } NEW: (panel.png 172x29): .standardbox_title_panel { /* Structure */ background-image: url('{$IMG,panel}'); /* Text */ text-align: center; padding-top: .6em; padding-bottom: .6em; color: #2f2d27; /* {$,wizard, 20% seed + 80% !W/B} */ font-weight: bold; }
HERE, I'M ADDING A BORDER AROUND THESE PANELS FOR VISUAL EFFECT:

Code

OLD: .standardbox_main_classic { padding: 3px; } NEW: .standardbox_main_classic { padding: 3px; border: 1px solid #8e670a; }
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

Code

OLD: .standardbox_title_classic, .tabletitle_internal, .standardbox_title_med, .standardbox_title_curved, .standardbox_title_curved_iesucks { /* Structure */ background-color: #ece0c4; /* {$,wizard, 100% seed} */ background-image: url("{$IMG,standardboxes/title_gradiant}"); background-repeat: repeat-x; /* Text */ color: #ffffff; /* {$,wizard, 100% W/B} */ text-align: center; font-weight: bold; text-decoration: none; } NEW: .standardbox_title_classic, .tabletitle_internal, .standardbox_title_med, .standardbox_title_curved, .standardbox_title_curved_iesucks { /* Structure */ background-color: #ece0c4; /* {$,wizard, 100% seed} */ background-image: url("{$IMG,standardbox/title_desert}"); background-repeat: no-repeat; /* Text */ color: #ffffff; /* {$,wizard, 100% W/B} */ text-align: center; font-weight: bold; text-decoration: none; }
ADJUST THE PADDING AS NEEDED. THESE ARE THE ONES USED:

Code

OLD: .standardbox_title_classic, .standardbox_title_med, .standardbox_title_light { padding-top: 0.35em; padding-bottom: 0.35em; } NEW: .standardbox_title_classic, .standardbox_title_med, .standardbox_title_light { padding-top:0.5em; padding-bottom:0.5em; }
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.

Code

OLD: background-color: #fdfdfa; NEW: background-color: rgba(253, 253, 250, 0.5);
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:

Code

<body class="re_body" id="main_website">
<div id="container">
{+START,IF,{$NOT,{$BROWSER_MATCHES,safari}}}
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="514" height="572" id="radar" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="{$CUSTOM_BASE_URL*}/themes/{$THEME*}/radar.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#000000" /> <embed src="{$CUSTOM_BASE_URL*}/themes/{$THEME*}/radar.swf" quality="high" wmode="transparent" bgcolor="#000000" width="514" height="572" name="radar" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
{+END}
</div>
<div id="body_inner">
{+START,IF,{SHOW_TOP}}
<div id="flash">
{+START,IF,{$NOT,{$BROWSER_MATCHES,safari}}}
<object type="application/x-shockwave-flash" data="{$CUSTOM_BASE_URL*}/themes/{$THEME*}/Desert.swf" width="931" height="265">
<param name="movie" value="{$CUSTOM_BASE_URL*}/themes/{$THEME*}/Desert.swf" />
</object>
{+END}
</div>
{+END}

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
Back to the top
 
Posted
Rating:
#65202
Avatar

Community saint

Very well done Jean! Well well done indead!

Legends of Nor'Ova: A site powered by ocPortal; home of the Legends of Nor'Ova tabletop RPG wiki and community.

Like ocPortal? Want to thank Chris and gang somehow? Then help out in the chat room! It really needs your help! Just open it in a tab everytime you open your web browser, and when you hear a "ding", check it out!

"Those who want help should first be willing to give help."
Back to the top
 
Posted
Rating:
#98153
Avatar

Fan in training

Hello Jean.

Am I at liberty of using this theme?

Where would I download it?


_____________________________
Free hosting


Last edit: by jurassicpork
Back to the top
 
Posted
Rating:
#98219
Avatar

Community saint

jurassicpork said

Hello Jean.

Am I at liberty of using this theme?

Where would I download it?


Hi,

Yes you can use it and its download location is HERE.

However, be advised that it will install correctly up to an ocPortal version 7.x and with minor editing on the latest version 8, but it will probably not pass muster with version 9 because of an overhauled ocPortal's css structure. If you have some knowledge of HTML/CSS it should be fairly easy to fix all the problems. Some of my latest tutorials in the section above this post might be useful too.

Best,
Jean:)
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: