Forums > Changing the date on a template

Full Version: Changing the date on a template

Forums > Resource Center > Support Center > Blogger Support > Blogger Resolved Topics

blackurbanite

Oct 11 2008, 07:38 PM

I found a skin that I like but I want the date to be formatted a little differently. Like instead of the date being on top of the post title and underlined, I wanted it to be under the title, with the font slightly smaller and different colored. Is there a way to do this in the code? Can I even alter a skin like this? Any advice/tips would be greatly appreciated!

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 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)
 * Author:   Dan Cederholm
 * URL:      www.simplebits.com
 * Date:     1 March 2004
 * Updated by: Blogger Team
 * Then Updated again by Sharnee @ suckmylolly.com July 2008
*/ 

/* Variable definitions
   ====================

   <Variable name="bgcolor" description="Background Color"
             type="color" default="#333300" value="#666666">


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

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

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

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

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

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

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

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

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

   <Variable name="titlefont" description="Post Title Font"
             type="font" default="normal bold 130% 'Lucida Grande','Trebuchet MS'" value="normal bold 137% Verdana, sans-serif">

   <Variable name="sidebarheaderfont" description="Sidebar Title Font"
             type="font" default="normal bold 130% 'Lucida Grande','Trebuchet MS'" value="normal bold 131% Verdana, sans-serif">
*/

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

body {
  margin: 0;
  padding: 0;
  font-size: small;
  text-align: center;
  color: $textcolor;
  background: $bgcolor;
  }

blockquote {
  margin: 0 0 0 30px;
  padding: 10px 10px 10px 30px;
  font-size: 95%;
  line-height: 1.5em;
  color: #000000;
  background: url(http://i200.photobucket.com/albums/aa231/free_blogger/quotes.gif)   no-repeat top left;
  }

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 {
  margin-left: 30px;
  padding: 0;
  }


/* links */

a:link {
  color: $linkcolor;
    text-decoration: none;
  }

a:visited {
  color: $visitedlinkcolor;
      text-decoration: none;
  }

a:hover {
	color: $textcolor;
  }

a:active {
  color: #000000;
  text-decoration: none;
  }

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

#outer-wrapper {
  width: 750px;
  margin: 0px auto 0;
  text-align: left;
  font: $bodyfont;
  background: url(http://i200.photobucket.com/albums/aa231/free_blogger/InnerBGOpen.gif) repeat-y;
  }

#content-wrapper {
  margin-left: 10px; /* to avoid the border image */
  width: 750px;
  }

#main {
  float: left;
  width: 410px;
  margin: 0px 0 0px 5px;
  padding: 0 0 0 1em;
font-size: $bodyfont;
  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: 240px;
  padding: 0px 20px 10px 0px;
  font-size: 90%;
  line-height: 1.4em;
  color: $sidebartextcolor;
  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 {
  margin: 0;
  height: 365px;
  text-align: left;
  background: url(http://i200.photobucket.com/albums/aa231/free_blogger/HeaderOpen.gif) no-repeat top center;
  }

#header .description {
  font-size: 140%;
  text-align: center;
display: none;
}

#header h1 { 
  padding:70px 0px 0 0px;
  line-height:1.3em;
  text-align: center;
  letter-spacing:.1em;
display: none;
 }

#header h1 a {
  text-decoration: none;
  color: #ffffff;
  }

#header h1 a {
  text-decoration: none;
  color: #000000;
  }




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

h2.date-header {
  margin-top: 0;
  font-size: 100%;
  color: $datecolor;
border-bottom:1px solid #000000;

  }

.post h3 {
  margin-top: -0.5em;
  font: $titlefont;
  color: $titlecolor;
  }

.post {
  margin: 0 0 1.5em 0;
  padding: 0 0 1.5em 0px;
  }

.post h3 a,
.post h3 a:visited { 
  color: $titlecolor;
  text-decoration: none;
 }

.post-footer {
  margin: 0;
  padding: 5px 0 0 0px;
  font-size: 95%;
  color: $footercolor; 
  }

.post img {
  padding: 2px;
  border-top: 1px solid #CCCCCC;
  border-left: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
  }

.feed-links {
  clear: both;
text-decoration: none;
}

#blog-pager-newer-link {
  text-decoration: none;
  float: left;
 }

#blog-pager-older-link { 
  float: right;
    text-decoration: none;
 }
 
#blog-pager {   
  text-align: center; 
 }

/* comment styles */

#comments {
  padding-top: 0px;
text-decoration: none;
  font-size: 100%;
  line-height: 1.5em;
  color: #000000;
  }

#comments h4 {
  margin: 10px 0 15px 0;
  padding: 0px 0 0 0px;
  font-family: "Lucida Grande", "Trebuchet MS";
  font-size: 130%;
  color: #000000;
  text-decoration: none;
  no-repeat 10px 0;
  height: 29px !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 0px 0 0px;
  }

.comment-body p {
  margin-bottom: 0;
  }

.comment-author {
  margin: 4px 0 0 0;
  padding: 0 3px 0 0px;
  color: #000000;
  }

.comment-footer {
  padding-bottom: 5px;
  font-size: 95%;
}


.deleted-comment {
  font-style:italic;
  color:gray;
  }

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

.sidebar h2 { 
  margin: 0 0 0 0;
  padding: 10px 0px 0 0px;
  font: $sidebarheaderfont;
  color: $sidebarcolor;
  text-align: center;
  height: 32px;
  height: 32px !important; /* for most browsers */
  height /**/:57px; /* for IE5/Win */
  }

.sidebar ul li {
	margin:0;
}

.sidebar .widget {
  margin: 0;
  padding: 0 10px 15px 10px;
}

.profile-textblock { 
  clear: both;
  margin-left: 0;
}

.profile-img { 
  float: left;
  margin: 0 5px 5px 0;
  border: 1px solid #CCCCCC;
  padding: 3px;
}

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

.clear { /* to fix IE6 padding-top issue */
  clear: both;
  }


#footer {
  margin: 0;
  background: url(http://i200.photobucket.com/albums/aa231/free_blogger/BaseOpen.gif) no-repeat bottom left;
  padding-bottom:20px;
  padding-top: 10px;
  padding-left:20px;
  padding-right: 20px;
  height: auto;
  text-align: 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: 740px;
}

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;
 }
]]></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='test (Header)' type='Header'/>
</b:section>
    </div>
 
    <div id='content-wrapper'>

      <div id='crosscol-wrapper' style='text-align:center'>
        <b:section class='crosscol' id='crosscol' showaddelement='no'/>
      </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='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</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><center>design by <a href='http://www.suckmylolly.com'>suckmylolly.com</a></center>
</html>
                

loquat

Oct 30 2008, 02:09 PM

Using the layout template you have, I don't think it's possible to reposition your dateline. I tried by going to Layout -> Page Elements -> Edit (Blog Posts), and from there, the Date, Post Title and Post Body are stationary.

You can, however, change the color of your dateline by going to Layout -> Fonts and Colors, selecting Date Header Color on the left, and then picking a new color.

You can also change the size of the dateline by finding this in your coding and changing the bold to a specific pt or px size:
h2.date-header {
margin-top: 0;
font-size: 100%;
color: $datecolor;
border-bottom:1px solid #000000;

So, for example, that line could look like: font-size: 22px;

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.