Changing font in Blogger.com template
Results 1 to 2 of 2

Thread: Changing font in Blogger.com template

  1. October 30th, 2006, 04:31 PM #1
    sparkster2k
    sparkster2k is offline Virtual Med Student
    Join Date
    Oct 2002
    Location
    UK
    Posts
    47

    Changing font in Blogger.com template

    I've imported a template from my exitsing website into my blogger account - http://sparksteruk.blogspot.com/

    I was hoping to make the title,description,links,previous posts and archive font from the dull "Times New Roman" style to Verdana.

    Could someone make the adjustments please and let me know how they did it? Many thanks in advance


    <!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" xml:lang="en" lang="en">
    <head>
    <title><$BlogPageTitle$></title>

    <$BlogMetaData$>

    <style type="text/css">
    #b-navbar {
    height: 0px;
    visibility: hidden;
    display: none;
    }
    /*
    -----------------------------------------------
    Blogger Template Style
    Name: Minima
    Designer: Douglas Bowman
    URL: www.stopdesign.com
    Date: 26 Feb 2004
    ----------------------------------------------- */


    body {
    background:#E8F3FF;
    margin:0;
    padding:40px 20px;
    font:x-small Georgia,Serif;
    text-align:center;
    color:#333;
    font-size/* */:/**/small;
    font-size: /**/small;
    }
    a:link {
    color:#58a;
    text-decoration:none;
    }
    a:visited {
    color:#969;
    text-decoration:none;
    }
    a:hover {
    color:#c60;
    text-decoration:underline;
    }
    a img {
    border-width:0;
    }


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


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

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


    /* Posts
    ----------------------------------------------- */
    @media all {
    .date-header {
    margin:1.5em 0 .5em;
    }
    .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted #ccc;
    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%;
    font-weight:normal;
    line-height:1.4em;
    color:#c60;
    }
    .post-title a, .post-title a:visited, .post-title strong {
    display:block;
    text-decoration:none;
    color:#c60;
    font-weight:normal;
    }
    .post-title strong, .post-title a:hover {
    color:#333;
    }
    .post div {
    margin:0 0 .75em;
    line-height:1.6em;
    }
    p.post-footer {
    margin:-.25em 0 0;
    color:#ccc;
    }
    .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:#999;
    margin-right:.6em;
    }
    .comment-link {
    margin-left:.6em;
    }
    .post img {
    padding:4px;
    border:1px solid #ddd;
    }
    .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:#999;
    }
    #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 ul {
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    border-bottom:1px dotted #ccc;
    list-style:none;
    }
    #sidebar li {
    margin:0;
    padding:0 0 .25em 15px;
    text-indent:-15px;
    line-height:1.5em;
    }
    #sidebar p {
    color:#666;
    line-height:1.5em;
    }


    /* Profile
    ----------------------------------------------- */
    #profile-container {
    margin:0 0 1.5em;
    border-bottom:1px dotted #ccc;
    padding-bottom:1.5em;
    }
    .profile-datablock {
    margin:.5em 0 .5em;
    }
    .profile-img {
    display:inline;
    }
    .profile-img img {
    float:left;
    padding:4px;
    border:1px solid #ddd;
    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>

    <body>

    <!-- Begin #content -->
    <div id="content">


    <!-- Begin #main -->
    <div id="main"><div id="main2">

    <Blogger>

    <body bgcolor="#E8F3FF" text="#000000">
    <table width="800" border="1" bordercolor="#000000" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td width="800">
    <table width="100%" border="1" bgcolor="#3366FF" bordercolor="#000000" cellpadding="0" cellspacing="0">
    <tr>
    <td>
    <div align="center"><img src="http://www.sparkster.net/images/bannerstar.jpg" width="800" height="200"></div></td>
    </tr>
    <tr>
    <td bgcolor="#E8F3FF"><div align="center">
    </div></td>
    </tr>
    </table>
    <table width="804" border="1" bordercolor="#000000" cellpadding="0" cellspacing="0">
    <tr valign="top">
    <td width="632" bgcolor="#FFFFFF" height="302">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="4%">&nbsp;</td>
    <td width="92%"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><div align="center"></div></td>
    </tr>
    <tr>
    <td><div align="left">

    <!-- Begin .post -->
    <div class="post"><a name="<$BlogItemNumber$>"></a>
    <BlogItemTitle>
    <h3 class="post-title">
    <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
    <$BlogItemTitle$>
    <BlogItemUrl></a></BlogItemUrl>
    </h3>
    </BlogItemTitle>

    <div class="post-body">
    <div>
    <$BlogItemBody$>
    </div>
    </div>

    <p class="post-footer">
    <em>posted by <$BlogItemAuthorNickname$> at <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>
    <MainOrArchivePage><BlogItemCommentsEnabled>

    <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><$BlogItemCommentCount$> comments</a>

    </BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
    <a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">links to this post</a>
    </BlogItemBacklinksEnabled>
    </MainOrArchivePage> <$BlogItemControl$>
    </p>

    </div>
    <!-- End .post -->



    <!-- Begin #comments -->
    <ItemPage>
    <div id="comments">

    <BlogItemCommentsEnabled><a name="comments"></a>
    <h4><$BlogItemCommentCount$> Comments:</h4>
    <dl id="comments-block">
    <BlogItemComments>
    <dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
    <$BlogCommentAuthor$> said...
    </dt>
    <dd class="comment-body">

    <p><$BlogCommentBody$></p>
    </dd>
    <dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>
    <$BlogCommentDeleteIcon$>
    </dd>
    </BlogItemComments>
    </dl>
    <p class="comment-timestamp">

    <$BlogItemCreate$>
    </p>
    </BlogItemCommentsEnabled>
    <BlogItemBacklinksEnabled>
    <a name="links"></a><h4>Links to this post:</h4>
    <dl id="comments-block">
    <BlogItemBacklinks>
    <dt class="comment-title">
    <$BlogBacklinkControl$>
    <a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
    </dt>
    <dd class="comment-body"><$BlogBacklinkSnippet$>
    <br />
    <span class="comment-poster">
    <em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
    </span>
    </dd>
    </BlogItemBacklinks>
    </dl>
    <p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
    </BlogItemBacklinksEnabled>


    <p class="comment-timestamp">
    <a href="<$BlogURL$>">&lt;&lt; Home</a>
    </p>
    </div>

    </ItemPage>

    <!-- End #comments -->

    </Blogger>
    </div></div>
    <!-- End #main -->







    </div></td>
    </tr>
    <tr>
    <td><b></b></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table></td>
    <td width="4%">&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </td>
    <td width="168" bgcolor="#FFFFFF" height="302">
    <!-- Begin #sidebar -->
    <div id="sidebar"><div id="sidebar2">


    <!-- Begin #profile-container -->

    <$BlogMemberProfile$>

    <!-- End #profile -->

    <MainOrArchivePage>
    <h2 class="sidebar-title">Links</h2>
    <ul>
    <li><a href="http://news.google.com/">Google News</a></li>
    <li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
    <li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
    </ul>
    </MainOrArchivePage>


    <h2 class="sidebar-title">Previous Posts</h2>
    <ul id="recently">
    <BloggerPreviousItems>
    <li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
    </BloggerPreviousItems>
    </ul>
    <MainOrArchivePage>

    <h2 class="sidebar-title">Archives</h2>
    <ul class="archive-list">
    <BloggerArchives>
    <li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
    </BloggerArchives>

    </ul>
    </MainOrArchivePage>

    <p id="powered-by"><a href="http://www.blogger.com"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" /></a></p>

    <!--
    <p>This is a paragraph of text that could go in the sidebar.</p>
    -->



    </div></div>
    <!-- End #sidebar -->




    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    <table width="50%" border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
    <td>&nbsp;</td>
    </tr>

    </div>
    <!-- End #content -->



    <!-- Begin #footer -->
    <div id="footer"><hr />
    <p><!--This is an optional footer. If you want text here, place it inside these tags, and remove this comment. -->&nbsp;</p>

    </div>
    <!-- End #footer -->



    </body>
    </html>
    Reply With Quote Reply With Quote
  2. October 31st, 2006, 03:16 AM #2
    DanC
    DanC is offline Virtual Resident
    Join Date
    Nov 1999
    Location
    California, USA
    Posts
    501
    Looks like you found the solution.

    (Changed font:x-small Georgia,Serif; to font:x-small "Trebuchet MS",Trebuchet,Verdana,Sans-Serif; in the body section.)

    You'll have to edit the image itself if you want to change the logo text.


    "If you look at the sun without shielding your eyes, you'll go blind.
    If you look at the moon without covering your eyes, you'll become a poet."
    --Serge Bouchard
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules