Forums / Templates, Stylesheets, Page Layout / placing information box in title header

placing information box in title header

Locked

Views: 3,319

Results 1 to 20 of 21
This thread is locked. New replies are disabled.
22 Feb 2007, 12:03 AM
#1
gsdcypher avatar

gsdcypher

Totally Zenned

Join Date:
Feb 2007
Posts:
816
Plugin Contributions:
0

placing information box in title header

Crikey! CSS??? where are the tables? :wacko: I need my rows and columns. lol

So how do I move/place the information box into the title header? ... the one with the "powered by ZenCart logo" and the "tag line here".

Moreover, I would like to put the information box on the left side (replacing the powered by... logo) and have picture in the space to the right side of it.

Hope that makes sense.

Thanks

22 Feb 2007, 12:59 AM
#2
kobra avatar

kobra

Black Belt

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

Re: placing information box in title header

So how do I move/place the information box into the title header? ... the one with the "powered by ZenCart logo" and the "tag line here".

Moreover, I would like to put the information box on the left side (replacing the powered by... logo) and have picture in the space to the right side of it.
Are these 2 things the same item or different "information" boxes???

Zen-Venom Get Bitten

22 Feb 2007, 2:23 AM
#3
gsdcypher avatar

gsdcypher

Totally Zenned

Join Date:
Feb 2007
Posts:
816
Plugin Contributions:
0

Re: placing information box in title header

Sorry, it reads kinda funny... Yes, they are the same. :-)

I would like to place the cart box below in the header on the left side (replacing the powered by ZC logo) and in the space to the right of the box, I would like to display a picture that is the same height as the box and extends the right the width of the page. :-)

  • sidenote: I would also like the info box to be black with white writing. :-)))
    Information

Shipping & Returns
Privacy Notice
Conditions of Use
Contact Us
Site Map
Gift Certificate FAQ
Discount Coupons
Newsletter Unsubsribe

Thanks!

22 Feb 2007, 4:10 AM
#4
kobra avatar

kobra

Black Belt

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

Re: placing information box in title header

Got me again!!!

I would like to place the cart box below in the header on the left side (replacing the powered by ZC logo)
and
Information Box
Are these the same thing or are you refering to the "Shopping Cart Box" that displays what is in the cart when shopping?

Zen-Venom Get Bitten

22 Feb 2007, 4:21 AM
#5
gsdcypher avatar

gsdcypher

Totally Zenned

Join Date:
Feb 2007
Posts:
816
Plugin Contributions:
0

Re: placing information box in title header

LOL.

No, it is a box that is in the left column of the store.
The heading is information and it has these links in it:
Shipping & Returns
Privacy Notice
Conditions of Use
Contact Us
Site Map
Gift Certificate FAQ
Discount Coupons
Newsletter Unsubsribe

I would like to put that in the header. :-)

But now that you mention it.... :-) I would also like a box to display the current items that are in the cart. You know the one that say you have X items in your cart and it gives a running total. :-)))

But I would like to tackle moving/placing the info box in the header. :-)

Thanks for your patience. I am a complete newbie at ZC and CSS. I am using the bare bones template.

22 Feb 2007, 4:51 AM
#6
kobra avatar

kobra

Black Belt

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

Re: placing information box in title header

You are gonna need to take the contents of /includes/templates/template_default/sideboxes/tpl_information.php

and place it in your template copy of /includes/templates/template_default/common/tpl_header.php

Then insure that the css #headerWrapper is sized vertically to allow it to fit

Might be easier to make it the first sidebox on the left and re-arrange the navone column in css to move up into the head space

Never have done this nor wanted to...

Zen-Venom Get Bitten

22 Feb 2007, 5:04 AM
#7
gsdcypher avatar

gsdcypher

Totally Zenned

Join Date:
Feb 2007
Posts:
816
Plugin Contributions:
0

Re: placing information box in title header

Might be easier to make it the first sidebox on the left and re-arrange the navone column in css to move up into the head space

OK, I moved it to the top. Now... how do I "re-arrange" the navone column in ccc to "move up into the head space?"

Thanks.

22 Feb 2007, 5:09 AM
#8
gsdcypher avatar

gsdcypher

Totally Zenned

Join Date:
Feb 2007
Posts:
816
Plugin Contributions:
0

Re: placing information box in title header

Is this what I have to edit? If so, how do I tell it to move the top box into the header?

/The main content classes/

#navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {

vertical-align: top;

}

thanks.

22 Feb 2007, 5:14 AM
#9
kobra avatar

kobra

Black Belt

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

Re: placing information box in title header

Make sure that you have nothing anchored in the header above this

Find in your css

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	} 

Separate it out and apply a negative margin-top and adjust the value(yeah I know this is dodgy)

#navColumnOneWrapper {
	margin: auto;
        margin-top: -50px;
	} 
#navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	} 

Zen-Venom Get Bitten

22 Feb 2007, 5:26 AM
#10
gsdcypher avatar

gsdcypher

Totally Zenned

Join Date:
Feb 2007
Posts:
816
Plugin Contributions:
0

Re: placing information box in title header

Broke out the columns and made the following changes. But it had no effect... ?

#navColumnOneWrapper {

margin: auto;
margin-top: -50px;

}

#navColumnTwoWrapper, #mainWrapper {

margin: auto;

}

#navColumnOneWrapper {

margin: 0 0.5em;

}

#navColumnTwoWrapper {

margin: 0 0.5em;

}

22 Feb 2007, 5:31 AM
#11
kobra avatar

kobra

Black Belt

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

Re: placing information box in title header

Why all the extra entries for #navColumnOne ????

these are later and circumvent the earlier

Try to concantenate these into one entry only

Zen-Venom Get Bitten

22 Feb 2007, 6:30 AM
#12
gsdcypher avatar

gsdcypher

Totally Zenned

Join Date:
Feb 2007
Posts:
816
Plugin Contributions:
0

Re: placing information box in title header

Made these changes. I uploaded and updated, but still no change?

#navColumnOneWrapper {

margin: auto;
margin-top: -50px;
margin: 0 0.5em;

}

#navColumnTwoWrapper, #mainWrapper {

margin: auto;

}

#navColumnTwoWrapper {

margin: 0 0.5em;

}

22 Feb 2007, 6:44 AM
#13
kobra avatar

kobra

Black Belt

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

Re: placing information box in title header

Now why the extra margin statement??? Try what I posted

Zen-Venom Get Bitten

22 Feb 2007, 6:47 AM
#14
barco57 avatar

barco57

Totally Zenned

Join Date:
Apr 2006
Location:
West Salem, IL
Posts:
2,845
Plugin Contributions:
0

Re: placing information box in title header

may want t try it like this:```
#navColumnOneWrapper {
margin: -50px auto 0.5em;
}

I think I got that right.:unsure:

Mike
AEIIA - Zen Cart Certified & PCI Compliant Hosting
The Zen Cart Forum...Better than a monitor covered with post-it notes!

22 Feb 2007, 7:07 AM
#15
gsdcypher avatar

gsdcypher

Totally Zenned

Join Date:
Feb 2007
Posts:
816
Plugin Contributions:
0

Re: placing information box in title header

OK this is close...

#navColumnOneWrapper {

margin: -90px auto 0.5em;

}

This has moved the box up on the page. But it really isn't part of (or inside) the header.

Remember this is my very first foray into CSS, I still think in tables. :shocking:

Anyway, it is covered up by the powered by zc logo??? And which file do I edit to make the header the same size as the info box (so it will appear as if they are one)???

thanks.

22 Feb 2007, 7:26 AM
#16
kobra avatar

kobra

Black Belt

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

Re: placing information box in title header

Myself:

Make sure that you have nothing anchored in the header above this
Anyway, it is covered up by the powered by zc logo???
Did you forget this??
And which file do I edit to make the header the same size as the info box (so it will appear as if they are one)???
CSS file - #headerWrapper and give it a height (or #logo)

height: ??px;

Zen-Venom Get Bitten

22 Feb 2007, 7:52 AM
#17
gsdcypher avatar

gsdcypher

Totally Zenned

Join Date:
Feb 2007
Posts:
816
Plugin Contributions:
0

Re: placing information box in title header

Ok that is sorta looking like what I had in mind. :-)

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {

margin: 0em;

padding: 0em;

}

#headerWrapper{

height: 275px;

}

Sorry but I don't really understand this stuff... or how to get rid of the powered by zc banner thingy. lol

Anyway, how do I color the info box black and give it white writing. I looked for an "infobox" in the css code but didn't find one. And do I place a pic in the space next to it?

Is there a good css book for complete beginners that might help me with this? I like the cart features, but this method of template customization is very... cumbersome... (for me).

22 Feb 2007, 9:45 AM
#18
kobra avatar

kobra

Black Belt

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

Re: placing information box in title header

Try separating the tag entries from

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
        margin: 0em;
        padding: 0em;
        }
#headerWrapper{
        height: 275px;
        }

TO:

#contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
        margin: 0em;
        padding: 0em;
        }
#headerWrapper{
        height: 275px;
        margin: 0em;
        padding: 0em;
        }

Sorry but I don't really understand this stuff... or how to get rid of the powered by zc banner thingy. lol
Admin > tools > banner manager
Anyway, how do I color the info box black and give it white writing. I looked for an "infobox" in the css code but didn't find one. And do I place a pic in the space next to it?
INPUT is the tag to look for
Is there a good css book for complete beginners that might help me with this?
http://www.w3schools.com/css/

Zen-Venom Get Bitten

22 Feb 2007, 3:40 PM
#19
gsdcypher avatar

gsdcypher

Totally Zenned

Join Date:
Feb 2007
Posts:
816
Plugin Contributions:
0

Re: placing information box in title header

Thanks for all of the assistance. :-) I broke out the header and I will check out the link.

I turned off all of the banners, but the powered by zc logo is still there (top left). Is there a different manager where I can turn on/off or move that pic?

In the meantime I'll keep slogging through. BTW, is there a place to get the CSS for this forum layout (fixed with, title goes all the way across the screen, home, shop, etc. across the top) so I could try it on my store?

thanks

22 Feb 2007, 4:10 PM
#20
gsdcypher avatar

gsdcypher

Totally Zenned

Join Date:
Feb 2007
Posts:
816
Plugin Contributions:
0

Re: placing information box in title header

finally found how to move the powered by zc banner....

any thoughts on how best to place a picture next to info box (that is now located in my header)? :-)

question... for the page design, layout, adding, pictures, changing box colors, changing text, etc., etc.. will i always be modifying the css stylesheet? or will i modify some of the tpl files as well.

for example your first idea was to copy the info tpl file and put it inside the header tpl file.... if i did that, is that something that might get overridden during a cart update? therefore we are changing everything via the css stylesheet?

thanks