I'm extremely happy to tell about CSS in the Template
No need to go about the long and winding way of editing the blog's template (i.e. Edit HTML) which can be quite intimidating and may risk messing up the codes! Just use custom CSS (cascading style sheets) to restyle the feel and look of your blog! Once you've learned how-to, it's really quite simple, fast and fuss-free!
Follow these steps to
add custom CSS to your template, using the Template Designer :
All the custom CSS added via the Template Designer will also be shown in the blog's template at Design | Edit HTML page, just before the code: ]]></b:skin> where you can edit them or add new ones too.
Now, let's take a look at the kind of custom CSS code snippets that can be added to your template to restyle your blog's appearance. There are so many, just check out at W3Schools CSS Tutorials for more in-depth examples and Dave Raggett's W3C Introduction to CSS.
To assist and give you an idea, below is appended a summarized guide to some of the popular CSS tweaks that you may want to try. You'd notice that each CSS code snippet starts with a tag or selector name, and then followed by a list of style properties and a semicolon, inserted between the curly brackets { and }. If there is more than one style property in the list, separate them with a semicolon.
Other related links:
Keep sharing --Keep Learning
No need to go about the long and winding way of editing the blog's template (i.e. Edit HTML) which can be quite intimidating and may risk messing up the codes! Just use custom CSS (cascading style sheets) to restyle the feel and look of your blog! Once you've learned how-to, it's really quite simple, fast and fuss-free!
Follow these steps to
add custom CSS to your template, using the Template Designer :
- Sign in to your Blogger account. At Dashboard, click Design | Template Designer.
- Go to Advanced | Add CSS
tab. Add your custom CSS code snippets in the field box provided on the
right. The best part about this method is changes you make will be
reflected instantly in the live preview below which makes it so easy to
keep amending the values, etc until you're finally happy with the
results. You can click the Expand Preview if necessary for a broader view.
- If you're satisfied with the changes, just click the orange Apply to Blog button to save changes.
- Finally, click the Back to Blogger button to quit the Blogger Template Designer and return to the Page Elements page. That's all to it!
All the custom CSS added via the Template Designer will also be shown in the blog's template at Design | Edit HTML page, just before the code: ]]></b:skin> where you can edit them or add new ones too.
Now, let's take a look at the kind of custom CSS code snippets that can be added to your template to restyle your blog's appearance. There are so many, just check out at W3Schools CSS Tutorials for more in-depth examples and Dave Raggett's W3C Introduction to CSS.
To assist and give you an idea, below is appended a summarized guide to some of the popular CSS tweaks that you may want to try. You'd notice that each CSS code snippet starts with a tag or selector name, and then followed by a list of style properties and a semicolon, inserted between the curly brackets { and }. If there is more than one style property in the list, separate them with a semicolon.
| CHANGES YOU MAY WANT TO APPLY | CSS CODE SNIPPETS TO ADD (you can change the px value, color, etc. as highlighted in orange or remove the unwanted style properties as desired) |
|---|---|
| 1. HEADER SECTION: | |
| - Blog's title: how-to center-align text or
set a specified left/right position, the latter being useful if you've
added an untitled header image. Also, reduce the height of the top margin, it's okay to use negative values. | .header h1 {text-align:center; top-margin: -0.3em;} Just change the position center to left or right and the value in px as you wish. Alternatively to set a specified left position, follow example as below: .header h1 {margin-left:255px;} |
| - Blog's title: how-to change the font family, size and text transformation. Also, how-to include letter-spacing. | .header h1 {font-family:'Apple Chancery', cursive; font-size:300%; text-transform:uppercase; letter-spacing:0.1em;} |
| - Blog's description: how-to center-align, capitalize and bold the text, change the font-family and font's size, and reduce the top and bottom margin to shorten the wide gap/space between the title and description. | .header .description {text-align:center; text-transform:capitalize; font-weight:bold; font-family:georgia, serif; font-size:90%; margin-top: -10px; margin-bottom: -5px;} |
| 2. PAGE LIST (TABS) SECTION: | |
| - Page tabs: how-to change the font style, size and color. | .tabs-inner .widget li a {font-family:'Lucida Handwriting', cursive; font-size:120%; color:red;} |
| - Tabs default background: how-to remove the background color, shadow, etc. | .tabs-cap-top,
.tabs-cap-bottom, .tabs-outer, .PageList, .PageList ul, .PageList
.widget-content {border:none; background:none; -moz-box-shadow:none;
-webkit-box-shadow:none; box-shadow:none ;} .tabs-inner .section {border:none;} |
| - Other widgets below the tabs: how-to center-align and decrease the height of margins between them. | .tabs-inner .widget {text-align:center; margin:5px 0;} |
| 3. BLOG POST SECTION: | |
| - Images/pictures: how-to remove border and shadow around images. | .post-body img {padding:0px; background:transparent; border:none; -moz-box-shadow: none; -webkit-box-shadow:none; box-shadow:none;} |
| - Post footer: how-to add a background color and change/reduce the font size. | .post-footer {background-color:#f2f1f2; font-size:85%;} |
| 4. SIDEBAR SECTION: | |
| - Widgets' title: a) how-to text-transform the title; b) change the font-family; c) remove shadow in the background | .sidebar .widget h2 {text-transform:uppercase; font-family:'Lucida Handwriting', cursive; text-shadow:none;} |
| - Gadgets (widgets): how-to reduce or shorten the height between gadgets. | .sidebar .widget {padding-bottom:0px;} |
| - Profile image: how-to remove background color, border and shadow around the image. | #Profile1 img {padding:0px; background:transparent; border:none; -moz-box-shadow: none; -webkit-box-shadow:none; box-shadow:none;} |
| - Realign the vertical top of sidebar column: how-to align the top of sidebar column with that of the main post column. | .main-inner .column-right-outer {margin-top:0.6em} (Note: change the em value accordingly to fit your template design. Use a negative value if the sidebar's top is lower than the top of main column) |
| 5. FOOTER SECTION: | |
| - How-to center-align widgets and change the font-size of text. | .footer-outer {text-align:center; font-size:90%;} |
| - How-to reduce or shorten the height between specific widgets. | (First,
you have to identify your widgets' ID - go to Design | Page Elements,
and mouse over the specific gadget's Edit link. The widgetId can be
read on the browser's status bar. Example widgetId=HTML3 will be
referred to #HTML3 in the CSS. You can group the widget # [each gadget
is followed by a comma, except for the last one] and add a style for
them as seen below.) #HTML3,#HTML6,#Attribution1 {margin:2px;} |
| 6. GENERAL: | |
| - How-to reduce or shorten the height (space) between the Header section (or the PageList widget if you've added one) and the Columns below. | .main-inner {padding-top:20px;} |
Other related links:
Keep sharing --Keep Learning
Posts
0 comments:
Post a Comment