Jump to content
✨ STAY UP TO DATE WITH THE WORLD TOUR ✨

CSS on my Blog HELP PLEASE

tauiwi

By tauiwi
in How We See The World

 Share

Recommended Posts

tauiwi

tauiwi

Posted
Posted

Hi, So have a music blog at theamarar.blogspot.com, and I want to do two things:

 

1. Make the background completely white

2. Widen the blog so it fits the entire screen - right now it only takes up the middle section. The RHS sidebar is an ok width, its just the blogging part I would like to widen.

 

Im terrible at CSS code, and have read through both

http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=46870

and

http://www.blogdoctor.me/2006/10/how-to-change-width-of-blog.html

but I still can't get it to work.

 

Is anyone able to help? Plus, if you're an expert, I can entrust someone to log in and fix the problems for me.

 

This will lead to the improvement and creation of an awesome, high quality music blog for all of you to enjoy!

 

Alex

Link to comment
Share on other sites
tauiwi

tauiwi

Posted
  • Author
Posted

<?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'/>

<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*

* Blogger Template Style

* Name: TicTac (Blueberry)

* Date: 1 March 2004

* Updated by: Blogger Team

*/

 

/* Variable definitions

====================

 

<Variable name="textcolor" description="Text Color"

type="color" default="#333" value="#333333">

 

<Variable name="pagetitlecolor" description="Page Header Color"

type="color" default="#FFF" value="#FFFFFF">

 

<Variable name="datecolor" description="Date Header Color"

type="color" default="#999999" value="#999999">

 

<Variable name="titlecolor" description="Post Title Color"

type="color" default="#993333" value="#993333">

 

<Variable name="footercolor" description="Post Footer Color"

type="color" default="#999" value="#999999">

 

<Variable name="sidebartextcolor" description="Sidebar Text Color"

type="color" default="#999" value="#999999">

 

<Variable name="sidebarcolor" description="Sidebar Title Color"

type="color" default="#666" value="#666666">

 

<Variable name="linkcolor" description="Link Color"

type="color" default="#69c" value="#6699cc">

 

<Variable name="visitedlinkcolor" description="Visited Link Color"

type="color" default="#666699" value="#666699">

 

<Variable name="bodyfont" description="Text Font"

type="font"

default="normal normal 100% Verdana, sans-serif" value="normal normal 100% Verdana, sans-serif">

 

<Variable name="pagetitlefont" description="Page Header Font"

type="font" default="normal normal 100% 'Lucida Grande','Trebuchet MS'" value="normal normal 100% 'Lucida Grande','Trebuchet MS'">

 

<Variable name="titlefont" description="Post Title Font"

type="font" default="normal bold 130% 'Lucida Grande','Trebuchet MS'" value="normal bold 130% 'Lucida Grande','Trebuchet MS'">

 

<Variable name="sidebarheaderfont" description="Sidebar Title Font"

type="font" default="normal bold 130% 'Lucida Grande','Trebuchet MS'" value="normal bold 130% 'Lucida Grande','Trebuchet MS'">

<Variable name="startSide" description="Start side in blog language"

type="automatic" default="left" value="left">

<Variable name="endSide" description="End side in blog language"

type="automatic" default="right" value="right">

*/

 

/* ---( page defaults )--- */

 

body {

margin: 0;

padding: 0;

font-size: small;

text-align: center;

color: $textcolor;

background: #e0e0e0;

}

 

blockquote {

margin-top: 0;

margin-$endSide: 0;

margin-bottom: 0;

margin-$startSide: 30px;

padding-top: 10px;

padding-$endSide: 0;

padding-bottom: 0;

padding-$startSide: 20px;

font-size: 88%;

line-height: 1.5em;

color: #666;

background: url(http://www.blogblog.com/tictac_blue/quotes.gif) no-repeat top $startSide;

}

 

blockquote p {

margin-top: 0;

}

 

abbr, acronym {

cursor: help;

font-style: normal;

border-bottom: 1px dotted;

}

 

code {

color: #996666;

}

 

hr {

display: none;

}

 

img {

border: none;

}

 

/* unordered list style */

 

ul {

list-style: none;

margin-$startSide: 10px;

padding: 0;

}

 

li {

list-style: none;

padding-$startSide: 14px;

margin-bottom: 3px;

background: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif) no-repeat $startSide 6px;

}

 

/* links */

 

a:link {

color: $linkcolor;

}

 

a:visited {

color: $visitedlinkcolor;

}

 

a:hover {

color: #5B739C;

}

 

a:active {

color: #5B739C;

text-decoration: none;

}

 

/* ---( layout structure )---*/

 

#outer-wrapper {

width: 847px;

margin: 0px auto 0;

text-align: $startSide;

font: $bodyfont;

background: url(http://www.blogblog.com/tictac_blue/tile_$startSide.gif) repeat-y;

}

 

#content-wrapper {

margin-$startSide: 42px; /* to avoid the border image */

width: 763px;

}

 

#main {

float: $startSide;

width: 460px;

margin-top: 20px;

margin-$endSide: 0;

margin-bottom: 0;

margin-$startSide: 0;

padding-top: 0;

padding-$endSide: 0;

padding-bottom: 0;

padding-$startSide: 1em;

line-height: 1.5em;

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 {

float: $endSide;

width: 259px;

padding-top: 20px;

padding-$endSide: 0px;

padding-bottom: 0;

padding-$startSide: 0;

font-size: 85%;

line-height: 1.4em;

color: $sidebartextcolor;

background: url(http://www.blogblog.com/tictac_blue/sidebar_bg.gif) no-repeat $startSide top;

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 */

}

 

 

/* ---( header and site name )--- */

 

#header-wrapper {

margin: 0;

padding: 0;

font: $pagetitlefont;

background: #e0e0e0 url(http://www.blogblog.com/tictac_blue/top_div_blue_$startSide.gif) no-repeat $startSide top;

}

 

#header {

margin: 0;

padding-top: 25px;

padding-$endSide: 60px;

padding-bottom: 35px;

padding-$startSide: 160px;

color: $pagetitlecolor;

background: url(http://www.blogblog.com/tictac_blue/top_h1.gif) no-repeat bottom $startSide;

}

 

#header h1 {

font-size: 200%;

text-shadow: #4F73B6 2px 2px 2px;

}

 

#header h1 a {

text-decoration: none;

color: $pagetitlecolor;

}

 

#header h1 a:hover {

color: #eee;

}

 

/* ---( main column )--- */

 

h2.date-header {

margin-top: 0;

padding-$startSide: 14px;

font-size: 90%;

color: $datecolor;

background: url(http://www.blogblog.com/tictac_blue/date_icon_blue.gif) no-repeat $startSide 50%;

}

 

.post h3 {

margin-top: 0;

font: $titlefont;

letter-spacing: -1px;

color: $titlecolor;

}

 

.post {

margin-top: 0;

margin-$endSide: 0;

margin-bottom: 1.5em;

margin-$startSide: 0;

padding-top: 0;

padding-$endSide: 0;

padding-bottom: 1.5em;

padding-$startSide: 14px;

border-bottom: 1px solid #ddd;

}

 

.post h3 a,

.post h3 a:visited {

color: $titlecolor;

text-decoration: none;

}

 

.post-footer {

margin: 0;

padding-top: 0;

padding-$endSide: 0;

padding-bottom: 0;

padding-$startSide: 14px;

font-size: 88%;

color: $footercolor;

background: url(http://www.blogblog.com/tictac_blue/tictac_grey.gif) no-repeat $startSide 8px;

}

 

.post img {

padding: 6px;

border-top: 1px solid #ddd;

border-$startSide: 1px solid #ddd;

border-bottom: 1px solid #c0c0c0;

border-$endSide: 1px solid #c0c0c0;

}

 

.feed-links {

clear: both;

line-height: 2.5em;

}

 

#blog-pager-newer-link {

float: $startSide;

}

 

#blog-pager-older-link {

float: $endSide;

}

 

#blog-pager {

text-align: center;

}

 

/* comment styles */

 

#comments {

padding: 10px 10px 0px 10px;

font-size: 85%;

line-height: 1.5em;

color: #666;

background: #eee url(http://www.blogblog.com/tictac_blue/comments_curve.gif) no-repeat top $startSide;

}

 

#comments h4 {

margin-top: 20px;

margin-$endSide: 0;

margin-bottom: 15px;

margin-$startSide: 0;

padding-top: 8px;

padding-$endSide: 0;

padding-bottom: 0;

padding-$startSide: 40px;

font-family: "Lucida Grande", "Trebuchet MS";

font-size: 130%;

color: #666;

background: url(http://www.blogblog.com/tictac_blue/bubbles.gif) no-repeat 10px 0;

height: 29px !important; /* for most browsers */

height /**/:37px; /* for IE5/Win */

}

 

#comments ul {

margin-$startSide: 0;

}

 

#comments li {

background: none;

padding-$startSide: 0;

}

 

.comment-body {

padding-top: 0;

padding-$endSide: 10px;

padding-bottom: 0;

padding-$startSide: 25px;

background: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif) no-repeat 10px 5px;

}

 

.comment-body p {

margin-bottom: 0;

}

 

.comment-author {

margin-top: 4px;

margin-$endSide: 0;

margin-bottom: 0;

margin-$startSide: 0;

padding-top: 0;

padding-$endSide: 10px;

padding-bottom: 0;

padding-$startSide: 60px;

color: #999;

background: url(http://www.blogblog.com/tictac_blue/comment_arrow_blue.gif) no-repeat 44px 2px;

}

 

.comment-footer {

border-bottom: 1px solid #ddd;

padding-bottom: 1em;

}

 

 

.deleted-comment {

font-style:italic;

color:gray;

}

 

/* ---( sidebar )--- */

 

.sidebar h2 {

margin-top: 0;

margin-$endSide: 0;

margin-bottom: 0;

margin-$startSide: 0;

padding-top: 25px;

padding-$endSide: 0;

padding-bottom: 0;

padding-$startSide: 40px;

font: $sidebarheaderfont;

color: $sidebarcolor;

height: 32px;

background: url(http://www.blogblog.com/tictac_blue/sidebar_icon.gif) no-repeat 10px 15px;

height: 32px !important; /* for most browsers */

height /**/:57px; /* for IE5/Win */

}

 

.sidebar .widget {

margin: 0;

padding-top: 0;

padding-$endSide: 0;

padding-bottom: 10px;

padding-$startSide: 10px;

border-bottom: 1px solid #ddd;

}

 

.sidebar li {

background: url(http://www.blogblog.com/tictac_blue/tictac_blue.gif) no-repeat $startSide 5px;

}

 

.profile-textblock {

clear: both;

margin-$startSide: 0;

}

 

.profile-img {

float: $startSide;

margin-top: 0;

margin-$endSide: 5px;

margin-bottom: 5px;

margin-$startSide: 0;

border: 1px solid #ddd;

padding: 4px;

}

 

/* ---( footer )--- */

 

.clear { /* to fix IE6 padding-top issue */

clear: both;

}

 

#footer-wrapper {

margin: 0;

padding-top: 0;

padding-$endSide: 0;

padding-bottom: 9px;

padding-$startSide: 0;

font-size: 85%;

color: #ddd;

background: url(http://www.blogblog.com/tictac_blue/bottom_sill.gif) no-repeat bottom $startSide;

}

 

#footer {

margin: 0;

padding-top: 20px;

padding-$endSide: 320px;

padding-bottom: 20px;

padding-$startSide: 95px;

background: url(http://www.blogblog.com/tictac_blue/bottom_sash_$startSide.gif) no-repeat top $startSide;

}

 

 

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper,

body#layout #main,

body#layout #sidebar {

padding-top: 0;

margin-top: 0;

}

 

body#layout #outer-wrapper,

body#layout #content-wrapper {

width: 740px;

}

 

body#layout #sidebar {

margin-$endSide: 0;

margin-bottom: 1em;

}

 

body#layout #header,

body#layout #footer,

body#layout #main {

padding: 0;

}

 

body#layout #content-wrapper {

margin: 0px;

}

]]></b:skin>

</head>

 

<body>

<div id='outer-wrapper'><div id='wrap2'>

 

<!-- skip links for text browsers -->

<span id='skiplinks' style='display:none;'>

<a href='#main'>skip to main </a> |

<a href='#sidebar'>skip to sidebar</a>

</span>

 

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='The Amarar (Header)' type='Header'/>

</b:section>

</div>

 

<div id='content-wrapper'>

 

<div id='crosscol-wrapper' style='text-align:center'>

<b:section class='crosscol' id='crosscol'/>

</div>

 

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

</div>

 

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Text4' locked='false' title='2010 Music Releases Reviews' type='Text'/>

<b:widget id='Text1' locked='false' title='Upcoming Live Music List' type='Text'/>

<b:widget id='Text2' locked='false' title='Previous Gigs' type='Text'/>

<b:widget id='HTML2' locked='false' title='Album of the week' type='HTML'/>

<b:widget id='HTML1' locked='false' title='Visitor Map' type='HTML'/>

<b:widget id='BlogList1' locked='false' title='My Blog List' type='BlogList'/>

<b:widget id='Text3' locked='false' title='Top 2009 Lists' type='Text'/>

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>

</b:section>

</div>

 

<!-- spacer for skins that want sidebar and main to be the same height-->

<div class='clear'> </div>

 

</div> <!-- end content-wrapper -->

 

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

 

</div></div> <!-- end outer-wrapper -->

</body>

</html>

Link to comment
Share on other sites
heartswarm

heartswarm

Posted
Posted

#outer-wrapper {

width: 847px;

margin: 0px auto 0;

text-align: $startSide;

font: $bodyfont;

background: url(http://www.blogblog.com/tictac_blue/tile_$startSide.gif) repeat-y;

}

 

#content-wrapper {

margin-$startSide: 42px; /* to avoid the border image */

width: 763px;

}

 

#main {

float: $startSide;

width: 460px;

margin-top: 20px;

margin-$endSide: 0;

margin-bottom: 0;

margin-$startSide: 0;

padding-top: 0;

padding-$endSide: 0;

padding-bottom: 0;

padding-$startSide: 1em;

line-height: 1.5em;

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 {

float: $endSide;

width: 259px;

padding-top: 20px;

padding-$endSide: 0px;

padding-bottom: 0;

padding-$startSide: 0;

font-size: 85%;

line-height: 1.4em;

color: $sidebartextcolor;

background: url(http://www.blogblog.com/tictac_blue/sidebar_bg.gif) no-repeat $startSide top;

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 */

 

 

 

to adjust the widths, adjust the width sizes highlighted above..make them larger.

 

 

 

body {

margin: 0;

padding: 0;

font-size: small;

text-align: center;

color: $textcolor;

background: #e0e0e0;

}

 

 

change the highlighted value above to change the color of the background.

 

let me know if it worked.

 

if you want it white:

 

background: #FFFFFF;

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing


×
×
  • Create New...