Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Logo Banner and more

Logo Banner and more

Locked

Views: 2,864

Results 1 to 15 of 15
This thread is locked. New replies are disabled.
6 Aug 2008, 5:44 AM
#1
createafly avatar

createafly

New Zenner

Join Date:
Mar 2007
Posts:
15
Plugin Contributions:
0

Logo Banner and more

Hi everyone. I am havng some issues and to be honest, after spending the last 4 days straight looking for the answers I thought I would come to the gurus of the forum.
I haven't used zen in a long time and I have forgotten how to do a few things.
I want to add my banner (logo) acrossed the top of the page but I can't seem to do this correctly. I have a broken link box on the far left that I can't take out.

Also the catogory headers are showing up in a horizantle row when I want to place them next to each other. I have no idea where to look for to fix that.

I just stitched to silverfish. my url is http://thewindeffect.com
Thank you so much for your help!

7 Aug 2008, 4:10 AM
#2
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,781
Plugin Contributions:
11

Re: Logo Banner and more

For your categories tabs...

On or around line 334 of your stylesheet.css, you need to remove the > display: block;It totally defeats the display inline of the li call.

21 Aug 2008, 4:20 PM
#3
createafly avatar

createafly

New Zenner

Join Date:
Mar 2007
Posts:
15
Plugin Contributions:
0

Re: Logo Banner and more

Hi guys,
I am still not having any luck. I took off the categories (from the top) I figured I will worry about one thing at a time.
My biggest concern right now is the banner (logo). I really want the logo to be a link to the home page but I can't seem to set that up. I also can't get it to stop repeating no matter what I do!
I want the top to say "The Wind Effect" once and be a hyperlink to our home page.
I don't think it sounds like a lot to ask of this, but for some reason this has me :frusty:

Thank you again!

21 Aug 2008, 4:29 PM
#4
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Logo Banner and more

Find this in your stylesheet:

/
header
/
#headerWrapper {display: block; background: #88a0c2; height:1%; /IE Hack/}
#headerBackground {width: 100%; height: 85px; align: center; background: url(../images/banner_wind_2.JPG) repeat-x #88a0c2;}
/
#logo {float: left; position: absolute; top: -45px; left: 20px;}*/
#logo {float: left;}
*

Get rid of the repeat in #headerBackground

Try adding display:none; to the #logo

21 Aug 2008, 4:35 PM
#5
clydejones avatar

clydejones

Deceased

Join Date:
Nov 2005
Location:
Colorado Springs, CO USA
Posts:
7,017
Plugin Contributions:
12

Re: Logo Banner and more

createafly:

Hi guys,
I am still not having any luck. I took off the categories (from the top) I figured I will worry about one thing at a time.
My biggest concern right now is the banner (logo). I really want the logo to be a link to the home page but I can't seem to set that up. I also can't get it to stop repeating no matter what I do!
I want the top to say "The Wind Effect" once and be a hyperlink to our home page.
I don't think it sounds like a lot to ask of this, but for some reason this has me :frusty:

Thank you again!

In your stylesheet.css (includes/templates/silverfish/css/stylesheet.css)

Find the following declaration and delete the highlighted portion:

#headerBackground {width: 100%; height: 85px; align: center; background: url(../images/banner_wind_2.JPG) repeat-x #88a0c2;}

21 Aug 2008, 4:48 PM
#6
createafly avatar

createafly

New Zenner

Join Date:
Mar 2007
Posts:
15
Plugin Contributions:
0

Re: Logo Banner and more

Well, I deleted the repeat-x and nothing happened. Then I added the display: none; and still nothing. :wacko:
Though I do have a black bar accross the top of my page that I can't get rid of. I don't even care about the black bar right now if I can get the logo to work.

Any other suggestions? I will try anything!

22 Aug 2008, 3:51 PM
#7
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,781
Plugin Contributions:
11

Re: Logo Banner and more

You've got some real "interesting" stuff there. Curious as to why you've removed the button and print css sheets.:dontgetit

Anyway...

Your headerBackground call around line 248 in the stylesheet is trying to do four things at once. The color (#88A0C2) is already there and you don't need any scroll, so let's take the one line and turn it into two that do the trick.

Replace> background:#88A0C2 url(../images/banner_wind_2.JPG) repeat scroll 0 0;

height:85px;
width:100%;with> background-image: url(../images/banner_wind_2.JPG);
background-repeat: no-repeat;
height:85px;
width:100%;
That should do the trick. Now if I could figure out where the html.css is coming from...:blink:

22 Aug 2008, 4:01 PM
#8
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,781
Plugin Contributions:
11

Re: Logo Banner and more

Since you said "and more".....

You seem to be the victim of Word or the built-in html editor when making your main page text. Word and other "package editors" (FrontPage is the worst) will leave a trail of span styles and other junk in the source. Try opening a Word document, type in "Hello!" and save it as a webpage. Then look at the source of that file.:shocking:

You also have some items in the source of the main content that look like the trail left when trying to decide the color and size of text using the built-in editor.

Your current main content source looks like> <font face="georgia,times new roman,times,serif" color="#000066" size="4"><font color="#ff0000" size="5"><font face="Courier New" color="#000066" size="2"><font style="BACKGROUND-COLOR: rgb(255,255,255)" face="times new roman,times,serif" color="#000066" size="4"><strong><b><font color="#ff0000" size="5"><font style="FONT-FAMILY: arial,helvetica,sans-serif; BACKGROUND-COLOR: rgb(255,255,255)" face="times new roman,times,serif" color="#ff0000" size="3"><strong><b><font color="#ff00ff"><blockquote dir="ltr" style="MARGIN-RIGHT: 0px"><blockquote dir="ltr" style="MARGIN-RIGHT: 0px"><p style="DIRECTION: ltr; FONT-FAMILY: arial,helvetica,sans-serif" align="left"><span style="COLOR: rgb(0,204,255)"><span style="COLOR: rgb(102,153,255)"><font color="#ff0000" size="6"><font color="#000000">Welcome to</font> <font size="7">The Wind Effect</font></font></span></span></p></blockquote></blockquote><p style="DIRECTION: ltr; FONT-FAMILY: arial,helvetica,sans-serif" align="left"><span style="COLOR: rgb(0,204,255)"><span style="COLOR: rgb(102,153,255)"><font color="#0000ff">We are currently updating our site but you can still browse and purchase everything we have to offer during this time.</font> </span></span></p><p style="DIRECTION: ltr; FONT-FAMILY: arial,helvetica,sans-serif" align="left"><span style="COLOR: rgb(0,204,255)"><span style="COLOR: rgb(102,153,255)"></span></span></p><p style="DIRECTION: ltr; FONT-FAMILY: arial,helvetica,sans-serif" align="left"><span style="COLOR: rgb(0,204,255)"><span style="COLOR: rgb(102,153,255)">We use a PayPal shopping cart which accepts most major credit cards or your bank debit card. * You do not have to open a PayPal account to go through our checkout. * When you confirm your order it will give you a choice of payment methods. </span></span><br /></p><font style="BACKGROUND-COLOR: rgb(255,255,255)" color="#ff0000" size="3"><strong></strong></font></font></b></strong></font><p style="DIRECTION: ltr" align="left"><font face="Times New Roman"><font color="#6699ff"><font size="4"><strong><font style="COLOR: rgb(51,51,51); FONT-FAMILY: arial,helvetica,sans-serif" size="3">We are dedicated to our customers' needs and welcome your questions and comments before, or after the sale. Please refer to our contact us page .</font><font size="3"><br style="FONT-FAMILY: arial,helvetica,sans-serif" /></font><br /></strong></font><font size="4"><strong><span style="COLOR: rgb(255,0,0)"><br /></span></strong></font></font></font></p><p align="justify"><strong><font face="Courier New" color="#000066" size="4"><font size="2"> </font></font> </strong></p><p><strong><font color="#000066"> </font><font face="Times New Roman" color="#000066" size="4"> </font></strong></p></font></b></strong></font></font><font face="Courier New" color="#000066" size="2"><strong> </strong></font><font color="#000066"> <font face="courier new,courier,monospace" size="2"> </font></font><font face="Courier New" color="#000066" size="4"><font size="2"><strong></strong></font></font><br /></font></font>and could be done with > <h2>Welcome to The Wind Effect</h2><p>We are currently updating our site but you can still browse and purchase everything we have to offer during this time.</p><p>We use a PayPal shopping cart which accepts most major credit cards or your bank debit card. * You do not have to open a PayPal account to go through our checkout. * When you confirm your order it will give you a choice of payment methods.</p><p>We are dedicated to our customers' needs and welcome your questions and comments before, or after the sale. Please refer to our contact us page.</p>You would need to add some color and size but, that could be done by using something like <p id="mainPurpleText"> and setting size and color in the stylesheet.

25 Aug 2008, 10:45 PM
#9
createafly avatar

createafly

New Zenner

Join Date:
Mar 2007
Posts:
15
Plugin Contributions:
0

Re: Logo Banner and more

WOW! I am shocked! I basically downloaded the templete and that is what was there. I haven't changed the front page since the change. I have always used the Define Page in my admin (with html editor.) I have no clue why it is like that.
I really thought I was starting to understand this stuff.
Anyway, I changed the lines for the header and nothing happened. I uninstalled and reinstalled the template and made a new banner. It seems to be ok for the most part.
I still would like to have the header so it directs to our home page (there is a broken link in IE but not FF) but can't seem to do it.

I fixed the black bar on the reinstall as well.

BTW, I would have no idea where to begin to remove any buttons and print css sheet.
Could it be from the template?

26 Aug 2008, 2:28 AM
#10
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,781
Plugin Contributions:
11

Re: Logo Banner and more

I have always used the Define Page in my admin (with html editor.) I have no clue why it is like that.

This is what I was pointing out. Most folks don't know to look at what kind of monster they have created when using the built in html editor.

If you use the define pages editor, take the time to click on the <> that you see on the right of the bottom editing bar. That will show you the actual code you have created.

If you're not careful, each time you change something about text some of the previous formatting will remain.

It's really just another opportunity to excel:yes:

The two stylesheets should be in your custom css directory. If they are not there, copy them over from includes/templates/template_default/css.

28 Aug 2008, 3:51 PM
#11
createafly avatar

createafly

New Zenner

Join Date:
Mar 2007
Posts:
15
Plugin Contributions:
0

Re: Logo Banner and more

Buh. This is why I like hardware or try to stick to the programs I know. I have tried to clean it up a bit but I know it can be better. I will keep working on it though.
Thank you so much for letting me know. I have a lot to learn.

Hey, do you happen to know how to make the header with a link so it directs you back to the home page? I have found a few threads and tried everything I can find but to no avail.
I think that if I get it into the broken link (seen in IE) I should be fine but I can't find it. FF doesn't show the broken link in the upper left hand corner.

Thanks again for everything!

28 Aug 2008, 6:06 PM
#12
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,781
Plugin Contributions:
11

Re: Logo Banner and more

Let me show you a little more about why you are creating a LOT of work for yourself and the browser.

  1. Go to define pages in the admin and edit the main page.
  2. Let's edit the content by first clicking on the <> at the right of the second editing line. That will show you the html code for your current main page.
  3. Delete all you see there and add the text quoted below.> <h2>We are currently updating our site but you can still purchase everything we have to offer during this time.</h2><hr />
<p>First we would like to give you a quick overview of our site.</p> <p>We are currently obtaining new watches everyday. We are trying to upload them as fast as possible but we are not as fast as the manufacturer. If you like a style of watch but don't see the team you support then <a href="../index.php?main_page=contact_us" target="_blank"><em>Contact Us!</em></a> We have watches for every team in every league. We can also accommodate group orders for one or multiple teams!</p> <p>We have tried and tested everything on the site from Boomerangs to Watches. We have even taken items off if we were not satisfied. Rest assured that you are getting a quality product. If you have any questions or suggestions of a product you think we will like, let us know.</p> <p>Be sure to check out our <a href="../index.php?main_page=specials" target="_blank"><em>Specials</em></a> link regularly! We have looked all over to make sure we have the lowest prices. We will pass along any savings we get to you.</p> <p>If you see something you like, <a href="../index.php?main_page=login" target="_blank"><em>Create an Account</em></a>. You can even receive an email update when new items come in stock or go on sale. We will never ask for credit card information unless you are purchasing something and we use a secure site to proccess it. We will also NEVER sell your email address to a 3rd party. You can see our <a href="../index.php?main_page=privacy"><em>Privacy Notice</em></a> for more details.</p>Note that I have replaced ever <http://www.thewindeffect.com> with .. This will give an "on-site" link and save you worries when someone is logged in secure. It also speeds up the process for the browser to find the file.

Now we have four things that we are working with to make this look like you want.1. We have the heading that you are updating.
2. the paragraphs in the text
3. the links to other spots on the site
4. the emphasis (em) you're using on the links.All these can be better controlled by the stylesheet than trying to use the editor.:yes: The good news is that most of the styling is already a default in the system.

Next, we open the stylesheet and add the following to the end of the stylesheet.> #indexDefaultMainContent h2 {

color: #990000;
}

