[bartlby37]

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

[colortone]

- 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"}
	<div id="header">{include file="top.tpl"}</div>
	{/hook}

So the way it works, this hook look into the folder "index" for the file "main_content" to replace the "<div id="header">{include file="top.tpl"}</div> ".

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 <div id="header"> at the begining and the <div> 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

<link href="{$config.skin_path}/addons/my_changes/MyStyles.css" rel="stylesheet" type="text/css" />

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.

[colortone]

8. Look also into the top_menu.tpl file. It start with the <div id="top_menu">. You'll need to declare a width for this div and float it to the left.,
9. Look into the <div> 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.

[bartlby37]

Many thanks for that.

[bartlby37]

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?

[colortone]

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.