BlogrCart White E-commerce for Blogger - Customize Background Color How To

Update 9th July 2016 - BlogrCart WHITE is now at version 2.0 - added more customization & more Blogger features introduced with NO PROGRAMMING REQUIRED to run your first ecommerce online store on a Blogspot blog! A Blogger blog template that do not need to edit codes to install & customize one.

Setting up an eonline e-commerce web store is made easy, needs only an email address, you can set your shopping cart & Paypal checkout right from your Blogger blog. You can receive online orders via email oon your mobile or get online payments via credit/debit cards (Visa, Mastercard, Diners Club, American Express) straight to your bank account, safe & secured!

Here is the live template preview http://blogrcart-white.blogspot.com/ . To find out more on this amazing Blogger theme features, you can view here http://blogrcart-white.blogspot.com/p/features-white-20.html . It's been more than 2 years this Blogger template was initially released and now beefier than ever!

BlogrCart WHITE Version 2.0

You can also download this Blogspot/Blogger store template at live demo preview site. Thanks to all for the amazing support for these past years - and making Blogger blog great again!


Original Article published 6th April 2014

This tutorial is for BlogrCart WHITE Version 1.6 & below.

With the recent release of our free to use Blogger blogspot template, BlogrCart White, we included various customization features in the source codes itself. Now customizing your Blogger e-commerce powered blogspot template is made easy with indicators as explained below.

BlogrCart White Blogger template - responsive on mobile screens!

View  Demo Download BlogrCart White
To start customizing the background for this Blogger template, go to Template Editor > backup if required > the codes should be in between Line 138 - Line 172.

Here's a brief explanation for the background color combo (in Hex code) used/pre-installed with BlogrCart White e-commerce inspired blogspot template.

body
{
 background:#fff;
}

This color combo controls the overall background color of BlogrCart White template. Change the Hex code above to your preference.

.shopping-cart-wrapper
{
 background:#fff;
}

This would be the section where the drop down view cart should be. Change the color Hex code to your preference

#main
{
 background:#fff;
}

This section will change the template background color for your posts on gallery (index) pages, static pages and the post product pages.

#header-wrapper
{
 background:#fff;
}

This section controls the header background color of the template. This section also include Blogger default Header widget which you can cutoimize to use either your blog title or and image for your template header.

#navigation-wrapper
{
 background:#fff;
}

This section will be the background of your main navigational links and the built-in search bar. Change the Hex code to your color of choice.

#content-wrapper
{
 background:#fff;
}

This section is the wrapper for the #main section above. Which means that this section actually "wraps" section #main. Change the Hex code to your preferred background color. The background color  will be the undelayer color for the #main and the #sidebar-wrapper section.

#sidebar-wrapper
{
 background:#fff;
}

This section is where most of your sidebar Blogger widget is located. In normal layout except the static page for Blogger, the sidebar area will be located below the post page section. Change the Hex to your preferred color combo.

#footer-wrapper
{
 background:#fff;
}

This section is located at the very bottom where your Blogger store copyright etc. Change the Hex code to the background color of choice.


Qucik tip: The background color combo within the "#something-wrapper" actually spreads out 100% of the section width. This way your background color of choice could be isolated in between sections  without color overlapping.

As you can see we made it super easy to customize your BlogrCart White shopping cart template background colors with simple changes. And if you have noticed, ALL of the tags and  indicators used are self explanatory. Which means the tags really represents where the actual section goes in the template layout.

This is some of the web site best practices used in our Blogr template collection.  And it makes it easier for reference and for your future customizations effort.

Happy customizing!