Wondering if anyone has any thoughts/ideas/suggestions as to how to try to style a category display similar to that on the front page of the BILLY GUYATTS site.
I've seen category display extensions here and there - such as THIS EXTENSION and THIS EXTENSION
- so I am wondering if it may be [simply] a matter of CSS styling.
Any thoughts and/or reference to any other starting-point extension resources
I've seen category display extensions here and there - such as THIS EXTENSION and THIS EXTENSION
- so I am wondering if it may be [simply] a matter of CSS styling.
Any thoughts and/or reference to any other starting-point extension resources
I get the idea that there is css styling involved ... but the rest of your suggestion doesn't make a whole lot of sense to me.mcamca wrote:This can be simulated in Opencart using 6 images applied in the menu section of stylesheet.css together with other css changes in menu section!
No, it's not only styling. You need controller files to retrieve the categories for which you wish to display. Of those categories mod you showed, i'm not very sure if they can pick and choose which categories to feature at home page. But I have one that allows you to pick and show which category to display at home page: http://www.opencart.com/index.php?route ... on_id=6464
Sorry, thought you meant the styling of the menu bar; apologies!TomC wrote:I get the idea that there is css styling involved ... but the rest of your suggestion doesn't make a whole lot of sense to me.mcamca wrote:This can be simulated in Opencart using 6 images applied in the menu section of stylesheet.css together with other css changes in menu section!
Thanks ... but for the display/layout I'm wanting to achieve, a "3D Carousel" effect isn't what I had in mind.MarketInSG wrote:But I have one that allows you to pick and show which category to display at home page: http://www.opencart.com/index.php?route ... on_id=6464
Very nice extension, though.
Here is the overall look I'm wanting/hoping to achieve . . .
you mean like this extensions
http://www.opextensions.com/extensions/pro-categories
http://www.opextensions.com/extensions/pro-categories
News CMS || Plus SEO || Live Price change with Option Select
jimmyphong wrote:you mean like this extensions
http://www.opextensions.com/extensions/pro-categories
Well, sort of .... provided that the ability to modify the styling of such will allow me to get as close as possible
- if not virtually identical - to the layout of the image I posted above.
I did something similar on http://www.labeshops.com - I just used the welcome module and coded it thru the source view. Easy peasy. You can do any styling you want if you know html/tables/divisions.
Running Opencart v3.0.3.2 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.
Are you referring to the "Transform Your World ... " section of your home page?labeshops wrote:I did something similar on http://www.labeshops.com - I just used the welcome module and coded it thru the source view. Easy peasy. You can do any styling you want if you know html/tables/divisions.
I know intermediate-level div/CSS styling ... though, looking at how you configured that section on your site, I'm not certain how "easy peasy" it will be to achieve the display I'm wanting.
It's quite easy if you want, you can do with the welcome module with tables and images. Nothing hard about that.
Actually, jimmyphong assisted me with a perfect solution - exactly what I needed.
I really appreciate all the suggestions and comments ... things are really coming together and I'm just about ready to start creating my site. Just one or two more key items I want/need and I'm ready to go full throttle.
I really appreciate all the suggestions and comments ... things are really coming together and I'm just about ready to start creating my site. Just one or two more key items I want/need and I'm ready to go full throttle.
You can reproduce virtually identical to the above by modifying:TomC wrote:Thanks ... but for the display/layout I'm wanting to achieve, a "3D Carousel" effect isn't what I had in mind.MarketInSG wrote:But I have one that allows you to pick and show which category to display at home page: http://www.opencart.com/index.php?route ... on_id=6464
Very nice extension, though.
Here is the overall look I'm wanting/hoping to achieve . . .
catalog/view/theme/yourtheme/template/module/category.tpl
As follows:
Code: Select all
<?php if (!isset($this->request->get['route']) || (isset($this->request->get['route']) && $this->request->get['route'] == 'common/home')) { ?>
<div class="box">
<div id="cat_header" class="box-heading"><?php echo $heading_title; ?></div>
<div>
<div id="cat_home" class="box-category">
<ul>
<?php foreach ($categories as $category) { ?>
<li>
<?php if ($category['category_id'] == $category_id) { ?>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category ['name']; ?></a><div id="cat_menu_child_space"> </div>
<?php $pathname = 'image/' . $category['image'];
if ($pathname != 'image/') { ?>
<img src="image/<?php echo $category['image']; ?>">
<?php } else { ?>
<?php } ?>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a><br /><div id="cat_menu_child_space"> </div>
<?php $pathname = 'image/' . $category['image'];
if ($pathname != 'image/') { ?>
<img src="image/<?php echo $category['image']; ?>">
<?php } else { ?>
<?php } ?>
<?php } ?>
<?php if ($category['children']) { ?>
<ul style="display: block">
<?php foreach ($category['children'] as $child) { ?>
<li>
<?php if ($child['category_id'] == $child_id) { ?>
<a href="<?php echo $child['href']; ?>" class="active"><?php echo $child['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a>
<?php } ?>
</li>
<?php } ?>
</ul>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
<div style="clear:both;"> </div>
<?php } else { ?>
<div class="box">
<div class="box-heading"><?php echo $heading_title; ?></div>
<div class="box-content">
<div class="box-category">
<ul>
<?php foreach ($categories as $category) { ?>
<li>
<?php if ($category['category_id'] == $category_id) { ?>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>
<?php if ($category['children']) { ?>
<ul>
<?php foreach ($category['children'] as $child) { ?>
<li>
<?php if ($child['category_id'] == $child_id) { ?>
<a href="<?php echo $child['href']; ?>" class="active"> - <?php echo $child['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $child['href']; ?>"> - <?php echo $child['name']; ?></a>
<?php } ?>
</li>
<?php } ?>
</ul>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
<?php } ?>
catalog/controller/module/category.php
As follows:
Code: Select all
<?php
class ControllerModuleCategory extends Controller {
protected function index($setting) {
$this->language->load('module/category');
$this->data['heading_title'] = $this->language->get('heading_title');
if (isset($this->request->get['path'])) {
$parts = explode('_', (string)$this->request->get['path']);
} else {
$parts = array();
}
if (isset($parts[0])) {
$this->data['category_id'] = $parts[0];
} else {
$this->data['category_id'] = 0;
}
if (isset($parts[1])) {
$this->data['child_id'] = $parts[1];
} else {
$this->data['child_id'] = 0;
}
$this->load->model('catalog/category');
$this->load->model('catalog/product');
$this->data['categories'] = array();
$categories = $this->model_catalog_category->getCategories(0);
foreach ($categories as $category) {
$children_data = array();
$children = $this->model_catalog_category->getCategories($category['category_id']);
foreach ($children as $child) {
$data = array(
'filter_category_id' => $child['category_id'],
'filter_sub_category' => true
);
if ($setting['count']) {
$product_total = $this->model_catalog_product->getTotalProducts($data);
$children_data[] = array(
'category_id' => $child['category_id'],
'name' => $child['name'] . ' (' . $product_total . ')',
'href' => $this->url->link('product/category', 'path=' . $category['category_id'] . '_' . $child['category_id'])
);
} else {
$children_data[] = array(
'category_id' => $child['category_id'],
'name' => $child['name'],
'href' => $this->url->link('product/category', 'path=' . $category['category_id'] . '_' . $child['category_id'])
);
}
}
$data = array(
'filter_category_id' => $category['category_id'],
'filter_sub_category' => true
);
if ($setting['count']) {
$product_total = $this->model_catalog_product->getTotalProducts($data);
$this->data['categories'][] = array(
'category_id' => $category['category_id'],
'name' => $category['name'] . ' (' . $product_total . ')',
// ADDED NEXT LINE
'image' => $category['image'],
'children' => $children_data,
'href' => $this->url->link('product/category', 'path=' . $category['category_id'])
);
} else {
$this->data['categories'][] = array(
'category_id' => $category['category_id'],
'name' => $category['name'],
// ADDED NEXT LINE
'image' => $category['image'],
'children' => $children_data,
'href' => $this->url->link('product/category', 'path=' . $category['category_id'])
);
}
}
if (file_exists(DIR_TEMPLATE . $this->config->get('config_template') . '/template/module/category.tpl')) {
$this->template = $this->config->get('config_template') . '/template/module/category.tpl';
} else {
$this->template = 'default/template/module/category.tpl';
}
$this->render();
}
}
?>
catalog/view/theme/yourtheme/stylesheet/stylesheet.css
Code: Select all
/* Categories with image on Home */
#cat_header{
background: #ffffff url('../image/category_bg_blue.jpeg');
border: 1px solid #E3E3E3;
padding: 16px 0px 16px 8px;
margin: 10px 0px 10px 0px;
color: #03436D;
font-size: 28px;
}
#cat_home > ul > li {
display:inline-block;
min-width:160px;
min-height:155px;
margin-left: 12px;
float: left;
width: 224px;
overflow: hidden;
text-transform:uppercase;
font-weight: bold;
}
#cat_home > ul > li > img {
padding-top:0px;
width: 112px;
float: right;
}
#cat_home > ul > li > a {
text-decoration: none;
color: #03436D;
font-size: 18px;
}
#cat_home > ul > li:hover > a {
text-decoration: underline;
color: #000000;
}
#cat_menu_child_space{
height:5px;
}
#cat_home > ul > li ul > li {
padding: 0px 0px 1px 0px;
}
#cat_home > ul > li ul > li > a {
text-decoration: none;
color: #3E3E3E;
visibility: visible;
font-weight: bold;
text-transform: capitalize;
font-size: 11px;
}
#cat_home > ul > li ul > li > a:hover {
text-decoration: underline;
color: #0F68A2;
}
catalog/view/theme/yourtheme/image/category_bg_blue.jpeg
Its the white looking area just above! Right click and copy or save picture!
Create a new module in Admin>Extensions>Modules>Category which has a Layout of "Home", Position of "Content Top" or "Content Bottom", Product Count of "Disabled" and Status of "Enabled".
In Admin>Catalog>Categories make sure that the 4th, 8th, 12th etc top category items have the largest number of sub categories in that row. Do this by applying the correct "Sort Order".
Above works in v1.5.2.1 in IE8 and Latest Firefox. You'll have to check in other versions and browsers!
Lets know how you get on!
Edit: Mon Aug 06, 2012: Added code to stop image from showing if no image is allocated to the top level category!
Last edited by mcamca on Mon Aug 06, 2012 5:28 pm, edited 2 times in total.
Yup, that's the section. Easy if you know html/css. I used all existing css actually, just created table cells the way I wanted it. Took about an hour.TomC wrote:Are you referring to the "Transform Your World ... " section of your home page?labeshops wrote:I did something similar on http://www.labeshops.com - I just used the welcome module and coded it thru the source view. Easy peasy. You can do any styling you want if you know html/tables/divisions.
I know intermediate-level div/CSS styling ... though, looking at how you configured that section on your site, I'm not certain how "easy peasy" it will be to achieve the display I'm wanting.
Running Opencart v3.0.3.2 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.
THANK YOU for the time and trial-and-error/effort you put into this for me.
I actually ended up (two days ago) going with an existing extension - developed by OpenExtensions - member "jimmyphong" - called "PRO CATEGORIES". Jimmy actually created a custom template for the extension to mirror the layout of the Billy Guyatts display I have been talking about. (And he's even now including that customized template as an added bonus - for everyone - with his extension).
Nevertheless, once I get it installed and start configuring things, I will definitely also reference the coding you [mcamca] have taken the time to work through and provide here ... for possible further enhancement (if needed).
LOVING the OpenCart Community thus far .... so amazingly helpful.
SIDE NOTE:
Now, if I could ONLY encourage/motivate a skilled developer to take on/develop a more dynamic/robust MEGA MENU system for OpenCart. The one's currently available - and I've researched my butt off on this one - are somewhat lacking in terms of the ability to integrate custom content, custom html and/or certain modules (i.e. login, video, news/blog feed) into the mega menu structure. (See the links posted within the discussion for more info/insight into what I mean).
This element is really the only thing that is currently holding me up from fully moving forward into developing my store project. I really want/need a robust/dynamic mega menu system for my particular project - which is, likewise, fairly robust/dynamic in scope).
I actually ended up (two days ago) going with an existing extension - developed by OpenExtensions - member "jimmyphong" - called "PRO CATEGORIES". Jimmy actually created a custom template for the extension to mirror the layout of the Billy Guyatts display I have been talking about. (And he's even now including that customized template as an added bonus - for everyone - with his extension).
Nevertheless, once I get it installed and start configuring things, I will definitely also reference the coding you [mcamca] have taken the time to work through and provide here ... for possible further enhancement (if needed).
LOVING the OpenCart Community thus far .... so amazingly helpful.
SIDE NOTE:
Now, if I could ONLY encourage/motivate a skilled developer to take on/develop a more dynamic/robust MEGA MENU system for OpenCart. The one's currently available - and I've researched my butt off on this one - are somewhat lacking in terms of the ability to integrate custom content, custom html and/or certain modules (i.e. login, video, news/blog feed) into the mega menu structure. (See the links posted within the discussion for more info/insight into what I mean).
This element is really the only thing that is currently holding me up from fully moving forward into developing my store project. I really want/need a robust/dynamic mega menu system for my particular project - which is, likewise, fairly robust/dynamic in scope).
Last edited by TomC on Fri Aug 03, 2012 7:02 am, edited 2 times in total.
Surely you mean "mcamca" not "labeshops". The only coding provided in this thread was supplied by myself - mcamca!!!TomC wrote:Nevertheless, once I get it installed and start configuring things, I will definitely also reference the coding you [labeshops] have taken the time to work through and provide here ... for possible further enhancement (if needed).
My SINCEREST apologies, mcamca . . . YOU ARE CORRECT !!!mcamca wrote:Surely you mean "mcamca" not "labeshops". The only coding provided in this thread was supplied by myself - mcamca!!!TomC wrote:Nevertheless, once I get it installed and start configuring things, I will definitely also reference the coding you [labeshops] have taken the time to work through and provide here ... for possible further enhancement (if needed).
(must have been the less then 3 hrs of sleep I got last night )
Again, I apologize .... MY BAD !!! . . . . CORRECTED
Who is online
Users browsing this forum: No registered users and 30 guests