Forums / Templates, Stylesheets, Page Layout / Change Logo for Index Page Using CSS?

Change Logo for Index Page Using CSS?

Locked

Views: 4,472

Results 1 to 15 of 15
This thread is locked. New replies are disabled.
20 Apr 2008, 6:13 PM
#1
mountain_mama avatar

mountain_mama

New Zenner

Join Date:
Nov 2006
Location:
8,600 ft in the Rocky Montains of Colorado
Posts:
23
Plugin Contributions:
0

Change Logo for Index Page Using CSS?

Hello,

I would like to have a different logo (larger) for my home/index page than for the rest of the site. I have created a index_home.css to change other aspects, but am wondering if it is possible to specify a different logo file for the home page using css (logo for the site and logo2 for the homepage). Or do I have to change the code in the tpl_header.php to include a conditional statement etc? I am new to zen cart, have some css knowledge and only a tiny bit of php, so please be gentle with me.

Thank you!

20 Apr 2008, 7:12 PM
#2
mountain_mama avatar

mountain_mama

New Zenner

Join Date:
Nov 2006
Location:
8,600 ft in the Rocky Montains of Colorado
Posts:
23
Plugin Contributions:
0

Re: Change Logo for Index Page Using CSS?

Yep, I needed a conditional statement in my tpl_header.php. It works!

20 Apr 2008, 9:05 PM
#3
dbran30 avatar

dbran30

New Zenner

Join Date:
Nov 2007
Location:
Texas
Posts:
6
Plugin Contributions:
0

Re: Change Logo for Index Page Using CSS?

Could you please post the conditional statement and where you put it in your tpl_header.php file? I've been trying to do the same thing.

Thanks!!

21 Apr 2008, 4:07 PM
#4
mountain_mama avatar

mountain_mama

New Zenner

Join Date:
Nov 2006
Location:
8,600 ft in the Rocky Montains of Colorado
Posts:
23
Plugin Contributions:
0

Re: Change Logo for Index Page Using CSS?

As this solution might be useful to others, I thought I’d post it.

Disclaimer: Please not that I am not a programmer, rather I flail around until something I do works. That said, this is what I did and it worked for me. Please back up before you try this!

  1. I created a new css file entitled index_home.css in my css folder of my template.

  2. I created a new logo entitled logo2.gif and place it in my template/images.

  3. I copied and pasted the info for logo wrapper and logo from my stylesheet. This looks something like:

#logoWrapper {
margin: 0em 0em 0em 0em;
padding: 1em 1em 0em 1em;
background-color:;
}

#logo {
float: left;
}

  1. I renamed these to logo2Wrapper and logo2

  2. I edited the header.php file in includes/languages/English/my template to add the above:

define('HEADER_ALT2_TEXT', 'My Store Name');
define('HEADER_SALES2_TEXT', '');
define('HEADER_LOGO2_WIDTH', '192px');
define('HEADER_LOGO2_HEIGHT', '64px');
define('HEADER_LOGO2_IMAGE', 'logo2.gif');

  1. I edited the tpl_header.php file in my template/common to include a reference to the new logo.

On line 70, I removed:

<div id="logoWrapper"> <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>

And replaced it with:

<?php if ($this_is_home_page) { ?>
<div id="logoWrapper">
  <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO2_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO2_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
<?php } else { ?>
<div id="logoWrapper2">
  <div id="logo2"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
<?php } ?>

Because I am a computer idiot, I included all of my steps. Please forgive if some of this was already obvious to you.

Good Luck!

21 Apr 2008, 4:35 PM
#5
kuroi avatar

kuroi

Totally Zenned

Join Date:
Apr 2006
Location:
London, UK
Posts:
10,475
Plugin Contributions:
11

Re: Change Logo for Index Page Using CSS?

This is the right direction, but over-complicates it a little. Unless you need different text or the image is a different size, there is no need to duplicate the information in the header.php file and you could simply create the new file and use the following code snippet instead (i.e. no CSS additions)

<?php $logo_image = $this_is_home_page ? HEADER_LOGO2_IMAGE : HEADER_LOGO_IMAGE; ?>
<div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir($logo_image, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . $logo_image, HEADER_ALT_TEXT) . '</a>'; ?></div>

Kuroi Web Design and Development | Twitter

(Questions answered in the forum only - so that any forum member can benefit - not by personal message)

21 Apr 2008, 4:47 PM
#6
dbran30 avatar

dbran30

New Zenner

Join Date:
Nov 2007
Location:
Texas
Posts:
6
Plugin Contributions:
0

Re: Change Logo for Index Page Using CSS?

Thank you Mountain Mama for the explanation and Kuroi for the simplification. Elegant and it works great! :clap:

David

21 Apr 2008, 5:44 PM
#7
mountain_mama avatar

mountain_mama

New Zenner

Join Date:
Nov 2006
Location:
8,600 ft in the Rocky Montains of Colorado
Posts:
23
Plugin Contributions:
0

Re: Change Logo for Index Page Using CSS?

Hello Koroi,

Thank you for the simplification. My header image is larger than the images on the other pages. Could I still use your solution?

21 Apr 2008, 6:52 PM
#8
kuroi avatar

kuroi

Totally Zenned

Join Date:
Apr 2006
Location:
London, UK
Posts:
10,475
Plugin Contributions:
11

Re: Change Logo for Index Page Using CSS?

Since you are changing several items, it would probably be best to pop back to the english/header.php file and do the changes there. I'd recommend replacing the existing definitions with these ...

if ($this_is_home_page) {
  define('HEADER_ALT_TEXT', 'My Store Name');
  define('HEADER_SALES_TEXT', '');
  define('HEADER_LOGO_WIDTH', '192px');
  define('HEADER_LOGO_HEIGHT', '64px');
  define('HEADER_LOGO_IMAGE', 'logo2.gif');    
} else {
  define('HEADER_ALT_TEXT', 'My Store Name');
  define('HEADER_SALES_TEXT', '');
  define('HEADER_LOGO_WIDTH', '81px');
  define('HEADER_LOGO_HEIGHT', '32px');
  define('HEADER_LOGO_IMAGE', 'logo.gif');
}
```... tailored to your specific requirements of course.

What this does is leave the constants that are defined the same, so you wouldn't normally need to make any changes to your tpl_header.php file, and would change your stylesheet only if your logo wrapper needs to be taller on the home page.

However, somewhere you have lost the height and width parameters, so you also need to add them back in either by reverting to the original file or by using the following for the logo div
```php
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT, HEADER_LOGO_WIDTH, HEADER_LOGO_HEIGHT) . '</a>'; ?></div>

Kuroi Web Design and Development | Twitter

(Questions answered in the forum only - so that any forum member can benefit - not by personal message)

21 Apr 2008, 9:35 PM
#9
mountain_mama avatar

mountain_mama

New Zenner

Join Date:
Nov 2006
Location:
8,600 ft in the Rocky Montains of Colorado
Posts:
23
Plugin Contributions:
0

Re: Change Logo for Index Page Using CSS?

Thank you!

9 Dec 2008, 4:49 AM
#10
sawhorse avatar

sawhorse

Zen Follower

Join Date:
Oct 2007
Location:
Kentucky - USA
Posts:
425
Plugin Contributions:
0

Re: Change Logo for Index Page Using CSS?

The above was a great solution for the home page using > $this_is_home_page
However, I just want to change the LogoWrapper for only the define page about_us. I could not find a simular command for about_us page. My text and image size is the same for all headers.

I have created a second header image headerbg2.jpg in includes/templates/MY TEMPLATE/images/

My assumption is that I will need to change my tpl_header.php file or as indicated > kuroi:

...Unless you need different text or the image is a different size, there is no need to duplicate the information in the header.php file and you could simply create the new file and use the following code snippet instead (i.e. no CSS additions)

<?php $logo_image = $this_is_home_page ? HEADER_LOGO2_IMAGE : HEADER_LOGO_IMAGE; ?> <div id="logoWrapper"> <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir($logo_image, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . $logo_image, HEADER_ALT_TEXT) . '</a>'; ?></div> ``` First, what would this new file be called? Second, where would you put it? Third, what modifications would be necessary so this would work for the about_us define page? Fourth, is there another solution for this problem (i.e tpl_header.php)?

Thanks,
Sawhorse

ZC 1.3.8a; Addons: Admin Profiles, Ty Package Tracker; Swap Images via MouseOver or Click, Smart Backgrounds; Printable Price List; CSS buttons; Contact Us - Add Subject; Template: Self Constructed; Site: http://sawhorsejewelry.com

9 Dec 2008, 8:30 AM
#11
kuroi avatar

kuroi

Totally Zenned

Join Date:
Apr 2006
Location:
London, UK
Posts:
10,475
Plugin Contributions:
11

Re: Change Logo for Index Page Using CSS?

The header background image is usually controlled by your stylesheet, not the template or labguage files.

To use a different one on the about_us page only, you could create a very small about_us.css file that over-rides the background_image for the logoWrapper. Put it in the same directory as your stylesheet.css and Zen Cart will automatically pick it up and use it on that page only.

Kuroi Web Design and Development | Twitter

(Questions answered in the forum only - so that any forum member can benefit - not by personal message)

9 Dec 2008, 7:15 PM
#12
sawhorse avatar

sawhorse

Zen Follower

Join Date:
Oct 2007
Location:
Kentucky - USA
Posts:
425
Plugin Contributions:
0

Re: Change Logo for Index Page Using CSS?

kuroi:

The header background image is usually controlled by your stylesheet, not the template or labguage files.

To use a different one on the about_us page only, you could create a very small about_us.css file that over-rides the background_image for the logoWrapper. Put it in the same directory as your stylesheet.css and Zen Cart will automatically pick it up and use it on that page only.

Kuroi, it worked like a champ!! How in the world did ZC know that the css was just for the about_us page. Did it key in on the fact that the css file was called about_us.css? If the answer is yes, (which I assume it will be), can I assume that any defined page can have a separate css file and all you need to do is use the defined page name to implement a new stylesheet for that page (i.e. links.css for the links defined page or privacy.css for the privacy notice defined page, etc.)?

Again Thank you. (I bet a lot of others will benefit from this info)

Sawhorse

ZC 1.3.8a; Addons: Admin Profiles, Ty Package Tracker; Swap Images via MouseOver or Click, Smart Backgrounds; Printable Price List; CSS buttons; Contact Us - Add Subject; Template: Self Constructed; Site: http://sawhorsejewelry.com

9 Dec 2008, 7:30 PM
#13
Kim avatar

Kim

Obaa-san

Join Date:
Jun 2003
Location:
West Coast, North America
Posts:
26,684
Plugin Contributions:
0

Re: Change Logo for Index Page Using CSS?

Zen uses some very sophisticated code to auto-magically find things. If you check your includes/templates/template_default/css/ for the CSS readme.txt - it gives the bases of per page CSS

Please do not PM for support issues: a private solution doesn't benefit the community.

Be careful with unsolicited advice via email or PM - Make sure the person you are talking to is a reliable source.

9 Dec 2008, 7:54 PM
#14
sawhorse avatar

sawhorse

Zen Follower

Join Date:
Oct 2007
Location:
Kentucky - USA
Posts:
425
Plugin Contributions:
0

Re: Change Logo for Index Page Using CSS?

Kim,
Found it - readme_css_system.html below is just part of the text so others can see the system. Very nice.

**Zen Cart Stylesheets **

Zen Cart(tm) stylesheets are located in this folder: /includes/templates/YOUR_TEMPLATE/css
What follows is a description of how one can use Zen Cart's built-in power to pull certain stylesheets for certain conditions.

The CSS files are sent to the browser in this order: (and alphabetically within each case of more than one match):

*style.css ** // are always loaded and at least ONE should contain site-wide properties.

language_stylesheet.css // changes to ALL pages, when that language is used

      **page_name.css**   // changes to one page (use **index_home.css** for "just the home page")

language_page_name.css // changes to one page, when that language is used

           **c_??.css**   // changes to all info pages in a category

  l**anguage_c_??.css**   // changes to all info pages in a category, when that language is used

           **m_??.css   **// changes to a manufacturer's listing page

  l**anguage_m_??.css**   // changes to a manufacturer's listing page, when that language is used

           **p_??.css   **// changes to a product's info page

  **language_p_??.css   **// changes to a product's info page, when that language is used

         **print*.css   **// printer-friendly global usage site-wide changes for printing-only          
again the above is just a portion of the text file.

Thanks,
Sawhorse

ZC 1.3.8a; Addons: Admin Profiles, Ty Package Tracker; Swap Images via MouseOver or Click, Smart Backgrounds; Printable Price List; CSS buttons; Contact Us - Add Subject; Template: Self Constructed; Site: http://sawhorsejewelry.com

12 Dec 2008, 2:47 AM
#15
sawhorse avatar

sawhorse

Zen Follower

Join Date:
Oct 2007
Location:
Kentucky - USA
Posts:
425
Plugin Contributions:
0

Re: Change Logo for Index Page Using CSS?

Kuroi, Kim & others,

 The about_us.css works great, however my template is a bit different. I used a psd file and sliced it up (used ImageReady) to make my homepage. The header image area really has two/three main images.  The largest image is indicated in the about_us.css but the other two are used in the tpl_main_page.php  (the main purpose is for the change of the log in/log out tab. That slice includes a bit of background found in the lower part of the total header. (sorry about the amount of detail).

 Anyway, can I make a new file like tpl_about_us_page.php to include the two new slices that help make up the the new header?  Will ZC correctly recognize this new file for only the about_us defined page?

 I hope I am making myself clear.

Sawhorse

ZC 1.3.8a; Addons: Admin Profiles, Ty Package Tracker; Swap Images via MouseOver or Click, Smart Backgrounds; Printable Price List; CSS buttons; Contact Us - Add Subject; Template: Self Constructed; Site: http://sawhorsejewelry.com