Moving tabs in dropdown menu (top_menu tpl)

Developers Frontend
1

I'm playing around with the default blue template - the buttons on the top menu are aligned in the centre of the blue bar - I want to move them to the left and then move the search box to the right hand side of that blue bar - I'm trying to find what I need to change in the dropdown.css but can't seem to make the change.



Thanks for your help



Bruce

2
  • You can get there using my_changes addon. Look for examples in the Manuals and the KB.


  1. create a folder “index” in: skins/your-skin/customer/addons/my_changes/hooks/

    So, from your ftp should look like: skins/your-skin/customer/addons/my_changes/hooks/index


  2. In there, create a file "main_content.override.tpl . Should look like:

    skins/your-skin/customer/addons/my_changes/hooks/index/main_content.override.tpl


  3. Inside the tpl file you can write all the changes will affect the header. How?

    Look into the main.tpl file located in skins/your-skin/customer/main.tpl, and on line 8 you'll see


{hook name="index:main_content"}


{/hook}



So the way it works, this hook look into the folder “index” for the file “main_content” to replace the "

{include file=“top.tpl”}
".



4. copy the file top.tpl into the new main_content.override.tpl so your store will look the same. Don't forget to write the
at the begining and the
at the end (this div was inside the hook, not in the top.tpl file)



For the CSS declarations you'll need something similar:



5. create a file “styles.post.tpl” inside the same folder “index”. From your ftp should look skins/your-skin/customer/addons/my_changes/hooks/index/styles.post.tpl



6. write this code in that .tpl file





7. create a file “MyStyles.css” on "skins/your-skin/customer/addons/my_changes folder

so form your ftp should look like "skins/your-skin/customers/addons/my_changes/MyStyles.css



Put all your new css declarations in this new .css file.

3
  1. Look also into the top_menu.tpl file. It start with the
    . You'll need to declare a width for this div and float it to the left.,
  2. Look into the
    for the search section and assign a width and float right.



    So, playing into the main_content.override.tpl file and the MyStyles.css file will let you set the header the way you want, without touching default installation files.
4

Many thanks for that.

5

I Just created the files inside the add_ons/my_changes… etc. Now when I go back into Add On's in the template editor the my_changes folder has disappeared. I've checked that the My Changes add-on is active in the add-on's menu and I've tried restoring the add-ons folder from the repository but nothing happens. Can I just create a new My Changes folder and try again?

6

1 The addon “my_changes” is active by default, but you have to create the folder “my_changes” and upload there your new files.

2 I forgot to tell you, but you have to clear the cache in order to force the browser to read the new files. Just add the ?cc to the admin.php (i.e. admin.php?cc) and hit enter.



3. Sometimes it doesn't read right away, you also should delete your browser history. But there is no need to install/reinstall the addon.