格式化Wordpress电子商务网站产品页面

时间：2012-12-23 18:44:59

标签： css wordpress layout web e-commerce

我从开发人员那里继承了一个wordpress电子商务网站，只有一半完成了这个项目。我不知道很多关于CSS或PHP，但我已经能够编写足够的代码来完成产品页面。我在格式化产品页面时遇到问题，但产品列表太宽，显示在我的侧边栏下方而不是旁边。下面是一个页面的图片，该页面看起来可以正常查看产品类别，但在列出产品时却不正确。

Product categories

enter image description here

我已经玩过wpsc-default.css文件来解决这个简单的问题，但是我所做的更改似乎没有对产品列表行占用整个内容区域产生任何影响。我尝试从100％宽度更改产品展示容器，但是当我更新文件时，网站看起来仍然完全相同。以下是该文件的代码，有人可以指出我缺少的内容吗？

        /*
Theme Name: Default Theme
Theme URI: http://instinct.co.nz
Description: Default Theme
Version: 3.5
Author: Roy Ho
Author URI: http://instinct.co.nz
*/

/*
 * If you delete this file, you can expect your WP e-Commerce installation to break in some manner
 * to create your own theme copy, and paste this file, change the names and alter to your tastes
*/
/*-----UTILITY-----*/
.group:after {
    content:" ";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
/*-----IE SPECIFIC STYLESHEET-----*/

/*-----UTILITY-----*/
/* for IE6 */
* html .group {
    height:1%;
}

/* for IE7 */
*:first-childhtml .group {
    min-height:1px;
}

/*-----GENERAL-----*/

#default_products_page_container .imagecol img, #list_view_products_page_container img, #grid_view_products_page_container img {
    margin:0;
    padding:0;
    border:1px solid #ccc;
}

.wpsc_hidden{
    display:none;
}

/*-----DEFAULT PRODUCT DISPLAY-----*/
#default_products_page_container {
    width:100%; 
    position:relative;
    line-height:1.2em;
}

#default_products_page_container .wpsc_page_numbers_top {
    margin-bottom:20px; 
}

#default_products_page_container .wpsc_page_numbers_bottom {
    margin-top:20px;    
}

.wpsc_category_grid_item {
    text-align: center;
    background: #EFEFEF;
    border: 1px solid #CCC;
    margin:10px;
    text-decoration: none;
}

.wpsc_category_grid_item .item_no_image {
    color:#000;
}


#default_products_page_container .wpsc_page_numbers_top a:link, #default_products_page_container .wpsc_page_numbers_top a:visited, #default_products_page_container .wpsc_page_numbers_bottom a:link, #default_products_page_container .wpsc_page_numbers_bottom a:visited {
    padding:5px 4px;

}


#default_products_page_container .wpsc_page_numbers_top a:hover, #default_products_page_container .wpsc_page_numbers_top a:active, #default_products_page_container .wpsc_page_numbers_bottom a:hover, #default_products_page_container .wpsc_page_numbers_bottom a:active {

}

#default_products_page_container .wpsc_page_numbers_top span.current, #default_products_page_container .wpsc_page_numbers_top span.current, #default_products_page_container .wpsc_page_numbers_bottom span.current, #default_products_page_container .wpsc_page_numbers_bottom span.current {
    padding:5px 4px;
}

.default_product_display {
    margin-bottom:20px;
    padding:10px;
    position:relative;
}

.default_product_display .imagecol {

    text-align: right;
    display: table-cell;
    vertical-align: middle;
    min-height: 50px;
    height: 100%;
    overflow: auto;

}

.default_product_display .imagecol img.product_image {
    background-color:#efefef;   
}

.default_product_display .imagecol img.no-image, #content .default_product_display .imagecol img.no-image {
    background-color:#EFEFEF;
    display:block;
}

.default_product_display .productcol {
    vertical-align: middle;
    min-height: 50px;
}

.default_product_display h2.prodtitle, #content .default_product_display h2.prodtitle {
    margin:0 0 5px 0;
    line-height:1;
    clear:none;
}

.default_product_display span.sale {
    position:absolute;
    top:-10px;
    left:-10px;
    text-indent:-9999px;
    display:block;
}

.default_product_display .wpsc_description, #content .default_product_display .wpsc_description {
    font-size:13px; 
    line-height:1.4em;
}

.default_product_display .additional_description, #content .default_product_display .additional_description {
    font-size:13px; 
    line-height:1.4em;
    margin:0;
}

.default_product_display .additional_description_container {
    margin:20px 0;  
}

.default_product_display a.additional_description_link:link, .default_product_display a.additional_description_link:visited {
    text-decoration:underline;
    color:#0062ce;
    margin-left:5px;
}

.default_product_display a.additional_description_link:hover, .default_product_display a.additional_description_link:active {
    text-decoration:none;
}

.default_product_display .additional_description {
    display:none;   
}

.default_product_display form.product_form fieldset, #content .default_product_display form.product_form fieldset {
    border: none;
    padding: 0px;
}

.default_product_display form.product_form fieldset legend, #content .default_product_display form.product_form fieldset legend {
    font-size:18px;
    font-weight: normal;
    padding:0px;
}

.default_product_display .wpsc_variation_forms {
    padding:2px;    
    margin-bottom:10px;
}

.wpsc_select_variation{
    position:relative;
}

.default_product_display .wpsc_variation_forms table, #content .default_product_display .wpsc_variation_forms table, .default_product_display .wpsc_variation_forms table tr, #content .default_product_display .wpsc_variation_forms table tr, .default_product_display .wpsc_variation_forms table td, #content .default_product_display .wpsc_variation_forms table td {
    border:none;
    border-collapse:collapse;   
    margin:0;
}

.default_product_display .wpsc_variation_forms table td.col1, #content .default_product_display .wpsc_variation_forms table tr td.col1 {
    width:10%;  
    text-align:left;
    margin:0;
    padding:2px;
}

.default_product_display .wpsc_variation_forms table td.col2, #content .default_product_display .wpsc_variation_forms table tr td.col2 {
    width:80%;  
    text-align:left;
    margin:0;
    padding:2px;
}

.default_product_display .wpsc_variation_forms label {
    font-family: Georgia, "Bitstream Charter", serif;
    font-size:14px;
    color:#000
}

.default_product_display .wpsc_variation_forms select {
    margin:0;
    min-width:100px;
    max-width:200px;
}

.default_product_display .wpsc_quantity_update {
    margin-bottom:10px;
    padding-bottom:10px;
    margin-left:10px;
}

.default_product_display .wpsc_quantity_update input, #content .default_product_display .wpsc_quantity_update input {
    margin:0;
    line-height:1.2em;
    font-size:12px;
}


.default_product_display .wpsc_quantity_update label, #content .default_product_display .wpsc_quantity_update label {
    font-family: Georgia, "Bitstream Charter", serif;
    margin:0;
    line-height:1.2em;
    font-size:12px;
    color:#F60;
}

.default_product_display .wpsc_product_price {
    margin-bottom:10px;
    font-size:16px;
    padding:5px;
    display:inline;
    *zoom:1;
}

.default_product_display .in_stock,
.single_product_display .in_stock {
    position: relative;
    background-image: url(wpsc-images/yes_stock.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    left:-5px;
}

.default_product_display .out_of_stock,
.single_product_display .out_of_stock {
    position: relative;
    background-image: url(wpsc-images/outofstock.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    left:-5px;
}


.default_product_display .wpsc_product_price p, #content .default_product_display .wpsc_product_price p {
    margin:0;
}

.default_product_display .wpsc_product_price span.oldprice {
    text-decoration:line-through;
    color:#666;
}

.default_product_display p.soldout, #content .default_product_display p.soldout {
    font-weight:bold;
    font-size:14px;
    color:#C33; 
    background:url(wpsc-images/outofstock.png) no-repeat scroll 0 2px transparent;
    padding-left:18px;
    margin:0;
}

.default_product_display div.wpsc_loading_animation {
    visibility:hidden;  
    margin-top:5px;
}

.default_product_display div.wpsc_loading_animation img, #content .default_product_display div.wpsc_loading_animation img {
    border:none;
}

.default_product_display .product_footer .product_average_vote strong  {
    font-size:0.8em;    
    float:left;
}

.default_product_display .product_footer .product_average_vote span  {
    font-size:0.8em;    
    float:left;
}

.default_product_display .product_footer .product_user_vote {
    clear:both;
    font-size:0.8em;    
    float:left;
}

.default_product_display .wpcart_gallery img, #content .default_product_display .wpcart_gallery img {
    margin-right:6px;
    border:1px solid #ccc;  
}

.wpcart_gallery .attachment-gold-thumbnails, .imagecol .product_image{
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
}


.single_product_display form.product_form .wpsc_buy_button_container,
#content .single_product_display form.product_form .wpsc_buy_button_container{
    text-align: right;
}

.default_product_display .wpsc_buy_button_container{
    float:right;
}

/*-----LIST VIEW PRODUCT DISPLAY-----*/
#list_view_products_page_container {
/*  width:250px;     */
    position:relative;
}

#list_view_products_page_container .wpsc_page_numbers_top {
    margin-bottom:20px; 
}

#list_view_products_page_container .wpsc_page_numbers_bottom {
    margin-top:10px;    
}

#list_view_products_page_container p, #content #list_view_products_page_container p {
    line-height:1.2em;
    margin:0;
    padding:0;  
}

#list_view_products_page_container span.sale {
    display:none;
}


#list_view_products_page_container input, #content #list_view_products_page_container input, #list_view_products_page_container textarea, #content #list_view_products_page_container textarea {
    margin:0;
    padding:0;
}

table.list_productdisplay form.product_form {
    display:inline;
}

table.list_productdisplay .quantity_container {
    display:inline; 
}

#content input.wpsc_buy_button{
    font-size: 12px;
}

table.list_productdisplay .wpsc_buy_button_container {
    display:inline-block;
    position:relative;
}

table.list_productdisplay .wpsc_buy_button_container .wpsc_loading_animation {
    position:absolute;
    top:1px;
    right:-85px;
    *right:-100px;
    font-size:10px;
    width:100%; 
    vertical-align:middle;
    line-height:1.2em;
}

table.list_productdisplay .wpsc_buy_button_container .wpsc_loading_animation img, #content table.list_productdisplay .wpsc_buy_button_container .wpsc_loading_animation img {
    vertical-align:middle;
    border:none;
    float:left;
}

table.list_productdisplay .oldprice {
    text-decoration:line-through;
}

#list_view_products_page_container table.list_productdisplay input.wpsc_buy_button, #content #list_view_products_page_container table.list_productdisplay input.wpsc_buy_button {
    padding:5px;

}

table.list_productdisplay h2.prodtitle, #content table.list_productdisplay h2.prodtitle {
    font-size:15px;
    line-height:1.2em;
    margin:0;
    word-wrap: break-word;  
}

table.list_productdisplay h2.prodtitle a:link, #content table.list_productdisplay h2.prodtitle a:link, table.list_productdisplay h2.prodtitle a:visited, #content table.list_productdisplay h2.prodtitle a:visited {
    text-decoration:underline;
    color:#006699;
}

table.list_productdisplay h2.prodtitle a:hover, #content table.list_productdisplay h2.prodtitle a:hover, table.list_productdisplay h2.prodtitle a:active, #content table.list_productdisplay h2.prodtitle a:active {
    text-decoration:none;
}

table.list_productdisplay td.stock {
    text-align:center;  
}

table.list_productdisplay tr.alt {
    background-color:#F8F8F8;   
}

table.list_productdisplay p.soldout {
    color:#C33; 
}

/*-----SINGLE PRODUCTS PAGE-----*/
#single_product_page_container {
    width:650px;    
    position:relative;  
}

.single_product_display {
    margin-bottom:20px;
    padding:10px;
    position:relative;  
}

.imagecol {
    margin-right:5px;
/*  width:25%; */
    float:left; 
    position:relative;
}

