Does anyone happen to know (Left hand Nav)

[JR123]

Hi all,

I'm integrating my 3D Shopping Cart with my existing website and what I'm trying to do is get the left hand navigation menu (the links on the left hand side) to match up between the website and the cart.

I went into my hosting account for my website and pulled up the .css style sheet and it reads as follows (starting after the #topnav in the sheet):


}
#left_nav_box {
width:190px;
overflow:hidden;
float:left;
clear:left;

}
#left_nav_box ul {
list-style:none;
padding:8px 0 0 0;
margin:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#left_nav_box li{

padding:4px 0 6px 18px;
display:block;
background:url(../images/bullet.png) left center no-repeat;
}
#left_nav_box a {
color:#1f4167;
tex-decoration:none;
}
#left_nav_box a:hover {
color:#0292D8;
text-decoration:underline;
}
.reddy_made{
color:#d80200;
font-size:10px;
font-weight:bold;
display: block;
text-align:left;
padding-left:30px;
}
.reddy_made1{
color:#d80200;
font-size:10px;
font-weight:bold;
}
.reddy_made1 a{
color:#d80200;
font-size:10px;
font-weight:bold;
text-decoration:none;
}
.reddy_made1 a:hover{
text-decoration:underline;
}
.style1 {color: #FFFFFF}
.style2 {
color: #d80200;
font-size: 16px;
font-weight: bold;
}
.style3 {
font-size: 10px
}
.style4 {
color: #0094D8;
font-size: 16px;
font-weight: bold;
}
.style5 {
font-size: 18px
}
.greenie {
color:#037719;
font-size:10px;
font-weight:bold;
}
.greenie a{
color:#037719;
font-size:10px;
font-weight:bold;
text-decoration:none;
}
.greenie a:hover{
text-decoration:underline;
}
.greenie_bold {
color:#037719;
font-weight:bold;
font-size:9px;
}
.greenie_bold a{
color:#037719;
font-weight:bold;
font-size:9px;
text-decoration:none;
}
.greenie_bold a:hover{
text-decoration:underline;
}


Anyone out there know how to integrate this into 3D cart? I have no idea what ".reddy" and ".greenie" are in this code, or it they are even relevant to the left hand navigation css.

I've attached two screen shots to show how the left hand navigation menus currently look (very different) and I would like for it to look like the one on the website.

P.S. My skills in terms of programming and coding, out of 10, is about 3-4 :confused:

Thank you in advance for anyone out there who has any suggestions or advice!
-James

[cbsteven]

It's pretty difficult to dig into the HTML and CSS based on just a screenshot. Can you give URLs?

[JR123]

Thanks for the quick reply!

Sure thing, the website is: www.tableskirtingclip.com
The shopping cart is: http://tableskirtingclip.3dcartstores.com/

Note: the two are not integrated yet (I'm waiting to get the cart set up perfectly, or as close to as possible, before linking the Order Now buttons on the website to the 3D cart).

Thank you again!
James

[cbsteven]

The best tool to investigate differences like this is the Firefox browser with the Firebug extension installed. IT will let you click on a website element and inspect all the CSS and HTML that effects it.

For example if you investigate the left column of your site, it is controlled by this CSS:

td.XSP_LEFT_PANEL_SPC {
background-color:#FFFFAA;
height:100%;
padding:5px;
text-align:left;
vertical-align:top;
width:205px;

The #FFFFAA is the yellow background color, for example.

The individual links, such as "Poly Silk Skirt" are controlled by these CSS blocks:

a.mainlinksLEFT_MENU:link {
color:Blue;
font-family:Palatino Linotype;
font-size:10pt;
font-weight:bold;
text-decoration:underline;
}
a.mainlinksLEFT_MENU:visited {
color:Black;
font-family:Palatino Linotype;
font-size:10pt;
font-weight:bold;
text-decoration:none;
}
a.mainlinksLEFT_MENU:active {
color:Black;
font-family:Palatino Linotype;
font-size:10pt;
font-weight:bold;
text-decoration:none;
}
a.mainlinksLEFT_MENU:hover {
color:Black;
font-family:Palatino Linotype;
font-size:10pt;
font-weight:bold;
text-decoration:none;
}

The style will change slightly depending on if the link is normal, being hovered over, previously visited, etc.


Then find the CSS blocks that control the same area on 3DCart, and change the style (not the names of the blocks) to match your original site.

Unfortunately it looks like there is not a one-to-one correspondence between blocks on your site and blocks on your card, so if you start changing stuff it might effect more than you intend to.. but hopefully that should give you some ideas on how to start. Firebug lets you change stuff inline without altering anything permanently, you can change the CSS from directly within firefox, see how it changes display, and then revert back, all without modifying the CSS files on your site.

[JR123]

I don't know what else to say except THANK YOU! I had never even heard of Firebug, and I just went to the add-on and got it! It looks like an awesome tool that I'll look back on and wonder how I ever got along without it....now I can't wait to get back to the office later and work on this tonight and tomorrow!

Thank you again for all of your help! I'll keep my fingers crossed that I'll be able to get this done with my minimal knowledge of source code, but this will surely help! :)

Thanks again,
James