Header image in place of logo+links

Hello,



I’m trying to figure out how to place a banner/image (i.e. 900px x 100px) in place of logo and quick links at the top of my site.

This header (an image) will have the width of the full site size.



Anyone can help me with this?



P.s. I’m sorry for my english :rolleyes:



Thank’s

Luca

Luca



This is what I did:







I did this by doing:



Activate the My Changes addon.



Make a file called:



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



In that new file I put:


```php {* $Id: main_content.override.tpl 7412 2009-05-04 08:03:01Z Brandon $ *}




Saltwater To Go








{assign var="escaped_current_url" value=$config.current_url|escape:url}
{if !$auth.user_id}
{$lang.sign_in}
{$lang.or}
{$lang.register}
{else}
{$user_info.firstname} {$user_info.lastname}
({include file="buttons/button.tpl" but_role="text" but_href="$index_script?dispatch=auth.logout&redirect_url=`$escaped_current_url`" but_text=$lang.sign_out})
{/if}

{if $settings.General.secure_auth != "Y"}


{$lang.sign_in}


{include file="views/auth/login_form.tpl" style="popup" form_name="login_popup_form" id="popup"}


{/if}


{include file="common_templates/search.tpl"}








{include file="views/checkout/components/cart_status_salt.tpl"}

{if $localizations|sizeof > 1}

{include file="common_templates/select_object.tpl" style="graphic" link_tpl=$config.current_url|fn_link_attach:"lc=" items=$localizations selected_id=$smarty.const.CART_LOCALIZATION display_icons=false key_name="localization" text=$lang.localization}


{/if}

{if $languages|sizeof > 1}
{include file="common_templates/select_object.tpl" style="graphic" link_tpl=$config.current_url|fn_link_attach:"sl=" items=$languages selected_id=$smarty.const.CART_LANGUAGE display_icons=true key_name="name" language_var_name="sl"}

{/if}

{if $currencies|sizeof > 1}

{include file="common_templates/select_object.tpl" style="graphic" link_tpl=$config.current_url|fn_link_attach:"currency=" items=$currencies selected_id=$secondary_currency display_icons=false key_name="description"}


{/if}


```

Or you can just edit:

skins/your-skin/customer/top.tpl

Change:

```php


{$settings.Company.company_name}


{include file="top_quick_links.tpl"}

{include file="top_menu.tpl"}
```

To:

```php


Saltwater To Go

```

Of course you will need to put in your own image and change your styles to make it work, but this should give you the idea of where to start.

I hope it helps,

Brandon

Hi Brandon,



I’m sorry for the delay.



Thank you for your suggestion, I’m doing some test about.



Can you please suggest me some tips about the style sheet?



Thank you

Luca

To use the style sheet as a hook is basically the same.



You need to make 2 files for the hook style sheet to work.



First make a file:



skins/your-skin/customer/addons/my_changes/hooks/index/styles.post.tpl



In this file put:






Then make a file:



skins/your-skin/customer/addons/my_changes/css/local_styles.css



In this file you would put the css changes. Because of how the hooks and css work, this is the last bit of css that is checked before “making” the page.



So for the header examlple I gave you would would need to add into the local_styles.css


.logo-image {
float:none;
margin-left: -8px;
}




Now if you are going to call images in your new style sheet than you need to put those images in:



skins/your-skin/customer/addons/my_changes/css/images/



I hope this helps you, I think I covered everything, but it wouldn’t be the first time I left something out.



Brandon

Thank you Brandon for you suggestions and examples! I will have a look into.



I wish you and all the forum users a Merry Christmas and a Happy New Year!



Luca

Hi brandon,



Thanks for detailed explanation it helped me lot. I have used same my_changes addon to do some skinning changes on default basic theme of CS.



I am changing footer of basic theme, using hook in bottom.override.tpl (my_changes/hook/index/bottom.override.tpl) file. All changes reflected accordingly in site but there are additional search box & quick link sections are displayed in footer and below that my changes are reflacted. I have checked code of bottom.tpl and found that

```php




{include file="common_templates/search.tpl" hide_advanced_search=true}



{foreach from=$quick_links item="link"}
{$link.descr}
{/foreach}


```

above code section, is out of {hook name="index:bottom"} declaration

```php
{hook name="index:bottom"}

{$lang.copyright} © {if $smarty.const.TIME|date_format:"%Y" != $settings.Company.company_start_year}{$settings.Company.company_start_year}-{/if}{$smarty.const.TIME|date_format:"%Y"} {$settings.Company.company_name}. {$lang.powered_by} {$lang.copyright_shopping_cart}


{/hook}
```


So now I guess to remove that search box and quick links, I have to delete that code from basic bottom.tpl file. But if i do so then I am going to edit cs default files and that will cause upgrade issue.

So can you please suggest how to remove any code from default themes that are not declared under template hooks.

Sorry if my question is confusing.

The hooks kind of changed so now you also have to edit:



skins/your-skin/customer/bottom.tpl



Just remove the quick links part.



It’s unfortunate that this has changed, but oh well.



Brandon

I have reported this to the developers some time ago. You might want to add your comments so that they understand the current setup lacks the ability to fully customize the bottom.tpl in an easy manner:

[url]http://forum.cs-cart.com/vbugs.php?do=view&vbug_id=1412[/url]



Bob

@brandon - Thanks for reply, I did the same. @jobosales - posted my comment on bug post.



hmm so possibly there will be more such template structure issues in skin that we will face while customization.



One more problem I am facing is, I am trying to change display of grid layout on category page. So as per my understanding I need to modify categories.view hook with override control.



But I found grid layout html code is on grid_list.tpl file on below path

[active skin]\customer\blocks\list_templates\grid_list.tpl



I have not found any hook for this file. So do you have any idea how to edit this file using my_changes addon



Please view this link from KB - [url]CS-Cart Documentation — CS-Cart 4.15.x documentation to change breadcrumb reverse order they are suggesting to edit main template file instead of using any hook & my_changes addon.



So should I also just edit grid_list.tpl in my way or shoul find any way to do it using my_changes addon itself.

[quote name=‘vinic’]One more problem I am facing is, I am trying to change display of grid layout on category page. So as per my understanding I need to modify categories.view hook with override control.



But I found grid layout html code is on grid_list.tpl file on below path

[active skin]\customer\blocks\list_templates\grid_list.tpl



I have not found any hook for this file. So do you have any idea how to edit this file using my_changes addon

[/QUOTE]

There is a hook in /skins/YOURSKIN/customer/blocks/list_templates/grid_list.tpl around line 34:

[QUOTE]{hook name=“products:product_multicolumns_list”}[/QUOTE]



Depending on what you are trying to accomplish, this might work for you.



Bob

[quote name=‘jobosales’]There is a hook in /skins/YOURSKIN/customer/blocks/list_templates/grid_list.tpl around line 34:



Depending on what you are trying to accomplish, this might work for you.



Bob[/QUOTE]



Thanks bob, i just skipped that hook. It worked.

[quote name=‘brandonvd’]Luca



This is what I did:







[/QUOTE]



how do I make the blue box (where search box and sign in is at) height larger?

I tried to change size at style.css but there was no change.

www.buyingkorea.net is my site

Currently I have put calendar below search but it seems like hidden by the box (where cart is at).