[Help Needed] - Changing Store Banner (LogoWrapper)

[Mort-Incarnate]

Hey guys,

I'm trying to change the logowrapper for a store I work at. I'd rather approach this the right way because we've gone from using a simple image to adding a few buttons to link up some of our social media outlets. Here is a quick picture of our much more minimalistic and newer wrapper,


As you can see it links to facebook and twitter. I also have the background image itself set up to link users back to the home page.

I am not sure how to go about adding this to the current CSS configuration however. I know already that it will require a little expansion from the default code in order to get this to work. What I want is a bit of advice or a nudge in the right direction to make this new set up work.

I will admit, I am a bit of a noob at CSS, especially when it comes to how ZenCart is configured to use it. I grasp the general concept and that is all.

Please check out the current webpage here; http://www.ontargetairsoft.com/
As you can probably see it needs a lot of work and will probably lead to many interesting conversations/topics on the forums.

Thanks so much in advance.

- Where are my manners,

I am Frank L. and I handle the media generation and graphic design for On Target Airsoft. It's a store that sells toy-firearms for Player-v-Player sport. Very similar to paintball, without the jerseys or the inaccurate spray and pray philosophy. . Most people in the hobby/sport wear real or imitation military gear and pull off their CoD expressions. The store is located in Marietta, GA.

My background with code is primarily in a hobby involving robots and arduino hardware. I am savvy enough to pick up on logic and patterns and I am looking forward to using ZenCart to expand my knowledge into Web Development and ECommerce systems. It is very likely I will be using zen cart on other projects as well.

-F

[rbarbour]

is the image shown (1) image [a map] or several images [background image, logo image & social media images]?

[kobra]

Just rename the image to logo_manf.png (I assume that your new image is a png)

Then upload it to - replacing the one that exists

/includes/templates/custom/images/logo_manf.png

[Mort-Incarnate]

is the image shown (1) image [a map] or several images [background image, logo image & social media images]?

There are actually multiple images in this make up.

Here is a list:

[Layer 3] - Twitter Button (two states, exact copies)
[Layer 2] - Facebook Button (two states, exact copies)
[Layer 1] - Background. Also a button with two states.

Here is the code:

@charset "utf-8";

body {
	background-color: #fff;
	font-size: 62.5%;
	margin: 0;
	padding: 0;
}
body * {
	font-size: 100%;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
p {
	margin-bottom: 1.1em;
	margin-top: 0;
}
#main p.lastNode {
	margin-bottom: 0;
}
a:link img, a:visited img {
	border: none;
}
div.clearFloat {
	clear: both;
	font-size: 0;
	height: 0;
	line-height: 0px;
}
li.clearFloat {
	clear: both;
}
ul.symbolList {
	display: inline;
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.AbsWrap {
	position: relative;
	width: 100%;
}
.rowWrap {
	width: 100%;
}
#main {
	margin: 0 auto 0 0;
	width: 744px;
}
#header_r2_c2css_r1_c1 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 12px;
	margin-bottom: 0;
	width: 744px;
}
#header_r2_c2css_r2_c1 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 203px;
	margin-bottom: 0;
	width: 681px;
}
#colwrap1 {
	float: left;
	margin-left: 0px;
	margin-top: 0px;
	width: 63px;
}
#colwrap3 {
	float: left;
	margin-left: 0px;
	margin-top: 0px;
	width: 49px;
}
#header_r2_c2css_r2_c2 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 49px;
	margin-bottom: 0;
	width: 49px;
}
#header_r2_c2css_r3_c2 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 10px;
	margin-bottom: 0;
	width: 49px;
}
#header_r2_c2css_r2_c3 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 59px;
	margin-bottom: 0;
	width: 14px;
}
#colwrap4 {
	float: left;
	margin-left: 0px;
	margin-top: 0px;
	width: 51px;
}
#header_r2_c2css_r4_c2 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 50px;
	margin-bottom: 0;
	width: 51px;
}
#header_r2_c2css_r5_c2 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 94px;
	margin-bottom: 0;
	width: 51px;
}
#header_r2_c2css_r4_c4 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 144px;
	margin-bottom: 0;
	width: 12px;
}

[rbarbour]

without see actual code

easiest way would be:

in /includes/templates/classic/common/tpl_header.php

find:

<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>

change to:

<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 id=twitter><?php echo zen_image(DIR_WS_TEMPLATE.'images/twitter.png')?></div>
<div id=facebook><?php echo zen_image(DIR_WS_TEMPLATE.'images/facebook.png')?></div></div>

rename twitter.png & facebook.png to YOUR IMAGE NAMES

upload images to /includes/templates/YOUR_TEMPLATE/images folder

CSS

add to div#logo
position:relative;
z-index:98;


add
div#twitter {
position:absolute;
top:XXpx;
right:XXpx;
z-index:99;
}

add
div#facebook {
position:absolute;
top:XXpx;
right:XXpx;
z-index:99;
}

that should give you an idea

[Mort-Incarnate]

without see actual code

easiest way would be:

in /includes/templates/classic/common/tpl_header.php

find:

<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>

change to:

<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 id=twitter><?php echo zen_image(DIR_WS_TEMPLATE.'images/twitter.png')?></div>
<div id=facebook><?php echo zen_image(DIR_WS_TEMPLATE.'images/facebook.png')?></div></div>

rename twitter.png & facebook.png to YOUR IMAGE NAMES

upload images to /includes/templates/YOUR_TEMPLATE/images folder

CSS

add to div#logo
position:relative;
z-index:98;


add
div#twitter {
position:absolute;
top:XXpx;
right:XXpx;
z-index:99;
}

add
div#facebook {
position:absolute;
top:XXpx;
right:XXpx;
z-index:99;
}

that should give you an idea

Thanks man. That helped a lot!

[rbarbour]

glad I could help!

Looks good btw

[Mort-Incarnate]

glad I could help!

Looks good btw

Yea I am actually going to need to make a few changes on the banner lol, to get rid of some of the pixelation around the twitter logo and the optical illusion in the text. At least now I know where to find my place in the script.

Thanks again