opencarts home page menu bar (opencart.com)

[test1.0]

does anyone know how to get it divided like that? i see its new and looks very nice!

thanks

Lloyd

[MarketInSG]

You need to edit your theme's stylesheet then

[zuhenry]

Modifying the CSS change the background of your menu to this:
http://www.opencart.com/opencart/applic ... e/menu.png

ZH

[test1.0]

before i mess with it, that picture alone will make it divided? i dont think it would... there must be some code to give it the split category look

[mcamca]

before i mess with it, that picture alone will make it divided? i dont think it would... there must be some code to give it the split category look

Could you describe exactly what you mean by "the split category look"?
Is this the white gap under the menu?
If so then its probably a margin-top setting for the blue portion under the menu which is set in stylesheet.css.
If you mean the horizontal gap between the main menu items then this is set in the stylesheet.css for:

Code: Select all

#menu > ul > li > a {
   font-size: 13px;
   color: #FFF;
   line-height: 14px;
   text-decoration: none;
   display: block;
   padding: 6px 10px 6px 10px;
   margin-bottom: 5px;
   z-index: 6;
   position: relative;
}

You need to increase the padding on the right and/or left eg. change similar to:
padding: 6px 18px(right) 6px 12px(left);
until the menu items are even across the menu.(If thats what you want!)
Let us know exactly what you mean!

[test1.0]

i mean the vertical divided as seen at the top of the screen

[mcamca]

Sorry, could hardly see this! Its created by an image: "split.png" as follows:

Other images in the menu are:
1. "menu.png" as follows:

2. "transparent.png" as follows:

3. "arrow-right.png" as follows:

You'll not be able to see this one but it is there and can be saved!
These should be put in your folder:
catalog/view/theme/yourtheme/image/
This Opencart site applies all of these in its stylesheet.css via its menu items as follows:

Code: Select all

#menu {
   background: url('../image/menu.png') repeat-x;
   margin-bottom: 20px;
   z-index: 99;
   position: relative;
   height: 45px;
   -webkit-border-radius: 7px 7px 7px 7px;
   -moz-border-radius: 7px 7px 7px 7px;
   -khtml-border-radius: 7px 7px 7px 7px;
   border-radius: 7px 7px 7px 7px;   
   -webkit-box-shadow: 2px 2px 2px #CCCCCC;
   -moz-box-shadow: 2px 2px 2px #CCCCCC;
   box-shadow: 2px 2px 2px #CCCCCC;   
}
#menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
   background: url('../image/transparent.png');
   z-index: 100;
   cursor: pointer;      
}
#menu a {
   display: block;
   color: #C5C5C5;
   text-decoration: none;
   padding: 5px;
}
#menu li a.top {
   font: 13px Arial;
   padding: 0px 32px 0px 32px;
   line-height: 45px;
   margin: 0px 1px 0px 0px;
   display: block;
   text-shadow: 1px 1px #000000;
}
#menu li:hover a.top {
   color: #FFFFFF;
}
#menu > ul > li + li {
   background: url('../image/split.png') center left no-repeat;
}
#menu li.selected:hover > a {
   clear: both;
}
#menu li.selected > a.top, #menu li:hover > a.top {
   color: #FFFFFF;
}
#menu .parent {
   background: url('../image/arrow-right.png') 95% center no-repeat;
}
#menu .parent:hover {
   background: #333 url('../image/arrow-right.png') 95% center no-repeat;
}
#menu li {
   float: left;
   list-style: none;
}
#menu li ul {
   position: absolute;
   z-index: 100;
}
#menu li li {
   clear: both;
}
#menu li ul a {
   color: #FFFFFF;
   height: 20px;
   width: 150px;
   line-height: 20px;
   padding-left: 10px;
   vertical-align: middle;
}
#menu li ul ul {
   margin: -30px 0 0 160px;
}
#menu li li:hover {
   background: #333;
}
#menu ul ul {
   display: none;
}
#menu ul li:hover > ul {
   display: block;
}

You should be able to interpret and extract from the above the settings you need in your stylesheet.css to achieve the effect you require!
You probably only need "split.png" and its css code to achieve the effect you require! If all of the menu items are #menu > ul > li + li then you'll get the image showing on the very left! Start the menu items as this site has done by including a home link in the menu!
See the sites stylesheet and view the sites home page via source to work out how to do this. Stylesheet at:
http://www.opencart.com/opencart/applic ... esheet.css
Select all, copy and paste into Notepad. Open in Wordpad and save! Open in Notepad and you'll now see the code in a manageable form!
Good luck!

[test1.0]

ahh.. thank you so much my friend

Lloyd

[mcamca]

Your Welcome!

[bobwhite]

