Clean Blank Theme for 1.5

Hi,

I'm new to OpenCart (really like it already though)...

The only thing that really bugs me is the default theme which IMO isn't really handy to work with. So I decided to write my own and figured some people might be interested in using it too so I put it on github : https://github.com/justinmarsan/opencart-blank-theme/

It's far from been finished, so far I only improved indentation in all template files ( waaaaay too bloated for my sweet designer's eyes) and re-organized the css.

Next steps will be to turn as much as possible into css3 and removed the useless markup required for older browser support (like <a class="button"><span>my button</span></a> turned into a <a>)... Already done that one but I'll also do the .heading and things like that. After that i'll use HTML5 tags and then make it as close as possible to something that could be called Opencart Boilerplate ^^

Feel free to push some changes if you use github, or just suggest some changes here

Just a quick update to tell you that while it's not finished, most of the cleaning part have been done...

All the .tpl files have been re-indented, everything is now in Html5 (some divs could be changed to better tags, but it's coming) with support of older browsers with html5shiv. The stylesheet.css have been completely re-organised to make it easier to override the default theme (you no longer need to change hundres of times the colors of the links or stuff like that).

Now I'm making some actual improvements, such as labels elements in table forms... table form kinda suck but without labels it's even worse so I changed that. It also makes it easier to style all the labels all at once, change the style for required fields and all those nice things.

future improvements will be to move all the .product-list elements into separate files so that you only need to change the markup once if you need to, instead of changing in all the templates having a .product-list element.

I also added the license to the README file, it's MIT which means you can use it for anything you want, including for your work.

I think you are basically building something that's been done already - www.themedisk.com/canvas
But then again it's good, cause maybe we can learn something from you and vice versa. Will check your theme out when it's ready..

Ho, yes I indeed missed that.

I will check canvas soon, see what it looks like.

And my blank theme can already be used, there are some improvements coming, but the most important parts are done.

I could not download

Just dowloaded your theme and about to dig in Will let you know how it goes.

How is development on it going? Are you finished or are there further updates to come?

The base of the cleaning process is done for now.

I will work on improvements when I need them and I currently don't have any work that requires Opencart so for now, no updates coming, but there should be some...

Simpler markup to make it easy to change it, search and find a way to have partials for product in listings so you don't need to edit the same HTML several times to have the same result in all the views, things like that.

I'm also opened to suggestions if there is anything you'd like to be put in, or to pull request if you want to contribute.


@ajaxme that's pretty weird, I'm not aware of any issue about that, might have been an error on github side maybe.

HammHetfield - great job, mate. i did used this one for both - http://plantstation.co.uk - seems it all works great {these sites are still being developed but they arfe slowly getting there}... one issue i did have noticed is the problem with pretty url's in your theme.

i might be wrong and it might be up to myself screwing something up but if one enables pretty urls it all works great on the homepage or on the subcategory but after going to the product page {one having seo keyword enabled} from the subcategory level {not from the homepage} where url structure should go like site-name/category-name/product-name javascript keeps reloading itselves constantly and is crushing. initially css was not loading at all too {issue - lack of initial "/" in header links, what is generating issues with mod revrite}...

after some checkout i did realized this infinite reloading js issue is somewhat related with the actual tabs on product page {works great after removing tabs} but i have no clue what is the reason? any ideas?

btw: the issue is not related to the base default template uses as it works fine with 1.5 default theme.

hey @guttenbergovitz there have been an issue for a while (that have been fixed on the repository) about $base or the <base /> tag that might be the issue. https://github.com/justinmarsan/opencar ... er.tpl#L13

You might experience some issues too with the very last version as some feature and function name have changed, I will do my best to make sure everything works fine ASAP.

Nice websites you linked and I'm glad you tried and like my little blank theme.

cheers mate. now it seems it works like a dream. much appreciated really. anyway 'base' tag was a little terra incognita to me as i've never had to use this one - to be honest with yourselves i'm rather web designer than developer, but we all have to learn. once again - thanks. a... 'ivcoded' comment regarding yourselves raming open doors made me rally laugh as the only reason for himselves to post it was stopping yourselves from developing something competing his commercial theme. anyway - well done, squire. i dont mind putting your credentials somewhere on the sites based upon your effort. let's stay in touch.

btw: glad you do like the sites. with plantstation still trying to integrate columnal grid system to make it adaptive and {later on} mobile platform friendly.

Ye tha <base /> tag is one I forgot to move from the default header to mine and it's used, mostly for URL rewriting (friendly urls) and Javascript so um... kind of a big fail for me, but I was only checking the css so I missed that, anyway all good now.

For the mobile version, you guys will have a big share of work to do on the frontend code I think, unfortunately, OC is coded in a really static way, and updating the HTML isn't really fun and simple (I know, I've done it for all the files already).

I hope to be able to make a much cleaner set of HTML files to really be able to do anything we want from the CSS, instead of being limited by the actual format OC forces us to use...

Anyway, we'll see

It's MIT license, no attribution required or anything, enjoy it, use it, report issues in here or on github, give me ideas on how to improve and you're already doing your part of the job

as for mobile version http://www.columnal.com/ works pretty well. fluid, adaptive grid with js image scaling to fit columns {works on plantstation now} backed up by swap of the layout to the mobile version if viewport res hits predefined minimal one plus ability to put mobile only or normal screen only elements. from the visual / designer's perspective it's really a great solution, but one needs to ba aware of the main bandwidth consuming drawback of such a solution as client side resizing & CSS hiding elements still forces mobile user to use / abuse limited transfer. but for the time being it's still better than pixel based static layout nailing and / or building separate m.sitename shop to make it look descent...

ATM on plantstation i have to basically remove px defined elements and substitute them with mobile friendly stripped ones {like menus or more presentational / visual showoffs}... anyway - work in progress.

would you mind if I put those links as examples of what have been done with the framework ?

Also, the way I formatted the css is a bit weird, with layout, skin and typography separater, what did you think of that, was it handy, confusing or something ?

I like this way of doing things but at the same time, that's my way and might not be the best for everybody, I'd like to hear about that when you have a second

Thanks a lot nice share - Teşekkürler çok güzel paylaşım olmuş

Hi,

I promised you a link to themes/sites I'd done with your blank theme...

This is a shop I've just finished, a conversion from my eBay shop:

www.retroemporium.com

Let me know what you think - Brand new, so if anyone finds any problems, will be appreciated! Still have to upload all the products and price/describe properly, but you should get the gist...

Think I may have found a few more tiny bugs - will dig them out and send them to you.

Thanks again for the work you put into this!

Cheers,

@safaksaracoglu : you're welcome

@Tallowman : hey thanks for the link, looks really nice ! I didn't spot any bug.

Yep, hit me if you've found any bug and the solution if you've found one I'll push it to the repo ASAP.

Thanks!

I'll be going through my notes over next few days and PM you any fixes I found,

Cheers,
Tallowman

PS - interested in the discussion above re. mobile opencart. I've looked into responsive stylesheets using CSS only. There was a good tutorial by Jeffery Way on Nettuts. I might dig it out again (when I have time!) and see how I that would be applied to Opencart - would make great addition to the blank theme!

Well that'd be great, the only issue is the default theme (which this blank theme is almost identical to except few things) has a lot of useless markup due to cross-browser compatibility and/or poor frontend development or weird choices (like a JS search form, I still don't get it).

So in theory it wouldn't be so difficult to do a responsive design, you'd just have to add some css, in reality it'd be a little pain because there is a lot of markup and selectors that would need to be redefined.

I'll be working on a clean markup and very basic css version to have only the required/semantic markup as a base to give much more flexibility on that side, but it's taking a long time as there are a lot of templates to work on.

A cleaner mark-up and css version sounds great. I picture something like, say 'thematic' for wordpress? I agree that there can be a lot of fluff in the current set -up, not a criticism, as I guess Opencart is there for those who don't want to have to delve into the code, too.

One thing that it could do without, if I may make a suggestion, is the inline styling! There doesn't seem to be that much around in the latest version, but I've still had to use '!important' a bit more often than I would like!

I'm gonna give the responive theme a go, mainly for an excercise in using media queries as haven't gone there yet. Hopefully will get something useful out of it!