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 project "Building an ocPortal Theme Generator"

Login / Search

 [ Join | More ]
 Add topic 
Posted
Item has a rating of 5 (Liked by Chris GrahamLiked by BobSLiked by FletchLiked by Brian HayLiked by sholzyLiked by Robbie GoacherLiked by Harry-SLiked by RayhazeLiked by GuestLiked by GuestLiked by GuestLiked by GuestLiked by GuestLiked by SahsLiked by Duck)  
Rating:
#86285 (In Topic #17655)
Avatar

Community saint

themeing ocPortal from a local server

From this:


To this:    Live site Demo Here


To That:  Live site Demo Here


The Project

I recently had to prepare a course about themeing ocPortal for a group of  would-be computer technicians. I was concerned about their limited knowledge of HTML and CSS. No one knew how to setup a basic website, let alone a CMS such as ocPortal with advanced features. We regularly meet similar new users here on the pages of this community with comparable limitations complaining about the complexity of themeing ocPortal.  I thought I would share my experience in demonstrating that it does not have to be a complex task to apply simple modifications to the basic ocPortal Default Theme to get amazing results. In the process, I went on to create a study project, which in itself might seem, oh lol, "complex" for the uninitiated.

I also wanted to solve the problem of having to work with a live site for each student in the classroom and risk alienating my Hosting provider with high CPU and multiple processes adding stress to the server upon waives of modifications congesting the system at all hours.  This was solved by installing WampServer on the classroom PCs as well as on the students laptops.  only their final product will be published on line. A Tutorial for installing WampServer and ocPortal was necessary.

In order to keep things simple, I looked at ways to apply a minimum of changes to the basic theme's CSS and none on templates. Working mostly with the "Manage Themes" interface would maintain continuity in the process.

I've been using alpha transparency on most of my themes for years even though it was not supported by all browsers, but these days it has been adopted by most modern browsers, giving me ways to declare colors in CSS to fill areas with transparent shades. By just changing a few values with RGBA and setting some transparencies the ocPortal panels seem to fuse with their background in ways that produces different shades from dark to light. Some results can be striking while giving us a way to modify themes by mostly changing images and gradients. (themes generators)

The following tutorials were prepared to enable a better understanding of the entire process. You can jump-in on any of the stages and skip those you have no interest in, or leap directly to downloading the themes and take it from there to do your own modifications or use them as is. Images used to create these themes were taken from the Internet and are supposedly  "free for personal use". If you intend to employ the themes for different purposes, I suggest you find images suitable for your needs.  My purpose in creating these themes is to share information.

The Process

Installing ocPortal on a Local Server:  
Building an ocPortal Basic Theme Generator:  
Material needed:
  •  Paradise theme images
  •  DiffMerge comparison chart
  •  global.css modifications document
  •  calendar.css modifications document
  •  ocf.css modifications document
  •  Jungle theme images
 
Attachment
» Download: project_documents.zip (1.40 Mb, 210 downloads so far)


Download finished themes: I hope that newcomers as well as veteran themers find something useful here and I encourage anyone to add comments and comeback to tell us about their discoveries and successes.

This post is the result of lots of preparation and uploading in multiple places on my sites as well as on this site' s download and Community Docs, so please let me know if there are links that have failed.

Jean            
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#86287
Avatar

Community saint

Very nice work, Jean. I am sure it will help many.

Bob
Back to the top
 
Posted
Item has a rating of 5 (Liked by sholzyLiked by Jean)  
Rating:
#86291
Avatar

Community saint

I tried to click the 'up' thumb rapidly so that I could get in two or more 'likes', but ocPortal was too smart for me. But you get the gist!

This is a magnificent tute for anybody starting out with ocP, and I'm sure the staff will find the right home for it, and/or PIN it, before it gets buried amongst the posts in this forum.

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

Community saint

Thank you Chris, Bob and Fletch!

Your support and comments mean a lot to me.:)

I saw my students starting to theme ocPortal trying their hands at modifying "Paradise" and learn more in the process and then advise others of their findings. This made me think that with a tutorial we might see more published themes this way.

Jacques_odryzynski has one in the works:
Back to the top
 
Posted
Item has a rating of 5 (Liked by sholzyLiked by Jean)  
Rating:
#86297
Avatar

Community saint

Thanks for sharing Jean :thumbs:

Out of curiosity, do any of your students visit this forum, and if so what do they think?

Fletch said

I tried to click the 'up' thumb rapidly so that I could get in two or more 'likes', but ocPortal was too smart for me.
That loophole was swiftly closed when Chris discovered that sholzy was stalking Bob :View topic: Bug? - ocPortal.com

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#86298
Avatar

Community saint

temp1024 said

Thanks for sharing Jean :thumbs:

Out of curiosity, do any of your students visit this forum, and if so what do they think?

Fletch said

I tried to click the 'up' thumb rapidly so that I could get in two or more 'likes', but ocPortal was too smart for me.
That loophole was swiftly closed when Chris discovered that sholzy was stalking Bob :View topic: Bug? - ocPortal.com

LOL! That wasn't me, and I deny everything!  :ninja2:  :lol:

Steve
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#86310
Avatar

Community saint

Wowo Jean, my compliments for the good and understanding way you have done this!!!


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#86336
Avatar

Community saint

Harry-S said

Wowo Jean, my compliments for the good and understanding way you have done this!!!

Thank you Harry! :)

Jean
Back to the top
 
Posted
Rating:
#86337
Avatar

Community saint

temp1024 said

Thanks for sharing Jean

Out of curiosity, do any of your students visit this forum, and if so what do they think?



- Temp:)

Yes, they are encourage to become members of ocPortal, but I think that most are overwhelmed by this enormous deposit of information. Dutch is the official language of the Island, but they are much more comfortable with their local dialect. So things here look a bit out of touch at first glance. I'm just hoping they can stick around and get a taste of the friendly community atmosphere.

Jean 
Back to the top
 
Posted
Rating:
#92202
Avatar

Fan in training

I just can add a link to Lampstack besides WAMPs:
BitNami LAMP Stack
;-)
Back to the top
 
Posted
Rating:
#100753

Non-joined user

Jean,
I love your themes.Very nice. Helpful.
Jennifer :wub:
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: