HTML Forum

**internet** · 12-24-2009, 11:26 PM

Hey guys first post, need some help... I run a blog site called blitzfeed.blogspot.com... however i get the blog templates off a website... and im guessing alot of the stuff on their is streaming such as backgrounds. Im trying to change the background to www.blitzfeedmusic.blogspot.com... I do all the graphics myself with photoshop... and I want to enter my own background in the blog using a URL... My only problem is i know the code is like body background= url... but it isnt showing up because I think i have to delete some of the other code for it to work.. Below is the code and the html to an example background I want to use.. it will change eventually just using this as an example because it was quick and easy http://img94.imageshack.us/img94/107/92443109.jpg... how do i make that image the background to my site? could someone maybe bolden the code i need to delete and what html I need to insert and where for it to show up? Thanks!.. well the code makes my post to long.. if you can go to the website and view the source for me that would be great!.. or ill just post the code in another post

**internet** · 12-24-2009, 11:27 PM

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/><title><data:blog.pageTitle/></title>
</b:if>
<b:skin><![CDATA[
/* ************ START OF CSS STYLING ************ */
/* -----------------------------------------------------------------------
Blogger Template Design: ProBlogger Template
Design by: Ourblogtemplates.com
Terms of Use: Free template with credit linked to Ourblogtemplates.com
----------------------------------------------------------------------- */

/* Variable definitions
========================
<Variable name="bodybgColor" description="Body Background Color"
type="color" default="#FFBBE8" value="#333333">
<Variable name="blogframeColor" description="Blog Background Color"
type="color" default="#800040" value="#000000">
<Variable name="blogBorderColor" description="Blog Border Color"
type="color" default="#FFCC33" value="#FFCC33">
<Variable name="headerbgColor" description="Header Background Color"
type="color" default="#ffffff" value="#333333">
<Variable name="headerBorderColor" description="Header Border Color"
type="color" default="#800040" value="#333333">
<Variable name="blogTitleColor" description="Blog Title Color"
type="color" default="#800040" value="#ffffff">
<Variable name="blogDescriptionColor" description="Blog Description Color"
type="color" default="#800040" value="#000000">

<Variable name="linkbarbgColor" description="Linkbar Background Color"
type="color" default="#C94093" value="#000000">
<Variable name="linkbarmainBorderColor" description="Linkbar Main Border Color"
type="color" default="#C94093" value="#000000">
<Variable name="linkbarBorderColor" description="Linkbar Border Color"
type="color" default="#9D1961" value="#000000">
<Variable name="linkbarTextColor" description="Linkbar Text Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="linkbarHoverBgColor" description="Linkbar Hover Background Color"
type="color" default="#ffffff" value="#000000">
<Variable name="linkbarHoverTextColor" description="Linkbar Hover Text Color"
type="color" default="#9D1961" value="#999999">
<Variable name="middlebarbgColor" description="Middlebar Background Color"
type="color" default="#ffffff" value="#000000">
<Variable name="contentbgColor" description="Content Background Color"
type="color" default="#ffffff" value="#333333">
<Variable name="contentBorderColor" description="Content Border Color"
type="color" default="#9D1961" value="#191919">
<Variable name="postbgColor" description="Post Background Color"
type="color" default="#ffffff" value="#000000">
<Variable name="postBorderColor" description="Post Border Color"
type="color" default="#ffffff" value="#191919">
<Variable name="postTitleColor" description="Post Title Color"
type="color" default="#000000" value="#ffffff">
<Variable name="posttitlebgColor" description="Post Title Background Color"
type="color" default="#000000" value="#e1771e">
<Variable name="posttitleBorderColor" description="Post Title Border Color"
type="color" default="#000000" value="#ffffff">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#000000" value="#666666">
<Variable name="textColor" description="Text Color"
type="color" default="#191919" value="#999999">
<Variable name="mainLinkColor" description="Main Link Color"
type="color" default="#333333" value="#cccccc">
<Variable name="mainHoverLinkColor" description="Main Hover Link Color"
type="color" default="#9D1961" value="#ffffff">
<Variable name="mainVisitedLinkColor" description="Main Visited Link Color"
type="color" default="#9D1961" value="#cccccc">
<Variable name="blockquotebgColor" description="Blockquote Background Color"
type="color" default="#191919" value="#000000">
<Variable name="blockquoteBorderColor" description="Blockquote Border Color"
type="color" default="#191919" value="#000000">
<Variable name="blockQuoteColor" description="Blockquote Color"
type="color" default="#191919" value="#999999">
<Variable name="codeTextColor" description="Code Text Color"
type="color" default="#660000" value="#999999">
<Variable name="imagebgColor" description="Photo Background Color"
type="color" default="#f5f5f5" value="#191919">
<Variable name="imageBorderColor" description="Photo Border Color"
type="color" default="#f5f5f5" value="#333333">

<Variable name="postfooterBgColor" description="Postfooter Background Color"
type="color" default="#b8659C" value="#191919">
<Variable name="postfooterBorderColor" description="Postfooter Border Color"
type="color" default="#b8659C" value="#222222">
<Variable name="postfooterTextColor" description="Postfooter Text Color"
type="color" default="#b8659C" value="#7f7f7f">
<Variable name="postfooterLinkColor" description="Postfooter Link Color"
type="color" default="#b8659C" value="#7f7f7f">
<Variable name="commentTabLinkColor" description="Comment Tab Link Color"
type="color" default="#b8659C" value="#7f7f7f">
<Variable name="feedlinksColor" description="Feed Links Color"
type="color" default="#9D1961" value="#7f7f7f">

<Variable name="sidebar1bgColor" description="Sidebar1 Background Color"
type="color" default="#FFBBE8" value="#000000">
<Variable name="sidebar1BorderColor" description="Sidebar1 Border Color"
type="color" default="#C94093" value="#191919">
<Variable name="sidebar1HeaderBgColor" description="Sidebar1 Header Background Color"
type="color" default="#ffffff" value="#000000">
<Variable name="sidebar1HeaderBorderColor" description="Sidebar1 Header Border Color"
type="color" default="#C94093" value="#cc0000">
<Variable name="sidebar1HeaderColor" description="Sidebar1 Header Color"
type="color" default="#000000" value="#cccccc">
<Variable name="sidebar1TextColor" description="Sidebar1 Text Color"
type="color" default="#9D1961" value="#808080">
<Variable name="sidebar1LinkColor" description="Sidebar1 Link Color"
type="color" default="#9D1961" value="#808080">
<Variable name="sidebar1HoverLinkColor" description="Sidebar1 Hover Link Color"
type="color" default="#000000" value="#ffffff">
<Variable name="sidebar1VisitedLinkColor" description="Sidebar1 Visited Link Color"
type="color" default="#000000" value="#808080">
<Variable name="sidebarListLineColor" description="Sidebar List Line Color"
type="color" default="#000000" value="#ffffff">
<Variable name="profileBorderColor" description="Profile Border Color"
type="color" default="#000000" value="#cccccc">

<Variable name="lowerbarbgColor" description="Lowerbar Background Color"
type="color" default="#ffffff" value="#cccccc">
<Variable name="lowerbarBorderColor" description="Lowerbar Border Color"
type="color" default="#C94093" value="#cccccc">
<Variable name="sublowerbarbgColor" description="Sublowerbar Background Color"
type="color" default="#ffffff" value="#e6e6e6">
<Variable name="sublowerbarBorderColor" description="Sublowerbar Border Color"
type="color" default="#C94093" value="#b3b3b3">
<Variable name="lowerbarHeaderColor" description="Lowerbar Header Color"
type="color" default="#000000" value="#cccccc">
<Variable name="lowerbarTitleBgColor" description="Lowerbar Header Background Color"
type="color" default="#C94093" value="#191919">
<Variable name="lowerbarTextColor" description="Lowerbar Text Color"
type="color" default="#9D1961" value="#333333">
<Variable name="lowerbarLinkColor" description="Lowerbar Link Color"
type="color" default="#9D1961" value="#333333">
<Variable name="lowerbarHoverLinkColor" description="Lowerbar Hover Link Color"
type="color" default="#000000" value="#000000">
<Variable name="lowerbarVisitedLinkColor" description="Lowerbar Visited Link Color"
type="color" default="#000000" value="#333333">
<Variable name="lowerbarListLineColor" description="Lowerbar List Line Color"
type="color" default="#000000" value="#d5cDc3">

<Variable name="commentbgColor" description="Comment Background Color"
type="color" default="#9D1961" value="#000000">
<Variable name="commentBorderColor" description="Comment Border Color"
type="color" default="#C94093" value="#000000">
<Variable name="commentboxBgColor" description="Comment Box Background Color"
type="color" default="#9D1961" value="#000000">
<Variable name="commentboxBorderColor" description="Comment Box Border Color"
type="color" default="#C94093" value="#000000">
<Variable name="commentTitleColor" description="Comment Header Color"
type="color" default="#000000" value="#cccccc">
<Variable name="commentauthorBgColor" description="Comment Author Background Color"
type="color" default="#9D1961" value="#191919">
<Variable name="commentauthorColor" description="Comment Author Color"
type="color" default="#9D1961" value="#cccccc">
<Variable name="commentTimeStampColor" description="Comment Timestamp Color"
type="color" default="#C94093" value="#7f7f7f">
<Variable name="commentTextColor" description="Comment Text Color"
type="color" default="#4c4c4c" value="#808080">

<Variable name="footerbgColor" description="Footer Background Color"
type="color" default="#ffffff" value="#000000">
<Variable name="footerBorderColor" description="Footer Border Color"
type="color" default="#000000" value="#000000">
<Variable name="footerHeaderColor" description="Footer Header Color"
type="color" default="#000000" value="#cccccc">
<Variable name="footerTextColor" description="Footer Text Color"
type="color" default="#C94093" value="#cccccc">
<Variable name="footerLinkColor" description="Footer Link Color"
type="color" default="#C94093" value="#cccccc">
<Variable name="footerHoverLinkColor" description="Footer Hover Link Color"
type="color" default="#C94093" value="#ffffff">
<Variable name="footerVisitedLinkColor" description="Footer Visited Link Color"
type="color" default="#C94093" value="#cccccc">

<Variable name="blogTitleFont" description="Blog Title Font"
type="font"
default="normal bold 273% Georgia, Times, serif"
value="normal bold 184% Times, serif">
<Variable name="blogDescriptionFont" description="Blog Description Font"
type="font"
default="normal normal 104% georgia,helvetica,verdana,Georgia, serif"
value="normal normal 108% Georgia, Times, serif">
<Variable name="linkbarTextFont" description="Linkbar Text Font"
type="font"
default="normal normal 77% Verdana, sans-serif"
value="normal bold 72% Verdana, sans-serif">
<Variable name="postTitleFont" description="Post Title Font"
type="font"
default="normal bold 180% Georgia, Times, serif"
value="normal normal 155% Times, serif">
<Variable name="dateHeaderFont" description="Date Header Font"
type="font"
default="normal bold 117% Arial, sans-serif"
value="normal normal 85% Georgia, Times, serif">
<Variable name="textFont" description="Text Font"
type="font"
default="normal normal 90% Arial, sans-serif"
value="normal normal 80% Arial, sans-serif">
<Variable name="quoteFont" description="Blog Quote Font"
type="font"
default="normal normal 92% helvetica,tahoma,verdana,arial,times,Sans-serif"
value="italic normal 105% Arial, sans-serif">
<Variable name="sidebarHeaderFont" description="Sidebar Title Font"
type="font"
default="normal bold 117% Arial, sans-serif"
value="normal bold 96% Verdana, sans-serif">
<Variable name="sidebarTextFont" description="Sidebar Text Font"
type="font"
default="normal normal 78% Arial, Verdana, sans-serif"
value="normal normal 74% Arial, sans-serif">
<Variable name="postfooterTextFont" description="Post-Footer Text Font"
type="font"
default="normal normal 93% Arial, sans-serif"
value="normal normal 89% Arial, sans-serif">
<Variable name="commentTitleFont" description="Comment Title Font"
type="font"
default="normal bold 120% Arial, sans-serif"
value="normal bold 124% Times, serif">
<Variable name="commentTextFont" description="Comment Text Font"
type="font"
default="normal normal 95% Arial, sans-serif"
value="normal normal 101% Arial, sans-serif">
<Variable name="footerHeaderFont" description="Footer Header Font"
type="font"
default="normal bold 131% Trebuchet, Trebuchet MS, Arial, sans-serif"
value="normal normal 113% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="footerTextFont" description="Footer Text Font"
type="font"
default="normal normal 76% Trebuchet, Trebuchet MS, Arial, sans-serif"
value="normal normal 79% Trebuchet, Trebuchet MS, Arial, sans-serif">
*/

/* ----- GLOBAL ----- Blogger template design by Ourblogtemplates.com */
* {margin:0; padding:0;}
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background: $bodybgColor url() repeat top right;
/* background-attachment: fixed; */
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}
#outer-wrapper {
margin: 0 auto; /* auto - to make the template lay in the screen center */
padding: 0px 0px 0px 0px;
margin-top: 0px;
margin-bottom: 15px;
position: relative;
width: 100%;
text-align: center;
}
#blog-wrapper {
margin: 0 auto; /* auto - to make the template lay in the screen center */
padding: 7px;
margin-top: 0px;
margin-bottom: 15px;
text-align: center;
position: relative;
width: 980px;
background: $blogframeColor;
border: 3px solid $blogBorderColor;
}
#spacer {clear: both; margin: 0; padding: 0;}
/* global link attributes */
a {color: $mainLinkColor; text-decoration: underline;}
a:hover {color: $mainHoverLinkColor; text-decoration: underline;}
a:visited {color: $mainVisitedLinkColor; text-decoration: underline;}
/* Blogger Navigation Bar */
#Navbar1 {
margin: 0;
padding: 0;
visibility: hidden;
display: none;
}

/* ----- TOP ADS ----- Blogger template design by Ourblogtemplates.com */
#topads-wrapper {
margin: 0;
padding: 0;
position: relative;
text-align: center;
width: 100%;
}
#topads {margin: 0; padding: 0;}
#topads .widget {margin: 0; padding: 5px 0;}

/* ----- HEADER ----- Blogger template design by Ourblogtemplates.com */
#header-wrapper {
margin: 7px 0px 7px 0px;
padding: 4px;
width: 970px;
background: $headerbgColor;
border: 1px solid $headerBorderColor;
}
#header {
width: 970px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}
#header h1 {
color: $blogTitleColor;
font: $blogTitleFont;
font-variant: small-caps;
margin: 0px 0px 0px 0px;
padding: 70px 20px 0px 20px;
}
#header h1 a {
text-decoration: none;
color: $blogTitleColor;
}
#header h1 a:hover {
text-decoration: underline;
color: $blogDescriptionColor;
}
#header .description {
color: $blogDescriptionColor;
font: $blogDescriptionFont;
margin: 0px 0px 0px 0px;
padding: 5px 20px 25px 20px;
}
#header h1 p, #header .description p {margin:0;padding:0}
#header a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0;
}

/* ----- LINKBAR ----- Blogger template design by Ourblogtemplates.com */
#linkbar-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 978px;
position: relative;
background: $linkbarbgColor;
border: 1px solid $linkbarmainBorderColor;
}
#linkbar .widget {
margin: 0px 0px 0px 0px;
padding: 4px 0px 7px 0px;
text-align: left;
}
#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type:none;
}
#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}
#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 7px 10px 7px 10px;
width:100%;
text-decoration:none;
font: $linkbarTextFont;
color: $linkbarTextColor;
text-transform: uppercase;
border-right: 1px solid $linkbarBorderColor;
border-left: 0px solid $linkbarBorderColor;
}
#linkbar a:hover {
color: $linkbarHoverTextColor;
background: $linkbarHoverBgColor;
}

/* ----- MIDDLE ADS ----- Blogger template design by Ourblogtemplates.com */
#middleads-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 980px;
position: relative;
text-align: center;
}
#middleads, #middleads2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
/* background: $middlebarbgColor;
border-top: 1px solid $contentBorderColor;
border-left: 1px solid $contentBorderColor;
border-right: 1px solid $contentBorderColor; */
}
#middleads .widget, #middleads2 .widget {
margin: 0;
padding: 10px 0;
}
/* ----- MAIN ----- Blogger template design by Ourblogtemplates.com */
#content-wrapper {
width: 978px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: relative;
text-align: left;
background: $contentbgColor;
border: 1px solid $contentBorderColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main-wrapper {
float: left;
width: 486px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main {
width: 476px;
margin: 4px;
padding: 20px 0 0 0;
color: $textColor;
font: $textFont;
background: $postbgColor;
border: 1px solid $postBorderColor;
}
#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}
.post {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.6em;
text-align: justify;
}
.post h3 {
margin: 0px 0px 20px 0px;
padding: 0px 0px 2px 0px;
color: $postTitleColor;
font: $postTitleFont;
text-decoration: none;
text-align: left;
line-height: 1.4em;
/* text-transform: uppercase; */
border-bottom: 2px solid $posttitleBorderColor;
}
.post h3 a, .post h3 a:visited {
color: $postTitleColor;
text-decoration: none;
}
.post h3 a:hover {
color: $dateHeaderColor;
text-decoration: none;
}
.post-header-line-1 {
}
h2.date-header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 7px 0px;
text-align: left;
color: $dateHeaderColor;
font: $dateHeaderFont;
text-decoration: none;
text-transform: uppercase;
}
.date-header span {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.post-body p {
/* Fix bug in IE5/Win with italics in posts */
margin: 0px 0px 0px 0px;
padding: 1px 0px 1px 0px;
display: inline; /* to fix floating-ads wrapping problem in IE */
height: 1%;
overflow: visible;
}
.post-body p a, .post-body p a:visited {
color: $mainLinkColor;
text-decoration: underline;
}
.post-body a:hover {
text-decoration: underline;
color: $mainHoverLinkColor;
}
.post ul {
margin: 0px 0px 0px 0px;
padding: 12px 0px 12px 30px;
list-style-type: disc;
line-height: 1.6em;
font-size: 95%;
}
.post ol {
margin: 0px 0px 0px 0px;
padding: 12px 0px 12px 30px;
line-height: 1.6em;
font-size: 95%;
}
.post li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 8px 0px;
}
a img {
margin: 5px 5px 5px 5px;
padding: 0px 0px 0px 0px;
}
.post img {
margin: 0px;
padding: 5px;
background: $imagebgColor;
border: 1px solid $imageBorderColor;
}
/* ----- POST-FOOTER ----- Blogger template design by Ourblogtemplates.com */

.post-footer {
display: block;
margin: 15px 0px 25px 0px;
padding: 7px 20px 7px 20px;
text-align: left;
font: $postfooterTextFont;
color: $postfooterTextColor;
font-weight: normal;
line-height: 1.6em;
text-decoration: none;
background: $postfooterBgColor;
border: 1px solid $postfooterBorderColor;
}
.post-footer-line {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.post-footer-line-1, .post-footer-line-2, .post-footer-line-3 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.post-footer a {
color: $postfooterLinkColor;
text-decoration: none;
}
.post-footer a:hover {
color: $mainHoverLinkColor;
text-decoration: underline;
}
.post-footer .post-comment-link a {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $commentTabLinkColor;
font-weight: normal;
text-decoration: none;
}
.post-footer .post-comment-link a:hover {
color: $mainHoverLinkColor;
text-decoration: underline;
}
.post-footer .post-icons {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.post-footer img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
background: $postfooterBgColor;
}
#blog-pager {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
text-align: center;
font: $postfooterTextFont;
color: $feedlinksColor;
}
#blog-pager a {color: $feedlinksColor}
#blog-pager a:hover {color: $mainHoverLinkColor}
#blog-pager-newer-link {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#blog-pager-older-link {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.feed-links {
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
clear: both;
text-align: left;
font: $postfooterTextFont;
color: $feedlinksColor;
}
.feed-links a, .feed-links a:visited {color: $feedlinksColor}
.feed-links a:hover {color: $mainHoverLinkColor}

/* ----- BLOCKQUOTE ----- */
blockquote {
margin: 10px 0px 10px 15px;
padding: 10px 15px 10px 15px;
font: $quoteFont;
line-height: 1.6em;
color: $blockQuoteColor;
background: $blockquotebgColor;
border: 2px solid $blockquoteBorderColor;
}

/* ----- CODE ----- */
code {
color: $codeTextColor;
font-size: 110%;
}

**internet** · 12-24-2009, 11:27 PM

/* ----- SIDEBAR ----- Blogger template design by Ourblogtemplates.com */
#side-wrapper1 {
width: 156px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#side-wrapper2 {
width: 336px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#side-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.sidebar {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
font: $sidebarTextFont;
}
#sidebar1 {
width: 152px;
margin: 4px 4px 0px 0px;
padding: 0px 0px 0px 0px;
color: $sidebar1TextColor;
line-height: 1.8em;
}
#sidebar2 {
width: 332px;
margin: 4px 4px 0px 0px;
padding: 0px 0px 0px 0px;
color: $sidebar1TextColor;
line-height: 1.8em;
}
#sidebar3 {
width: 164px;
margin: 0px 4px 0px 0px;
padding: 0px 0px 0px 0px;
color: $sidebar1TextColor;
line-height: 1.8em;
}
#sidebar4 {
width: 164px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $sidebar1TextColor;
line-height: 1.8em;
}
#sidebar1 .widget {
margin: 0px 0px 4px 0px;
padding: 15px 15px 15px 15px;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;
}
#sidebar2 .widget {
margin: 0px 0px 4px 0px;
padding: 15px 15px 15px 15px;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;
}
#sidebar3 .widget, #sidebar4 .widget {
margin: 0px 0px 4px 0px;
padding: 15px 15px 15px 15px;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;
}
/* sidebar heading ----- Blogger template design by Ourblogtemplates.com */
#sidebar1 h2, #sidebar2 h2, #sidebar3 h2, #sidebar4 h2 {
margin: -15px -15px 10px -15px;
padding: 5px 15px 5px 15px;
text-align: left;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: uppercase;
text-decoration: none;
background: $sidebar1HeaderBgColor;
border-bottom: 1px solid $sidebar1BorderColor;
}
.sidebar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.sidebar li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.8em;
list-style-type: none;
border-bottom: 0px solid $sidebarListLineColor;
}
#sidebar1 a, #sidebar2 a, #sidebar3 a , #sidebar4 a {
color: $sidebar1LinkColor;
text-decoration: none;
}
#sidebar1 a:hover, #sidebar2 a:hover, #sidebar3 a:hover, #sidebar4 a:hover {
text-decoration: none;
color: $sidebar1HoverLinkColor;
}
#sidebar1 a:visited, #sidebar2 a:visited, #sidebar3 a:visited, #sidebar4 a:visited {
text-decoration: none;
color: $sidebar1VisitedLinkColor;
}
.sidebar a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid $profileBorderColor;
}

/* ----- PROFILE ----- Blogger template design by Ourblogtemplates.com */
.profile-img {
margin: 7px;
padding: 0px;
border: 1px solid $sidebarListLineColor;
}
.profile-textblock {
margin: 0px 0px 0px 0px;
padding: 3px 0px 3px 0px;
clear: both;
line-height: 1.6em;
/* border-top: 1px solid $sidebarListLineColor;
border-bottom: 1px solid $sidebarListLineColor; */
}
.profile-datablock {
margin: 2px 0px 5px 0px;
padding: 0px 0px 0px 0px;
}
.profile-data {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-weight: normal;
font-style: italic;
}
.profile-link {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

/* ----- COMMENT ----- Blogger template design by Ourblogtemplates.com */
#comments {
margin: 0px 0px 0px 0px;
padding: 0px 0px 20px 0px;
text-align: left;
color: $commentTextColor;
font: $commentTextFont;
}
.comments-singleblock {
margin: 15px 0px 15px 0px;
padding: 15px;
background: $commentboxBgColor;
border: 1px solid $commentboxBorderColor;
}
/* comment-header */
#comments h4 {
margin: 20px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $commentTitleColor;
font: $commentTitleFont;
text-transform: uppercase;
}
.deleted-comment {
font-style:italic;
color:gray;
margin: 5px 0px 5px 0px;
}
.comment-author {
margin: -15px -15px 0px -15px;
padding: 5px 15px 5px 15px;
color: $commentauthorColor;
font-weight: normal;
background: $commentauthorBgColor;
border-bottom: 1px solid $commentboxBorderColor;
}
.comment-author a {color: $commentauthorColor; text-decoration: none;}
.comment-author a:hover {color: $commentTimeStampColor; text-decoration: underline;}
.comment-author a:visited {color: $commentauthorColor; text-decoration: none;}
.comment-body {margin: 0; padding: 10px 0px 0px 30px;}
.comment-body p {margin: 0; padding: 0; line-height: 1.6em;}
.comment-footer, .comment-footer a {margin: 0px 0px 0px 0px; padding: 4px 0px 0px 0px;}
.comment-timestamp {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $commentTimeStampColor;
}
.comment-timestamp a {
color: $commentTimeStampColor;
text-decoration: none;
}
.comment-timestamp a:hover {color: $commentauthorColor; text-decoration: underline;}
#comments ul {margin: 0; padding: 0; list-style-type: none;}
#comments li {margin: 0; padding: 0;}
a.comment-link {
/* ie5.0/win doesn't apply padding to inline elements,
so we hide these two declarations from it */
padding: 0px 0px 0px 0px;
}
html>body a.comment-link {
/* respecified, for ie5/mac's benefit */
padding-left: 0px;
}
#backlinks-container {margin-top: 30px}

