SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Location
    Portland, OR
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Volusion CSS Hell



    First off here is the site I'm working on Volusion Demo Store

    I'm new to programming Volusion and at first glance it looked like it was going to be a walk in the park. Sadly I was wrong.

    I started modifying a built in template "White-Light" because it was really close to how I wanted the site to look to begin with. At first everything was going great, but when I tried to modify the header section things quickly started not looking right.

    The big issue I'm having right now is that the sub menus on my top navigation are appearing too far off to the right.

    Here is the template code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <!-- DYNAMIC PAGE-SPECIFIC META TAGS WILL BE PLACED HERE
    DO NOT ADD YOUR OWN META TAGS, ONLY PUT CSS/JAVSCRIPT INCLUDES IN YOUR HEAD TAG -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="/v/vspfiles/templates/192/css/Imports.css" rel="stylesheet" type="text/css" />
    <meta id="v65-layout-mode" data-cart="storedot" data-checkout="storedot" />
    </head>
    
    
    <!-- :::::::::: TEMPLATE FOR SPILLED INK PRODUCTIONS :::::::::: -->
    
    
    <body>
    <div id="page">
    
    <!-- :::::::::: HEADER :::::::::: -->
    <div id="header">
    	<div id="display_homepage_title"></div>
        <div id="headerTop">
           <a href="Config_FullStoreURLshoppingcart.asp">View Cart</a>
           <a href="Config_FullStoreURLaboutus.asp">About</a> 
           <a href="Config_FullStoreURLmyaccount.asp">My Account</a> 
        </div>
    </div>   
    
    <!-- :::::::::: TOP CONTENT WRAPPER :::::::::: -->
    <div id="topWrapper">
    	<div id="topBar">
    		<!-- :::::::::: LOGO :::::::::: -->
    		<div id="logo">
    			<img src="http://www.spilledinkproductions.com/images/logo.jpg" alt="Spilled Ink Productions Logo" border="0">
    		</div>
    		<!-- :::::::::: TOP NAVIGATION :::::::::: -->
    		<div id="topNav">	
    		<!-- :::::::::: CHOOSE ROLLOVER COLORS OR ROLLOVER COLORS POPOUT :::::::::: -->
       			<div id="display_menu_1" class="menu">
    			</div>
    		</div>
    <!-- :::::::::: SEARCH :::::::::: -->
    		<div id="display_search">
           		<form action="Config_FullStoreURLSearchResults.asp" method="get" name="SearchBoxForm">
             	   <input type="text" name="Search" id="search_input" value="search" onfocus="if (this.value == 'search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'search';}"/>
    				<input type="submit" name="Submit" id="search_submit" value=""/>
           	 </form>
        	</div>
        	<div class="clear"></div>
        </div>
    </div>
    
    <!-- :::::::::: BEGIN HOMEPAGE STYLES IN TEMPLATE HTML :::::::::: -->
    
    <div id="if_homepage">
    <style type="text/css">
    	#leftnav {display:none;}
    	#content_area {width:1000px;}
    </style>
    
    </div>
    
    <!-- :::::::::: END HOMEPAGE STYLES IN TEMPLATE HTML :::::::::: --> 
    
    
    <!-- :::::::::: CONTENT :::::::::: -->
    <div id="content">
    	
        <!-- :::::::::: LEFT COLUMN :::::::::: -->
    	<div id="leftnav">        
    
            <!-- :::::::::: LIST ITEM OR TREE EXPAND OR ROLLOVER COLORS POPOUT :::::::::: -->
            <div class="menutitle" style="color:Menu2_Title_TextColor; background-color:Menu2_Title_BgColor;">Menu2_Title</div>
            <div id="display_menu_2" class="menu"></div>
           
            <!-- :::::::::: LIST ITEM OR TREE EXPAND OR ROLLOVER COLORS POPOUT :::::::::: -->
    	 <!--
            <div class="menutitle" style="color:Menu3_Title_TextColor; background-color:Menu3_Title_BgColor;">Menu3_Title</div>
            <div id="display_menu_3" class="menu"></div>
     	 -->       
            <!--
            <div class="menutitle" style="color:Menu4_Title_TextColor; background-color:Menu4_Title_BgColor;">Menu4_Title</div>
            <div id="display_menu_4" class="menu"></div>
            
            <div class="menutitle" style="color:Menu5_Title_TextColor; background-color:Menu5_Title_BgColor;">Menu5_Title</div>
            <div id="display_menu_5" class="menu"></div>
            
            <div class="menutitle" style="color:Menu6_Title_TextColor; background-color:Menu6_Title_BgColor;">Menu6_Title</div>
            <div id="display_menu_6" class="menu"></div>
            
            <div class="menutitle" style="color:Menu7_Title_TextColor; background-color:Menu7_Title_BgColor;">Menu7_Title</div>
            <div id="display_menu_7" class="menu"></div>
            
            <div class="menutitle" style="color:Menu8_Title_TextColor; background-color:Menu8_Title_BgColor;">Menu8_Title</div>
            <div id="display_menu_8" class="menu"></div> -->
    
            <div id="display_promotions_999"></div>
            
    	</div>
    
    	<!-- :::::::::: CONTENT AREA :::::::::: -->    
    	<div id="content_area">
    	</div>
        
        <div class="clear"></div>
    </div>
    
    <!-- :::::::::: FOOTER :::::::::: -->
    <div id="footer">
    
    <!-- :::::::::: MAILING LIST SECTION -->
            <div id="eList">
              <form name="MailingList" method="post" action="Config_FullStoreURLMailingList_subscribe.asp">  
                <input type="text" id="elist_input" name="emailaddress" value="enter your email" onfocus="if (this.value == 'enter your email') {this.value = '';}" onblur="if (this.value == '') {this.value = 'enter your email';}" /> 
                <input type="submit" name="Submit" id="elist_submit" value="Submit" />
              </form>
            </div> 
    
    	<div id="footerTop">
        	<ul>
            	<li class="title">CUSTOMER SERVICE</li>
                <li><a href="Config_FullStoreURLhelp.asp">Help</a></li>
                <li><a href="Config_FullStoreURLarticles.asp?ID=57">Shipping &amp; Deliveries</a></li>
                <li><a href="Config_FullStoreURLreturns.asp">Returns &amp; Exchanges</a></li>
            </ul>
            
            <ul>
            	<li class="title">SITE MAPS</li>
                <li><a href="Config_FullStoreURLpindex.asp">Product Index</a></li>
                <li><a href="Config_FullStoreURLcindex.asp">Category Index</a></li>
            </ul>
            
            <ul>
            	<li class="title">MY ACCOUNT</li>
                <li><a href="Config_FullStoreURLlogin.asp">Login/Register</a></li>
                <li><a href="Config_FullStoreURLshoppingcart.asp">Shopping Cart</a></li>
                <li><a href="Config_FullStoreURLorders.asp">Order Status</a></li>
            </ul>
            
    		<ul>
            	<li class="title">COMPANY INFO</li>
                <li><a href="Config_FullStoreURLaboutus.asp">About Us</a></li>
                <li><a href="mailto:Config_EmailAddress_From?subject=Contact Us">Contact Us</a></li>
                <li><a href="Config_FullStoreURLterms_privacy.asp">Privacy Policy</a></li>
            </ul>
    
    	</div>
    
    <!-- ==========================================================================================
    				VOLUSION LINK - BEGIN
    ===============================================================================================
    Customer has agreed per Volusion's Terms of Service (http://www.volusion.com/agreement_monthtomonth.asp) to maintain a text hyperlink to "http://www.volusion.com" in the footer of the website. The link must be standard html, contain no javascript, and be approved by Volusion. Removing this link breaches the Volusion agreement.
    =========================================================================================== -->	
        <div id="footerBottom">
    		<a href="Config_FullStoreURLterms.asp">Copyright &copy; <script type="text/javascript">document.write((new Date()).getFullYear());</script>&nbsp;Config_CompanyNameLegal. All Rights Reserved.</a><br />Shopping Cart Powered by <a href="http://www.volusion.com" title="Shopping Cart Software" target="_blank">Volusion</a>.
    	</div>
    </div>
    </div>
    
    </body>
    </html>
    Here is my template.css code:
    Code:
    a {text-decoration:none;}
    a, a:visited, a:active {outline-style:none;}
    a:hover {text-decoration:underline;}
    
    img {border:none !important;}
    .begin{border:none !important;}
    .end{border:none !important;}
    .bold{font-weight:bold !important;}
    .highlight{color:#06a0cf !important;}
    .left{float:left;}
    .right{float:right;}
    .clear{clear:both;}
    .none{display:none !important;}
    .block{display:block !important;}
    .inline{display:inline !important;}
    
    
    /* ############################### FIXES ############################### */
    .qe_toolbar_ovr{z-index:9999 !important;} /*admin box*/
    .next_page_img{width:auto !important; height:auto !important;}
    .previous_page_img{width:auto !important; height:auto !important;}
    .soft_add_content_area span, .quantity{color:#000;}
    .soft_add_wrapper {z-index:999;}
    
    /* ############################### PAGE WRAPPER ############################### */
    body{
    	background-color:#fff;
    	color:#7c7c7c;
    	font: normal 12px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    	margin:0;
    	padding:0;
    	text-align:center;
    }
    #page{
    	margin:0 auto;
    	text-align:left;	
    	width:1000px;	
    }
    
    /* ############################### HEADER ############################### */
    #header{
    	background:url(../images/template/header_bg.jpg) no-repeat 0 0;
    	height:180px;
    	position:relative;
            width:1000px;
    }
    
    /* ############################### LOGO IMAGE AND TEXT */
    #header div#display_homepage_title{
        height:180px;
        left: 0;
        margin: 0;
        padding: 0;
        position:absolute;
    float: left;
        width: 250px;
        font:29px/46px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    }
    
    #header div#display_homepage_title a{
    	width:100%;
    	height:100%;
    	margin:0px;
    	padding:0px;
    	text-align:left;
    	display:block;
    	text-indent:-9999px;
    	color:#aaaaaa;
    }
    
    #header div a#homepage_title{
    	text-indent:0px;
    	font:29px/46px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    	background:none;
    }
    
    /* ############################### HEADER TOP */
    #headerTop{	
    	color:#aaaaaa;
    	font-size:12px;
    	position:absolute;
    	right:0;
    	text-align:right;
    	top:17px;	
    	width:480px;
    }
    #headerTop a{
    	color:#aaaaaa;
    	margin-left:19px;
    }
    
    
    
    /* ############################### SEARCH BOX */
    
    #display_search{
    	background:url(../images/template/search_bg.gif) no-repeat 0 0;
    	position: absolute;
        right: 0;
        top: 120px;
        width: 147px;
    }
    #display_search form{
    	height:100%;
    	margin:0;
    	padding:0;
    	width:100%;
    }
    #search_input{
    	border:0px solid #000;
    	color: #AAAAAA;
        display: block;
        float: left;
        font: 11px "Lucida Sans Unicode","Lucida Grande",sans-serif;
        margin: 0;
        padding: 0px 3px;
        text-align: left;
        width: 122px;
    	background:none;
    }
    #search_submit{
    	background:none;
    	border:0px solid #000;
    	color: #FFFFFF;
        cursor: pointer;
        display: block;
        float: right;
        font-size: 0;
        height: 18px;
        margin: 0;
        padding: 0;
        text-align: right;
        text-indent: -9999px;
        width: 17px;
    }
    
    
    
    /* ############################### TOP NAVIGATION ############################### */
    #topnav{
            padding-top:114px;
            padding-left: 250px;
    	height:35px;
            position:absolute;
    width:500px;
    float:right;
    	/*border-top:1px solid #eeeeee;*/
    	/*border-bottom:1px solid #eeeeee;*/
    }
    	
    /* ############################### CONTENT ############################### */
    #content{
    	border-bottom:1px solid #eeeeee;	
    	padding-top:25px;
    }
    
    /* ############################### LEFT_NAV */
    #leftnav{
    	float:left;
    	width:192px;
    }
    #leftnav .menutitle{
    	border-bottom:1px solid #eeeeee;
    	color:#7c7c7c;
    	font:12px;
    	line-height:20px;
    	text-transform:uppercase;
    }
    #leftnav .menu{
        margin-bottom:25px;
    }
    
    /* ############################### PROMOTIONS */
    #display_promotions_999{
    	padding:10px 0;
    	text-align:center;
    	vertical-align:middle;
    	width:100%;
    }
    
    /* ############################### CONTENT AREA */
    #content_area{
    float:right;
    	text-align:left;
    	width:808px;
    }
    
    #content #content_area table{text-align:left;}
    
    /* ############################### FOOTER ############################### */
    #footer {
    	color:#aaaaaa;
    	padding:9px 0;
    	text-align:left;
    	position:relative;
    	margin-bottom:200px;
    	overflow:visible;
    	}
    
    /* ############################### MAILING LIST */
    #eList{
    	border: 1px solid #C1C1C1;
        left: 0;
        position: absolute;
        top: 16px;
        width: 178px;
    	}
    	
    #eList form{
    	margin:0;
    	padding:0;
    	width:100%;
    }
    #elist_input{
    	background:none;
    	border:none;
    	color: #AAAAAA;
        font: 11px "Lucida Sans Unicode","Lucida Grande",sans-serif;
        margin: 0;
        padding: 0 5px;
    	float: left;
        text-align: left;
        width: 116px;
    }
    #elist_submit {
    	background-color:#c1c1c1;
    	border:none;
    	color: #FFFFFF;
        cursor: pointer;
        float: right;
        font: 11px "Lucida Sans Unicode","Lucida Grande",sans-serif;
        margin: 0;
        padding: 0 0;
        text-align: center;
        text-transform: uppercase;
        width: 50px;;
    }
    
    
    /* ############################### FOOTER TOP */
    #footerTop {
    	margin:0;
    	padding:0;
    	font-size:10px;	
    	line-height:17px;}
    	
    #footerTop ul {
    	margin:0 0 15px 90px;
    	padding:0;
    	list-style:none;
    	display:inline;
    	float:right;}
    	
    #footerTop ul li {
    	margin:0;
    	padding:0;
    	color:#aaaaaa;}
    	
    #footerTop ul li.title { margin:0 0 4px;}
    	
    #footerTop ul li a {color:#aaaaaa;}
    
    /* ############################### FOOTER BOTTOM */
    #footerBottom {
    	margin:0;
    	padding:0;
    	font-size:10px;	
    	color:#aaaaaa;
    	line-height:17px;
    	position:absolute;
    	top:50px;
    	left:0px;}
    	
    	
    #footerBottom a {color:#aaaaaa;}
    
    
    /* ############################### CHECKOUT ############################### */
    #v65-onepage-cartsummary-header {
    	background-color:#676767;
        color:white;
    }
    The problem has to be with all of the absolute positioning, but using good coding practices only seams to make things worse. I tried using a very straight forward technique where I created my own topWrapper and then placed the logo, navigation, and search all in their own divs, the logo and navigation were in relative position floating left, and the search was in relative position floating right. For some reason when I actually used good coding practice and it all looked very clean and straight forward, I couldn't even get the navigation, logo, and search to show up on the same line, let alone the exact positions I wanted them in.

    Apparently Volusion really messes with your code and I"m running out of ideas. If anyone is good with Volusion templates and can help me out it would be greatly appreciated!

  2. #2
    SitePoint Member
    Join Date
    Aug 2011
    Location
    Portland, OR
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I went a head and re-coded the site again. Now it looks even worse. It's really odd how much volusion modifies the code. For instance it doesn't include my logo image at all.

    New Code:

    Template.HTML
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <!-- DYNAMIC PAGE-SPECIFIC META TAGS WILL BE PLACED HERE
    DO NOT ADD YOUR OWN META TAGS, ONLY PUT CSS/JAVSCRIPT INCLUDES IN YOUR HEAD TAG -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="/v/vspfiles/templates/192/css/Imports.css" rel="stylesheet" type="text/css" />
    <meta id="v65-layout-mode" data-cart="storedot" data-checkout="storedot" />
    </head>
     
     
    <!-- :::::::::: TEMPLATE FOR SPILLED INK PRODUCTIONS :::::::::: -->
     
     
    <body>
    <div id="page">
    	<!-- :::::::::: HEADER :::::::::: -->
    	<div id="header">
        	<div id="headerTop">
           		<a href="Config_FullStoreURLshoppingcart.asp">View Cart</a>
           		<a href="Config_FullStoreURLaboutus.asp">About</a> 
           		<a href="Config_FullStoreURLmyaccount.asp">My Account</a> 
        	</div>  
    		<!-- :::::::::: TOP CONTENT WRAPPER :::::::::: -->
    		<div id="topBar">
    			<!-- :::::::::: LOGO :::::::::: -->
    			<div id="logo">
    				<img src="http://www.spilledinkproductions.com/images/logo.jpg" alt="Spilled Ink Productions Logo" border="0">
    			</div>
    			<!-- :::::::::: TOP NAVIGATION :::::::::: -->
    			<div id="topNav">	
    				<!-- :::::::::: CHOOSE ROLLOVER COLORS OR ROLLOVER COLORS POPOUT :::::::::: -->
       				<div id="display_menu_1" class="menu">
    			</div>
    		</div>
    		<!-- :::::::::: SEARCH :::::::::: -->
    		<div id="display_search">
           		<form action="Config_FullStoreURLSearchResults.asp" method="get" name="SearchBoxForm">
             		<input type="text" name="Search" id="search_input" value="search" onfocus="if (this.value == 'search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'search';}"/>
    				<input type="submit" name="Submit" id="search_submit" value=""/>
           		</form>
        	</div>
    	</div>
     
    	<!-- :::::::::: BEGIN HOMEPAGE STYLES IN TEMPLATE HTML :::::::::: -->
    	<div id="if_homepage">
    		<style type="text/css">
    			#leftnav {display:none;}
    			#content_area {width:960px;}
    		</style>
    	</div>
    	<!-- :::::::::: END HOMEPAGE STYLES IN TEMPLATE HTML :::::::::: --> 
     
    	<!-- :::::::::: CONTENT :::::::::: -->
    	<div id="content">
     
        	<!-- :::::::::: LEFT COLUMN :::::::::: -->
    		<div id="leftnav">        
     
            	<!-- :::::::::: LIST ITEM OR TREE EXPAND OR ROLLOVER COLORS POPOUT :::::::::: -->
            	<div class="menutitle" style="color:Menu2_Title_TextColor; background-color:Menu2_Title_BgColor;">Menu2_Title</div>
            	<div id="display_menu_2" class="menu"></div>
     
            	<div id="display_promotions_999"></div>
    		</div>
     
    		<!-- :::::::::: CONTENT AREA :::::::::: -->    
    		<div id="content_area">
    		</div>
        	<div class="clear"></div>
    	</div>
     
    	<!-- :::::::::: FOOTER :::::::::: -->
    	<div id="footer">
     
    		<!-- :::::::::: MAILING LIST SECTION -->
            <div id="eList">
            	<form name="MailingList" method="post" action="Config_FullStoreURLMailingList_subscribe.asp">  
                	<input type="text" id="elist_input" name="emailaddress" value="enter your email" onfocus="if (this.value == 'enter your email') {this.value = '';}" onblur="if (this.value == '') {this.value = 'enter your email';}" /> 
                	<input type="submit" name="Submit" id="elist_submit" value="Submit" />
              	</form>
            </div> 
     
    		<div id="footerTop">
        		<ul>
            		<li class="title">CUSTOMER SERVICE</li>
                	<li><a href="Config_FullStoreURLhelp.asp">Help</a></li>
                	<li><a href="Config_FullStoreURLarticles.asp?ID=57">Shipping &amp; Deliveries</a></li>
                	<li><a href="Config_FullStoreURLreturns.asp">Returns &amp; Exchanges</a></li>
            	</ul>
     
            	<ul>
            		<li class="title">SITE MAPS</li>
                	<li><a href="Config_FullStoreURLpindex.asp">Product Index</a></li>
                	<li><a href="Config_FullStoreURLcindex.asp">Category Index</a></li>
            	</ul>
     
            	<ul>
            		<li class="title">MY ACCOUNT</li>
                	<li><a href="Config_FullStoreURLlogin.asp">Login/Register</a></li>
                	<li><a href="Config_FullStoreURLshoppingcart.asp">Shopping Cart</a></li>
                	<li><a href="Config_FullStoreURLorders.asp">Order Status</a></li>
            	</ul>
     
    			<ul>
            		<li class="title">COMPANY INFO</li>
                	<li><a href="Config_FullStoreURLaboutus.asp">About Us</a></li>
                	<li><a href="mailto:Config_EmailAddress_From?subject=Contact Us">Contact Us</a></li>
                	<li><a href="Config_FullStoreURLterms_privacy.asp">Privacy Policy</a></li>
            	</ul>
    		</div>
     
    		<!-- ==========================================================================================
    				VOLUSION LINK - BEGIN
    		===============================================================================================
    		Customer has agreed per Volusion's Terms of Service ([url=http://www.volusion.com/agreement_monthtomonth.asp]Volusion Terms & Conditions[/url]) to maintain a text hyperlink to "http://www.volusion.com" in the footer of the website. The link must be standard html, contain no javascript, and be approved by Volusion. Removing this link breaches the Volusion agreement.
    		=========================================================================================== -->	
        	<div id="footerBottom">
    			<a href="Config_FullStoreURLterms.asp">Copyright &copy; <script type="text/javascript">document.write((new Date()).getFullYear());</script>&nbsp;Config_CompanyNameLegal. All Rights Reserved.</a><br />Shopping Cart Powered by <a href="http://www.volusion.com" title="Shopping Cart Software" target="_blank">Volusion</a>.
    		</div>
    	</div>
    </div>
    </body>
    </html>

    Template.css
    Code CSS:
    a {text-decoration:none;}
    a, a:visited, a:active {outline-style:none;}
    a:hover {text-decoration:underline;}
     
    img {border:none !important;}
    .begin{border:none !important;}
    .end{border:none !important;}
    .bold{font-weight:bold !important;}
    .highlight{color:#06a0cf !important;}
    .left{float:left;}
    .right{float:right;}
    .clear{clear:both;}
    .none{display:none !important;}
    .block{display:block !important;}
    .inline{display:inline !important;}
     
     
    /* ::::::::::::::: FIXES ::::::::::::::: */
    .qe_toolbar_ovr{z-index:9999 !important;} /*admin box*/
    .next_page_img{width:auto !important; height:auto !important;}
    .previous_page_img{width:auto !important; height:auto !important;}
    .soft_add_content_area span, .quantity{color:#000;}
    .soft_add_wrapper {z-index:999;}
     
    /* ::::::::::::::: PAGE WRAPPER ::::::::::::::: */
    body{
    	height: 100%;
    	background-color:#fff;
    	color:#7c7c7c;
    	font: normal 12px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    	margin:0;
    	padding:0;
    	text-align:center;
    }
    body .s-c-s .col2 {overflow:visible}
    #page{
    	width:1000px; 
    	text-align:left; 
    	margin:0 auto; 
    	background-Color: #FFFFFF;
    }
     
    /* ::::::::::::::: HEADER ::::::::::::::: */
    #header{
    	width:1000px; 
    	margin:0px auto; 
    	padding-top:5px; 
    	padding-right:10px; 
    	padding-bottom:0px; 
    	padding-left:10px; 
    	background-Color: #FFFFFF;
    }
    #topBar {
    	width:853px; 
    	float:left; 
    	position:relative;
    }
     
    /* ::::::::::::::: HEADER TOP */
    #headerTop{	
    	color:#aaaaaa;
    	font-size:12px;
    	position:absolute;
    	right:0;
    	text-align:right;
    	top:17px;	
    	width:480px;
    }
    #headerTop a{
    	color:#aaaaaa;
    	margin-left:19px;
    }
     
    /* ::::::::::::::: LOGO IMAGE */
    #logo {
    	width:250px;
    	float:left; 
    	position:relative; 
    	margin:0px auto;
    }
     
    /* ::::::::::::::: LOGO TEXT */
    #header div#display_homepage_title{
        height:180px;
        left: 0;
        margin: 0;
        padding: 0;
        position:relative;
    	float: left;
        width: 250px;
        font:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    }
    #header div#display_homepage_title a{
    	width:100%;
    	height:100%;
    	margin:0px;
    	padding:0px;
    	text-align:left;
    	display:block;
    	text-indent:-9999px;
    	color:#aaaaaa;
    }
    #header div a#homepage_title{
    	text-indent:0px;
    	font:29px/46px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    	background:none;
    }
     
    /* ::::::::::::::: SEARCH BOX */
    #display_search{
    	margin:0px auto;
    	background:url(../images/template/search_bg.gif) no-repeat 0 0;
    	position: relative;
    	float:right;
        top: 120px;
        width: 147px;
    }
    #display_search form{
    	height:100%;
    	margin:0;
    	padding:0;
    	width:100%;
    }
    #search_input{
    	border:0px solid #000;
    	color: #AAAAAA;
        display: block;
        float: left;
        font: 11px "Lucida Sans Unicode","Lucida Grande",sans-serif;
        margin: 0;
        padding: 0px 3px;
        text-align: left;
        width: 122px;
    	background:none;
    }
    #search_submit{
    	background:none;
    	border:0px solid #000;
    	color: #FFFFFF;
        cursor: pointer;
        display: block;
        float: right;
        font-size: 0;
        height: 18px;
        margin: 0;
        padding: 0;
        text-align: right;
        text-indent: -9999px;
        width: 17px;
    }
     
    /* ::::::::::::::: TOP NAVIGATION ::::::::::::::: */
    #topnav{
    	width:603px; 
    	padding-top:114px; 
    	float:right;
    	position: relative; 
    	margin:0px auto;}
    }
     
    /* ::::::::::::::: CONTENT ::::::::::::::: */
    #content{
    	border-bottom:1px solid #eeeeee;	
    	padding-top:25px;
    }
     
    /* ::::::::::::::: LEFT_NAV */
    #leftnav{
    	float:left;
    	width:192px;
    }
    #leftnav .menutitle{
    	border-bottom:1px solid #eeeeee;
    	color:#7c7c7c;
    	font:12px;
    	line-height:20px;
    	text-transform:uppercase;
    }
    #leftnav .menu{
        margin-bottom:25px;
    }
     
    /* ::::::::::::::: PROMOTIONS */
    #display_promotions_999{
    	padding:10px 0;
    	text-align:center;
    	vertical-align:middle;
    	width:100%;
    }
     
    /* ::::::::::::::: CONTENT AREA */
    #content_area{
    float:right;
    	text-align:left;
    	width:808px;
    }
    #content #content_area table{text-align:left;}
     
    /* ::::::::::::::: FOOTER ::::::::::::::: */
    #footer {
    	color:#aaaaaa;
    	padding:9px 0;
    	text-align:left;
    	position:relative;
    	margin-bottom:200px;
    	overflow:visible;
    	}
     
    /* ::::::::::::::: MAILING LIST */
    #eList{
    	border: 1px solid #C1C1C1;
        left: 0;
        position: absolute;
        top: 16px;
        width: 178px;
    	}
     
    #eList form{
    	margin:0;
    	padding:0;
    	width:100%;
    }
    #elist_input{
    	background:none;
    	border:none;
    	color: #AAAAAA;
        font: 11px "Lucida Sans Unicode","Lucida Grande",sans-serif;
        margin: 0;
        padding: 0 5px;
    	float: left;
        text-align: left;
        width: 116px;
    }
    #elist_submit {
    	background-color:#c1c1c1;
    	border:none;
    	color: #FFFFFF;
        cursor: pointer;
        float: right;
        font: 11px "Lucida Sans Unicode","Lucida Grande",sans-serif;
        margin: 0;
        padding: 0 0;
        text-align: center;
        text-transform: uppercase;
        width: 50px;;
    }
     
    /* ::::::::::::::: FOOTER TOP */
    #footerTop {
    	margin:0;
    	padding:0;
    	font-size:10px;	
    	line-height:17px;}
     
    #footerTop ul {
    	margin:0 0 15px 90px;
    	padding:0;
    	list-style:none;
    	display:inline;
    	float:right;}
     
    #footerTop ul li {
    	margin:0;
    	padding:0;
    	color:#aaaaaa;}
     
    #footerTop ul li.title { margin:0 0 4px;}
     
    #footerTop ul li a {color:#aaaaaa;}
     
    /* ::::::::::::::: FOOTER BOTTOM */
    #footerBottom {
    	margin:0;
    	padding:0;
    	font-size:10px;	
    	color:#aaaaaa;
    	line-height:17px;
    	position:absolute;
    	top:50px;
    	left:0px;}
     
     
    #footerBottom a {color:#aaaaaa;}
     
     
    /* ::::::::::::::: CHECKOUT ::::::::::::::: */
    #v65-onepage-cartsummary-header {
    	background-color:#676767;
        color:white;
    }

  3. #3
    SitePoint Member
    Join Date
    Aug 2011
    Location
    Portland, OR
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I hope there is a Volusion expert that can give me some tips

  4. #4
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i am working in same template. i just want to know what file and where "div id="if_homepage" is defined...

    this is in the template.html

    <div id="if_homepage">
    <style type="text/css">
    #leftnav {display:none;}
    #pallet {display:none;}
    #content_area {width:960px;}
    </style>
    </div>

    i'd like to add to that or write more divs that only allow a custom div (#pallet) i made that shows a particular image on a page to only show on category pages and product details page. not ALL site pages

    getting no where with "volusion help"

    thanks

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,514
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Sorry we missed both your posts but I guess we have no volusion users here to help with this. It's not really a css issue anyway so you may not get the right people looking at this anyway. I would have though the first port of call would be volusion support.

  6. #6
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    There are 7 css files to play with.

    There are 7 css files located at vspfiles/templates/---/css/ (replace --- with your template number). The Template.css file controls most of the centering and page margins. Below is pasted part of my stores Template.css where I control the width of the page. You can adjust most things by playing with these css files. Just make sure to back up your original file incase you crash the ones you are working on. There is also a Colors.css to control the site colors and Content_Area.css adjusts most of the fonts sizes and other elements. You just have to take the time to play with these files until you find something that works. Sometimes the template you start with just won't let you do what you want to so you have to start over with another template.
    The kind of stuff that we are doing with Volusion is on the fringe, most people just use the software as-is without any mods so Volusion tech support is limited to questions about using the software as-is without modifications. If you are modifying the site in any way then you are kind of on your own - at least on the part you modified. It is that way with all shopping cart companies, they simply do not charge enough to be able to offer tech support to people modifying their software.

    from Template.css:
    -------------
    /* ############################### PAGE ############################### */
    #page{
    margin:0 auto;
    text-align:left;
    width:654px;
    background:#FFF;
    }
    -------------


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •