Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / adding more images too the Header Right oxford dark template

adding more images too the Header Right oxford dark template

Views: 1,054

Results 1 to 4 of 4
26 Sep 2014, 12:55 PM
#1
swdynamic avatar

swdynamic

New Zenner

Join Date:
Jan 2008
Posts:
55
Plugin Contributions:
0

adding more images too the Header Right oxford dark template

I am trying to add three new image areas too the header right section or to the right of the logo image, and am really confused. I have tried various methods of which none seem to work. See below where I ended up...

I tried too just use the promo-big that you already had in place and added two additional (see below) then used chrome developers tools to add images and move too where I wanted them by editing it in html. Worked beautifully. Unfortunately when I actually change the files it either doesn't display anything (images) or it crashes the site. If I leave it as the text it was designed to be, it shows fine on the page. see below what I have currently changed if you don't mind.

css
#header-promo{color:#444443;font-size:1.65em;line-height:25px;text-align:center;float:left;position:relative;left:295px;top:45px;height:137px;width:475px;padding-top:35px}
.promo-big{color:#9a1213;font-size:150%;}
.promo-red{color:#9a1213;}
#header-promo2{color:#444443;font-size:1.65em;line-height:25px;text-align:center;float:left}
.promo-big{color:#9a1213;font-size:150%;}
.promo-red{color:#9a1213;}
#header-promo3{color:#444443;font-size:1.65em;line-height:25px;text-align:center;float:left}
.promo-big{color:#9a1213;font-size:150%;}
.promo-red{color:#9a1213;}

tpl_header.php

<div id="header-right"> <div id="header-promo"><?php echo HEADER_TITLE_PROMO1; ?></div> <div id="header-promo2"><?php echo HEADER_TITLE_PROMO2; ?></div> <div id="header-promo3"><?php echo HEADER_TITLE_PROMO3; ?></div>

header.php

define('HEADER_TITLE_PROMO1', '<span class="promo-big">FREE SHIPPING</span><br/>on all orders over <span class="promo-red">$50.00</span>');
define('HEADER_TITLE_PROMO2', '<span class="promo-big">Blah Blah</span><br/>blah blah <span class="promo-red">blah</span>');
define('HEADER_TITLE_PROMO3', '<span class="promo-big">Blah Blah</span><br/>blah blah <span class="promo-red">blah</span>');

probably a better way too do it but it seemed too work with the text...just not with images.

Both text and images when swapped out above using develop tools, are exactly what I want, but cant make work changing files.
Any assistance would be greatly appreciated.

26 Sep 2014, 2:29 PM
#2
picaflor_azul avatar

picaflor_azul

Totally Zenned

Join Date:
Jul 2009
Location:
picaflor-azul.com
Posts:
6,940
Plugin Contributions:
28

Re: adding more images too the Header Right oxford dark template

swdynamic:

I am trying to add three new image areas too the header right section or to the right of the logo image, and am really confused. I have tried various methods of which none seem to work. See below where I ended up...

I tried too just use the promo-big that you already had in place and added two additional (see below) then used chrome developers tools to add images and move too where I wanted them by editing it in html. Worked beautifully. Unfortunately when I actually change the files it either doesn't display anything (images) or it crashes the site. If I leave it as the text it was designed to be, it shows fine on the page. see below what I have currently changed if you don't mind.

css
#header-promo{color:#444443;font-size:1.65em;line-height:25px;text-align:center;float:left;position:relative;left:295px;top:45px;height:137px;width:475px;padding-top:35px}
.promo-big{color:#9a1213;font-size:150%;}
.promo-red{color:#9a1213;}
#header-promo2{color:#444443;font-size:1.65em;line-height:25px;text-align:center;float:left}
.promo-big{color:#9a1213;font-size:150%;}
.promo-red{color:#9a1213;}
#header-promo3{color:#444443;font-size:1.65em;line-height:25px;text-align:center;float:left}
.promo-big{color:#9a1213;font-size:150%;}
.promo-red{color:#9a1213;}

tpl_header.php

<div id="header-right"> <div id="header-promo"><?php echo HEADER_TITLE_PROMO1; ?></div> <div id="header-promo2"><?php echo HEADER_TITLE_PROMO2; ?></div> <div id="header-promo3"><?php echo HEADER_TITLE_PROMO3; ?></div>

header.php

define('HEADER_TITLE_PROMO1', '<span class="promo-big">FREE SHIPPING</span><br/>on all orders over <span class="promo-red">$50.00</span>');
define('HEADER_TITLE_PROMO2', '<span class="promo-big">Blah Blah</span><br/>blah blah <span class="promo-red">blah</span>');
define('HEADER_TITLE_PROMO3', '<span class="promo-big">Blah Blah</span><br/>blah blah <span class="promo-red">blah</span>');

probably a better way too do it but it seemed too work with the text...just not with images.

Both text and images when swapped out above using develop tools, are exactly what I want, but cant make work changing files.
Any assistance would be greatly appreciated.

If you post a link to your site I can take a look. Also, it is better to post questions about the templates to their specific template threads. It makes it easier for others to find the information when they need it.

Thanks,

Anne

26 Sep 2014, 6:32 PM
#3
swdynamic avatar

swdynamic

New Zenner

Join Date:
Jan 2008
Posts:
55
Plugin Contributions:
0

Re: adding more images too the Header Right oxford dark template

I am sorry, I thought I had posted in the oxford dark area. I will pay closer attention. site is

https://www.wreckerequip.com/wreckersource

you will see the (3) promo areas are there. I just cant seem to find a way to get them to show images instead of text...at least when actually editing files. They work when doing it with the dev tools mentioned earlier though.

Thank You

27 Sep 2014, 1:10 PM
#4
picaflor_azul avatar

picaflor_azul

Totally Zenned

Join Date:
Jul 2009
Location:
picaflor-azul.com
Posts:
6,940
Plugin Contributions:
28

Re: adding more images too the Header Right oxford dark template

swdynamic:

I am sorry, I thought I had posted in the oxford dark area. I will pay closer attention. site is

https://www.wreckerequip.com/wreckersource

you will see the (3) promo areas are there. I just cant seem to find a way to get them to show images instead of text...at least when actually editing files. They work when doing it with the dev tools mentioned earlier though.

Thank You

If the text is showing where you want it then you can just add in your image tags in place of the text:

<img src="your image path here" />

Thanks,

Anne