Log In · Register

 
 
 Closed TopicStart new topic
Changing the date on a template
blackurbanite
post Oct 11 2008, 07:38 PM
Post #1


Newbie
*

Group: Member
Posts: 1
Joined: Mar 2008
Member No: 630,328
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*
post Oct 30 2008, 02:09 PM
Post #2





Guest
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;
 
« Next Oldest · Blogger Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic