need a code

vungaralas · Joined: 11 Aug 2009 Posts: 2

Here i need a modification that ill explain in steps:
1. observe the below template which is 3-colomn

http://www.finalsense.com/services/blog_templates/butterfly_template.htm

code:

<?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 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: butterfly----- *Designer: J.aghili ----- * URL: www.finalsense.com ------ * Date: March 2007 ----- */
/* Variable definitions
====================

<Variable name="textcolor" description="Text Color"
type="color" default="#482400" value="#482400">

<Variable name="PageBgColor" description="Page Background Color"
type="color" default="#e4b81b" value="#e4b81b">

<Variable name="pagetitlecolor" description="Page Header Color"
type="color" default="#ffc" value="#ffffcc">

<Variable name="datecolor" description="Date Header Color"
type="color" default="#ccc" value="#cccccc">

<Variable name="titlecolor" description="Post Title Color"
type="color" default="#e4b81b" value="#e4b81b">

<Variable name="footercolor" description="Post Footer Color"
type="color" default="#999" value="#999999">

<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#fff" value="#ffffff">

<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#ffc" value="#ffffcc">

<Variable name="sidebarlink" description="Sidebar Link Color"
type="color" default="#fff" value="#ffffff">

<Variable name="sidebarhover" description="Sidebar Hover Color"
type="color" default="#000" value="#000000">

<Variable name="linkcolor" description="Link Color"
type="color" default="#69c" value="#6699cc">

<Variable name="linkhover" description="Link Hover Color"
type="color" default="#ff0000" value="#ff0000">

<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#669" value="#666699">

<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 82% Verdana, sans-serif" value="normal normal 87% Verdana, sans-serif">

<Variable name="pagetitlefont" description="Page Header Font"
type="font" default="normal bold 200% 'Georgia','Times New Roman'" value="normal bold 200% 'Georgia','Times New Roman'">

<Variable name="titlefont" description="Post Title Font"
type="font" default="normal bold 110% 'Georgia','Times New Roman'" value="normal bold 110% 'Georgia','Times New Roman'">

<Variable name="sidebarheaderfont" description="Sidebar Title Font"
type="font" default="normal bold 105% 'Georgia','Times New Roman'" value="normal bold 105% 'Georgia','Times New Roman'">

<Variable name="descriptionfont" description="Description Font"
type="font" default="normal normal 80% 'Verdana','Arial'" value="normal normal 80% 'Verdana','Arial'">

<Variable name="descriptioncolor" description="Description Color"
type="color" default="#eee" value="#eeeeee">

<Variable name="Commentscolor" description="Comments Text Color"
type="color" default="#666" value="#666">
*/

