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.


CITYSCAPE 2013 Theme

Login / Search

 [ Join | More ]
 Add topic 
Posted
Item has a rating of 5 (Liked by Guest)  
Rating:
#94355 (In Topic #18813)
Avatar

Community saint

a new ocPortal theme


Click on image for a live demo of this theme.
 
A New year: 2013.

Here is my latest experiment with a new style for the Welcome Page enhanced with HTML5, JavaScript and JQuery code snippets.

I have tested this theme with the latest browsers and although they all render it adequately, they certainly do not do it with equal accuracy and performance. For best result, I suggest Firefox, followed closely by Google Chrome. It was a welcome surprise to see Safari deliver a good and quick rendition of this theme. (I was shocked and sickened by Opera' struggle to render each element for finally messing it up completely in the end. This was apparently caused by a bad install. Opera Version 12.12 Build 1707 works flawlessly with this theme.) The centerpiece signature for this theme is the sliding (garagedoor) effect for the link gateways on the welcome page and the header on the main site. Unfortunately it is not compatible with previous IE versions other than the latest IE10 which will at least flip the shutter images and make a good show for the rest. IE10 works fine now!

There is a fairly large download for this theme (6MB) because of the included city images and 3 PSD files to easily replace the shutters with your own theme images and logo. All changes and menu links are easily accessible from only one commented template: GLOBAL_HTML_WRAP.tpl. If you have just a basic understanding of HTML tags, it should not be difficult to change the menu links with your own. The Welcome page images, JS, and special css files are contained in a separate "/themes/CityScape/welcome_zone/"   folder.

I hope you will like this theme and be able to adapt it for different projects.

Jean 

ps. Thanks to Harry-S and Fletch for making me see the light with Opera!:cool:
     Thanks to Fletch for his IE10 Fix!:thumbs:


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

Community saint

Very nice theme Jean, I Like this one very well. maby I will use this somewhere. Have test your demo site with Opera and it was fast loading, all screens rendered well.

Go on this way!!

Harry


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#94365
Avatar

Community saint

Another winner!

I didn't suffer the issues you appear to have had with Opera. It worked very smoothly for me. IE10 disappointed (I think we're all familiar with how IE disappoints - it's just a matter of degree!). FF and Chrome played as nice as Opera.

I'm sure there is a timing issue that can be added for IE to scroll the 'garage doors' upwards rather than flip the images, but since I don't have the original code I cannot even begin to hazard a guess!

Masses of HTML5 and CSS3 in there for any aficionado to drool over. Good job.

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

Community saint

Harry-S said

Very nice theme Jean, I Like this one very well. maby I will use this somewhere. Have test your demo site with Opera and it was fast loading, all screens rendered well.

Go on this way!!

Harry

Thanks Harry!
You are right about Opera, it works flawlessly. I just had a bad install of the browser. Your confirmation was helpful.  :thumbs:
Jean

Back to the top
 
Posted
Rating:
#94371
Avatar

Community saint

Fletch said

Another winner!

I didn't suffer the issues you appear to have had with Opera. It worked very smoothly for me. IE10 disappointed (I think we're all familiar with how IE disappoints - it's just a matter of degree!). FF and Chrome played as nice as Opera.

I'm sure there is a timing issue that can be added for IE to scroll the 'garage doors' upwards rather than flip the images, but since I don't have the original code I cannot even begin to hazard a guess!

Masses of HTML5 and CSS3 in there for any aficionado to drool over. Good job.

 


RE: IE issue: You are probably right, there must be a timing code which would work, but I can't find it. I actually made something similar work in an HTML page after adding a small patch to the jquery.ui.core acting on the IE mousemove function, but it does not work for the jquery plugin I using here.   Here are the css vendor prefixes for this one (just maybe, the right one for IE would solve this):


.csstransitions #garagedoor li {
 -webkit-transition: background-position 0.6s ease;
 -moz-transition: background-position 0.6s ease;
 -o-transition-property: background-position 0.6s ease;
}

Anyway, thanks for your encouraging comments!
You and harry were both right about Opera. I probably had a bad install of that browser. Your confirmation helped me figure it out and retract my comment.:thumbs:

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

Community saint

Well done, Jean! I'm always amazed at the new ideas you come up with.  :thumbs:


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

Community saint

Jean said

RE: IE issue: You are probably right, there must be a timing code which would work, but I can't find it.
I can't seem to get the IE dev tool to work for me (need more practise), but I wonder if you can insert this into .csstransitions #garagedoor li to see it it triggers anything?
transition-property: opacity 5s linear 1s, background-position 0.6s ease;

The reason I ask is that it appears that you are calling the 'transition' for -webkit, -moz and -o, but not for IE.

I'd be interested in the outcome. You may also need to trim it back to get rid of the 'opacity' call …

 :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
Item has a rating of 5 (Liked by Fletch)  
Rating:
#94384
Avatar

Community saint

Fletch said

Jean said

RE: IE issue: You are probably right, there must be a timing code which would work, but I can't find it.
I can't seem to get the IE dev tool to work for me (need more practise), but I wonder if you can insert this into .csstransitions #garagedoor li to see it it triggers anything?
transition-property: opacity 5s linear 1s, background-position 0.6s ease;
The reason I ask is that it appears that you are calling the 'transition' for -webkit, -moz and -o, but not for IE.

I'd be interested in the outcome. You may also need to trim it back to get rid of the 'opacity' call …

 



Thank You So Much, Fletch!

Once again, you saved the situation with a fix. I've tried so many alternatives for IE9, finally thinking that it had to do with JQuery somehow and I didn't realize I had a missing IE transition when I eventually moved over to IE10.

Tweaking it as you suggested works great and increasing the transition timer a bit seems to compensate for a downward flip tendency:
transition: background-position 0.9s ease;


Cheers,:):thumbs:
Jean
Back to the top
 
Posted
Item has a rating of 5 (Liked by JeanLiked by Fletch)  
Rating:
#94385
Avatar

Theoretically ocPortal will magic it if {$BETA_CSS_PROPERTY,transition: background-position 0.9s ease;} used.


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

Community saint

Chris Graham said

Theoretically ocPortal will magic it if {$BETA_CSS_PROPERTY,transition: background-position 0.9s ease;} used.


Magnificent!  It works just fine. Amazing that one declaration fixes all vendor prefixes.

I've seen this beta_css code activated on several properties all over global.css.
Now I'll make use of it instead of just looking at it! ;)

Thanks Chris!:thumbs:

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

Yeah it's a nice half-way ground we have there between the extremes that most people end up taking:
  1. fully automatically detecting what to prefix.  jQuery does this, but it circumvents the prefixing system, which exists for a reason.
  2. having to manually put everything in via individual prefixes. This is obviously a pain.

Our approach gets the advantages of both, and if vendors change their beta syntax we can theoretically accomodate that via medium-term workarounds inside ocPortal, without anyone needing to change their themes.


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

Community saint

Chris Graham said

  • Theoretically ocPortal will magic it if {$BETA_CSS_PROPERTY,transition: background-position 0.9s ease;} used.
  • … and if vendors change their beta syntax we can theoretically accomodate that via medium-term workarounds inside ocPortal …
Yes, and yes.

I've been using it extensively since the release of IE10. Unfortunately it doesn't call the SVG image in IE9, and that has to be inserted manually.

I'm sure they will all eventually start singing from the ocPortal hymn-sheet, but it sometimes seems like an eternity before they catch up …!!

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

Fan in action

Just Implemented it on Our Cyber Church Site
Excuse me for being a dork
 How To I Add My Links to The Index Page

to see the site Visit www.rdmcc.org
Back to the top
 
Posted
Rating:
#95596
Avatar

Community saint

Hi Otto, you mean the links on the welcome screen I think?

If yess, then go to your admin zone, choose for Style and themes. In the city theme you see there, choose templates, and use search for Global_html_wrap open this and look at the code where to change the link to your own.

Harry


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

Fan in action

Thanks Harry!
That's Exactly what I needed...
Will Shout if I get stuck, this is a brilliant theme
the More I work With ocPortal the More I like it...:lol:
Back to the top
 
Posted
Rating:
#95598
Avatar

Community saint

You are welcome :)


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

Fan in action

Once Again Thanks! ;)

Thank You Jean For A Fabulous Theme :thumbs:
Thanks Harry S - The advise You gave saved me time. :'(
Thanks To Chris Graham For A Brilliant CMS - it rocks :lol:


Last edit: by Otto Brinkmeier
Back to the top
 
Posted
Rating:
#95600
Avatar

Community saint

Cheers Otto!

Thanks for the kind words!

Yes indeed, ocPortal is a tremendous CMS for your website.

Like you said. just shout if you need anything.

Harry is also a fan of this theme and if you visit his site you will see how effectively he has used it. :thumbs:

Jean
Back to the top
 
Posted
Rating:
#95601
Avatar

Fan in action

Thank You Sir!  :thumbs:

This Theme is just what Mark and I needed
We wanted to display Chicago since that's where we are hosted, Now I can Create Images For Chicago, Johannesburg ZA (Our City) I'll leave The Other Slides In Place.

Just One Quick Question :$
The Two Main Garage Doors Site And Admin Zone
Are these Graphics Over laid with Text
And Which Template are they part of?

So Far I have Done the Main edits
Will Spend Time On Graphics Next
You can go to www.rdmcc.org to have a look
Back to the top
 
Posted
Rating:
#95604
Avatar

Community saint

I can answer that, yes they are images, you can find them in the image map of the theme. I had to make them for my own language.

You can make your own, and upload these on the same name to the server. Ready you are go.

cheers Harry


http://digiflash.nl Photo community  (dutch)
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Expand