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. ocPortal 9 is 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:
#66807
Avatar

Community saint

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

 
Hi Jean,

I have been around for a number of years, and the community has always been friendly. I have learned a lot from just reading the posts. I attached a couple screen shots of two other themes, not much different than the main theme, just different colours.

I was wondering how to use the welcome zone to produce a theme that has several pages, through which visitors have to navigate, before arriving at the :start page. Would I develop a completely separate theme for the welcome zone with child pages?

190 views (402 Kb)

218 views (342 Kb)
Back to the top
 
Posted
Rating:
#66809
Avatar

Community saint

Hello psydoc,
If you visit Admin Zone–>Structure–>Zones–> and edit the Welcome zone, you will notice that it’s probably set to use the current theme. This means that it shares the same Header, Footer, templates and CSS files. Any modifications you do will be reflected across the site. If you want to use a different header or graphic style and backgrounds for your welcome zone, it is preferable to create a separate theme for it, which will give you an entire new set of templates and css. You can then set the Welcome Zone as the login screen so that it will automatically be called by your site address as the initial entry screen. From there, you will be able to direct the visitors to any number of pages before entering the main site.
Back to the top
 
Posted
Rating:
#66810
Avatar

Community saint

Hi Jean,

Thanks for that advice. I put together several html pages into which I embedded some php, and that worked, but is not exactly what I wanted to accomplish.

What I wanted to do was something similar to your Forest theme, but with lots of pages and clues to follow prior to getting to the login.

I noticed that in the Forest theme, there was only one page prior to login, and you used a separate theme for the welcome zone, unless I missed something…quite possible.  :lol:
Back to the top
 
Posted
Rating:
#66815
Avatar

Community saint

psydoc said

Hi Jean,

Thanks for that advice. I put together several html pages into which I embedded some php, and that worked, but is not exactly what I wanted to accomplish.
Yes, this is an excellent method of navigating through different pages, while staying within one Theme concept.

What I wanted to do was something similar to your Forest theme, but with lots of pages and clues to follow prior to getting to the login.

I noticed that in the Forest theme, there was only one page prior to login, and you used a separate theme for the welcome zone, unless I missed something…quite possible.  :lol:
With the forest theme I wanted to create a completely different environment; fluid wide-width as opposed to the fixed-width of the main theme, and without side panels. To achieve this, I selected to have separate Welcome and Site zones during the installation. This automatically created two “Start” comcode pages; the Welcome one with the codename: start and the Site one also with the codename: start. On the Comcode Editor list they appear as :start and site:start. (I could have changed their codenames!)

The welcome “start” page is the splash screen with the flash animation and the sign post; both part of the header.tpl, leaving the start page totally empty. If I wanted for instance to add different paths to my sign post, I would have kept it on the start page instead and used a child page for each new direction to visit. One of those could have been a Login page separate from the Site Zone.
So maybe this is what you are looking for.
Back to the top
 
Posted
Rating:
#66818
Avatar

Community saint

Hi Jean,

That is exactly what I (my client) is looking for. I produced several "Adobe After Effects" videos for him, along with some php that was embedded in the html pages. It works, but I really wanted it all wrapped into OCP.

Jean said

The welcome "start" page is the splash screen with the flash animation and the sign post; both part of the header.tpl, leaving the start page totally empty. If I wanted for instance to add different paths to my sign post, I would have kept it on the start page instead and used a child page for each new direction to visit. One of those could have been a Login page separate from the Site Zone.
So maybe this is what you are looking for.
I will do a bit of tinkering with this and see if I can get it to work. If I understand correctly, I just need to name each page for the path sequence and keep the :start page as the URL that is accessed by his site?

This is a great deal of fun, for an old man such as me.

I appreciate all your assistance.
Back to the top
 
Posted
Rating:
#66819
Avatar

Community saint

Hi Fletch
Back to the top
 
Posted
Rating:
#66824
Avatar

Community saint

psydoc said

This is a great deal of fun, for an old man such as me …

Hi psydoc. I see you're still barnstorming and, like me, enjoying 'mixing it' with the younger crowd.

Kudos!

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#66825
Avatar

Community saint

Great to see you Fletch. Yes, this 64 year old man can still hold his own.  :lol:  :lol:  :lol: Well, that is my story and I am sticking to it.

Hope all is well with you!
Back to the top
 
Posted
Rating:
#66836
Avatar

Community saint

psydoc said

Hi Jean,

If I understand correctly, I just need to name each page for the path sequence and keep the :start page as the URL that is accessed by his site?
That's it!
Your start page could be an image-map with clickable XHTML <area> tags calling the children pages, or each page could have a timer code passing focus to the next. I'm sure your imagination will come up with the best way to do it.

Yes indeed there is lots fun in figuring out how to use the ocPortal engine in unique ways.

I hope you will eventually show us the result of your tinkering.:thumbs:
Have fun!:cool:
Back to the top
 
Posted
Rating:
#66856
Avatar

Community saint

Thanks, so much for your help, Jean.

I will post the results when they are done. I'm not sure when that will be, I have several other projects in the queue before I get to this.

Do you know if it is permissible for me to place the OCP ROCKS flash element on my design site? And if yes, is there a downloadable file?
Back to the top
 
Posted
Rating:
#66857
Avatar

Community saint

psydoc said

Do you know if it is permissible for me to place the OCP ROCKS flash element on my design site? And if yes, is there a downloadable file?
Yes psydoc,
You can join the Usergroup ocPortal supporters and get that badge as part of your profile.
If you want to publish it on your site, here's the code.
Cheers!

Code

[semihtml]
<object width="107" height="81" type="application/x-shockwave-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" align="middle">
<param name="movie" value="http://ocportal.com/uploads/website_specific/ocportal.com/ocp_rocks.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="bgcolor" value="#eaeff6" />
<param name="pluginspage" value="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" />

<!--[if !IE]> -->

<object width="107" height="81" data="http://ocportal.com/uploads/website_specific/ocportal.com/ocp_rocks.swf" type="application/x-shockwave-flash">
<param name="movie" value="http://ocportal.com/uploads/website_specific/ocportal.com/ocp_rocks.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="bgcolor" value="#eaeff6" />
<param name="pluginspage" value="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" />

You need <a target="_blank" title="(this link will open in a new window)" href="http://get.adobe.com/flashplayer/">Adobe Flash Player</a> to view this video/animation.
</object>

<!-- <![endif]-->
</object>
[/semihtml]
Back to the top
 
Posted
Rating:
#66859
Avatar

Community saint

Done and done. Thanks, Jean.

Cheers :)
Back to the top
 
Posted
Rating:
#94369

Non-joined user

Hi Jean
Iam a newbie to ocportal and was trying to your tutorial
"Tutorial: A Gaming Community Theme (Part 1)"
However I am getting stuck with:
" .global_middle, .fake_middle_continuation "
which I believe does no longer exist in global CSS
of the latest version (9.xx).
Is there an updated version of the tutorial available or something similar for the lates version of ocportal.
Thanks for your help.
Back to the top
 
Posted
Item has a rating of 5 (Liked by sholzy)  
Rating:
#94372
Avatar

Community saint

Pieter said

Hi Jean
Iam a newbie to ocportal and was trying to your tutorial
"Tutorial: A Gaming Community Theme (Part 1)"
However I am getting stuck with:
" .global_middle, .fake_middle_continuation "
which I believe does no longer exist in global CSS
of the latest version (9.xx).
Is there an updated version of the tutorial available or something similar for the lates version of ocportal.
Thanks for your help.


Hi Pieter,

fake_middle_continuation should be replaced with this (around line 590 of global.css):

body#main_website #main_website_inner, html>body div.global_middle_faux {
 background-color: transparent ;

Thanks for your interest, Pieter. I will soon update these tutorials to version 9 of ocPortal.
Meanwhile, just like you did, if you get stuck ask here and I'll be happy to guide you through it. 

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

Quick reply   Contract

Your name:
Your message: