Post by OCyvon2 » Wed Oct 17, 2012 10:46 pm

That will be great :-)

OpenCartstore
Gebruikersgids (admin handleiding)


User avatar
Active Member

Posts

Joined
Sun Jan 31, 2010 8:00 pm
Location - Zaandam, The Netherlands

Post by qahar » Thu Oct 18, 2012 12:28 am

Qphoria wrote:as that will work as it is right now. Tho I'm thinking there's a smoother way to simply assign it to a shorter more convenient variable name.
If OpenCart have "a controller" that available for all template may be we can make it shorter.

Code: Select all

<img src="catalog/view/theme/<?php echo $getTheme; ?>/image/close.png" alt="" class="close" />
And we can use it too for active language (en, gb), language direction (rtl/ ltr) etc

User avatar
Expert Member

Posts

Joined
Tue Jun 29, 2010 10:24 pm
Location - Indonesia

Post by Xsecrets » Fri Oct 19, 2012 1:14 am

Qphoria wrote:
OCyvon2 wrote:
Suggestion

Code: Select all

<img src="catalog/view/theme/*/image/close.png" alt="" class="close" />
Well we should certainly update it to be

Code: Select all

<img src="catalog/view/theme/<?php echo $this->config->get('config_template'); ?>/image/close.png" alt="" class="close" />
as that will work as it is right now. Tho I'm thinking there's a smoother way to simply assign it to a shorter more convenient variable name.
not really a good idea. Then you would "have" to copy all the images from the default theme to your new theme folder weather or not you needed to.

OpenCart commercial mods and development http://spotonsolutions.net
Layered Navigation
Shipment Tracking
Vehicle Year/Make/Model Filter


Guru Member

Posts

Joined
Sun Oct 25, 2009 3:51 am
Location - FL US

Post by Avvici » Fri Oct 19, 2012 4:59 am

Xsecrets wrote:
Qphoria wrote:
OCyvon2 wrote:
Suggestion

Code: Select all

<img src="catalog/view/theme/*/image/close.png" alt="" class="close" />
Well we should certainly update it to be

Code: Select all

<img src="catalog/view/theme/<?php echo $this->config->get('config_template'); ?>/image/close.png" alt="" class="close" />
as that will work as it is right now. Tho I'm thinking there's a smoother way to simply assign it to a shorter more convenient variable name.
not really a good idea. Then you would "have" to copy all the images from the default theme to your new theme folder weather or not you needed to.
I don't follow? What do you mean copy all the images? I guess I need to read the rest of the thread :laugh:

User avatar
Expert Member

Posts

Joined
Tue Apr 05, 2011 12:09 pm
Location - Asheville, NC

Post by ogun » Fri Oct 19, 2012 5:16 am

qahar wrote:If OpenCart have "a controller" that available for all template may be we can make it shorter.

Code: Select all

<img src="catalog/view/theme/<?php echo $getTheme; ?>/image/close.png" alt="" class="close" />
And we can use it too for active language (en, gb), language direction (rtl/ ltr) etc
'fetch' in system/library/template.php could create a few frequently used strings based on the config file (or more if it queried the database too).

Active Member

Posts

Joined
Tue Aug 14, 2007 6:04 am

Post by OCyvon2 » Fri Oct 19, 2012 5:21 am

or maybe add all images in the stylesheet and using div's

OpenCartstore
Gebruikersgids (admin handleiding)


User avatar
Active Member

Posts

Joined
Sun Jan 31, 2010 8:00 pm
Location - Zaandam, The Netherlands

Post by OC2PS » Fri Oct 19, 2012 7:23 pm

Thanks for getting the discussion going.

Our site uses Default theme, purely with CSS modifications: http://www.csillamvilag.com/shop/ I think it looks fairly different from default.

Here are my 2c
  1. Body tag with classes http://forum.opencart.com/viewtopic.php?f=110&t=62531
  2. Category menu with classes http://www.opencart.com/index.php?route ... on_id=6500
  3. In fact, all modules with classes unique to that module
  4. Each element on the right of product photo on product page should have its own class
  5. There is still some style hardcoding in template and language files. Cleanup required - styles should be moved completely to css. This is actually a BIG one.
  6. CSS sprites for the bits and bobs images in theme
  7. Things like ratings stars should be put as background images in CSS so that people can just use CSS to change the rating stars i.e. in modules, product page etc, use class="4-stars" instead of directly calling 4-stars.png
  8. Add layout positions from the current 4 (left-coll, right-col, content-top,content-bottom) to also include
    • pre-header (full width)
    • header (full-width)
    • post-header (full width)
    • top-menu-bar (full width)
    • content-left (splits content into 2, placed between content-top and content-bottom)
    • content-right (splits content into 2, placed between content-top and content-bottom)
    • pre-footer (full width)
    • footer (full width)
    • post-footer (full width)
  9. Convert more fixtures into modules:
    • Logo
    • Language selector
    • Currency selector
    • Search
    • Login/logout links menu
    • Reviews
    • Related Products
    • Description
    • Attributes
    • Copyright
  10. Otion whether to use tabs (clicks) or single long page (scroll) on product page

OC2PS
OC 2.3.0.2, vQmod 2.6.2, Journal2 theme
Arcfesték, Csillámtetoválás, Henna
Image
Check out: All my extensions | My FREE extensions


User avatar
Active Member

Posts

Joined
Wed Jul 22, 2009 4:15 am
Location - Hungary

Post by pedro1993 » Sat Oct 20, 2012 3:46 am

I agree with Qphoria.

There is nothing worse than receiving emails because you're module isn't working correctly due to other templates. As well as following the few things Qphoria stated, I would recommend that themers try keep their HTML code as similar to the originals default theme as much as possible for three reasons:
  • 1. Firstly it would prevent the dreaded SEARCH NOT FOUND on the vqmod error log. With an unnecessary change of code it could cause vqMod extensions to stop working.
  • 2. It will benefit the themer; they don't have to rewrite tons of code. When I create my themes I notice that I am usually working modifying more CSS than HTML
I think some themers also need to remember also:
  • I am sure you all know thatOpenCart has a template fallback system, so take advantage of it! If a certain TPL file doesn't need modifying, ignore it, that way the system will fallback to the default template file for that particular file. Also it means your template might only contain a small number of files to upload which for me makes the template feel more lightweight (I have no idea why though ??).
I am not having a dig at any developers, all developers have their flaws, including myself. But with these suggestions I beleive this will help OpenCart become an even more enjoyable platform to work with for the developer, and more importantly, for the user :)

For professional OpenCart, HTML/CSS & PHP/MySQL support feel free to PM me :)
Click here for my extentions
Did I help you? Donate here to show support
Follow me on Twitter!
Catch me on Facebook!
Watch YouTube OpenCart Tutorials and Extension Demos

Image


User avatar
Active Member

Posts

Joined
Tue Oct 18, 2011 4:31 am
Location - Glasgow, Scotland

Post by bulforce » Mon Oct 22, 2012 11:45 am

This message was flagged as spam and has been denied.
I spend 15 minutes writng a reply and then this! Retardet!!!

Newbie

Posts

Joined
Sat Dec 10, 2011 3:43 pm

Post by PaulD123 » Mon Oct 22, 2012 10:12 pm

Having written my first theme for OC I have found it a pleasure to work with on the whole and cannot praise the coding of OC enough.

I found that there were a lot of hard coded styles, widths, line breaks etc. and not enough divs to allow control of all the different elements.

I also found the putting of form elements into tables unnecessary.

However, compared to certain other open source applications, OC was one of the best IMHO.

The real major problem is the use of floats for the left and right columns, which does not lend itself to responsive design.

However, I think someone said it correctly earlier on, that you will never please everyone.

Best wishes all,

Paul.

Newbie

Posts

Joined
Tue Jul 05, 2011 11:58 pm

Post by themeburn » Tue Oct 23, 2012 7:28 pm

Hi everybody :)

I know that we are the most hated theme makers around here and everybody thinks we have over-modified the whole OpenCart front and everything but OpenCart html & css are a piece of C R A P.

You may say we are exaggerating, or we don't know, what is html & css, or even we are damn arrogant bastards, but this is the truth. Here is why we think so:

MARKUP SEMANTICS
Totally missing - no titles, no labels and putting all form elements in a table and so on and so on. Total DIV mania.

ID/CLASS STRUCTURE AND SEMANTICS
Totally missing somewhere - use of generic class and ID names, no classes on key elements etc. How can you access and color some specific menu for example, when you have only this structure:

Code: Select all

<div id="menu">
  <ul>
    <li><a href="">menu 1</a></li>
    <li><a href="">menu 2</a></li>
    <li><a href="">menu 3</a></li>
    <li><a href="">menu 4</a></li>
  </ul>
</div>
You just can't have a well designed website with the current markup, without repeating tons of css. There is no way to write clean and structured styles separated by elements, group of elements and so on.

In brief this is what we think of the markup but it is not only the markup that is the problem. The anemic extension system is another chapter. VqMod tries to fix it somehow, but that's not the way a software sholud be extended. We will try to give more suggestions later.

P.S. You can use Shoppica markup for the next default theme, if you want. I am sure a lot of theme makers and extension developers will be happier.

Best,
Svetoslav

ThemeBurn team

Image
OpenCart themes


User avatar
New member

Posts

Joined
Fri Apr 29, 2011 8:01 pm

Post by JNeuhoff » Tue Oct 23, 2012 7:53 pm

Hi themeburn,

While I agree with your comments about the need for a better markup in OpenCart, I have to disagree with the way shoppica is done, too many unecessary renames of ids or classes as Qphoria pointed out in his original post. Your example of the menu system is a poor choice, because that is just fine the way it is right now, and can be easily styled:

Code: Select all

<div id="menu">
  <ul>
    <li><a href="">menu 1</a></li>
    <li><a href="">menu 2</a></li>
    <li><a href="">menu 3</a></li>
    <li><a href="">menu 4</a></li>
  </ul>
</div>
As regards OpenCart extensions: I personally now use the new Override Engine for modifying core classes, usually have theme-specific overrides, quite often a web theme uses additional variables in its templates.

MHC Web Design
Override Engine * Integrated VQMod * Unused Images Manager * Instant Option Price Calculator * TrustPilot Reviews * Google Rich Snippets * Google Tag Manager * Export/Import Tool * Template Switcher PHP/Twig


User avatar
Expert Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by OC2PS » Tue Oct 23, 2012 8:38 pm

JNeuhoff wrote:Your example of the menu system is a poor choice, because that is just fine the way it is right now, and can be easily styled:

Code: Select all

<div id="menu">
  <ul>
    <li><a href="">menu 1</a></li>
    <li><a href="">menu 2</a></li>
    <li><a href="">menu 3</a></li>
    <li><a href="">menu 4</a></li>
  </ul>
</div>
Actually it's a good example. For themers, it is a problem that I've tried to resolve in this extension http://www.opencart.com/index.php?route ... on_id=6500 which is not entirely unpopular.

The extension adds classes to the list elements, e.g.

Code: Select all

<li class="category-menu category-id-133">
<li class="category-menu category-id-38 current">
<li class="category-menu category-id-80 subcategory">
<li class="category-menu category-id-84 subcategory current">
I am happy that people find my extension useful, but I'd rather OpenCart have such styling elements in the core.

OC2PS
OC 2.3.0.2, vQmod 2.6.2, Journal2 theme
Arcfesték, Csillámtetoválás, Henna
Image
Check out: All my extensions | My FREE extensions


User avatar
Active Member

Posts

Joined
Wed Jul 22, 2009 4:15 am
Location - Hungary

Post by JNeuhoff » Tue Oct 23, 2012 8:46 pm

OK, point taken. I never had a need to style individual menu items, but yeah, if there is a need for this, your solution makes sense, especially for fans of mega menus.

MHC Web Design
Override Engine * Integrated VQMod * Unused Images Manager * Instant Option Price Calculator * TrustPilot Reviews * Google Rich Snippets * Google Tag Manager * Export/Import Tool * Template Switcher PHP/Twig


User avatar
Expert Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by OC2PS » Wed Oct 24, 2012 12:45 pm

I've seen shops that style individual menu items, hence provided this in the extension. But I don't use it myself.

One basic function that a LOT of people use (including yours truly), though, is differentiate normal menu item vs active menu item. It calls for styling the whole li, but all the core allows is the styling of only the a.

OC2PS
OC 2.3.0.2, vQmod 2.6.2, Journal2 theme
Arcfesték, Csillámtetoválás, Henna
Image
Check out: All my extensions | My FREE extensions


User avatar
Active Member

Posts

Joined
Wed Jul 22, 2009 4:15 am
Location - Hungary

Post by Avvici » Wed Oct 24, 2012 2:54 pm

OC2PS wrote:I've seen shops that style individual menu items, hence provided this in the extension. But I don't use it myself.

One basic function that a LOT of people use (including yours truly), though, is differentiate normal menu item vs active menu item. It calls for styling the whole li, but all the core allows is the styling of only the a.
This isn't really accurate. There are instances where the core will define an li a as well as an li a.active within the main menu.

User avatar
Expert Member

Posts

Joined
Tue Apr 05, 2011 12:09 pm
Location - Asheville, NC

Post by OC2PS » Wed Oct 24, 2012 3:05 pm

avvici wrote:core will define an li a as well as an li a.active
;D I just knew someone would bring that up, and should have addressed that in my post. I just forgot to do that :P

Here's the thing:

From a theming/styling perspective

Code: Select all

<li class="current"><a href="url">menu 1</a></li>
is very different from

Code: Select all

<li><a href="url" class="active">menu 1</a></li>
(or simply by virtue of it being a:active)

Why? Simply because in the first case the styling would apply to the whole li block, while in second case it would only apply to the text :) This may sound trivial, but in reality is a pretty BIG difference.

OC2PS
OC 2.3.0.2, vQmod 2.6.2, Journal2 theme
Arcfesték, Csillámtetoválás, Henna
Image
Check out: All my extensions | My FREE extensions


User avatar
Active Member

Posts

Joined
Wed Jul 22, 2009 4:15 am
Location - Hungary

Post by sb65 » Wed Oct 24, 2012 4:45 pm

All been said by various posters above, but for me, things that would reduce the need to amend a template would be:

- Remove the tables used for layout, especially for the forms
- Remove the inline styles
- Avoid the use of <br/> to deliver vertical spacing and use margins instead

The example quoted of CSS Zen Garden is a great paradigm to use - none of the above appear in the html.

New member

Posts

Joined
Tue Sep 20, 2011 9:18 pm

Post by JNeuhoff » Wed Oct 24, 2012 5:09 pm

OC2PS wrote: One basic function that a LOT of people use (including yours truly), though, is differentiate normal menu item vs active menu item. It calls for styling the whole li, but all the core allows is the styling of only the a.
Actually, I always use a proper OpenCart module named menu for this which I developed ages ago. It has its own controller, language and template files, and even its own CSS file. It was originally inspired by an older ADXMenu version and is purely driven by CSS only, no Javascript needed for this.

MHC Web Design
Override Engine * Integrated VQMod * Unused Images Manager * Instant Option Price Calculator * TrustPilot Reviews * Google Rich Snippets * Google Tag Manager * Export/Import Tool * Template Switcher PHP/Twig


User avatar
Expert Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by OC2PS » Wed Oct 24, 2012 5:20 pm

JNeuhoff wrote:I always use a proper OpenCart module named menu
Sure. But whether you use your menu module or I use my Categories with Class extension, the point is this should really be how the core's default theme is. :)

OC2PS
OC 2.3.0.2, vQmod 2.6.2, Journal2 theme
Arcfesték, Csillámtetoválás, Henna
Image
Check out: All my extensions | My FREE extensions


User avatar
Active Member

Posts

Joined
Wed Jul 22, 2009 4:15 am
Location - Hungary
Who is online

Users browsing this forum: No registered users and 6 guests