#indexDefaultMainContent p {
text-align: justify;
/remove comments for the bottom line to work/
/font-size: 1.1em;/
/color: #000000;/
}This will ensure that the "we are currently" text is the color you want. It will automatically inherit all the other features of H2.

The p call is more a pet peeve of mine than anything. I would not be able to read a book or newspaper if all the text was centered. So, I make all the p calls justified. You can remove it if you like.

Lastly, the commented lines in the p call are there in case you are not happy with the size and color of the text on the page. It would be better to adjust both calls around line 240 of the stylesheet so that all p's in the site will be the same but, you can do it either way. the em versus px for font size allows the font to grow or shrink depending on the user's screen resolution. Like making a table 80% width, the font will grow or shrink to fit the situation. Take a look at your current site in 800 x 600!

In the future, we need to address Image Handler II and Fual Slimbox.

28 Aug 2008, 6:07 PM
#13
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,781
Plugin Contributions:
11

Re: Logo Banner and more

Yes, I'm stuck at the kitchen table with little to do while the workers redo the computer room.
:P

2 Sep 2008, 8:37 PM
#14
createafly avatar

createafly

New Zenner

Join Date:
Mar 2007
Posts:
15
Plugin Contributions:
0

Re: Logo Banner and more

So, I have officially come to the conclusion that if I want this HTML to look neat I have to ask someone else to do it. I have tried a bunch of things and I keep seeming to screw up the site.
I have no idea what you are talking about in some instances though I would like to.
You are right - I would like to have it look good in 800 x 600 as well (though I really hope that there are not many people on that res) but again, my changes caused issues.

I guess at this point I need to get the banner (header, logo, thing) so that the header directs people back to the main page and the broken link box in IE is gone. I wonder if it will show up in Chrome? Hope to find out tomorrow. Anyway, once that is done and then ask someone really nice for their help. No, ask them to take care of it. I am going to take a class in it soon but not soon enough.

I appreciate all the time you have put into this and I wish I understood more so I could make the changes you have suggested. Are there any sites you can suggest that will teach me some of this stuff? My HTML book doesn't do into any of this. (Maybe I need the one for dummies :blush: ) I am willing to learn but I need step by step when it comes to this.

2 Sep 2008, 9:42 PM
#15
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,781
Plugin Contributions:
11

Re: Logo Banner and more

You already have a link back to home that says HOME. The reason you are getting the bad link in IE is that it will do its darnedest to present something that doesn't exist.

Your code has> <tbody>

<tr> <td id="headerLogo" display="none"> <a href="http://thewindeffect.com/"> <img id="logo" alt="" src="includes/templates/template_default/images/banner_wind_2"/> </a> </td> <td id="headerBackground"> </td>The image reference (in red) does not exist. Rather than trying to get an image in the right spot and correctly referenced, let's just enter something in the css.

Towards the bottom of the css, add > #headerLogo {

display: none;
}
That will wipe out the whole headerLogo td with the bad link.