Hi mcamca,
Can you please help? I need to make my page wider, currently it is set for 980px (default). This is OpenCart 1.5.1.3 I am able to change setting of the container in the layout (stylesheet.css), but menu and footer does not change. I would like to set all values to 1000px.
Any hints will be appreciated.
If you wondering why I am doing this, because of IE, when I view my page in IE my slideshow goes down the screen and make gap between welcome message and slideshow, so visitor sees lots of white empty space. Page is displayed good in Firefox and Chrome. I did not test it in other browsers. Maybe I am going wrong direction? I think that by making everything wider by 20px will bring slideshow up.
You can view it here: http://www.springofhealth.ca

Thanks,

Bob

[mcamca]

I am assuming that your theme is compatable with your Opencart version:
I've tried your wider 1000px and it makes no difference to the positioning in Internet Explorer.
The column on the right is forcing the main content down!
Before you start changing your stylesheet try the following:
1. Make sure that:
Admin -> Extensions -> Modules -> Welcome
is set to a position of "Content Top" and given a sort order of 1.
2. Make sure that:
Admin -> Extensions -> Modules -> Slideshow
is set to a position of "Content Top" and given a sort order of 2.
3. Make sure that:
Admin -> Extensions -> Modules -> Specials
is set to a position of "Content Top" and given a sort order of 3.
Alter the sort order of each to move each up or down!
Let us know if this overcomes the problem with Internet Explorer!

PS: Your stylesheet does not seem to be the problem except for slight errors but one of the .tpl files in your theme could be in error!

[bobwhite]

Hi mcamca,
Thank you for your quick reply.
Yes, my theme is version compatible. Here is link to it: http://www.opencart.com/index.php?route=extension/extension/info&extension_id=3486&filter_username=dswww&page=2
I checked my settings everything was as you mentioned except Specials were set for "Content Bottom" with sort order of 1. I changed as you said, unfortunately no effect.
What kind of errors you're talking about in stylesheet?
How I can view/find them?
Do you have any other suggestions/recommendations?
Thanks,
Bob

I am assuming that your theme is compatable with your Opencart version:
I've tried your wider 1000px and it makes no difference to the positioning in Internet Explorer.
The column on the right is forcing the main content down!
Before you start changing your stylesheet try the following:
1. Make sure that:
Admin -> Extensions -> Modules -> Welcome
is set to a position of "Content Top" and given a sort order of 1.
2. Make sure that:
Admin -> Extensions -> Modules -> Slideshow
is set to a position of "Content Top" and given a sort order of 2.
3. Make sure that:
Admin -> Extensions -> Modules -> Specials
is set to a position of "Content Top" and given a sort order of 3.
Alter the sort order of each to move each up or down!
Let us know if this overcomes the problem with Internet Explorer!

PS: Your stylesheet does not seem to be the problem except for slight errors but one of the .tpl files in your theme could be in error!

[mcamca]

Couldn't find out whats causing your problem but (busy lately; not enough time!):
Try the following (there is probably a better way of doing this but it seems to work in IE 8 and Firefox as you have the site set up at the moment!)
At location:
catalog/view/theme/biology/template/common/home.tpl
(If you have not included home.tpl in your theme then copy/add it from the default theme!)
Keep copy and then replace in home.tpl for your biology theme:

Code: Select all

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
<div id="content"><?php echo $content_top; ?>
<h1 style="display: none;"><?php echo $heading_title; ?></h1>
<?php echo $content_bottom; ?></div>
<?php echo $footer; ?>

With:

Code: Select all

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>
<div id="content" style="position: absolute; width:559px;"><?php echo $content_top; ?>
<h1 style="display: none;"><?php echo $heading_title; ?></h1>
<?php echo $content_bottom; ?></div>
<?php echo $footer; ?>

Let us know if it works OK!
PS: the stylesheet is located at:
catalog/view/theme/biology/stylesheet/stylesheet.css
Open with Wordpad and save!
You can then open and view with Notepad. The slight errors are not worth worrying about!

[bobwhite]

Made changes mentioned above to home.tpl and now everything displayed right in IE.
Thank you for your help.
Best regards,
Bob

[mcamca]

Had a quick look at your biology slideshow.css file and think that the original problem with IE was that the slideshow width was still set to the default full width of 980px. If this had been changed to your width for the slideshow of 550px the problem would have gone!

[bobwhite]

I didn't know that I had to change slideshow.css in biology theme. It is set to 550px in the administration console under Extensions/Modules/Slideshow. As you can see I am newbe with OpenCart. Lots of things to learn.
Anyway thanks for your help.
Bob

[mcamca]

Not your fault!
Probably an oversight in the theme that you downloaded!