Docs

[rogerskeri]

Hello,

I’m trying to make the background of the woocommerce shop page, cart page, product page, etc., to be black. I’ve gone through the forum, but nothing has worked for me. Please advise.

Regards,

Keri

[rogerskeri]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in!

It seems that you have inserted an invalid JS code. This code create issues in your site including the ability to add a product in your cart. Please have your js code updated and use this instead:

(function($)){
    var size = 150;
    var s_size = 0.66 * size;
    var m_size = 0.83 * size;
    var s_resize = ( size - s_size )/2;
    var m_resize = ( size - m_size )/2;
    var image = $('#logo').css('width',size);

    var x = image.offset().left; 
    var y = image.offset().top; 

    function pulse() { 
        image.animate({ 
            width: s_size, top:x+s_resize,left:y+s_resize 
        }, 350, function() { 
            image.animate({ 
                width: size, top:x, left:y 
            }, 100, function() { 
                image.animate({ 
                    width: m_size, top:x+m_resize, left:y+m_resize 
                }, 70 ,function(){ 
                    image.animate({ 
                        width: size, top:x , left:y 
                    }, 70, function() { 
                       pulse();  
                    }); 
                });  
            }); 
        });  
    }; 
     
    pulse();
})(jQuery);

And to change the background color of all the woocommerce pages, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.woocommerce-page .site{
    background-color: transparent;
}

We would loved to know if this has work for you. Thank you.

[rogerskeri]

Ok, I made the changes necessary, but the background color is still white 🙁

[Thai]

Hi There,

Please replace your all custom CSS with this:

@media (min-width: 980px) {
    .x-logobar {
        display: none !important;
        visibility: hidden !important;
    }

    .x-navbar .desktop .x-nav > li.logo-menu-item > a {
        text-indent: -99999px;
        text-align: left;
        width: 140px;
        height: 130px;
        background: url(http://madefellaz.com/wp-content/uploads/2016/04/madefellaz-e1460210862860.png) no-repeat center center;
        background-size: contain;
        margin-top: 4px;
    };
}

/* Contact Form 7 Styles
---------------------------------*/
 
.wpcf7 {
    background-color: black;
    border: 5px solid #ffffff;
    color: white;
}

.wpcf7-submit {
    background: #555555;
    color: #ffffff;
}

.wpcf7-form {
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 25px;
}

.wpcf7-text {
    width: 50%;
    color: black;
}

/*snapchat coding */

/* .x-icon-snapchat:before {
    content: url('http://placehold.it/30x30');
    vertical-align: middle;
} */

.x-slider-container.above {
    border: none !important;
}

.page-template-template-blank-1-php .x-slider-revolution-container.below, .page-template-template-blank-2-php .x-slider-revolution-container.below, .page-template-template-blank-3-php .x-slider-revolution-container.below, .page-template-template-blank-4-php .x-slider-revolution-container.below, .page-template-template-blank-5-php .x-slider-revolution-container.below, .page-template-template-blank-6-php .x-slider-revolution-container.below {
    border-bottom: 0 !important;
}

.x-section {
    margin: 0 auto;
}

.page-template-template-blank-1-php .x-slider-container.below, .page-template-template-blank-2-php .x-slider-container.below, .page-template-template-blank-3-php .x-slider-container.below, .page-template-template-blank-4-php .x-slider-container.below, .page-template-template-blank-5-php .x-slider-container.below, .page-template-template-blank-6-php .x-slider-container.below {
    border-bottom: none;
}

@media (max-width: 979px) {
    .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
        position: fixed;
    }
}

@media only screen and (max-width: 767px) {
    .x-boxed-layout-active .site {
        width: 100%;
    }
}
  
  
@media (max-width:  480px) {
    .myclass {
        max-width: 20%;
        margin: 0 auto 12px;
        display: inline-block;
        float: left;
    }

    .x-img.myclass > img {
        padding: 10px;
    }

    #sidebar {
        display: none;
    }

    #content {
        width: 99%;
        background: white;
    }

    #footer {
        background: none repeat scroll 0% 0% #fff;
    }
}

.woocommerce div#main {
    background: #282828 url(layout/images/images/style/body/dark/primary.png) repeat-x;
}

.woocommerce-page .x-main {
    width: 100% !important;
}

.woocommerce-page .x-sidebar {
    width: 0 !important;
}

.woocommerce-page .site {
    background-color: transparent;
}

Hope it helps 🙂

[rogerskeri]

It works, thank you!!

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts