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 1)

Login / Search

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

Community saint

In just a few simple steps, anyone can give a very different look to their website

I was researching the possibility of using a flash header for an ocPortal gaming theme today, and came across Chris Graham's fixed-width design tutorial. I couldn't believe that after just a few simple steps I had the basis for a very interesting theme modification.

Very often, new ocPortal webmasters feel overwhelmed by the richness of content available under this great CMS and probably believe that customizing the default website layout is beyond the reach of inexperienced first timers.

It is in fact quite easy to transform the default fluid design theme with a fixed-width design and add a dramatic "Flash Header", background and style. In just a few simple steps, anyone can give a very different look to their website.

Click HERE to view the Demo Site .

EDIT: The Demo Site and the Following modification have been Upgraded to ocPortal version 5.0.3

Here are the steps to this theme modification.

You do not have to be an expert, or even know about coding XHTML and CSS.
If you are new at this. just apply the style changes as explained below and use common sense in not disturbing anything else. Don't be over worried about irreparable damages; you will never apply these changes to the "Default Theme", which can be used to repair unwanted results.

Before anything else, if you have not yet run it, use the Setup Wizard in Admin Zone->Setup. This will make sure you have a name for your site and a custom theme.



If you do not know if you have a custom theme, go to Style from your Admin Zone and select Manage themes.



If you do not have a custom theme with the name of your site, come back to Style and select Theme Wizard.



For the purpose of this tutorial, make sure you check the box for Dark Theme and proceed. If you do not like the outcome, just click on "Change" and try again until you are satisfied.

Next, you will need a background picture; it should be at least 1920 x 1200, or wider if you want to take into account very wide monitors, 23 inches and more. Make sure you optimize this image for the web, since megabyte pictures may considerably slowdown your site. You will need to upload another image with the size of 1024 x 175 if you prefer to use a standard image instead of a Flash object for your header. Use the same procedure highlighted below with a codename of: "header". We will add a provision for this header image in the global.css later.

It is easy to upload this picture to the web server without FTP; just go to Manage Themes:



Click on Manage Theme Images:



Click on "add +"
Type BG for the *Codename and click on the Upload Button and browse on your computer for this image.



Click the Add theme image button to finish.


What kind of layout are we looking for?

A standard fixed-width requires a layout of no more than 980px to achieve the max 1024 resolution common on today's netbook and small laptop. I have used a 1024px for my layout to accomodate my flash banner, and you could go with whatever numbers you wish, depending on the size of the average computer screen your members may have.

To quickly get a fixed-width layout, we can add this to your custom theme's global.css : (replace the 980px with the number you would prefer, you can easily come back later to adjust it if you wish.) The code will also include the reference to the background image uploaded earlier and will set the area background transparency within the fixed-width so that it will seem to float over the background picture.

For the sake of simplicity, I've combined several modifications to the Global.css file in one long stretch here, and you can apply them all in one go if you'd like, but I recommend that you test each one before proceding to the next. This way, you might discover an error in coding immediately, rather than not knowing what caused something to go wrong at the end. The CSS Editor keeps a revision history, which can easily be restored for your convenience.

Go to Manage Themes and click on Edit CSS. Select global.css and click on Proceed. Scroll to the bottom, paste the following code and press Edit css button when finished. (see image below for detail)



Code

#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;
background-color:#000000;
background-repeat:no-repeat;
}

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


#header {
width: 1024px;
height: 175px;
position: relative;
margin: 0 auto 0 auto;
background-image: url('{$IMG,header}');
background-color: transparent;
/*this the header image to replace the flash*/
}
Next, replace the .global_middle, .fake_middle_continuation statement with the following: (see image below for detail)

Code

.global_middle, .fake_middle_continuation {
/*background-color: #000000; {$,maincolor, 100% W/B} */
background-color: transparent;
}


Next, replace the .standardbox_classic, the .standardbox_t_panel, and the .standardbox_nt_panel with the following code: (see image below for detail)

Code

.standardbox_classic {
background-color: rgba(22, 15, 1, 0.5); /* {$,wizard, 100% sb_color } */
margin: 0;
}

.standardbox_t_panel, .standardbox_nt_panel {
margin: 0px;
}

.standardbox_t_panel {
/*background-color: #191100; {$,wizard, 17% (seed sat_to 100) + 83%

W/B} */
background-color: rgba(25, 17, 0, 0.5);
}

.standardbox_nt_panel {
/*background-color: #100b00; {$,wizard, 11% (seed sat_to 100) + 89%

W/B} */
background-color: rgba(16, 11, 0, 0.5);
}


There are several other small modifications that can be applied to the global.css in order to render the best look to your theme, but those are beyond the scope of this tutorial.

Make sure to apply those changes to your own custom theme, and not direct to the default theme. The default theme is used by the Admin Zone and CMS Zone (unless you have changed that), and it's better if we leave these parts of ocPortal alone. You don't want to have to worry about themeing these as well as the main part of your website - and you definitely want to avoid breaking the Admin Zone as this is what you are probably actually needing to use to make the theme changes.

To save your changes, click on the "Edit CSS" button.

The Flash Banner:

Why considering Flash for your Web site? There are reasons why you would and would not want to tap into this great technology. Flash is everywhere these days, estimates say that up to 99% of users do have the Flash plug-in, with browsers now shipping with it. If it enhance the experience of your visitors, and help you communicate your site's targets to your audience, than go for it. However, If Flash is going to annoy them, or otherwise get in the way of you reaching them, then simply don't use it! If you agree that a Flash banner could be great for your gaming site, than know that there are many Flash resources available on the Internet. Some are great and free, while others will blow your mind away for just a small stipend to their authors.

In preparation for the top Flash Banner, we need to cleanup some code from the
Header template responsible for the standard site logo and add the new code for
the Flash header, or if you do not want to use Flash, add the code for the
header image of your choice: Once again, select the Manage Themes interface and
click on Edit Templates; Select 'HEADER.tpl' from the list and click Proceed.



Position your cursor right below "+START,IF,SHOW_TOP"
and add the code (green) for the Flash objet; (yellow) for the image header. As
indicated on the following image: (remove only the code highlighted red) Click on the "Save" button when finished.



In order to display a shockwave-flash movie on your site, you need to add an HTML object tag as indicated on the previous image in green:

Change the source address for your own on the following HTML Flash Embedding code:

Code

 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve

rsion=10,0,0,0" width="1024" height="175" id="conflict" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="{$CUSTOM_BASE_URL*}/themes/

{$THEME*}/ocP_Conflict.swf" /><param name="quality" value="high" /><param

name="wmode" value="transparent" /><param name="bgcolor" value="#000000"

/><embed src="{$CUSTOM_BASE_URL*}/themes/{$THEME*}/ocP_Conflict.swf"

quality="high" wmode="transparent" bgcolor="#000000" width="1024" height="175"

name="conflict" align="middle" allowScriptAccess="sameDomain"

allowFullScreen="false" type="application/x-shockwave-flash"

pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>
Code for optional header image replacing the Flash header

Code

<div id="header"></div>
That's it!

Refresh your browser and see the result of your changes.

I'm hoping that this tutorial will help you be creative in your attempt to transform your site even if you do not quite understand anything about coding.

Have fun and share your discoveries with us!:)

Jean
Back to the top
 
Posted
Rating:
#60425
Avatar

Fan in action

Hi Islander-aua

I visited your site and notices you have a static background, if you dont mind me using some of your time, and experiance.

thank you
Back to the top
 
Posted
Rating:
#60437
Avatar

Community saint

For a static background, open up your global.css for your theme (not the default one).

Code

.outer_body {
background: url('xxxxxxxxxxxxxxxxxxx');
}

xxxxxxxxxxxx will be whatever the url to your background image is.

You should be able to add background: no-repeat;

To end up being:

Code

.outer_body {
background: url('xxxxxxxxxxxxxxxxxxx');
background: no-repeat;
}

This is a pure guess, but makes sense.

Eric DeMars . com
My electronic portfolio and personal site. Uses ocPortal!
Back to the top
 
Posted
Rating:
#60449
Avatar

Community saint

Greetings,

I just wanted to say job well done to Islander for yet another easy to follow tutorial, and if I may, recommend that he have them placed in the ocportal community documents.

I also want to say to any body out there doubting the ease of making ocPortal themes, it is easier to make themes for ocPortal than in other programs like Joomla and the like. ocPortal gives you a good starting point with it's theme maker, it is easy to locate what you need, and you are not limited to the blocky default style (despite that I personally like the default setup).

However, I would probably suggest against using flash on websites and it can mess with performance, those who have script blockers blocking flash won't see it, and it introduces incompatibilities with other os'es and browsers. Flash, is a pain, and hopefully the html5 version will be a large improvement over flash.

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:
#65835
Avatar

Community saint

Hi Jean,

I wanted to tell you that your tutorials have done wonders for my ability to create themes.

Combining what you did here, with Chris' fixed width and Alan's Mayberry tutorials, I have been able to make good headway.

Thanks to all ya'll.

I think there is a way to allow each member to select the theme they want to use, but can't remember, or find, how to do that. Can anyone help point me in the right direction?
Back to the top
 
Posted
Rating:
#65836
Avatar

Community saint

It's an option when you edit your profile psydoc. Don't forget to set the rite permissions for the themes you want your members to be able to use.
Back to the top
 
Posted
Rating:
#65841
Avatar

Community saint

Hey Brian,

Thanks for the reply.

I don't see an option under "edit profile". I also don't see where to set the permissions. I don't know about you, but it is late for me. Been at this since around 5am. Sorry, if I am missing something. Can you tell me where in permissions to set this?

Thanks,
doc
Back to the top
 
Posted
Rating:
#65843
Avatar

Community saint

You can find permissions for each theme if you go to adminzone>style>themes>edit theme. The option for  users to change themes in their profile settings may not show if no themes are set for them to see except the default.
 
Back to the top
 
Posted
Rating:
#65845
Avatar

There has to be at least one zone set to allow members to choose their theme. When you add a theme in ocPortal it's quite normal to select 'use on all public zones' which disables this. So you need to edit a zone(s).


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#65854
Avatar

Community saint

Thanks Brian and Chris.

I don't know what I am doing wrong, but I still can't find an option to use/select a theme.

I have edited all the zones, making sure "Respect member settings" is checked. Ticked the box to display in zone menus. And ticked all the permission boxes on the edit theme page.

After taking those steps, the default theme began to display again. The only way to change the theme to the one on which I was working was to tick the box "Use theme on all zones".

What am I missing.  O_o
Back to the top
 
Posted
Rating:
#65861
Avatar

There's a bug in 5.0.1. In sources/ocf_members_action2.php:

Code


   $doing_theme_option=(addon_installed('ocf_forum')) && (count($unspecced_theme_zone_exists)==0) && (!$mini_mode);
should be:

Code


   $doing_theme_option=(addon_installed('ocf_forum')) && (count($unspecced_theme_zone_exists)!=0) && (!$mini_mode);


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#65876
Avatar

Community saint

Thanks, Chris!  :thumbs:

That solved the problem.
Back to the top
 
Posted
Rating:
#66685
Avatar

Fan in action

Hi,

I've followed the tutorial as I'm working on my game site for Rift mmo, so fare I got this:
Rift Wise what I'm trying to get rid of, is the grey strip between the header logo and the green menu bar….

Not sure what part of the code I need to remove if any to get rid of it, so that the header logo sits on the green menu bar..;)
Back to the top
 
Posted
Rating:
#66686
Avatar

Fan in training

It's in global.css. Look for the #global_zones entry and change the margin-top: from 60px to 0px or you might be able to just delete that entry altogether.
Back to the top
 
Posted
Rating:
#66687
Avatar

Fan in action

Hi,

Nice one, thanks for that….It worked a treat..;)
Back to the top
 
Posted
Rating:
#66781
Avatar

Community saint

Just got a chance to see your post Codebreaker.

You managed to make a great looking site, Congratulation!:thumbs:

If I may make a small suggestion?
For those with wider monitors than your 1680 px background image, the right end side will show white. You can alleviate the transition effect by adding a color to your background that would match the dark green of the trees on the picture by replacing the transparent in this global.css code with this color suggestion:

Code

#main_website {
    background-color: #0B1601;
Jean
Back to the top
 
Posted
Rating:
#66782
Avatar

Community saint

Thanks to all of you, I have made some headway and have a simple, but fairly modern, looking site that the members really like. I love playing around with different degrees of opacity.
Back to the top
 
Posted
Rating:
#66783
Avatar

Community saint

This is a very nice and cool design, psydoc!
Well done!:thumbs:
Back to the top
 
Posted
Rating:
#66799
Avatar

Community saint

Thanks, Jean. I take that as a huge compliment coming from someone with your degree of talent.  :$  I used many of your examples and expanded or modified a bit.

I did a couple of dark themes, similar to your portal. One of these days, when I get a bit more time, I will fiddle around with the tricky bits. And post it for a look. If you think it is ready for prime time, I could let people download.
Back to the top
 
Posted
Rating:
#66800
Avatar

Community saint

psydoc said

Thanks, Jean. I take that as a huge compliment coming from someone with your degree of talent.  :$  I used many of your examples and expanded or modified a bit.

I did a couple of dark themes, similar to your portal. One of these days, when I get a bit more time, I will fiddle around with the tricky bits. And post it for a look. If you think it is ready for prime time, I could let people download.

Thanks for your appreciation psydoc!
I think that you are doing just fine with good taste in design and I'm looking forward to see more of your work. Meanwhile, don't hesitate to test your ideas here among members who wont hesitate to offer friendly advice.
Cheers,:)
Jean
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Expand