The community forums are currently being phased out. At the end of February or early March 2012, you will no longer be able to post here. This is because the entire site is being restructured. Please use the main forums for discussions.

Origin: Responsive parent theme

Galin (Member)
Posted 4 months ago | Permalink

I know this is the 'Child Themes' section but what I have to offer is a parent theme for theme developers and bloggers. Responsive and built on Hybrid Core, with minimal styling.

Download (314 KB) →

Demo →

While it should look pleasant enough for a blog site, I've actually made it for my own theme-developing needs and therefore it should be useful for other fellow developers. If you've ever used any of Justin's parent themes for building a custom site, you should be at home with Origin - I used Prototype as a model and did my best to follow the Hybrid Core coding standards. And if you even recognize his personal coding style, that's probably because I formed my own style here :) .

I cannot promise the same about the CSS though - it may look quite different, if we don't count the fact that I used Prototype as a base to make sure all WordPress elements are styled.

Theme Settings - again, the inbuilt Hybrid Core feature is used, according to the theme settings tutorial. Plus a color picker and image upload settings. I've made the last two following the guidelines and ideas in the book "Professional Plugin Development", so they should be good :) .

Well that is all for now. I'd be especially happy if other theme developers find the theme (or parts of it) useful and give me their feedback.

PS: This is my first fully GPL-licensed theme and I'm not sure if I've left credit everywhere it's needed. Please let me know if you spot something wrong.
Justin Tadlock (Key Master)
Posted 4 months ago | Permalink

Awesome theme! I'll get this posted up on the blog as soon as I can.
hwijaya (Member)
Posted 4 months ago | Permalink

I just activate your theme and got this error
Fatal error: Call to undefined function register_meta() in \themes\origin\library\functions\meta.php on line 46
Galin (Member)
Posted 4 months ago | Permalink

@Justin: Many thanks! :) Your evaluation means a lot.

@hwijaya: Sorry about that. Can you confirm you are using the latest WordPress version?
hwijaya (Member)
Posted 4 months ago | Permalink

@Galin, you're right. it's version issue. Great work!
Sami Keijonen (Member)
Posted 4 months ago | Permalink
Looks great! I'm right behind you making responsive theme using Hybrid Core and using Prototype as an example.

I noticed that viewing site with iPad 2 vertical view (768 x 1024) there are no margins at all in left and right. It's kind of hard to read. I didn't have time to test, but it could be this.
```
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.wrap { max-width: 768px; }
}
```
Edit: just a little test, but it could be that.
```
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.wrap { max-width: 748px; margin: 0 10px;}
}
```
Galin (Member)
Posted 4 months ago | Permalink

Thank you, Sami!

Yes, it could use some tuning. Will try to update it before the end of the day.
Galin (Member)
Posted 4 months ago | Permalink

The theme is updated and now should look better on the iPad.

I can't edit the link in the first post so the file name still indicates the old version, but it's the updated theme (0.1.6) inside.
Sami Keijonen (Member)
Posted 4 months ago | Permalink

I confirm, it looks better now with margins.
wiselywoven (Member)
Posted 4 months ago | Permalink

Galin: bravo! Can't wait to try it out.
Galin (Member)
Posted 4 months ago | Permalink

Thank you :) .

It's updated again by the way. The videos are now responsive too - thanks to FitVids.js. Plus a few minor code improvements.
wiselywoven (Member)
Posted 3 months ago | Permalink

Galin: my only complaint is the header area is too small for a nice sized logo. How would I go about fitting in a logo that is roughly 400 w x 200 h? -thanks!
Galin (Member)
Posted 3 months ago | Permalink
You can change the widths of the two header elements in your child theme (or in the 'Custom CSS' option):
```
#branding { width: 45% }
#menu-primary { width: 50% }
```
The logo height shouldn't be a problem - both elements can stretch vertically.
wiselywoven (Member)
Posted 3 months ago | Permalink

Galin: Thanks! How about changing the height? Will that mess anything up?
Galin (Member)
Posted 3 months ago | Permalink

Just edited my previous comment :) - there shouldn't be any need to adjust the height.

EDIT: Aaand I probably need to update the theme - a 400px image needs to be 'responsive' to fit the area if viewed on narrow screens (iPhone etc). Will fix it tomorrow.
wiselywoven (Member)
Posted 3 months ago | Permalink

cool thanks!
Galin (Member)
Posted 3 months ago | Permalink

Updated.
There are some important code improvements so using the latest version is recommended.
gloriaantonelli (Member)
Posted 3 months ago | Permalink

I am trying out the Origin theme. I have a few questions. I will start with menues.
(Hope this is the right forum to ask.)

What would be the best way to add back the secondary and subsidiary menu areas that were in Prototype?
Galin (Member)
Posted 3 months ago | Permalink

@gloriaantonelli: I don't mind answering your question, of course, but it actually looks like a support question and I should adhere to the ThemeHybrid forum policy and keep this section clean of such discussions.

Maybe you could rephrase it to something like "How to add a secondary menu to a Hybrid Core based theme?" and post it on the Support forum? It would cover everything you need to know and the topic might be useful for more members, not only those who use Origin.
gloriaantonelli (Member)
Posted 3 months ago | Permalink

Thanks Galin. I did a search on the support forum and found a few threads already there about adding a second menu that did the trick.
If I have any other questions I will be sure to use the support forum.

Nice theme! I will keep an eye on any updates. Where will you post updates to the Origin theme?
Galin (Member)
Posted 3 months ago | Permalink
I've submitted the theme to wordpress.org more than 2 weeks ago. Hopefully it would get approved at some point and you'd start receiving automatic update notifications.

Whenever I update the theme I also update the contents of the file in the first post (the file name doesn't indicate the theme version anymore).

You can check what the most current version is on the 'official' theme page (the url is in the ReadMe file) or by inspecting the source of the demo site - the following meta tag indicates the version:
```
<meta name="template" content="Origin 0.2.1" />
```
wiselywoven (Member)
Posted 3 months ago | Permalink

Galin: How hard would it be to add a slider to the homepage?

Justin: do you plan on getting into responsive design? - aka: designing so that your themes look good on any device (smart phone, tablet, etc)? Or is this already a feature of your work somewhat? Going forward I am looking to implement responsive themes and I would love to stay with your work as a solid base.
Justin Tadlock (Key Master)
Posted 3 months ago | Permalink

The My Life theme was originally responsive. I didn't like how it turned out, so I removed the code for it.

Responsive design is something I'm playing around with, but it's not at the top of the priority list right now. It didn't seem to be a high priority for people who took the Theme Hybrid 2012 poll.

Honestly, I'm still questioning the entire responsiveness movement. I like what can be done, but it's steering Web design in the wrong direction. What I mean by this is that the device should know what to do with standards-based code. The code shouldn't be catering to the device. That's kind of backwards.

Those are my thoughts. Responsive designs are definitely on my radar.
Galin (Member)
Posted 3 months ago | Permalink

@wiselywoven: There must be 101 ways to implement a slider. The easiest approach that comes to my mind at the moment is to simply use the Slideshow plugin in the sticky post. The sticky post can be modified to display the entire content.

Or take a look at the News theme for an example.

Yesterday I started a new theme and there will be a slider in it. Will share it here when it's done.
wiselywoven (Member)
Posted 3 months ago | Permalink

Justin: I hear what you are saying. I guess we're in a strange phase of web development - almost a transitional phase before everything jives how it should. In the meantime though there are people accessing our websites on ipads and smart phones and other devices and it's only increasing. Also isn't the future of standards-based code going to be HTML5 and CSS3 - and doesn't this lead towards a more consistent experience across all devices? I'm no expert in any of this but I am trying to understand how to go forward and ride the edge without leaving late adopters behind. It's the strange tension between what is coming and what is.

Galin: You are doing great work and I appreciate that you are using the Hybrid Core as a solid base. When do you plan to launch your website officially and what is your business model? Will you have a handful of free themes and then sell some premium ones or is this just a side project that will be for the free benefit of the Wordpress community? Thanks for the comments on the slider as well.
Galin (Member)
Posted 3 months ago | Permalink

Thanks :) . The site has some unfinished parts and I want to have at least three decent themes to offer before considering it ready for human eyes. And I can't declare any business model yet but I'll probably put prices on some of the future themes. The project has a secondary (and even tertiary) role as well. So its future doesn't exactly depend on the eventual profitability of the model.
Justin Tadlock (Key Master)
Posted 3 months ago | Permalink

@Galin

I don't want to get too into the details yet, but the new ThemeHybrid.com site will allow theme authors to post their custom themes here on the site (on the actual themes page here). If you're interested, let me know.
Galin (Member)
Posted 3 months ago | Permalink

@Justin: Yes, I'm interested.
Justin Tadlock (Key Master)
Posted 3 months ago | Permalink

Cool. I'll let you know more when the time comes.
Sami Keijonen (Member)
Posted 3 months ago | Permalink

Hi Galin. I have tested "fluid" grids with IE7 and under some circumstances there is not one grid that works with IE7. That includes your site or http://cssgrid.net/ or any attemps I have made. I thought this was about problems that browsers can't calculte subpixels right.

http://ejohn.org/blog/sub-pixel-problems-in-css/
http://css-tricks.com/percentage-bugs-in-webkit/

But I even made grid with only integers % and I discovered almoust the same problems with IE7. How is it possible that IE7 can't calculate integers right:)

I could write some more detail in better time. And those problems are pretty minor, so don't worry. One way to go is just leave old IE behind. I'll take that advice for
some project.

http://jonikorpi.com/leaving-old-IE-behind/

Reply »

You must log in to post.

Origin: Responsive parent theme

Reply »

Topic Info

Topic Tags: