Design - Written by Kerry on Saturday, August 23, 2008 16:00 - 51 Comments

WP Coda Orange Theme Released

WP CODA ORANGE is based on the fantastic theme by Greg JohnsonWP CODA. WP CODA itself was created to “mimic the functionality of the very popular Coda website – created by .Panic to market their web development tools and services. As Greg states, “Every aspect of the Coda website was duplicated and this theme works in every major browser.”

I found the theme on the ever present Weblog Tools Collection theme release posts. I have added my own twists and simplified the graphic layout so others could take the files I created and make their own CODA theme flavor.

VISIT THE DEMO SITE – CLICK HERE

Download Links

WP Coda Orange
Download Latest Version 1.0

zip, 192k – 10522 downloads



WP CODA Orange WordPress Theme


Instructions and other information can be found at the demo site.

 Digg  Facebook  StumbleUpon  Technorati  Deli.cio.us  Twitter  Sphinn  Mixx  Google  DZone 


51 Comments

You can follow responses to this entry through the RSS 2.0 feed. You can leave a response or trackback from your own site.

marcin @ localess.com
Aug 27, 2008
06:20 am
 

Hi Kerry,
Love what you did with Greg’s theme, have one question though – is there any chance to have header and the rest moved up so the header space would not be like 3/4 height on lower resolution monitors ?

kevin
Aug 27, 2008
06:52 pm
 

love your theme. I have used it for my new site. http://www.loadmemory.com with lots of change of color. Now I have a question about coda popup, can I apply it for other tab,not only for the first one?

Thank you in advance!

kevin

Kerry
Aug 27, 2008
08:11 pm
 

@marcin @ localess.com – Yes. but it will take a lot of doing.

This change will raise the tabs 100px toward the top of the page.

line 28 of the style.css change from:

padding:220px 0 0 0;

to
padding:120px 0 0 0;

Then the popup on the download tab will have to have its style changed as follows:

line 93 of style.css change from

margin:225px 0 0 50px;

to

margin:125px 0 0 50px;

You will then need to change two graphics to fit your needs:

body_bg.png & header_bg.png

They will no longer fit the theme.

Kerry
Aug 27, 2008
08:13 pm
 

@kevin – checkout the demo. Then download this file and follow the instructions in the readme.txt:

http://kerrywebster.com/wp-downloads/all_3_tabs_with_popup.zip

kevin
Aug 27, 2008
09:39 pm
 

Thank you very much! no problem in IE, but no effect in firefox3.0. any suggestion? Thank you!

marcin @ localess.com
Aug 28, 2008
05:53 am
 

Thanks Kerry – for the details how to do the header thing :-)

Kerry
Aug 29, 2008
12:34 am
 

@kevin – running ff 3.01 and it works fine on my machine. Don’t have a pc with ff 3.0 any more. Can’t test. Sorry.

nerdski
Sep 4, 2008
05:13 pm
 

I have a lot of text content in one of my pages and it gets cut off. If there a way to add like a scrolling bar? I really don’t want to add an iframe, is there any other way around this?

Jacob
Sep 7, 2008
08:55 pm
 

I can’t get the fancybox working. How do you use that plugin? I know that it is already installed into the theme, but how do I implement the fancybox for an iframe or an image? Please let me know. The website I am trying to get it working for is cori4weddings.com. Thanks.

Jacob

Fedelosa
Sep 28, 2008
11:53 am
 

Your work is great!!! Thank you for this theme!!!

myndcraft
Oct 2, 2008
11:28 am
 

I’m hoping someone could help me HEAVILY modify this theme. What I am looking to do is the following.

Remove the three header links – did that.

Remove the slide between pages -effects. Reason is my content doesn’t fit inside the panel and adding turning the overflow on creates a double slidebar effect.

Any thoughts?

Nikko
Oct 3, 2008
09:43 am
 

Hi Kerry,

I love the coda orange theme as well wp coda. I am playing with the coda orange theme and slowly learning to make changes. My question, I want to use a SWF header at the top where the coda orange image is. You can see the header here. http://www.coastalrealestateconsultants.com Can you point me or guide me on how to integrate this? Thanks.

Nikko

savvy
Oct 4, 2008
01:21 am
 

Hi Kerry,
Thanks for such a great theme. I have almost finished customizing this theme and have run into a couple of questions.

1. Is there a way to turn one of the pages into a blog?

2. Is there a way to make each sliding page have it’s own URL?

I wish I’d thought about asking this before I spent all day customizing the theme. Ahh…my excitement about this theme blinded me before I thought about the important things. Either way, thanks for the free theme, and any advice would be greatly appreciated.

Kerry
Oct 4, 2008
11:31 am
 

@Nikko – I need to know how much of the header you want to lose. It will just take adding the .swf code to the header and then possibly some .css changes for height to accomodate the height of the flash header.

Kerry
Oct 4, 2008
11:35 am
 

@savvy – blog integration has been the No. 1 request. This will be coming in version 2 but I am swamped at the moment with other work. The sliding page and URL thing will take a bit more explation so I understand what the request is suggesting.

Nikko
Oct 4, 2008
11:49 am
 

Hi Kerry, thanks for your response. The swf is 800×320 exactly the size of the background png image. Ive tried putting it in the header.php using the kimili plugin but it shows up down in the page area.

I also notice that the download, learn how, and talk back tabs do not change when you hover them in Firefox. Here is what I have played with. Ex. http://www.dreamcreationteam.com/

Nikko
Oct 4, 2008
11:56 am
 

Kerry,

Forgot to mention, I do want to keep the 3 tabs, they seem to overlap the header bkground image, so I may need to reduce the swf dimensions.

Kerry
Oct 4, 2008
11:00 pm
 

@Nikko – take a look at the demo. http://wpcodaorange.kerrywebster.com/
I will leave this up for a bit. I am trying to figure out the rolloever issue in Firefox. It seems to be a cache/download issue with the code that performs the rollever effect.

I will zip and place for download if this is what you are looking for with the header. Let me know.

Nikko
Oct 4, 2008
11:53 pm
 

Hi Kerry,

Yes, that is what I am looking for. I will reduce the size of the swf header so it will fit above the 3 tabs which I want to use. Can the navigation and slider module be raised up closer to the bottom of the orange block? Thanks so much for your assistance on this, this theme is really slick and cool. Can’t wait to use it in the future. Kudos to you.

Nikko

Kerry
Oct 5, 2008
08:47 pm
 

@Nikko – take another look and let me know. I think you should be able to handle any changes from here.

Nikko
Oct 6, 2008
12:11 am
 

Fantastic, exactly what I am looking for. Thanks Kerry I really appreciate your help.

freddy
Nov 3, 2008
03:06 am
 

used the .css tweak mentioned to marcin above about making the header smaller and changing the padding and margin on the 2 lines, but I am a miff to how to get the entire rest of the page to slide up as well. In other words I have made the header_bg with smaller height as well as the body_bg and adjusted the padding in the #header accordingly and margin in #header .popup but now I have a big gap between the header and header links and body. Any help here would be greatly appreciated, I’m sure I’m missing something obvious…

roody
Nov 4, 2008
02:42 am
 

This theme is incompatible with the wordpress plugin Gengo??

Thank you for your help!

Matt
Dec 3, 2008
04:27 pm
 

Kerry,
Is there a way to integrate WP coda’s header (the logo and the contact, learn how, download logos and links) as the header of a simple wordpress blog theme.

What I’d like to do is use WP coda as the ‘business’ page of a website and than use a more classic blog format theme for the site’s blog, but I want to integrate the header so they don’t look like two completely different sites.

Kevin
Dec 22, 2008
01:27 pm
 

Hi Kerry, i just started using your coda wordpress version. Since i am always expirementing new open-source techniques, i got some questions/request/wishes for it..

I would like to use the first page (first tab) as an Splash, like a simple page with a big image in it, which automaticly slides after xx seconds to the second page. All other tabs/pages should’n automaticly get slided. Optional: When im on the second page and hit first tab it also should’n slide anymore.

Any clue? ideas? Im pretty new with jQuery, but familiar with open-source developing (webdesign point of view). Well hopefully you get the change and time to have a look at it..

Greets Kevin

Stein
Jan 2, 2009
07:40 am
 

Well, first of all I want to say how much great work you’ve put into this theme, Thx for that in advance.

Just one thing, how to create more than 10 static pages… it seems to only show the first 10 pages….

How to solve this? I used a dropdown menu plugin so I can create lots of subpages…

I excluded the dropdown menu and tried modifying the css or find some issue in the functions file, still can not find the cause of the “10 pages limit”

Hope you can find some time to help me out here, I allready put a lot of modifying time in the theme so I just do not want to waste al that effort due to the pages issue….

Hope you can help.

thx

Stein.

Bryan
Jan 22, 2009
08:00 pm
 

what is the easiest way to change the from orange to blue #0066cc. light blue could be considered 0099ff for areas for gradient.

i have downloaded the psd files with the layers, but it would be nice if i could just find and replace the original color (orange) with a new one. is there a simplier way to do this than to recreate all the gradients?

Internet
Feb 3, 2009
02:45 am
 

Thanks you very much it is professional and very cool !

Bob
Feb 3, 2009
06:14 pm
 

I have modified the template files to create myomnisolutions.com

I wanted to add a news page that could automatically aggregate news/blogs. When I tried inserting the following code generated from the site below into the bottom of a current page or a completely new page, nothing shows up:

http://code.google.com/apis/ajaxsearch/documentation/newsshow/wizard.html

Its google’s new News Aggregator header that uses iframe. Is that not supported with wpcodaorgange or wordpress?

Would feedwordpress or another wordpress plugin accomplish this type of news aggregation?

Kerry
Feb 4, 2009
12:31 am
 

Awesome. I like the blue and the simplicity of the site. Straight to the point.

alex
Feb 4, 2009
10:02 am
 

hey there. 1st of all i’d like to say that this is an awesome template and i’d like to a question.
how can be the text from a post or page be wrapped around a picture? i can’t figure out how to do that. i’ve tryed editing the css stylesheet, but i really have no clue where to start, and it’s not working from the image inserter function from wp. i’m using wp2.7.
thanks in advance.

nickthedude
Feb 18, 2009
12:16 pm
 

Hey,

love the template, just wondering what to change to make the main part of the bg not white id like to make it like a light orange to make the middle box pop out more. the body_bg.png seems like its orange already so im at a loss as to what to change.

samir
Mar 13, 2009
12:33 pm
 

Well Superb job Kerry Hats off to you for this!!!

But i have figured out on problem in the theme is that the IE PNG fix is still not incorporated in the theme. And the black shadow apppears in the theme in IE6 and IE7 too.
It is seen in the screenshot you have taken also. It looks beautiful in mozilla,Google chrome but in IE it shows that shadow which looks very ugly.
Rest all the theme is very beautiful!!!

Regards,
Sam.

Sumato
Apr 2, 2009
10:53 pm
 

Hi Kerry – You are so kind for answering everyones inquiries. i have been working with the blue theme for a couple days now. Building a small site for my dad. I am a novice and still learning. I have a couple specific questions.

A) Having trouble finding where the color # for the background in the header that forms the margins to the sides of header_bg.png is located. Trying to insert a new image on top and have it match it surroundings.

B) Very happy to leave Greg’s link on the bottom (he deserves credit) but would like to take the about the author off the front page. What’s the best way to do this.

C) Lastly, for some reason the title for the following page sneaks in the bottom of the frame of the main window. Any thoughts?

Any help you can provide would be greatly appreciated. I think I have exhausted my deductive reasoning capabilities. Thanks again. And cheers.

Sumato
Apr 3, 2009
10:29 am
 

Update – I think I am down to one question now. While I have not touched any script, for some reason the title for the next page appears at the bottom of the frame of the main window. Think this is because the pages are scrolling vertically for some reason not horizontally (buttons aren’t working). Thanks a ton.

mssmotorrd
May 3, 2009
06:53 am
 

It’s the first time I commented here and I must say you share us genuine, and quality information for bloggers! Good job.
p.s. You have a very good template for your blog. Where did you find it?

Andrea
Jul 21, 2009
09:28 am
 

Hi Kerry! very nice work, it’s very simple and light code, it’s possible have a vertical scroll in the
<div class="panel" ?

i try a put the code
( )
()

in a DIV with overflow:auto, in ie i haven’t problem, but in firefox the animation work’s very bad…

tankyou and sorry for my english, i’m italian!

Michael Garmahis
Jul 21, 2009
01:54 pm
 

Check out green flavor of WP CODA WP CODA Green free WordPress theme

Kerry
Jul 21, 2009
06:18 pm
 

@ Michael Garmahis – Nice job. It was a fun exercise for me to create Coda Orange. I’m sure you enjoyed creating your version as well. Congrats!

Brian
Sep 11, 2009
04:07 pm
 

Kerry – I echo the compliments of everyone else. Great job on this theme!

I have a question…
How can I safely disable the “download popup”?

I don’t want to disable anything that doesn’t neet to be disabled.

Thanks Kerry!

Kerry
Sep 11, 2009
09:53 pm
 

@Brian – All you need to do to get rid of the ‘download popup’ is comment out the ‘popup’ div in the themes header.php. Look for this: <div class="popup"> and place comment tags at the beginning and end of the div. Alternately you can just delete the entire div.

Brian
Sep 19, 2009
10:02 pm
 

Hey Kerry,

I have another question. The slider just randomly started putting things in a weird position, so that as you click through pages, it goes right, down, and diagonal instead of all to the right. But, the odd thing is this only happens in Safari.

Here’s a link to the site: http://worldharvestsunday.net

Would really appreciate if you could take a look and give any thoughts you might have on how to fix this issue.

Thanks Kerry!

Tom
Sep 20, 2009
10:40 pm
 

Hi Kerry!

I am trying to achieve something that might a little odd for you. Same exact theme, but in light version, without any JS, lo-fi. I would greatly appreciate some advice on how to do that – I want the same menu and container placement, but no sliding effects, no JS.

Thanks!

Tom
Sep 27, 2009
12:36 am
 

Kerry, are you around?

UNREADABLE
Oct 2, 2009
05:07 pm
 

EDIT ADMIN [unreadable - string of question marks]

Arounseaffern
Nov 11, 2009
03:57 am
 

EDIT ADMIN [unreadable - string of question marks]

Kerry
Nov 11, 2009
09:10 am
 

@Tom – Sorry I missed you request for help. I’m sure there would be no issues taking out the js and just using image tabs. I have included the .pds file (photoshop) so it shouldn’t be much of an issue to create static pages. Let me know if you need help with this.

megasoft
Feb 2, 2010
07:00 pm
 

[EDITED] Long string of question marks. Unreadable.

Trackbacks

Leave a Reply



BasecampHighrise

Comment



 

Design, News - Nov 10, 2009 21:27 - 0 Comments

My Entries in the WordCamp Boston Logo Contest

More In Design


News - Jan 25, 2010 4:37 - 6 Comments

Branded Login Screen 2.0 Released

More In News


How To - Jul 15, 2008 23:59 - 10 Comments

How WordPress 2.6 Broke My Permalink Structure…

More In How To




Login