Customize Theme Background Typography Colors

	Add to Cart
Item Name	How to change background gradients and colors.
Price	RM00.00
Sizes (Select Before Checkout)	--Select Size-- Custom
Description	Tutorial on how to change theme background color, link color, background gradient color and more
More Details	Edit background color. Add gradient background color. Background color code. Change theme background. Customize theme link and typography colors.

We made it super easy for you to customize the whole look of your blog store. With the NEW and improve Blogger Template editor, now customizing your template has become much easier.

Since that our template codes structured to meet design purposes and maximize page optimization, each areas of customization is fairly quite easy to pin-point. For instance:-

Change Header Background Gradient

Go to Template > Backup your Templatee > Edit HTML.

Now expand blogger CSS styles by clicking the small triangle on the left. It should be near Line 41.

Scroll down to Line 170 indicate Header. Change these pieces of codes to customize the Header background:-

background: #cb60b3;
background: -moz-linear-gradient(-45deg,  #cb60b3 0%, #a80077 25%, #c146a1 26%, #db36a4 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#cb60b3), color-stop(25%,#a80077), color-stop(26%,#c146a1), color-stop(100%,#db36a4));
background: -webkit-linear-gradient(-45deg,  #cb60b3 0%,#a80077 25%,#c146a1 26%,#db36a4 100%);
background: -o-linear-gradient(-45deg,  #cb60b3 0%,#a80077 25%,#c146a1 26%,#db36a4 100%);
background: -ms-linear-gradient(-45deg,  #cb60b3 0%,#a80077 25%,#c146a1 26%,#db36a4 100%);
background: linear-gradient(135deg,  #cb60b3 0%,#a80077 25%,#c146a1 26%,#db36a4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#db36a4',GradientType=1 );

A good on-line tool for CSS gradients we seldom use is here at http://www.colorzilla.com/gradient-editor/ the Ultimate CSS Gradient Generator, which you can quickly customize and select your gradient color of choice, web browser safe colors too!

Alternatively you can also add an image for your Header background by replacing the codes above with the code below:-

background: url('http://url_to_your_uploaded_image') no-repeat center center;

Note that for best rendering, make sure your image is more than 960px wide and centered height which would accomodate the height of widgets you have installed in the header area.

Changing your links color

In Edit HTML section, find Line 127 - 134. Change this code to your color code of selection:-

color: #a80077;

Changing Typography colors

For Header tags ie H1, H2, H3, H4 etc find this code at line 105 - 111. Change the below code to color selection:-

color: #a80077;

For paragraphs color find Line 120 - 125. Change these code below:-

color: #555; <

Note that there will be certain pages which uses its own style referencing. By using the new Blogger tmplate editor search bar ( Ctrl F) you can type in H1 (etc) and press enter, to search for all H1 references in the template. Use the same techniques to pin point your element for customization.

Changing Main Menu Background

Find Line 308 - 365 with Main-Nav indicators.

Find elements in between that line of codes with the " background " tag/s. Change to preferred color selection.

Customizing Drop- Down Menu Colors

Find the elements styles in Line 366 - 467. with Drop-Down Menu indicators.

Find elements in between that line of codes with the " background " tag. Change to preferred color selection.

Add 404 Page Not Found Search Page

	Add To Cart
Item Name	Blog store 404 Page Not Found Template
Price	RM50.00
Sizes (Select Before Checkout)	--Select Size-- Small Medium Large XL 2XL 3XL 4XL
Description	Install a page not found template for blog store products  not listed or removed in blog store.
More Details	Install 404 Page Not Found, Re-direct B;logger 404 Page Not Found, Create custom 404 Page Not Found Blogger

We have already included the necessary code snippets in theme template.

Now go to Setting > Search Preference > Custom Page Not Found > click Edit.

Paste these code snippet below in the box provided:-

Ooops! Something weird happened. We're Sorry!</h1>
Possible to many users coming in 
or
Maybe the page you're looking for must have been moved due to recent upgrade.<br />
+++++++++++++++++++++++++++++++++++++++++++++++++++++
Use the internal search bar above to find searched topic 
or
 Click our Current Items Link to visit our Homepage.<br />
<h1>
Thank You!</h1>

Click Save Changes and type a FALSE url from your blog store to preview the 404 page.

Edit to desire design, but make sure it is simple and the total amount of codes can only reach 10k characters or the page will not render.

A sample 404 Page Not Found page for this theme will lokk like this http://myblogshop-gallery/page-not-found.html

Product Title Customization and Display Tips

Item Name	Customize Gallery Display Product Title
Price	RM12.60
Sizes (Select Before Checkout)	--Select Size-- Small Medium Large XL 2XL 3XL 4XL
Description	A quick how to customize the H3 title tag display on gallery product pages.
More Details	Customize H# title tags for Blog Store/Shop. Edit H3 tags title product page. Blog product page title tips and hacks. Arrange H3 title tags with Blogger Store Theme.

Since that the initial design is to save certain web page estate, the H3 product title tags caan be diplayed between 4-6 word count.

To help you customize the display and get more title view, go to Template > Edit HTML and find code snippets below (between line 1062 and line 1077 )

Before beginning, save or backup your template to you PC.

Find this code snippets:-

h3.post-title {
    font-family: Arial;
    position: absolute;
    top: 140px;
    left: 0;
    bottom: 0;
    text-align: left;
    border: 0;
    height: 30px;
    line-height: 1.4;
    margin: 0;
    padding: 5px;
    overflow: hidden;
    display: block;
    background: #fff;
    width: 120px;
    border-radius: 3px;
    letter-spacing: none;
  }
  h3.post-title:hover { background: #f0f0f0; } 
h3.post-title a, h3.post-title a:visited, h3.post-title strong {
    font-size: 12px;
    font-weight:700;
    line-height: 1.4em;
    display: block;
    color: #a80077;
  }

Now change:-

height: 30px;

To your preferred height to display the title.

In addition, if there is an overlap, adjust this piece of codes between line 1004 and line 1042

.post-body {
    height: 290px;
    width: 132px;
    background: #fff;
    border-bottom: 0 none;
    padding:0;
    margin:0;
  }
th.thumb_image, .thumb_image img, th#thumb img, .post img, .post img a, .item_thumbimg img {
    height: 128px!important;
    width: 130px!important;
    border: 1px solid #ccc;
    padding: 0;
    margin: 0;
    text-align: left;
    float: left;
  }

-- more codes --

.post {
    color: #fff !important;
    margin: 10px 10px 30px;
    height: 290px;
    padding: 0;
    list-style: none;
    list-style-type: none;
    width: 132px;
    float: left;
    position: relative;
    background: #fff;
    overflow: hidden!important;
    border-bottom: 0 none;
  }

Change the height value which equals the value of the amount changed with your H3 title tags above.

Save template and preview your changes.

Thank You Redirect Page Template Code.

	Add to Cart
Item Name	Create redirect Thank You Page.
Price (indication only)	RM26.80
Sizes (Select Before Checkout)	--Select Size-- Small Medium Large XL 2XL 3XL 4XL
Description	Tutorial and code snippets on how to make a re-direct thank you page after checkout.
More Details	Another example thank you page redirect How to manage auto e-mail re-direct. Create re-direct page for e-mail submission.

You can easily design a custom thank you page by using the Blogger Pages.

You can create a personal thank you page by going to Pages > Add Page > Blank Page.

At the title area write " Thank You " (without quotes).

On the body of the page you can customised a special thank you page for your customer when they have successfully submitted the checkout form.

A sample of the thank you page you can find here athttp://my-blogshop-gallery.blogspot.com/p/thank your.html

Feel free to copy the codes by right clicking and select View Page Source > copy the HTML codes form this line:-

<!-- Thank you page body starts -->

To this line of code snippet

<!-- Thank you page body ends -->

Now you can customize to desire styling. The codes provided will quickly help you build up important pages for your blogshop.

5. Thank You Page Template Layout

	Add to Cart
Item Name	Creating a thank you page after successful submission.
Price	RM32.80
Sizes (Select Before Checkout)	--Select Size-- Small Medium Large XL 2XL 3XL 4XL
Description	Code snippets and how to customize or personlized a thank you page after user checkout success submission.
More Details	Redirect send auto invoice e-mail to custom page, create thank you page, code snippet insert in Blogger Pages, re-direct send mail to custom page, blog store/shop auto redirects to blog store/shop page. Updated 05/2013 For more installation guide detail download page have been updated. Please forward to My Blogshop Gallery official installation page with current updates and add ons at designers blog http://blog.irsah.com/2013/05/official-my-blogshop-gallery-blogger.html