How to add color attribute next to Category name in Top Horizontal Menu

[heovang]

Hi all

 

I wonder if anyone would help or direct me to some module which has an option to do this:

 

http://www.ties.com/

 

The website is an example, if you click on SHop By Colour, you will see that next to Blue colour, will have a small blue colour box ?

 

Thank you so much

[PascalVG]

Hi Heovang,

 

I played with it a little bit and maybe this comes close:

Edit file /modules/blocktopmenu/blocktopmenu.php:

 

Go to function:

 

private function getCategory($id_category, $id_lang = false, $id_shop = false)

 

 

and change these lines:

 

 

...

if (!empty($is_intersected))

{

$this->_menu .= '<li '.$selected.'>';

$this->_menu .= '<a href="'.$category_link.'">'.$category->name.'</a>'; // delete this line

 

if (count($children))

...

 

 

into this:

...

 

 

if (!empty($is_intersected))

{

$this->_menu .= '<li '.$selected.'>';

 

if ($category->id_image != null) // change into this red part

$this->_menu .= '<a href="'.$category_link.'">'.' <img src="'._THEME_CAT_DIR_.

$category->id_image.'.jpg" width="20" height=20"> '.$category->name.'</a>';

else

$this->_menu .= '<a href="'.$category_link.'">'.$category->name.'</a>';

 

if (count($children))

...

 

 

Code is quite 'raw', and may need adjustment, but what it basically does is it displays the category picture in front of the category name.

If you then make a category 'Show by colour' and add subcategories like 'Green', 'Red', 'Blue' and add as their category image an image in the right colour, then it looks somewhat to what you want.

 

Give a look here (temporarily link, may be deleted soon)

http://prestatestshop.buymethai.com/index.php

 

at the topmenu I added the menu Shop by colour. In it's submenu I added the subcategories red and green as an example. Clicking on it will for example go to the subcategory 'green' page, where you can show all green products you have...

 

Does this look anything interesting??

 

Let me know,

Pascal

[heovang]

Hi Pascal

 

You are amazing, I will implement it on my test site now and see how it goes..Will get back to you in an hour or two,

Edited April 18, 2013 by heovang (see edit history)

[smallbizwiz]

Nice work on this one...saved me a ton of time!

[vekia]

@smallbizwiz so everything works as you expected?

@heovang the same for you?

[smallbizwiz]

Yep...one thing to add though, TopMenu is one of those modules that cache, so make sure to recompile (Advanced Parameters - Performance), else you won't see any changes (e.g. re-sizing the image)

[mouse1]

Hi guys, thank you for this great code, it works perfectly for me.

 

Would you possibly know how to adjust the code so that it adds a static number at the end of the image name? For example, the code generates pictures called 123.jpg, 124.jpg, 125.jpg and I would like them to be called 123-2.jpg, 124-2.jpg, 125-2.jpg. It's because I need a bit different category and subcategory pictures in top menu from the ones I have everywhere else in the shop (I would, of course, adjust the new pics manually and upload them in the relevant folder). I know it might sound a bit crazy, but I can't find any better solution. Thank you. 

[geolan]

Hi!

Anybody to help me how o change the black/grey block bg color to brown. sorry I'm new to this cms thanks

[vekia]

Hi!

Anybody to help me how o change the black/grey block bg color to brown. sorry I'm new to this cms thanks

 

 

where exactly? can you shed some light on this?

[geolan]

check www.tangoafricasafaris.com, i want all grey or black areas like block with top menues to be having brown bg instead of balack or grey. thank

[PascalVG]

mouse,

probably like this:

 

if (!empty($is_intersected))
{
$this->_menu .= '<li '.$selected.'>';

if ($category->id_image != null) // change into this red part
$this->_menu .= '<a href="'.$category_link.'">'.' <img src="'._THEME_CAT_DIR_.
$category->id_image.'-2.jpg" width="20" height=20"> '.$category->name.'</a>';
else
$this->_menu .= '<a href="'.$category_link.'">'.$category->name.'</a>';

if (count($children))
...

 

 

(Add blue -2 to code above) :-)

 

Explain a little more what you need, maybe there's another way to solve your problem?

pascal

[geolan]

Thanks again bro!

when you look at my web site .\,

there are topic like :-

Home | About us |Reservation |Nairobi Excursions |Hotels |Terms and conditions

 

NAIROBI EXCURSIONS

 

Itineraries

 

TANZANIA SAFARIS

 

FLASH EVENTS

 

the backgrond where these link are are in grey color, that what i want to change to brown. thanks

Edited September 3, 2013 by geolan (see edit history)

[PascalVG]

Hi Geolan,

 

For the top menu:

In the file, /modules/blocktopmenu/css/superfish-modified.css  change this: (line 15 )

 

.sf-menu {

1. margin: 10px 0;
2. padding: 0;
3. width: 980px;
4. background: #383838;     <--- change to desired code, like #884020

}

 

grey part, you can change in the same file (line 92)

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

1. background: #4E4E4E;    <-- change into desired code, like #AA6030

}

 

 

for the titles of other blocks :

edit file: /themes/default/css/global.css: (line 292)

.block .title_block, .block h4 {

1. padding: 6px 11px;
2. font-size: 12px;
3. color: #fff;
4. text-shadow: 0 1px 0 #000;
5. text-transform: uppercase;
6. background: #383838;      <-- change to desired code, like #884020
7. text-align: left;
8. font-weight: bold;

}

 

for big block down below (the footer),

same file:  /themes/default/css/global.css:    (line 577)

#footer {

1. color: #fff;
2. background: #333;     <-- change to desired code, like #884020

}

 

for search box - button:

edit file: /modules/blocksearch/blocksearch.css   (line19)

 

#search_block_top .button {

1. border: none;
2. border-radius: 0;
3. color: #fff;
4. text-transform: uppercase;
5. background: url(img/bg_search_submit.png) repeat-x 0 0 #101010;    <<--- delete front part, and change color, like #884020
6. float: left;
7. height: 25px;

}

 

 

contact us back block (right below)

edit file: /modules/blockcontact/blockcontact.css (line 24)

#contact_block a {

1. display: block;
2. margin-left: 60px;
3. padding: 6px 8px;
4. font: bold 10px Arial,Verdana,sans-serif;
5. color: #fff;
6. text-shadow: 0 -1px 0 #000;
7. text-transform: uppercase;
8.  
   -moz-border-radius: 3px;
9. -webkit-border-radius: 3px;
10. border-radius: 3px;
11. background: url(images/bloc_contact_a_bg.png) repeat-x 0 0 #000;    <--- delete front part, and change #000 to desired color, like #884020

}

 

 

Hope this helps,

pascal

[geolan]

ok thanks will try in in the morning then will update. Thanks and be bless bro

[mouse1]

Thank you so much PascalVG !! I'm gonna try and explain... I'm also including pics to illustrate. 

 

1) My problem is that I have black and white design. My category and subcategory images are black on white background which is OK. However, my top menu is black, so the font is white and the pictures should also be white... but they are black. :-) Actually they are black with white square background. When I use invert in css, the pics look the way I want, but this doesn't work for me in all browsers. And then another problem comes... problem No. 2

 

2) When I invert cat and subcat images in css, ALL cat and subcat pictures are inverted, of course, including the ones in my Color category which gives me totally mixed up colors. I can't think of any other solution than adjusting my pics manually (invert the black and white ones and keep the color ones the way they are). Pls see the pics to get a better idea of what I mean. 

 

Thank you for your help. 

[PascalVG]

Mouse do you have a link to your site, so I can play with it a little? (You can PM it to me if you don't want to make it public...)

Thx.

[PascalVG]

P.S. First quick thought is to make the top menu also white... (maybe with some black border lines to show item blocks, outside border etc.).

Is that possible/good idea??

 

Well, if possible, give me a link. Seeing the real site gives me some full picture...

pascal

[mouse1]

P.S. First quick thought is to make the top menu also white... (maybe with some black border lines to show item blocks, outside border etc.).

Is that possible/good idea??

 

Well, if possible, give me a link. Seeing the real site gives me some full picture...

pascal

 

Thank you Pascal, I'm grateful for your time and help! 

 

White background would not be the solution. :-( I will send you a PM with a link so that you see what the website looks like. Thanks again.  

[geolan]

thanks all have worked exept the search and contact block. Any idea since in the folder I only find  .tpl files not .css. Thanks again

[PascalVG]

Hi Geolan,

 

For search and contact block:

 

I cannot see that you took out the first part of the lines yet:

 

for search box - button:

edit file: /modules/blocksearch/blocksearch.css   (line19)

 

#search_block_top .button {

1. border: none;
2. border-radius: 0;
3. color: #fff;
4. text-transform: uppercase;
5. background: url(img/bg_search_submit.png) repeat-x 0 0 #101010;    <<--- delete front part, and change color, like #884020
6. float: left;
7. height: 25px;

}

 

so in the end we have something like this:

 

#search_block_top .button {

1. border: none;
2. border-radius: 0;
3. color: #fff;
4. text-transform: uppercase;
5. background:  #884020;    <<--- after we deleted front part, and changed color to #884020
6. float: left;
7. height: 25px;

}

 

 

contact us back block (right-below on page)

edit file: /modules/blockcontact/blockcontact.css (line 24)

 

#contact_block a {

1. display: block;
2. margin-left: 60px;
3. padding: 6px 8px;
4. font: bold 10px Arial,Verdana,sans-serif;
5. color: #fff;
6. text-shadow: 0 -1px 0 #000;
7. text-transform: uppercase;
8.  
   -moz-border-radius: 3px;
9. -webkit-border-radius: 3px;
10. border-radius: 3px;
11. background: url(images/bloc_contact_a_bg.png) repeat-x 0 0 #000;    <--- delete front part, and change #000 to desired color, like #884020

}

 

so in the end we have something like this:

 

#contact_block a {

1. display: block;
2. margin-left: 60px;
3. padding: 6px 8px;
4. font: bold 10px Arial,Verdana,sans-serif;
5. color: #fff;
6. text-shadow: 0 -1px 0 #000;
7. text-transform: uppercase;
8.  
   -moz-border-radius: 3px;
9. -webkit-border-radius: 3px;
10. border-radius: 3px;
11. background: #884020;    <--- after we deleted front part, and changed #000 to #884020

}

 

 

So, for both, try to take the front part of the lines out (i.e. the image) and then change the colour.

Quite sure it works...

pascal

[geolan]

thanks very much Pascal I'm  grateful it has worked.

[PascalVG]

See that search is still black. did you manage that one as well? 

[geolan]

i just want to change the button which i think is editing the image with search as i did to Facebook but where the writing should be is fine like that. thanks

[geolan]

just another questing ! down in the footer I have INFORMATION CATEGORY, where do i edit the contents since i don't need things like store , specials , new products etc. thanks again

[PascalVG]

Hi Geolan,

easiest way to do this is:

edit  /themes/default/css/global.css (line 1986):

#footer .block_various_links {

1. padding: 15px 10px;
2. display: none;           <-- Add this. This will turn off the block with the links

}

 

 

Doing this, the three left over columns are not nicely spread out. To fix this, change in same file:

line 581:

.blockcategories_footer, #footer .myaccount, #block_various_links_footer,#social_block, #block_contact_infos {

1. float: left;
2. width: 300px;     <-- change to 300px

}

 

and (line):

 

#footer .myaccount {

1. padding: 15px 20px;    <-- change to 20px

}

 

That should do the trick,

pascal

[geolan]

thanks it works

[ukwyspa]

Hi, thank U @PascalVG! You are the best

 

I have a problem, top menu its great but how can i add categories images like in top menu in category-tree-branch (left) menu :/ i have no idea :/

[ukwyspa]

ok i know

<img src="{$link->getCatImageLink($category->link_rewrite, $node.id, 'category_small')|escape:'html'}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" width="{$categorySize.width}" height="{$categorySize.height}" />

.done

[PascalVG]

Hi ukwyspa,

Yep, that should do it. Thanks for the feedback!

 

pascal

[CHYPSET]

mouse,

probably like this:

 

if (!empty($is_intersected))

{

$this->_menu .= '<li '.$selected.'>';

 

if ($category->id_image != null) // change into this red part

$this->_menu .= '<a href="'.$category_link.'">'.' <img src="'._THEME_CAT_DIR_.

$category->id_image.'-2.jpg" width="20" height=20"> '.$category->name.'</a>';

else

$this->_menu .= '<a href="'.$category_link.'">'.$category->name.'</a>';

 

if (count($children))

...

 

 

(Add blue -2 to code above) :-)

 

Explain a little more what you need, maybe there's another way to solve your problem?

pascal

Pascal você e muito bom parabéns. 

[BernardWyatt]

Hello. I am trying to add colour options to attributes but I need to add a block to show the colour like red or black etc. I am not sure how to add this but I need to go one better. I need to show some colour as Red/White or Black/White and thus want to show a colour block with both colours.

 

Can anyone help me how to do this and please note I am really not handy with any code etc.

[PascalVG]

Hi Bernard,

Not fully sure if I understand your request well. Do I understand correctly, that you want to add some color attribute to a product, with various dual-tone values, like red/blue, black/white?

 

If so:

- Create the attribute, like 'Color'

- Add a value

- Call the color value something like 'Black/White'

- instead of choosing a color from the color palette, you could choose a 'Texture' file, 

 

and make some small squares/rectangles graphics (gif/jpg) with both colors, like this:

 

- Choose the graphics file and save

- do this for all dual tones you need.

 

 

Then:

- Edit/add a product, and make combinations which use these color values

- Go to front page, go to the product, and you will see the combined color shown:

 

Hope this is what you needed. If not, please tell us some more details, and maybe add some quick sketch or so.

 

pascal

[BaptisteLegoupil]

Hi !

In PS 1.6 how can i add categories thum in mega menu ?

I have this code :

foreach ($pages as $page) {
                $cms = new CMS($page['id_cms'], (int)$id_lang);
                $links = $cms->getLinks((int)$id_lang, array((int)$cms->id));

                $selected = ($this->page_name == 'cms' && ((int)Tools::getValue('id_cms') == $page['id_cms'])) ? ' class="sfHoverForce"' : '';
                $this->_menu .= '<li '.$selected.'>';
                $this->_menu .= '<a href="'.$links[0]['link'].'">'.$cms->meta_title.'</a>';
                $this->_menu .= '</li>';
            }

in getCMSMenuItems function.

 

Can you help me Pascal ?

[BaptisteLegoupil]

up plz !

[RIyaj]

Hi Pascal

I need your help. I want to build my site with horizontal filter like the below site. Could you please help on this

https://www.ties.com/gen-2.25-width+ties.com-brand+cotton-material+floral-patterned+black-colored+skinny-ties

Edited July 6, 2018 by RIyaj
Upload screenshot (see edit history)