/* ----- LOWER SECTION ----- Blogger template design by Ourblogtemplates.com */
#lower-wrapper {
margin: 7px 0px 7px 0px;
padding: 4px 0px 0px 0px;
width: 978px;
font: $sidebarTextFont;
color: $lowerbarTextColor;
background: $lowerbarbgColor;
border: 1px solid $lowerbarBorderColor;
}
#lowerbar-wrapper {
float: left;
margin: 0px 0px 0px 4px;
padding: 0px 0px 0px 0px;
width: 320px;
text-align: left;
line-height: 1.8em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#lowerads-wrapper {
float: left;
margin: 0px 0px 0px 4px;
padding: 0px 0px 0px 0px;
width: 100%;
text-align: center;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.lowerbar .widget {
margin: 0 0 4px 0;
padding: 20px 20px 20px 20px;
border: 1px solid $sublowerbarBorderColor;
background: $sublowerbarbgColor;
}
.lowerbar {margin: 0; padding: 0;}
.lowerads {margin: 0; padding: 0;}
.lowerads .widget {margin: 0; padding: 10px 0px 10px 0px;}
.lowerbar h2 {
margin: -20px -20px 10px -20px;
padding: 5px 20px 5px 20px;
color: $lowerbarHeaderColor;
font: $sidebarHeaderFont;
text-align: left;
text-transform: uppercase;
background: $lowerbarTitleBgColor;
border-bottom: 1px solid $sublowerbarBorderColor;
}
.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.lowerbar li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.8em;
list-style-type: none;
border-bottom: 0px solid $lowerbarListLineColor;
}
.lowerbar a {color: $lowerbarLinkColor; text-decoration: none;}
.lowerbar a:hover {text-decoration: underline; color: $lowerbarHoverLinkColor;}
.lowerbar a:visited {text-decoration: none; color: $lowerbarVisitedLinkColor;}

/* ----- FOOTER ----- Blogger template design by Ourblogtemplates.com */
#footer-wrapper {
clear: both;
display: inline; /* handles IE margin bug */
float: left;
width: 980px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#footer {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
width: 978px;
text-align: left;
color: $footerTextColor;
font: $footerTextFont;
line-height: 1.6em;
background: $footerbgColor;
border: 1px solid $footerBorderColor;
}
#footer h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
color: $footerHeaderColor;
font: $footerHeaderFont;
}
#footer .widget {
margin: 0px 0px 0px 0px;
padding: 0px 20px 20px 20px;
}
.footer p {margin: 0; padding: 0}
.footer a {
color: $footerLinkColor;
text-decoration: none;
}
.footer a:hover {
color: $footerHoverLinkColor;
text-decoration: underline;
}
.footer a:visited {
color: $footerVisitedLinkColor;
text-decoration: none;
}

/* ----- BOTTOM ADS ----- Blogger template design by Ourblogtemplates.com */
#bottomads-wrapper {
margin: 0;
padding: 0;
position: relative;
text-align: center;
width: 100%;
}
#bottomads {margin: 0; padding: 10px 0;}
#bottomads .widget {margin: 0; padding: 5px 0;}

/* ----- CREDIT ----- */
#credit {
margin: 0px 0px 0px 0px;
padding: 2px 0px 0px 0px;
width: 100%;
height: 26px;
clear: both;
font-family: verdana, helvetica;
font-size: 70%;
color: #444444;
font-weight: normal;
background: #777777;
}
#creditleft {
margin: 0px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: left;
text-align: left;
display: inline;
width: 71%;
background: #ffffff;
}
#creditright {
margin: -33px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: right;
text-align:right;
display: inline;
width: 30%;
background: #ffffff;
}
#creditleft p {
margin: 0;
padding: 0
}
#creditright p {
margin: 0;
padding: 0
}
#creditleft a, .creditleft a:hover, .creditleft a:visited {
color: #444444;
text-decoration: underline;
}
#creditright a, .creditright a:hover, .creditright a:visited {
color: #444444;
text-decoration: underline;
}

/* ************ END OF CSS STYLING ************ */

/** Page structure tweaks for layout editor wireframe */
body#layout #main,
body#layout #sidebar {
padding: 0;
}
]]></b:skin>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost&quot

{
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink&quot

spans[i].style.display = 'none';
if (spans[i].id == "hidelink&quot

spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost&quot

{
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink&quot

spans[i].style.display = 'inline';
if (spans[i].id == "hidelink&quot

spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost&quot

{
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink&quot

&& (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>
</head>
<body>
<div id='outer-wrapper'>

<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<div id='topads-wrapper'>
<b:section class='topads' id='topads' preferred='yes'>
<b:widget id='Image1' locked='false' title='' type='Image'/>
</b:section>
</div>
<div style='clear: both;'/>
<div id='blog-wrapper'>
<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='' type='LinkList'/>
</b:section>
</div>
<div style='clear: both;'/>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Music| BlitzFeed (Header)' type='Header'/>
</b:section>
</div>
<div style='clear: both;'/>
<div id='middleads-wrapper'>
<b:section class='middleads' id='middleads' preferred='yes'>
<b:widget id='HTML4' locked='false' title='BlitzFeed Categories' type='HTML'/>
</b:section>
</div>
<div style='clear: both;'/>
<div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='side-wrapper1'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Label1' locked='false' title='Music Artists' type='Label'/>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
</b:section>
</div>
<div id='side-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML5' locked='false' title='BlitzFeed Playlist' type='HTML'/>
<b:widget id='HTML1' locked='false' title='Music Video Rank' type='HTML'/>
<b:widget id='Feed8' locked='false' title='Free Movies: BlitzFeed' type='Feed'/>
<b:widget id='Feed7' locked='false' title='latest backgrounds| BlitzFeed' type='Feed'/>
<b:widget id='AdSense3' locked='false' title='' type='AdSense'/>
<b:widget id='Feed11' locked='false' title='Political Videos| BlitzFeed' type='Feed'/>
<b:widget id='Feed9' locked='false' title='Middle East| BlitzFeed' type='Feed'/>
<b:widget id='Feed10' locked='false' title='Asian News| BlitzFeed' type='Feed'/>
<b:widget id='Feed12' locked='false' title='Entertainment News| BlitzFeed' type='Feed'/>
</b:section>
<div style='clear: both;'/>
<div id='side-wrapper'>
<b:section class='sidebar' id='sidebar3' preferred='yes'/>
</div>
<div id='side-wrapper'>
<b:section class='sidebar' id='sidebar4' preferred='yes'/>
</div>
<div style='clear: both;'/>
</div> 

<div style='clear: both;'/>
</div> 
<div id='middleads-wrapper'>
<b:section class='middleads2' id='middleads2' preferred='yes'/>
</div>
<div style='clear: both;'/>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
<b:widget id='Feed5' locked='false' title='SI.com Top Sport Stories' type='Feed'/>
<b:widget id='Feed1' locked='false' title='U.S. News |CNN|' type='Feed'/>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
<b:widget id='Feed4' locked='false' title='Entertainment News |CNN|' type='Feed'/>
<b:widget id='Feed2' locked='false' title='World News |CNN|' type='Feed'/>
</b:section>
</div>
<div style='clear: both;'/>
<div id='lowerads-wrapper'>
<b:section class='lowerads' id='lowerads' preferred='yes'/>
</div>
<div style='clear: both;'/>
</div> 
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='Disclaimer' type='Text'/>
</b:section>
</div>
<div style='clear: both;'/>
</div> 
<div id='bottomads-wrapper'>
<b:section class='bottomads' id='bottomads' preferred='yes'/>
</div>
</div> 

<div id='credit'>
<div id='creditleft'>
<p><b> © <a href='http://www.ourblogtemplates.com/'>Blogger templates</a> <i>ProBlogger Template</i> by <a href='http://www.ourblogtemplates.com/'>Ourblogtemplates.com</a> 2008</b></p>
</div>
<div id='creditright'>
<p><b>Back to <a href='#outer-wrapper'>TOP</a> </b></p>
</div>
</div> 
</body>
</html>

**beta** · 12-25-2009, 09:20 PM

What an awesome username! I can't believe it was available!!

**okeindy** · 12-29-2009, 05:39 AM

May this can help you

1. You can upload the background file to free host site like http://photobucket.com/ or http://imageshack.us
2. Log in to Blogger
3. Go to Template then Edit HTML
4. Locate the ‘body’ CSS.
5. After the open parenthesis {, click enter to open a new line
6. add the background code like the line below in bold (remember to replace the domain name and directory with yours)
body {
background: url(”http://www.yourdomain.com/yourdir/xxx.jpg”) repeat;
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;
}
7. Save the template and view your blog.
The ‘repeat’ function tells blogger to repeat the background patten horizontally and vertically.
To repeat only horizontally, put ‘repeat-x’ or ‘repeat-y’ for only vertically.

**printrobin** · 12:27 AM

Step 1
Determine what background you want. Any image or texture or color can be a background; you just need to decide the theme and look you want.
Step 2
Decide on a photo or an image as your background. Save that photo or image to an easily accessible place on your computer. If your website files are in a particular folder, put your new image in that same folder, so that the web program knows where to find it when necessary.
Step 3
Open your web editing program.
Step 4
Locate the command string of text that looks like this: or . If you have a command that says "bgcolor=," then your web page is a solid color background. Take out that command, and replace it with "body background=."
Step 5
Add in the name of your image file right after the "=." This tells the web page to use that image as the background. You will likely see that image in a multiple, tiled format.
Step 6
Save those changes, and refresh your web page. The new image should now be your background.
Step 7
Explore all the websites that offer free background images, color codes and thematic variations, to add a unique twist to your page.

**Bless** · 01-11-2010, 03:43 AM

wow i never know you can do that

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!