I've stuffed the template again.

Discussion in 'Blogging' started by Cheap SEO Services, Aug 17, 2006.

  1. #1
    Hi,

    I am trying to get the template to the same dimensions as my web site www.ideliverit.com so I can chuck in a leaderboard under the main banner and a skyscraper down the left. Then the Links and then the previous posts and archives.

    Any help appreciated (Tyler?)

    Here's my code for the layout:

    <head>
    <title><$BlogPageTitle$></title>

    <$BlogMetaData$>

    <style type="text/css">
    /*
    -----------------------------------------------
    Blogger Template Style
    Name: Minima Blue
    Designer: Douglas Bowman
    URL: www.stopdesign.com
    Date: 28 Feb 2004
    ----------------------------------------------- */


    body {
    background:#135;
    margin:0;
    padding:40px 20px;
    font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif;
    text-align:center;
    color:#ccc;
    font-size/* */:/**/small;
    font-size: /**/small;
    }
    a:link {
    color:#9bd;
    text-decoration:none;
    }
    a:visited {
    color:#a7a;
    text-decoration:none;
    }
    a:hover {
    color:#ad9;
    text-decoration:underline;
    }
    a img {
    border-width:0;
    }


    /* Header
    ----------------------------------------------- */
    @media all {
    #header {
    width:860px;
    margin:0 auto 10px;
    border:1px solid #468;
    }
    }
    @media handheld {
    #header {
    width:90%;
    }
    }
    #blog-title {
    margin:5px 5px 0;
    padding:20px 20px .25em;
    border:1px solid #357;
    border-width:1px 1px 0;
    font-size:200%;
    line-height:1.2em;
    color:#eee;
    text-transform:uppercase;
    letter-spacing:.2em;
    }
    #blog-title a {
    color:#eee;
    text-decoration:none;
    }
    #blog-title a:hover {
    color:#ad9;
    }
    #description {
    margin:0 5px 5px;
    padding:0 20px 20px;
    border:1px solid #357;
    border-width:0 1px 1px;
    font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:#79b;
    }


    /* Content
    ----------------------------------------------- */
    @media all {
    #content {
    width:760px;
    margin:0 auto;
    padding:0;
    text-align:left;
    }
    #main {
    width:430px;
    float:right;
    }
    #sidebar {
    width:300px;
    float:left;
    }
    }
    @media handheld {
    #content {
    width:90%;
    }
    #main {
    width:100%;
    float:none;
    }
    #sidebar {
    width:100%;
    float:none;
    }
    }


    /* Headings
    ----------------------------------------------- */
    h2 {
    margin:1.5em 0 .75em;
    font:bold 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:#777;
    }


    /* Posts
    ----------------------------------------------- */
    @media all {
    .date-header {
    margin:1.5em 0 .5em;
    color:#579;
    }
    .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted #357;
    padding-bottom:1.5em;
    }
    }
    @media handheld {
    .date-header {
    padding:0 1.5em 0 1.5em;
    }
    .post {
    padding:0 1.5em 0 1.5em;
    }
    }
    .post-title {
    margin:.25em 0 0;
    padding:0 0 4px;
    font-size:140%;
    line-height:1.4em;
    color:#fc6;
    }
    .post-title a {
    text-decoration:none;
    color:#fc6;
    }
    .post-title a:hover {
    color:#fff;
    }
    .post div {
    margin:0 0 .75em;
    line-height:1.6em;
    }
    p.post-footer {
    margin:-.25em 0 0;
    color:#357;
    }
    .post-footer em, .comment-link {
    font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    text-transform:uppercase;
    letter-spacing:.1em;
    }
    .post-footer em {
    font-style:normal;
    color:#579;
    margin-right:.6em;
    }
    .comment-link {
    margin-left:.6em;
    }
    .post img {
    padding:4px;
    border:1px solid #222;
    }
    .post blockquote {
    margin:1em 20px;
    }
    .post blockquote p {
    margin:.75em 0;
    }


    /* Comments
    ----------------------------------------------- */
    #comments h4 {
    margin:1em 0;
    font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:#579;
    }
    #comments h4 strong {
    font-size:130%;
    }
    #comments-block {
    margin:1em 0 1.5em;
    line-height:1.6em;
    }
    #comments-block dt {
    margin:.5em 0;
    }
    #comments-block dd {
    margin:.25em 0 0;
    }
    #comments-block dd.comment-timestamp {
    margin:-.25em 0 2em;
    font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    text-transform:uppercase;
    letter-spacing:.1em;
    }
    #comments-block dd p {
    margin:0 0 .75em;
    }
    .deleted-comment {
    font-style:italic;
    color:gray;
    }


    /* Sidebar Content
    ----------------------------------------------- */
    .sidebar-title {
    color:#579;
    }
    #sidebar ul {
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    border-bottom:1px dotted #357;
    list-style:none;
    }
    #sidebar li {
    margin:0;
    padding:0 0 .25em 15px;
    text-indent:-15px;
    line-height:1.5em;
    }
    #sidebar p {
    line-height:1.5em;
    }


    /* Profile
    ----------------------------------------------- */
    #profile-container {
    margin:0 0 1.5em;
    border-bottom:1px dotted #357;
    padding-bottom:1.5em;
    }
    .profile-datablock {
    margin:.5em 0 .5em;
    }
    .profile-img {
    display:inline;
    }
    .profile-img img {
    float:left;
    padding:4px;
    border:1px solid #357;
    margin:0 8px 3px 0;
    }
    .profile-data {
    margin:0;
    font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    text-transform:uppercase;
    letter-spacing:.1em;
    }
    .profile-data strong {
    display:none;
    }
    .profile-textblock {
    margin:0 0 .5em;
    }
    .profile-link {
    margin:0;
    font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    text-transform:uppercase;
    letter-spacing:.1em;
    }


    /* Footer
    ----------------------------------------------- */
    #footer {
    width:660px;
    clear:both;
    margin:0 auto;
    }
    #footer hr {
    display:none;
    }
    #footer p {
    margin:0;
    padding-top:15px;
    font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
    text-transform:uppercase;
    letter-spacing:.1em;
    }
    </style>

    </head>
     
    Cheap SEO Services, Aug 17, 2006 IP
  2. IndigoBlack

    IndigoBlack Active Member

    Messages:
    132
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    58
    #2
    My first thoughts are to change the widths so that you are using percentages instead of pixels. That way the template should mold itself to the user's monitor size.

    So for the header:
    @media all {
    #header {
    width:860px; -change this to 100%
    margin:0 auto 10px;
    border:1px solid #468;
    }

    For the posts
    #content { (I'm assuming this surrounds both the posts and sidebar_
    width:760px; change to 100%
    margin:0 auto;
    padding:0;
    text-align:left;
    }

    #main { (for the actual posts)
    width:430px; -maybe change to 80%
    float:right;
    }
    #sidebar {
    width:300px;-maybe change to 20%
    float:left;
    }

    Maybe play around with that and see what you come up with. Be sure to backup your current template first though just in case it doesn't work out.

    Hope this helps and good luck :)
     
    IndigoBlack, Aug 18, 2006 IP