.single_product_display .imagecol img.product_image {
    background-color:#efefef;
    border:1px solid #ccc;  
}

.single_product_display .imagecol img.no-image, #content .single_product_display .imagecol img.no-image {
    background-color:#EFEFEF;
    display:block;
}


.single_product_display .product_description, .single_product_display .single_additional_description {
    font-size:14px;
    line-height:1.2em;
    margin:0 0 10px 0;
    padding:0;  
}

.single_product_display form.product_form fieldset, #content .single_product_display form.product_form fieldset {
    border: none;
    padding: 0px;
}

.single_product_display form.product_form fieldset legend, #content .single_product_display form.product_form fieldset legend {
    font-size: 18px;
    font-weight: normal;
    padding: 0px;
}

.single_product_display form.product_form input, #content .single_product_display form.product_form input {
    padding:2px;
    margin:0;

    line-height:1.2em;
    font-size:14px;
}

.single_product_display form.product_form input.input_custom_text, #content .single_product_display form.product_form input.input_custom_text {
    width:250px;
}

.single_product_display form.product_form fieldset p, #content .single_product_display form.product_form fieldset p {
    margin:0 0 10px 0;
    padding:0;
    line-height:1.2em;
    font-size:14px; 
}

.default_product_display .wpsc_variation_forms {
    padding:2px 0px 2px 0px;    
    margin-bottom:10px;
}

.single_product_display .wpsc_variation_forms table, #content .single_product_display .wpsc_variation_forms table, .single_product_display .wpsc_variation_forms table tr, #content .single_product_display .wpsc_variation_forms table tr, .single_product_display .wpsc_variation_forms table td, #content .single_product_display .wpsc_variation_forms table td {
    border:none;
    border-collapse:collapse;   
    margin:0;
}

.single_product_display .wpsc_variation_forms table td.col1, #content .single_product_display .wpsc_variation_forms table tr td.col1 {
    width:10%;  
    text-align:left;
    margin:0;
    padding:2px;
}

.single_product_display .wpsc_variation_forms table td.col2, #content .single_product_display .wpsc_variation_forms table tr td.col2 {
    width:60%;  
    text-align:left;
    margin:0;
    padding:2px;
}

.single_product_display .wpsc_variation_forms select {
    margin:0;
    min-width:100px;    
    max-width:200px;
}

.default_product_display .wpsc_quantity_update {
    margin-bottom:10px;
    padding-bottom:10px;
    margin-left:10px;
}

.single_product_display .wpsc_quantity_update input, #content .single_product_display .wpsc_quantity_update input {
    margin:0;
    line-height:1.2em;
    font-size:12px;
}


.single_product_display .wpsc_quantity_update label, #content .single_product_display .wpsc_quantity_update label {
    font-family: Georgia, "Bitstream Charter", serif;
    margin:0;
    line-height:1.2em;
    font-size:12px;
    color:#F60;
}

.single_product_display .wpsc_product_price {
    display: inline-block;
    font-size: 16px;
    margin-bottom: 10px;
    padding: 5px;
}

.single_product_display .wpsc_product_price p, #content .single_product_display .wpsc_product_price p {
    margin:0;
}

.single_product_display .wpsc_product_price span.oldprice {
    text-decoration:line-through;
}

.single_product_display p.soldout {
    font-weight:bold;
    font-size:14px;
    color:#C33; 
    background:url(wpsc-images/outofstock.png) no-repeat scroll 0 5px transparent;
    padding-left:18px;
}

.single_product_display div.wpsc_loading_animation {
    visibility:hidden;  
}

.single_product_display .wpcart_gallery img, #content .single_product_display .wpcart_gallery img {
    margin-right:6px;
    border:1px solid #ccc;  
}

.single_product_display .FB_like iframe {
    border:none;
    width:300px;
    height:80px;
    outline:none;
    overflow:hidden;
}

1 个答案:

答案 0 :(得分：0)

此问题已得到解决。我将此代码放入我的style.css文件中。

wpsc_default_product_list {
float: left;
width: 600px;
}

.wpsc_category_grid {
float: right;
width: 650px;
}
相关问题
最新问题