 |
Add to Cart |
|---|---|
| Item Name | How to change background gradients and colors. |
| Price | RM00.00 |
| Sizes (Select Before Checkout) | |
| 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:-
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:-
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.
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:-
For Header tags ie H1, H2, H3, H4 etc find this code at line 105 - 111. Change the below code to color selection:-
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.
