Design - Written by Kerry on Saturday, August 23, 2008 16:00 - 52 Comments
WP Coda Orange Theme Released
WP CODA ORANGE is based on the fantastic theme by Greg Johnson – WP 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
Download Latest Version 1.0
zip, 192k – 11139 downloads
Download Latest Version 1.0
zip, 1.57MB – 2574 downloads
![]()
Instructions and other information can be found at the demo site.
52 Comments
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 ?
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
@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.
@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
Thank you very much! no problem in IE, but no effect in firefox3.0. any suggestion? Thank you!
@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.
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?
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
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?
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
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.
@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.
@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.
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/
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.
@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.
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
@Nikko – take another look and let me know. I think you should be able to handle any changes from here.
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…
This theme is incompatible with the wordpress plugin Gengo??
Thank you for your help!
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.
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
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.
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?
Thanks you very much it is professional and very cool !
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?
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.
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.
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.
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.
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.
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?
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 – Nice job. It was a fun exercise for me to create Coda Orange. I’m sure you enjoyed creating your version as well. Congrats!
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!
@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.
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!
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!
Kerry, are you around?
@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.
[EDITED] Long string of question marks. Unreadable.
Thank you, I regularly read your blog, I have some questions for you, let me know if you want to contact me by e-mail































Aug 27, 2008
06:20 am