[SOLVED] Using a different style sheet for home page only?

RoldaHayes · September 16, 2010

Hi,

Is it possible to edit the header.tpl to automatically use a css style sheet only on the home page?

I want it to use home.css when showing the index page and global.css when on all other pages.

Cheers,

Darren

Cal · September 16, 2010

It may not be the ideal solution but you can try adding this script in index.tpl :

<script type="text/javascript">
{literal}
(function($) {
   $(function() {
       $('head').find("link[href$='global.css']").attr('href', function() {
          return $(this).attr('href').replace('global.css', 'home.css?v=1');
      });
   });    
})(jQuery);
{/literal}
</script>
{$HOOK_HOME}

Cal · September 16, 2010

err replace [removed] by script tags.

Anyway better solution would be to write a module which is hooked in the header and deliver the wanted css file.

MrBaseball34 · September 16, 2010

The problem lies in the fact that the CSS is loaded in this loop in header.tpl:

{if isset($css_files)}
   {foreach from=$css_files key=css_uri item=media}
   <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
   {/foreach}
{/if}

You can circumvent that by using Smarty to determine which page you are on and not load global.css but load home.css
No, javascript is not needed.

MrBaseball34 · September 16, 2010

err replace [removed] by script tags.

Next time, to post javascript code, use <script> and </script> in the code tag.

Cal · September 16, 2010

It would be nice yes but is there a way to know if you're on the index page from Smarty ?

Thanks for script tag i was just searching for that in the forum.

MrBaseball34 · September 16, 2010

try:

{$request_uri}

Should have your index page in it.

RoldaHayes · September 16, 2010

Maybe Im making this harder than it is...

I basically want the index page to be left column and a wide center column - All the rest 3 colums (with a smaller center column)

My test url is http://test.gkmedia.co.uk

you can see that the scrolling image dosn't go all the way across the page.

If I change it in the CSS, the cart dosnt appear on the right hand side of the other pages.

Header.tpl is

>
<html >
   <head>
       <title>{$meta_title|escape:'htmlall':'UTF-8'}</title></head>
{if isset($meta_description) AND $meta_description}
       <meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
       <meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
       <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
       <meta name="generator" content="PrestaShop" />
       <meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />
       <link rel="icon" type="image/vnd.microsoft.icon" href="{$img_ps_dir}favicon.ico" />
       <link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico" />
{if isset($css_files)}
   {foreach from=$css_files key=css_uri item=media}
   <link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
   {/foreach}
{/if}
       [removed][removed]
       [removed]
           var baseDir = '{$content_dir}';
           var static_token = '{$static_token}';
           var token = '{$token}';
           var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
           var roundMode = {$roundMode};
       [removed]
       [removed][removed]
       [removed][removed]
       [removed][removed]
{if isset($js_files)}
   {foreach from=$js_files item=js_uri}
   [removed][removed]
   {/foreach}
{/if}
       {$HOOK_HEADER}
   </head>

   <body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
   {if !$content_only}
</pre>
<ul>{l s='This shop requires JavaScript to run correctly. Please activate JavaScript in your browser.'}</ul>
<br><br><br><div></div>
<br><div>    



           <!-- Header -->






                   {$HOOK_TOP}

<!-- headerwrapper -->





{l s='Home'}
    {l s='Specials'}
{l s='New Products'}
{l s='Top Sellers'}
{l s='Contact'}
{l s='Sitemap'}
[removed]writeBookmarkLink('{$come_from}', '{$shop_name|addslashes|addslashes}', '{l s='Bookmark'}');[removed]

<!-- menulinks-->

<!-- topmenu -->




<!-- Block user information module HEADER -->



       {l s='Welcome'},
       {if $logged}
{$customerName}({l s='Log out'})
       {else}
{l s='Log in'}
       {/if}



{l s='Cart:'}
{$cart_qties}
{l s='product'}
{l s='products'}
           {if $cart_qties > 0}

                   {if $priceDisplay == 1}
                       {convertPrice price=$cart->getOrderTotal(false, 4)}
                   {else}
                       {convertPrice price=$cart->getOrderTotal(true, 4)}
                   {/if}

           {/if}
{l s='(empty)'}

{l s='Your Account'}


<!-- /Block user information module HEADER -->

<!-- submenu -->        


  {if $page_name == 'index2'}




  {else}


               <!-- Left -->

                   {$HOOK_LEFT_COLUMN}


               <!-- Center -->

   {/if}

   {/if}

<!-- vincenthsy 20-04-2010 --><

razaro · September 16, 2010

Try this code and change width if you need it

body#index #center_column {
width:750px;
}

You can add this to beginning of global.css after body{..}

RoldaHayes · September 16, 2010

Fantastic! I've been trying all day to solve this! Cheers!

llmills · June 4, 2011

I am so very thankful that I found this thread! It worked like a charm. I just wanted to change the column widths on the index page!

do-d · March 13, 2013

razaro you change my life with this

[SOLVED] Using a different style sheet for home page only?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in