/* ---( page defaults )--- */
body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: $PageBgColor; }
blockquote { margin: 0 0 0 30px; padding: 10px 0 0 20px; font-size: 88%; line-height: 1.5em; color: #666; }
blockquote p { margin-top: 0; }
abbr, acronym { cursor: help; font-style: normal; }
code { color: #f63; }
hr { display: none; }
img { border: none; }

/* unordered list style */
ul { list-style: none; margin-left: 10px; padding: 0; }
li { list-style: none; padding-left: 14px; margin-bottom: 3px; }

/* links */
a:link { color: $linkcolor; text-decoration: none; }
a:visited { color: $visitedlinkcolor; text-decoration: none; }
a:hover { color: $linkhover; text-decoration: none; }
a:active { color: $visitedlinkcolor; text-decoration: none; }

/* ---( layout structure )---*/
#outer-wrapper { width: 953px; margin: 0px auto 0; text-align: justify; }
#content-wrapper { margin-left: 0px; /* to avoid the border image */ width: 100%; }
#main { float: left; width: 477px; margin: 5px; padding: 0px 0px 0px 20px; 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: left; width: 170px; padding-left: 28px; font-size: 85%; color: $sidebartextcolor; line-height: 1.4em; 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 */ }
#ads-wrapper {float: right; width: 200px; padding-right: 30px; 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 */}
#ads{font-size: 100%; color: $sidebartextcolor; padding: 0px; }
#center {background: #ffffff url('http://lh6.google.com/image/jvdmds/Rf39M0sJ28I/AAAAAAAAAOg/sAOsagvFBlE/F%3A%5Ctexts%5Cnew-temp%5Cbeta%5C3%5Cbutterfly-2.jpg') repeat-y top center;}

/* ---( header and site name )--- */
#header-wrapper { margin: 0; }
#header { margin: 0; height:302px; width:953; color: $pagetitlecolor; background: url('http://lh3.google.com/image/jvdmds/Rf371EsJ2wI/AAAAAAAAANA/tdhff0FR4zI/butterfly-1.jpg') no-repeat top center; }
#header h1 { width: 880px; font: $pagetitlefont; padding: 130px 40px 5px 30px; filter: glow(color=#000000,Strength=5); text-align: right;}
#header h1 a { text-decoration: none; color: $pagetitlecolor; }
#header h1 a:hover { color: #eee; }
#header .description { margin:-20px 25px 5px 255px; text-align: right; padding:15px; line-height: 1.4em; font: $descriptionfont; color: $descriptioncolor; }

/* ---( main column )--- */
h2.date-header { margin-top: 0; padding-left: 10px; font-size: 90%; color: $datecolor; }
.post h3 { margin-top: 0; font: $titlefont; color: $titlecolor; }
.post { border-bottom: 1px solid #ddd; margin-left:0; margin-right:0; margin-top:0; margin-bottom:1em; padding-left:10px; padding-right:0; padding-top:0; padding-bottom:1em }
.post h3 a {text-decoration: none;}
.post h3 a:hover { color: #369; text-decoration: none; }
.post-footer { margin: 0; padding: 0px; font-size: 88%; color:$footercolor; }
.post img { padding: 6px; border-top: 1px solid #ddd; border-left: 1px solid #cccccc; border-bottom: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; }
.feed-links { clear: both; line-height: 2.5em;}
.blog-feeds { text-align: right;}
#blog-pager-newer-link { float: left; }
#blog-pager-older-link { float: right; }
#blog-pager { text-align: center; }

/* comment styles */
#comments { padding-top: 10px; font-size: 85%; line-height: 1.5em; color: $Commentscolor; }
#comments h4 { margin: 20px 0 15px 0; padding: 8px 0 0 40px; font-family: "Lucida Grande", "Trebuchet MS"; font-size: 110%; color: $Commentscolor; height: 30px !important; /* for most browsers */ height /**/:37px; /* for IE5/Win */ }
#comments ul { margin-left: 0; }
#comments li { background: none; padding-left: 0; }
.comment-body { padding: 0 10px 0 25px; }
.comment-body p { margin-bottom: 0; }
.comment-author { margin: 4px 0 0 0; padding: 0 10px 0 60px; color: #999; }
.comment-footer { border-bottom: 1px solid #ddd; padding-bottom: 1em;}
.deleted-comment { font-style:italic; color:gray; }

/* ---( sidebar )--- */
.sidebar h2 { margin: 0 0 0 0; padding: 10px 0 0 0px; font: $sidebarheaderfont; color: $sidebarcolor; height: 32px !important; /* for most browsers */ height /**/:57px; /* for IE5/Win */ }
.sidebar .widget { margin: 0; padding: 0 0 5px 10px;}
.sidebar a {color: $sidebarlink; text-decoration: none;}
.sidebar a:hover {color: $sidebarhover; }
.sidebar li { padding-left: 5px; }
.profile-textblock { margin:.5em 0 .5em; }
.profile-img { float: left; margin: 0 5px 5px 0; border: 1px solid #ddd; padding: 4px;}

/* ---( footer )--- */
.clear { /* to fix IE6 padding-top issue */ clear: both; }
#footer-wrapper { margin: 0; padding: 0 0 0 0; font-size: 85%; }
#footer { margin: 0; width: 953px; height:114px; padding: 0px; background: url('http://lh6.google.com/image/jvdmds/Rf3710sJ2xI/AAAAAAAAANI/jV0rUgqdEi8/butterfly-3.jpg') no-repeat top center; }

/** 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: 953px;}
body#layout #sidebar { margin-right: 0; margin-bottom: 1em; }
body#layout #header,body#layout #footer,
body#layout #main { padding: 0; }
body#layout #content-wrapper { margin: 0px; }
#navbar-iframe { height:0px; visibility:hidden; display:none }

]]>
</b:skin>
</head>
<body>
<div id='outer-wrapper'>
<div id='wrap2'>

<span id='skiplinks' style='display:none;'>
<a href='#main' shape='rect'>skip to main</a>
|
<a href='#sidebar' shape='rect'>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='Wordpress (Header)' type='Header'/>
</b:section>
</div>
<div id='center'>
<div id='content-wrapper'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' />
</b:section>
</div>
<div id='ads-wrapper'>
<b:section class='sidebar' id='ads' preferred='yes'>
<b:widget id='Label1' locked='false' title='Ads' type='Label' />
<b:widget id='HTML1' locked='false' title='Text-Ads' type='HTML' />
<b:widget id='HTML2' locked='false' title='Links' type='HTML' />
<b:widget id='HTML3' locked='false' title='Feeds' type='HTML' />
</b:section>
</div>

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

</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer' />
</div>
</div>
</div>

</body>
</html>

2. mow observe another template which is also a 3-colomn

http://www.finalsense.com/services/blog_templates/red_template.htm

code:

<?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 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: 3columns-Red----- *Designer: J.aghili ----- * URL: www.finalsense.com ------ * Date: March 2007 ----- */
/* Variable definitions
====================

<Variable name="textcolor" description="Text Color"
type="color" default="#666" value="#666666">

<Variable name="PageBgColor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">

<Variable name="pagetitlecolor" description="Page Header Color"
type="color" default="#75ac68" value="#75ac68">

<Variable name="datecolor" description="Date Header Color"
type="color" default="#ccc" value="#cccccc">

<Variable name="titlecolor" description="Post Title Color"
type="color" default="#f63" value="#bbc8ae">

<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="#fc5252" value="#fc5252">

<Variable name="sidebarlink" description="Sidebar Link Color"
type="color" default="#369" value="#336699">

<Variable name="sidebarhover" description="Sidebar Hover Color"
type="color" default="#000" value="#000000">

<Variable name="linkcolor" description="Link Color"
type="color" default="#69c" value="#6699cc">

<Variable name="linkhover" description="Link Hover Color"
type="color" default="#ff0000" value="#ff0000">

<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#bbc8ae" value="#bbc8ae">

<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 82% Verdana, sans-serif" value="normal normal 87% Verdana, sans-serif">

<Variable name="pagetitlefont" description="Page Header Font"
type="font" default="normal bold 200% 'Georgia','Times New Roman'" value="normal bold 200% 'Georgia','Times New Roman'">

<Variable name="titlefont" description="Post Title Font"
type="font" default="normal bold 110% 'Georgia','Times New Roman'" value="normal bold 110% 'Georgia','Times New Roman'">

<Variable name="sidebarheaderfont" description="Sidebar Title Font"
type="font" default="normal bold 105% 'Georgia','Times New Roman'" value="normal bold 105% 'Georgia','Times New Roman'">

<Variable name="descriptionfont" description="Description Font"
type="font" default="normal normal 80% 'Verdana','Arial'" value="normal normal 80% 'Verdana','Arial'">

<Variable name="descriptioncolor" description="Description Color"
type="color" default="#fff" value="#fefefe">

<Variable name="Commentscolor" description="Comments Text Color"
type="color" default="#666" value="#666">
*/

/* ---( page defaults )--- */
body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: $PageBgColor; }
blockquote { margin: 0 0 0 30px; padding: 10px 0 0 20px; font-size: 88%; line-height: 1.5em; color: #666; }
blockquote p { margin-top: 0; }
abbr, acronym { cursor: help; font-style: normal; }
code { color: #f63; }
hr { display: none; }
img { border: none; }

/* unordered list style */
ul { list-style: none; margin-left: 10px; padding: 0; }
li { list-style: none; padding-left: 14px; margin-bottom: 3px; }

/* links */
a:link { color: $linkcolor; text-decoration: none; }
a:visited { color: $visitedlinkcolor; text-decoration: none; }
a:hover { color: $linkhover; text-decoration: none; }
a:active { color: $visitedlinkcolor; text-decoration: none; }

/* ---( layout structure )---*/
#outer-wrapper { width: 901px; margin: 0px auto 0; text-align: justify; }
#content-wrapper { margin-left: 27px; /* to avoid the border image */ width: 100%; }
#main { float: left; width: 435px; margin: 5px; padding: 0px 0px 0px 0px; 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: right; width: 160px; padding-right: 58px; font-size: 85%; color: $sidebartextcolor; line-height: 1.4em; 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 */ }
#ads-wrapper {float: left; width: 190px; padding-left: 20px; 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 */}
#ads{font-size: 100%; color: $sidebartextcolor; padding: 0px; }
#center {background: #ffffff url('http://lh6.google.com/image/jvdmds/RgCcg9ciQqI/AAAAAAAAAPY/l0l5mrxRfpw/F%3A%5Ctexts%5Cnew-temp%5Cbeta%5Cred-2.jpg') repeat-y top left;}

/* ---( header and site name )--- */
#header-wrapper { margin: 0; }
#header { margin: 0; height:229px; width:901; color: $pagetitlecolor; background: url('http://lh3.google.com/image/jvdmds/Rf37zEsJ2vI/AAAAAAAAAM4/sk58QzPgiSc/red-1.jpg') no-repeat top left; }
#header h1 {width: 435px; font: $pagetitlefont; padding: 40px 20px 10px 30px; filter: glow(color=#000000,Strength=5); text-align: left;}
#header h1 a { text-decoration: none; color: $pagetitlecolor; }
#header h1 a:hover { color: #eee; }
#header .description { margin:0 5px 5px; text-align: left; padding:15px; width:80%; line-height: 1.4em; font: $descriptionfont; color: $descriptioncolor; }

/* ---( main column )--- */
h2.date-header { margin-top: 0; padding-left: 10px; font-size: 90%; color: $datecolor; }
.post h3 { margin-top: 0; font: $titlefont; color: $titlecolor; }
.post { border-bottom: 1px solid #ddd; margin-left:0; margin-right:0; margin-top:0; margin-bottom:1em; padding-left:10px; padding-right:0; padding-top:0; padding-bottom:1em }
.post h3 a {text-decoration: none;}
.post h3 a:hover { color: #369; text-decoration: none; }
.post-footer { margin: 0; padding: 0px; font-size: 88%; color:$footercolor; }
.post img { padding: 6px; border-top: 1px solid #ddd; border-left: 1px solid #cccccc; border-bottom: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; }
.feed-links { clear: both; line-height: 2.5em;}
.blog-feeds { text-align: right;}
#blog-pager-newer-link { float: left; }
#blog-pager-older-link { float: right; }
#blog-pager { text-align: center; }

/* comment styles */
#comments { padding-top: 10px; font-size: 85%; line-height: 1.5em; color: $Commentscolor; }
#comments h4 { margin: 20px 0 15px 0; padding: 8px 0 0 40px; font-family: "Lucida Grande", "Trebuchet MS"; font-size: 110%; color: $Commentscolor; height: 30px !important; /* for most browsers */ height /**/:37px; /* for IE5/Win */ }
#comments ul { margin-left: 0; }
#comments li { background: none; padding-left: 0; }
.comment-body { padding: 0 10px 0 25px; }
.comment-body p { margin-bottom: 0; }
.comment-author { margin: 4px 0 0 0; padding: 0 10px 0 60px; color: #999; }
.comment-footer { border-bottom: 1px solid #ddd; padding-bottom: 1em;}
.deleted-comment { font-style:italic; color:gray; }

/* ---( sidebar )--- */
.sidebar h2 { margin: 0 0 0 0; padding: 10px 0 0 0px; font: $sidebarheaderfont; color: $sidebarcolor; height: 32px !important; /* for most browsers */ height /**/:57px; /* for IE5/Win */ }
.sidebar .widget { margin: 0; padding: 0 0 5px 10px;}
.sidebar a {color: $sidebarlink; text-decoration: none;}
.sidebar a:hover {color: $sidebarhover; }
.sidebar li { padding-left: 5px; }
.profile-textblock { margin:.5em 0 .5em; }
.profile-img { float: left; margin: 0 3px 3px 0; border: 1px solid #ddd; padding: 3px;}

/* ---( footer )--- */
.clear { /* to fix IE6 padding-top issue */ clear: both; }
#footer-wrapper { margin: 0; padding: 0 0 0 0; font-size: 85%; }
#footer { margin: 0; width: 901px; height:155px; padding: 0px; background: url('http://lh5.google.com/image/jvdmds/Rf37xksJ2uI/AAAAAAAAAMw/3rmbYbD92fY/red-3.jpg') no-repeat top left; }

/** 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: 901px;}
body#layout #sidebar { margin-right: 0; margin-bottom: 1em; }
body#layout #header,body#layout #footer,
body#layout #main { padding: 0; }
body#layout #content-wrapper { margin: 0px; }
#navbar-iframe { height:0px; visibility:hidden; display:none }

]]>
</b:skin>
</head>
<body>
<div id='outer-wrapper'>
<div id='wrap2'>

<span id='skiplinks' style='display:none;'>
<a href='#main' shape='rect'>skip to main</a>
|
<a href='#sidebar' shape='rect'>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='Wordpress (Header)' type='Header'/>
</b:section>
</div>
<div id='center'>
<div id='content-wrapper'>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' />
</b:section>
</div>
<div id='ads-wrapper'>
<b:section class='sidebar' id='ads' preferred='yes'>
<b:widget id='Label1' locked='false' title='Ads' type='Label' />
<b:widget id='HTML1' locked='false' title='Text-Ads' type='HTML' />
<b:widget id='HTML2' locked='false' title='Links' type='HTML' />
<b:widget id='HTML3' locked='false' title='Feeds' type='HTML' />
</b:section>
</div>

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

</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer' />
</div>
</div>
</div>

</body>
</html>

3.now i want the first one look n feel(butterfly) with the second one's layout style

4.mean to say widish first room,then 2 margins with butterfly flavour

5.send me modified code.

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4288 Location: MS

Sorry, but you are asking a lot of free volunteers to do all your coding for you. Use the following info for blogs to see what you can do. Then post back if you need help on code you've made.

How to Do Templates:

How to Download and Edit a Template Video Tutorial: http://www.clantemplates.com/video/How_to_DL_and_Edit/How_to_DL_and_Edit.html

How to Make a New Page Video Tutorial: http://www.clantemplates.com/video/CT_How_to_Make_a_New_Page/CT_How_to_Make_a_New_Page.html

How to Upload Your Template Video Tutorial: http://www.clantemplates.com/video/CT_How_to_Upload/CT_How_to_Upload.html

Tips: http://smashapps.blogspot.com/2009/06/top-10-important-tips-for-beginner.html