e.Guidebook: Customizing Blogger/Blogspot

This is the final post of this series. The next steps are to:

hide the toolbar at the top
remove the dotted lines
close the margins between the panels

Hiding the toolbar is pretty easy. Just add this to the end of your b:skin section:

#navbar { display: none; }

Removing the dotted lines isn't too difficult either. We just have to reduce the dotted border width to 0 pixels. Simply look for all instances of the word dotted. If you see:

border: 1px dotted...

Change it to:

border: 0px dotted...

And if within the same block, you see:

border-width: 1px...;

Change it to:

border-width: 0px;

Lastly, closing the margins. This is trickier as you have to do this pretty much by trial and error. Go through all the sections and tweak the margins and paddings. For the sake of brevity, I will include my entire style section here:

body {
background:$bodyBgColor;
margin:0;
text-align:center;
line-height: 1.5em;
font:x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;
}


/* Page Structure
----------------------------------------------- */
/* The images which help create rounded corners depend on the
 following widths and measurements. If you want to change
 these measurements, the images will also need to change.
 */
#outer-wrapper {
width:1000px;
margin:0 auto;
text-align:$startSide;
font: $bodyFont;
background: $topSidebarBgColor;
}
#main-wrap1 {
width:700px;
float:$startSide;
background:$mainBgColor;
margin:0;
padding:15px 0 10px;
color:$mainTextColor;
font-size:97%;
line-height:1.5em;
word-wrap: break-word;
overflow: hidden;   
}
#main-wrap2 {
float:$startSide;
width:100%;
padding:10px 0 0;
}
#main {
padding:0;
width:680px;
}
#sidebar-wrap {
width:300px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word;
overflow: hidden;   
}

.main .widget {
margin-top: 4px;
width: 680px;
padding: 0 13px;
}

.main .Blog {
margin: 0;
padding: 0;
width: 680px;
}

.inline-ad {
padding-left: 19px; padding-bottom: 20px;
margin-left: 20px; margin-bottom: 20px; margin-right: 20px;
border: 1px dotted $borderColor;
border-width: 0px 0px 1px 0px;
}

/* Links
----------------------------------------------- */
a:link {
color: $mainLinkColor;
}
a:visited {
color: $mainVisitedLinkColor;
}
a:hover {
color: $mainVisitedLinkColor;
}
a img {
border-width:0;
}


/* Blog Header
----------------------------------------------- */
#header-wrapper {
background:$titleBgColor;
margin-top:0px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;

}
#header {
padding:0; margin: 0;
height: 300px; width: 1000px;
background: url('BANNER URL') no-repeat left top;
}
#header h1 {
margin:0;
padding:90px 500px 30px 30px;
line-height:1.2em;
font: $pageTitleFont;
}
#header a,
#header a:visited {
text-decoration:none;
color: $titleTextColor;
}
#header .description {
margin:0;
padding: 5px 500px 10px 30px;
line-height:1.5em;
font: $descriptionFont;
}


/* Posts
----------------------------------------------- */
h2.date-header {
margin-top:0;
margin-$endSide:28px;
margin-bottom:0;
margin-$startSide:43px;
font-size:85%;
line-height:2em;
text-transform:uppercase;
letter-spacing:.2em;
color:$dateHeaderColor;
}
.post {
margin:.3em 0 25px;
padding:0 13px;
border:0px dotted $borderColor;
}
.post h3 {
margin:0;
line-height:1.5em;
background:
 url("http://www2.blogblog.com/rounders/icon_arrow.gif")
 no-repeat 10px .5em;
display:block;
border:0px dotted $borderColor;
border-width:0px;
padding-top:2px;
padding-$endSide:14px;
padding-bottom:2px;
padding-$startSide:29px;
color: $postTitleColor;
font: $postTitleFont;
}
.post h3 a, .post h3 a:visited {
text-decoration:none;
color: $postTitleColor;
}
a.title-link:hover {
background-color: $borderColor;
color: $mainTextColor;
}
.post-body {
border:0px dotted $borderColor;
border-width:0px;
border-bottom-color:$mainBgColor;
padding-top:10px;
padding-$endSide:14px;
padding-bottom:1px;
padding-$startSide:29px;
}
html>body .post-body {
border-bottom-width:0;
}
.post-body {
margin:0 0 .75em;
}
.post-body blockquote {
line-height:1.3em;
}
.post-footer {
/* background: #ded; */
margin:0;
padding-top:14px;
padding-$endSide:14px;
padding-bottom:15px;
padding-$startSide:29px;
border:0px dotted $borderColor;
border-width: 0px;
font-size:100%;
line-height:1.5em;
color: #666;
}
/*
The first line of the post footer might only have floated text,
so we need to give it a height. The height comes from the post-
footer line-height
*/
.post-footer-line-1 {
min-height:1.5em;
_height:1.5em;
}

.post-footer p {
margin: 0;
}

html>body .post-footer {
border-bottom-color:transparent;
}

.uncustomized-post-template .post-footer {
text-align: $endSide;
}

.uncustomized-post-template .post-author,
.uncustomized-post-template .post-timestamp {
display: block;
float: $startSide;
text-align:$startSide;
margin-$endSide: 4px;
}

.post-footer a {
color: #258;
}
.post-footer a:hover {
color: #666;
}
a.comment-link {
/* IE5.0/Win doesn't apply padding to inline elements,
   so we hide these two declarations from it */
background/* */:/**/url("http://www.blogblog.com/rounders/icon_comment_$startSide.gif") no-repeat $startSide 45%;
padding-$startSide:14px;
}
html>body a.comment-link {
/* Respecified, for IE5/Mac's benefit */
background:url("http://www.blogblog.com/rounders/icon_comment_$startSide.gif") no-repeat $startSide 45%;
padding-$startSide:14px;
}
.post img, table.tr-caption-container {
margin-top:0;
margin-$endSide:0;
margin-bottom:5px;
margin-$startSide:0;
padding:4px;
border:1px solid $borderColor;
}
.tr-caption-container img {
border: none;
margin: 0;
padding: 0;
}
blockquote {
margin:.75em 0;
border:1px dotted $borderColor;
border-width:1px 0;
padding:5px 15px;
color: $dateHeaderColor;
}
.post blockquote p {
margin:.5em 0;
}

#blog-pager-newer-link {
float: $startSide;
margin-$startSide: 13px;
}

#blog-pager-older-link {
float: $endSide;
margin-$endSide: 13px;
}

#blog-pager { 
text-align: center;
}

.feed-links {
clear: both;
line-height: 2.5em;
margin-$startSide: 13px;
}

/* Comments
----------------------------------------------- */
#comments {
margin:-25px 13px 0;
border:1px dotted $borderColor;
border-width:0px;
padding-top:20px;
padding-$endSide:0;
padding-bottom:15px;
padding-$startSide:0;
}
#comments h4 {
margin:0 0 10px;
padding-top:0;
padding-$endSide:14px;
padding-bottom:2px;
padding-$startSide:29px;
border-bottom:0px dotted $borderColor;
font-size:120%;
line-height:1.4em;
color:$postTitleColor;
}
#comments-block {
margin-top:0;
margin-$endSide:15px;
margin-bottom:0;
margin-$startSide:9px;
}
.comment-author {
background:url("http://www.blogblog.com/rounders/icon_comment_$startSide.gif") no-repeat 2px .3em;
margin:.5em 0;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:20px;
font-weight:bold;
}
.comment-body {
margin:0 0 1.25em;
padding-top:0;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:20px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-footer {
margin:0 0 .5em;
padding-top:0;
padding-$endSide:0;
padding-bottom:.75em;
padding-$startSide:20px;
}
.comment-footer a:link {
color: #333;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.comment-form {
padding-$startSide:20px;
padding-$endSide:5px;
}
#comments .comment-form h4 {
padding-$startSide:0px;
}

/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 5px;
margin-$endSide: 10px;
margin-bottom: 5px;
margin-$startSide: 0;
border: 1px solid $topSidebarTextColor;
}

.profile-datablock {
margin-top:0;
margin-$endSide:15px;
margin-bottom:.5em;
margin-$startSide:0;
padding-top:8px;
}

.profile-link {
background:url("http://www.blogblog.com/rounders/icon_profile_$startSide.gif") no-repeat $startSide .1em;
padding-$startSide:15px;
font-weight:bold;
display: none;
}

.profile-textblock {
clear: both;
margin: 0;
}

.sidebar .clear, .main .widget .clear {
clear: both;
}

#sidebartop-wrap {
background:$topSidebarBgColor;
margin:0px 0px 15px;
padding:0px 0px 10px;
color:$topSidebarTextColor;
}

#sidebartop-wrap2 {
padding: 10px 0 0;
margin:0;
border-width:0;
}

#sidebartop h2 {
line-height:1.5em;
color:$topSidebarHeaderColor;
border-bottom: 0px dotted $topSidebarHeaderColor;
margin-bottom: 0.5em;
font: $headerFont;
}

#sidebartop a {
color: $topSidebarLinkColor;
}

#sidebartop a:hover {
color: $topSidebarVisitedLinkColor;
}
#sidebartop a:visited {
color: $topSidebarVisitedLinkColor;
}
/* Sidebar Boxes
----------------------------------------------- */

.sidebar .widget {
margin:.5em 13px 1.25em;
padding:0 0px;
}

.widget-content {
margin-top: 0.5em;
}

#sidebarbottom-wrap1 {
background: $topSidebarBgColor;
margin:0 0 15px;
padding:10px 0 0;
color: $mainTextColor;
}

#sidebarbottom-wrap2 {
padding:0 0 8px;
}

.sidebar h2 {
margin:0;
padding:0 0 .2em;
line-height:1.5em;
font:$headerFont;
}

.sidebar ul {
list-style:none;
margin:0 0 1.25em;
padding:0;
}

.sidebar ul li {
background:url("http://www2.blogblog.com/rounders/icon_arrow_sm.gif") no-repeat 2px .25em;
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:3px;
padding-$startSide:16px;
margin-bottom:3px;
border-bottom:0px dotted $borderColor;
line-height:1.4em;
}
.sidebar p {
margin:0 0 .6em;
}

#sidebar h2 {
color: $postTitleColor;
border-bottom: 0px dotted $postTitleColor;
}

/* Footer
----------------------------------------------- */
#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}
#footer-wrap2 {
background:$titleBgColor;
color:$footerTextColor;
}
#footer {
padding:8px 15px;
}
#footer hr {display:none;}
#footer p {margin:0;}
#footer a {color:$footerTextColor;}
#footer .widget-content {
margin:0;
}
#custom-footer {
color:$footerTextColor;
text-align: center;
}
#custom-footer a {
color:$footerTextColor;
text-decoration: none;
}

/** Page structure tweaks for layout editor wireframe */
body#layout #main-wrap1,
body#layout #sidebar-wrap,
body#layout #header-wrapper {
margin-top: 0;
}

body#layout #header, body#layout #header-wrapper,
body#layout #outer-wrapper {
margin-$startSide:0,
margin-$endSide: 0;
padding: 0;
}

body#layout #outer-wrapper {
width: 730px;
}

body#layout #footer-wrap1 {
padding-top: 0;
}

#navbar {
display: none;
}

Special credit goes to the Blogger team for the original Rounders template.

e.Guidebook

Customizing Blogger/Blogspot - Final touches

No comments:

About e.Guidebook

Friends of e.Guidebook

Search e.Guidebook

Current Project

Topics

Blog Archive