Zen Cart Logo
trapezoid-twopenny
Open navigation menu
Home Community Forum Plugins
Documentation
For Developers For Storeowners
Services Donate Get Started
Forums / Templates, Stylesheets, Page Layout / Adding a horizontal line below header

Adding a horizontal line below header

Locked
Results 1 to 20 of 28
This thread is locked. New replies are disabled.
29 Dec 2007, 22:30
#1
daneh avatar

daneh

Zen Follower

Join Date:
Dec 2007
Posts:
268
Plugin Contributions:
0

Adding a horizontal line below header

Been working on my cart for a few days now. A little confusing at first, but I am beginning to grasp the where's and how to make changes. I have searched and searched but haven't found an answer to this question. I even did a google to see how to add a HR to my CSS, but when I add what I believe is the right code, my left categories sidebox lengthens considerably. :oops:I am brand new to CSS, so I am sure I added the wrong code. I have since ditched the code I added.

My goal is to add a horizontal line below the EZ pages links. I think it would look better to have a little separation between the EZ pages and the main content.

Here is my current page: http://mistkits.com/cart

Can someone give me a push in the right direction?

I am also open to other suggestions.:hug:
30 Dec 2007, 08:52
#2
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Posts:
31,500
Plugin Contributions:
4

Re: Adding a horizontal line below header

Find this in your stylesheet:
#headerWrapper, #contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}

seperate out the header wrapper tag and add the red entries adjusting as you want with allowable line definiitions if you want other than solid
#headerWrapper {
        border-bottom: 1px solid #000000;
	margin: 0em;
	padding: 0em;
        }    

#contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	margin: 0em;
	padding: 0em;
	}
30 Dec 2007, 22:32
#3
daneh avatar

daneh

Zen Follower

Join Date:
Dec 2007
Posts:
268
Plugin Contributions:
0

Re: Adding a horizontal line below header

Worked like a charm...thanks. :clap:

Now I just need to work on spacing out a few things.
Now I am trying to figure how to add just a little space between the new line and the navigation links above. Then I would like to space out those links just a bit, they look a little crowded.

I have placed a clickable banner on the top of the page. I would like it to be below the home and login links where the header/tagline usually are. When I added the banner, it was automatically placed at the top of the page, which then moved those mentioned links down.

Any suggestions?:D
30 Dec 2007, 22:41
#4
barco57 avatar

barco57

Totally Zenned

Join Date:
Apr 2006
Posts:
2,841
Plugin Contributions:
0

Re: Adding a horizontal line below header

add line-height to the following statement like shown in red
.leftBoxContainer, .rightBoxContainer {
	margin-top: 1.5em;
	line-height: 1.5em;
}


and why are you using a clickable banner as your logo and tagline when there are divs for those and the logo would be clickable.
30 Dec 2007, 23:00
#5
daneh avatar

daneh

Zen Follower

Join Date:
Dec 2007
Posts:
268
Plugin Contributions:
0

Re: Adding a horizontal line below header

Thanks. Now I have more space below the line. Now to get those links separated with a little more space....

As far as the banner versus the header:
Well, to put it honestly, I had no clue how to do that. I did have an image I wanted to use, so made it the banner and clickable. I am still a little nervous about just adding code to pages that I really don't know what they do.

I originally was trying to make the header image (header_bg.jpg) a link, but didn't know how. I added my domain where a few posts suggested, but it didn't work. I think I needed to use the img src= code, but wasn't sure where or how.
A search didn't really shed any light, so I went with the banner.
30 Dec 2007, 23:13
#6
barco57 avatar

barco57

Totally Zenned

Join Date:
Apr 2006
Posts:
2,841
Plugin Contributions:
0

Re: Adding a horizontal line below header

The logo can be changed by placing the image file in your includes/templates/YOUR_TEMPLATE/images directory and then going to includes/languages/english and copy header.php to includes/languages/english/YOUR_TEMPLATE and than edit the new copy
// added defines for header alt and text
  define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce');
  define('HEADER_SALES_TEXT', 'TagLine Here');
  define('HEADER_LOGO_WIDTH', '192px');
  define('HEADER_LOGO_HEIGHT', '64px');
  define('HEADER_LOGO_IMAGE', 'logo.gif');


you can use any file name or extension (jpg,gif,png) just change logo.gif to your logo filename
31 Dec 2007, 03:01
#7
daneh avatar

daneh

Zen Follower

Join Date:
Dec 2007
Posts:
268
Plugin Contributions:
0

Re: Adding a horizontal line below header

OK, I figured out how to place that header_bg,jpg image where the header text goes. I had to reference it in my CSS. :oops:

I am still left with 2 questions.

1. The EZ page links: How do I add a little space between them? They look a little crowded, and have a TON of space to the left and right. There are only 3 so I need to give each a little space between the next.

2. My new header_bg,jpg header image. How do I make it a link. I assume I have to do some code like the <a href= and <IMG SRC= code, but where? Also, the tag (?) or is it the alt txt(?) that shows up when you hover over a picture? I need to edit that.

You guys are great for helping. Thanks a bunch.
:clap::clap:
31 Dec 2007, 03:08
#8
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Posts:
31,500
Plugin Contributions:
4

Re: Adding a horizontal line below header

Better option might be to seperate your current image making "Mistkits.com" a transparent gig named logo.gif and the remainder sized for your layout header_bg.gif. The logo is just placed into your template images folder and non edited code will will display it - then center it in the stylesheet. Then if you look at the classic stylesheet you can determine how header_bg is applied
31 Dec 2007, 03:13
#9
daneh avatar

daneh

Zen Follower

Join Date:
Dec 2007
Posts:
268
Plugin Contributions:
0

Re: Adding a horizontal line below header

Wow Cobra, that was fast!

Ok, now can you translate what you just wrote in English?:D

Meaning, I am not sure what you just told me, but I am thinking it may be just easier to just add a link on the top of the page to my websites homepage. That is basically all I am trying to do, is give them a way back. Currently, there is no way for them to get out of my shopping cart.

Please be patient, I am still fumbling my way through.:lamo:
31 Dec 2007, 03:13
#10
barco57 avatar

barco57

Totally Zenned

Join Date:
Apr 2006
Posts:
2,841
Plugin Contributions:
0

Re: Adding a horizontal line below header

If the image for the logo, which is called in the header.php file, is set up correctly there should be no reason to reference it in the stylesheet and it will also be clickable as the "home" link, other than to style it (i.e. center)
31 Dec 2007, 03:17
#11
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Posts:
31,500
Plugin Contributions:
4

Re: Adding a horizontal line below header

For your ez page spacing add this to your stylesheet and adjust as you want
#navCatTabsWrapper ul a:link {
        padding: 0em 0em 0em 10em;
        }
31 Dec 2007, 03:18
#12
daneh avatar

daneh

Zen Follower

Join Date:
Dec 2007
Posts:
268
Plugin Contributions:
0

Re: Adding a horizontal line below header

I tried the header.php. Couldn't get it to work. When I did this:
[SCR]#logoWrapper {
width:100%;
height:110px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-position:center;
text-align:center;
padding-top:5px;
}
[/SCR]
it worked. Don't ask me why, it just did. Probably not the best way, but I tried the header.php file
31 Dec 2007, 03:27
#13
daneh avatar

daneh

Zen Follower

Join Date:
Dec 2007
Posts:
268
Plugin Contributions:
0

Re: Adding a horizontal line below header

I don't see that particular section in my CSS. Is it ok to just put it there? I have this:
a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #FF0000;
}


Should I modify what I have, or just add what you sent?:blush:
31 Dec 2007, 03:27
#14
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Posts:
31,500
Plugin Contributions:
4

Re: Adding a horizontal line below header

I tried the header.php. Couldn't get it to work

barco:

the image for the logo, which is called in the header.php file
This does not say that header_bg is called there...read carefully

The stylesheet as you found is correct for header_bg
31 Dec 2007, 03:28
#15
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Posts:
31,500
Plugin Contributions:
4

Re: Adding a horizontal line below header

Read carefully:

KoBra:

For your ez page spacing add this to your stylesheet
31 Dec 2007, 03:33
#16
barco57 avatar

barco57

Totally Zenned

Join Date:
Apr 2006
Posts:
2,841
Plugin Contributions:
0

Re: Adding a horizontal line below header

Ok maybe I should read carefully.....you wrote "Currently, there is no way for them to get out of my shopping cart. " I think I see now you want the image clickable and for it to goto the HTML frontpage of your site instead of the default behavior of going to the index page of the cart. right?
31 Dec 2007, 03:36
#17
daneh avatar

daneh

Zen Follower

Join Date:
Dec 2007
Posts:
268
Plugin Contributions:
0

Re: Adding a horizontal line below header

OK, I am feeling really stupid here. They must not be called the EZ pages links.:blush:
Here is the page: http://mistkits.com/cart

They are the * Complete Misting Kit * Misting Components * Gift Certificates
links. Navbar maybe?

Sorry

Barco,
You read correct. There is no direct way for them to leave my cart and go back to my website homepage. I have articles and such there, so I would like to give them a way back.
31 Dec 2007, 03:39
#18
barco57 avatar

barco57

Totally Zenned

Join Date:
Apr 2006
Posts:
2,841
Plugin Contributions:
0

Re: Adding a horizontal line below header

That would be #navCatTabsWrapper and #navCatTabs in the stylesheet.:smartalec:
31 Dec 2007, 03:51
#19
barco57 avatar

barco57

Totally Zenned

Join Date:
Apr 2006
Posts:
2,841
Plugin Contributions:
0

Re: Adding a horizontal line below header

I looked at your main site and I would seriously consider rolling the main site into the cart and let it handle all of it. You could keep the look of the original site and would not have any session issues if people bounced back and forth between the html part and the store. You would be suprised by what can be done
31 Dec 2007, 03:58
#20
daneh avatar

daneh

Zen Follower

Join Date:
Dec 2007
Posts:
268
Plugin Contributions:
0

Re: Adding a horizontal line below header

Barco,
I actually thought of doing that, but to be honest, I really don't know how to make all those extra pages, links, etc. how to make a sidebox specifically for those articles.

That was my very first website, and I had to learn a little CSS and HTML to do it. I obviously need more learning.:smile:

Those links...are they the nav links? I found this:
#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #3300ff;
white-space: nowrap;
}


I think I need to separate those #nav CatTabs out and redefine the padding, correct?

Thanks again for the help....total noob here.