CSS Nav Bar

[Guest rick burgess]

Hello Everyone,

I suppose you could say I'm relatively new to Cube Cart, at least the programming side of it that is. I am in the process of entirely revamping the look of my clothing store. I have ran in to two issues, that I have not been able to solve by looking at other posts. Perhaps it is because I'm tired so please bare with me.

First of all for reference please take a look at "http://www.coolclothingonline.com" soon to be wcsportswear.com. You will then be prompted to login. Simply input "cubecart" for both the username and password.

Now that you can and have seen what my site looks like I will bring up my first question.

I would like to put a CSS horizontal navigation bar immediately below the header (which is really just a part of the content background image), and immediately above the shopping cart. I think you'll understand when you see it.

This menu will include the following links: Home, About, Mens, Womens, Contact. (This is just for informational purposes as I plan on making the menu myself)

Where can I insert the code for my CSS menu so that it will be a part of my theme (based on Classic)?

Secondly....

The Home category and following text really need not be on the page. I would prefer that the 'Latest Products' category take the place of 'Home' but have the word Home in place of the word(s) Latest Products for its title.

I could probably figure out this one, but I figured I'd post it since I was posting anyhow.

Thank you very much in advance for your time! This is an extremely helpful community which is something to be proud of!

"Also of note...I'm using CC version 3.0.13"

Thanks,

Jared

[Guest kaskudoo]

to add your own code to the page just add it to the according template file. look in your skin folder under styletemplates/global/index.tpl

add your horizontal menu (maybe a css horizontal list? http://css.maxdesign.com.au/listamatic/horizontal12.htm)

to change the name of the categories or documents, you could just change the wording in the main language file. however, since you rather have the entire different document, why not replace the according {} tag in your index file or you can check out the different boxes and exchange the coding in them. (all located in your skin folder, /styletemplates/boxes) the page content is put together dynamically, so i am not sure about replacing that part.

the nice thing about cc is, that you can move around a lot and change a lot. i try to style and position a lot with css and it didn't take me long to figure out what i can move and what better left to be untouched. create a new skin to try out a lot and then you are pretty much ready to go :innocent:

[markscarts]

You wish to remove the "welcome text box" from homepage, and have no extra spacing left there when removing it - and also change the latest prods title, right?

Do all your editing in skins/xx/styleTemplates/content/index.tpl (not to be confused with global/index.tpl, where you added the menu bar).

Open that file and look for this code:

<div class="boxContent">

<span class="txtContentTitle">{HOME_TITLE}</span>

<br />

{HOME_CONTENT}

</div>

You should delete all that code, or comment it out like this:

<!-- <div class="boxContent"> <span class="txtContentTitle">{HOME_TITLE}</span> <br /> {HOME_CONTENT} </div> -->

Next, look for this:

Replace with this:

<span class="txtContentTitle">Home</span>

	<span class="txtContentTitle">{LANG_LATEST_PRODUCTS}</span>

[Guest rick burgess]

Thank you both very much for your help! I have got everything looking pretty good now. However, I must consult you for one more thing.

Again.. http://www.coolclothingonline.com for reference.

Login: cubecart

Password: cubecart

I would like my CSS menu to extend the entire length of the content area. As you will see there is about a 3-4 pixel gap on either side. Here is the code for my CSS Menu:

In /skins/Classic/styleSheets/layout.css....

#stylefour {

		position:relative;

		display:block;

		height:39px;

		font-size:11px;

		font-weight:bold;

		background:transparent url(../styleImages/backgrounds/bgOFF.gif) repeat-x top left;

		font-family:Arial,Verdana,Helvitica,sans-serif;

		border-top:4px solid #006699;

}



#stylefour ul {

		margin:0;

		padding:0;

		list-style-type:none;

		width:748px;

}



#stylefour ul li {

		display:block;

		float:left;

		margin:0;

}





#stylefour ul li a {

		display:block;

		float:left;

		color:#666;

		text-decoration:none;

		padding:11px 20px 0 20px;

		height:23px;

		background:transparent url(../styleImages/backgrounds/bgDIVIDER.gif) no-repeat top right;

}



#stylefour ul li a:hover,#stylefour ul li a.current {

		color:#008595;

		background:#fff url(../styleImages/backgrounds/bgON.gif) no-repeat top left;

}

And in /skins/Classic/styleTemplates/global/index.tpl

<div id="stylefour">



<ul>



<li><a href="link1" title="Home">Home</a></li>



<li><a href="link2" title="About">About</a></li>



<li><a href="link3" title="Mens">Mens</a></li>



<li><a href="link4" title="Womens">Womens</a></li>



<li><a href="link5" title="Contact">Contact</a></li>



</ul>



</div>

Obviously as you see the links aren't set up yet...but that is besides the point. Anyhow, I have tried making the width in 

#stylefour ul {

		margin:0;

		padding:0;

		list-style-type:none;

		width:748px;

}

auto, 100%, 748px, and I have even tried making it larger then the area but putting in 754px. I assume I must be changing the wrong thing and/or looking in the wrong area.

Thanks again for your help!

-Jared

[Guest kaskudoo]

the padding in the #pagesurround makes it impossible for it to expand ... well, not really impossible

add margin: 0 -10px 0 -10px;

to #stylefour .... this will create a negative margin of 10px on the left and right side. i might be off with my estimate of 10px

i didn't check this in IE or so ... but its worth a shot ....

[Guest rick burgess]

the padding in the #pagesurround makes it impossible for it to expand ... well, not really impossible

add margin: 0 -10px 0 -10px;

to #stylefour .... this will create a negative margin of 10px on the left and right side. i might be off with my estimate of 10px

i didn't check this in IE or so ... but its worth a shot ....

Thanks a million! -5px was the perfect pixel amount. I don't know if there is a way to close this topic or if that even needs to be done but I have everything solved now thanks to all of your help. Last night I was almost looking at this as an impossibility, but now it is in place, and it wasn't all that hard!

Thanks again!

-Jared

[markscarts]

Good work :)

[Guest rick burgess]

I have now ran into one more issue. My CSS Menu bar seems to disappear while in the shopping cart and registration. I assume if someone were to just tell me the files that need editing, I could apply the same concept as before. Thanks in advance!

-Jared

[Guest pagie]

I have now ran into one more issue. My CSS Menu bar seems to disappear while in the shopping cart and registration. I assume if someone were to just tell me the files that need editing, I could apply the same concept as before. Thanks in advance!

-Jared

hi, Jared

In order to make your css menu apear in the view cart page you will have to edit

skins/yourskin/styletemplates/global/cart.tpl

Not sure about the registration page though.

[Guest rick burgess]

hi, Jared

In order to make your css menu apear in the view cart page you will have to edit

skins/yourskin/styletemplates/global/cart.tpl

Not sure about the registration page though.

Thanks a lot Pagie! The registration process was fixed as well when I updated the cart so that solved the issue!

Thanks Again!

Jared