Author Topic: CSS/HTML blogger template help (Read 2030 times)

jair2k4 · « **on:** February 17, 2009, 08:36:27 AM »

So on my site:
http://www.techno-holics.com

I used a template and customized it a while back, but the little date box has never been quite right. Though it is a small issue, it irritates the living bejeezus out of me. Can someone pick through the HTML and tell me where the issue is? I'm fairly decent with code, but i've looked and can't seem to find it. The box just needs to be a bit bigger. Thanks in advance. See code below:

Code: [Select]

<?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>
    <title><data:blog.pageTitle/></title>
    <b:include data='blog' name='all-head-content'/>
    <b:skin><![CDATA[/*

-----------------------------------------------
***  Templates Novo Blogger ***
Name:      Template Hades II(originalmente Mínima) 
Designer: Ariane Naranjo
URL:      http://templatesparanovoblogger.blogspot.com
Date:     02 Janeiro 2008
***  Não retirar os créditos ! ***
Distributed by: http://BTemplates.com
----------------------------------------------- */


/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#000000" value="#000000">
<Variable name="headerbgcolor" description="Header Background Color"
             type="color" default="#353535" value="#191919">
<Variable name="outerbgcolor" description="Outer Background Color"
             type="color" default="#000000" value="#191919">
<Variable name="mainbgcolor" description="Main Background Color"
             type="color" default="#ffffff" value="#ffffff">
<Variable name="sidebarbgcolor" description="Sidebar Background Color"
             type="color" default="#272727" value="#191919">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#211C19" value="#000000">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#2F96B9" value="#BFBFBF">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#F2C888" value="#BFBFBF">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#FF7220" value="#ffffff">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#16110D" value="#0066CC">
   <Variable name="bordercolor" description="Border Color"
             type="color" default="#000000" value="#7f7f7f">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#E7B99A" value="#BFBFBF">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#5F6B22" value="#cccccc">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#267AA6" value="#BFBFBF">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% 'Palatino Linotype',Trebuchet,Verdana,Sans-serif" value="normal normal 97% Verdana, sans-serif">
   <Variable name="headerfont" description="Sidebar Title Font"
             type="font"
             default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% Georgia, Times, serif">
   <Variable name="pagetitlefont" description="Blog Title Font"
             type="font"
             default="normal bold 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 200% Georgia, Times, serif">
   <Variable name="descriptionfont" description="Blog Description Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 78% Georgia, Times, serif">
   <Variable name="postfooterfont" description="Post Footer Font"
             type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 86% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
*/

body {
  margin:0 auto 0px;
  background: $bgcolor;
  color:$textcolor;
  font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: lcenter;
  }
a:link {
  color:$linkcolor;
  text-decoration:none;
  }
a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }
a:hover {
  color:$titlecolor;
  text-decoration:underline;
}
a img {
  border-width:0;
  }
#navbar #Navbar1 iframe{
display:none;
visibility:none;
}

/* Header
-----------------------------------------------
 */

#header-wrapper {
  width:900px;
  height:120px;
  margin:0 auto 0px;
  }

#header { 
  margin:0 auto 0px;
  width:900px;
  height:120px;
  background:  $headerbgcolor  url(http://i1.tinypic.com/6xj9mht.jpg) bottom center;
  text-align: left;
  color:$pagetitlecolor;
  }

#header h1 {
  margin:0px;
  padding: 40px 0px 0px 25px;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }

#header .description {
  margin:0 auto 0px;
  padding: 10px 0px 0px 30px;
  max-width:820px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.2em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }

#navigation{
height:20px;
width: 800px;
line-height:24px;
margin:-10px 10px 10px 0px;
background: url()  repeat-x;
}

#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #888888;
white-space:nowrap;
}

#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #ffffff;
}

* html #navigation a {width:1%;}

#navigation .selected,#navigation a:hover{
background: url(http://i13.tinypic.com/820rm36.jpg)  0 100% repeat-x;
color:#000000;
border-bottom: 1px solid #C9C9C9;
_border: 0px;
text-decoration:none;
}

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 900px;
  margin:10px auto 10px;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  background:$outerbgcolor;
  border: 3px solid #2C2C2C;
    }

#main-wrapper {
  background: $mainbgcolor url(http://i3.tinypic.com/8bjmiwo.jpg)  no-repeat bottom center;
  margin-top: -35px;
  margin-left: 0px;
  border: 1px solid #000000;
  width: 640px;
  float: left;
  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-wrapper {
  background:$sidebarbgcolor;
  margin-right: 0px;
  width: 245px;
  float: right;
  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 */
}


/* Headings
------------------------------------------------ */

h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}

/* Posts
-----------------------------------------------
 */
h2.date-header {
  text-align: center;
font: $descriptionfont;
padding-bottom: 10px;

  }

.post {
  margin:10x;
  line-height:2em;
  padding: 10px 10px 0px 10px;
  font: $bodyfont;
  color: $textcolor;  
  }

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
  border-bottom: 4px solid $bordercolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
  background-color: #bgcolor;
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:bold;
  padding-left: 15px;
  border-bottom:1px solid $bordercolor;
}

.post h3 strong, .post h3 a:hover {
  background-color: #bgcolor;
  color:$textcolor;
  padding-left: 15px;
  border-bottom:1px solid $bordercolor;
}

.post p {
  margin:10px;
  line-height:1.4em;
}

.post-footer {
  background-color: #bgcolor;
  margin: 30px auto 10px;
  color:$sidebarcolor;
  padding-left: 5px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  font-weight:bold;
  line-height: 1.1em;
  
}
.comment-link {
  margin-left:.6em;
  }
.post img {
  padding:4px;
  border:1px solid $bordercolor;
  }
.post blockquote {
  margin: 10px;
  padding: 8px;
  background: #D2DFDA;
  }
.post blockquote p {
  margin:.75em 0;
  }

/* Comments
----------------------------------------------- */
#comments h4 {
  padding-left: 10px;
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }

#comments-block {
  padding-left: 5px;
  margin:1em 0 1.5em;
  line-height:1.3em;
  }
#comments-block .comment-author {
  padding-left: 5px;
  margin:.5em 0;
  }
#comments-block .comment-body {
  padding-left: 5px;
  margin:.25em 0 0;
  }
#comments-block .comment-footer {
  padding-left: 5px;
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
#comments-block .comment-body p {
  padding-left: 5px;
  margin:0 0 .75em;
  }
.deleted-comment {
  padding-left: 5px;
  font-style:italic;
  color:gray;
  }

#feed-links {
  padding-left: 5px;
  clear: both;
  line-height: 2.5em;
}

#blog-pager-newer-link {
 padding: 5px;
  float: left;
 }
 
#blog-pager-older-link {
  padding: 5px;
  float: right;
 }
 
#blog-pager {   
  text-align: center; 
 }


/* Sidebar Content
----------------------------------------------- */
.sidebar { 
  color: $sidebartextcolor;
  line-height: 1em;
  margin:0px;
 }

.sidebar h2 { 
 background: url(http://i1.tinypic.com/6z9q98g.jpg)  repeat-x;
 text-align: center;
 color: $sidebartextcolor;
 margin:0px;
 padding: 12px 0px 18px 0px;
}

.sidebar ul {
  list-style:none;
  margin:5px;
  padding:0 0 0;
}
.sidebar li {
  margin:5px;
  padding:0 0 .25em 15px;
  text-indent:-15px;
  line-height:1.2em;
  border-bottom: 1px dotted $bordercolor;
  
  }
.sidebar .widget { 
  margin:0px 0px 10px 0px;
  padding:0px;
  color: #000000;
 }
.main .widget { 
  margin:0px 0px 10px 0px;
  padding:5px;
  
 }

.main .Blog { 
  margin:0px 0px 30px 0px;
  padding:0px;
  
}

/* Profile 
----------------------------------------------- */
.profile-img { 
  float: center;
  margin: 5px;
  padding: 4px;
  border: 1px solid $bordercolor;
}

.profile-data {
  margin:5px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  color: $sidebarcolor;
  font-weight: bold;
  line-height: 1.2em;
}

.profile-datablock { 
  margin:5px;
}

.profile-textblock { 
  margin: 5px;
  line-height: 1.6em;
  color: $sidebartextcolor;
}

.profile-link { 
  margin: 5px;
  font: $postfooterfont;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Footer
------------------------------------------------ */
#footer {
  width:800px;
  clear:both;
  margin:0 auto 0px;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

/* Credit
------------------------------------------------ */
#credit {
  width:800px;
  margin:0 auto 0px;
  background:#1A1A1A;
  text-align: center;
}

/** Page structure tweaks for layout editor wireframe */
body#layout #header { 
  margin-left: 0px;
  margin-right: 0px;
}

#navbar-iframe { height: 0px; visibility: hidden; display: none; }

#fecha {
width: 50px;
height: 50px;
display: block;
margin:0 10px;
float:left;
padding: 3px;
color: #000000;
background: url();
border: #000000 1px solid;
text-transform:capitalize;
}
.fecha_dia {
display: block;
font-size: 14px;
font-weight:bold;
}
.fecha_mes {
display: block;
font-size: 10px;
}
.fecha_anio {
display: block;
font-size: 10px;
}



]]></b:skin>

  </head>
<script>
function remplaza_fecha(d){
var da = d.split(&#39; &#39;);
dia = &quot;<div class='fecha_dia'>&quot;+da[0]+&quot;</div>&quot;; //Le otorgamos una clase al día
mes = &quot;<div class='fecha_mes'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;; //Le otorgamos una clase al mes
anio = &quot;<div class='fecha_anio'>&quot;+da[2]+&quot;</div>&quot;; //Le otorgamos una clase al año
document.write(dia+mes+anio);
}
</script>

  <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>

<!-- Não esqueça de colocar aqui os seus  links!!-->

 <div id='navigation'>
 <ul>
 <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
 <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments (RSS)</a></li>
 <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Entries (RSS)</a></li>
 <li><a href='http://www.techno-holics.com/1970/10/contact.html' title='Contacts'>Contact Us</a></li>
  <li><a href='http://www.techno-holics.com/1970/10/about-us.html' title='Contacts'>Who we are</a></li>
 </ul>
 </div>

    <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Techno-holics (Header)' type='Header'/>
</b:section>
    </div>




    <div id='content-wrapper'>

<!-- Código de Busca - Coloque o endereço do seu blog!!-->

<br>
<form action='http://endereçodoseublog.blogspot.com/search' id='searchthis' method='get' style='display: inline;'>
<table cellpadding='0' cellspacing='0' style='width: 230px; height: 100%; margin-left: auto; margin-right: 10px;'>
<tbody>
<tr>
<td valign='middle'>
<input id='b-query' name='q' type='text'/>
</td>
<td class='navbutton' valign='middle'>
<input id='submit' name='submit' tabindex='1' type='submit' value='Search'/>
</td>
</tr>
</tbody>
</table>
</form></br>


<!-- Fim do Código de Busca !-->
<br>



<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
      </div>
          
</br>
      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>

    </div> <!-- end content-wrapper -->

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

<div id='credit'>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> -  
<a href='http://templatesparanovoblogger.blogspot.com' shape='rect'>Template made by Templates para novo blogger</a>    
  </div>
  </div></div> <!-- end outer-wrapper -->
</body>
</html>

robin1989 · « **Reply #1 on:** February 17, 2009, 09:57:48 AM »

try replacing

Code: [Select]

.fecha_dia {
display: block;
font-size: 14px;
font-weight:bold;
}

with

Code: [Select]

.fecha_dia {
display: block;
font-size: 11px;
font-weight:bold;
}

and that will change the font size of the day if oyu want that a bit smaller or

try changeing this

Code: [Select]

#fecha {
width: 50px;
height: 50px;
display: block;
margin:0 10px;
float:left;
padding: 3px;
color: #000000;
background: url();
border: #000000 1px solid;
text-transform:capitalize;

to

Code: [Select]

#fecha {
width: 60px;
height: 60px;
display: block;
margin:0 10px;
float:left;
padding: 3px;
color: #000000;
background: url();
border: #000000 1px solid;
text-transform:capitalize;

and that should make the box 10 px bigger in both directions

jair2k4 · « **Reply #2 on:** February 18, 2009, 08:26:44 AM »

Why thank you robin. I had to go out to 105 on the width, but 60 for the height did just swimmingly. Much better. Many thanks.

robin1989 · « **Reply #3 on:** February 18, 2009, 09:49:31 AM »

no problem - always happy to help. how goes your green projects

Jumbo · « **Reply #4 on:** February 18, 2009, 10:52:13 AM »

Looks good, one thing I gotta ask, why don't my posts show the time stamp?

Edit- looks like WiLSON's don't have them either?

robin1989 · « **Reply #5 on:** February 18, 2009, 11:09:47 AM »

hey why dont you do blog posts for acidmods as well

Jumbo · « **Reply #6 on:** February 18, 2009, 07:48:37 PM »

Quote from: Mactastic Mendez on February 18, 2009, 11:09:47 AM

hey why dont you do blog posts for acidmods as well

Me? I dont know how lol

robin1989 · « **Reply #7 on:** February 19, 2009, 03:21:12 AM »

its easy you just register on the news page and pm me your username you registered with and i will make you an author

Jumbo · « **Reply #8 on:** February 19, 2009, 07:55:34 AM »

Quote from: Mactastic Mendez on February 19, 2009, 03:21:12 AM

its easy you just register on the news page and pm me your username you registered with and i will make you an author

Ok i PMed you.

robin1989 · « **Reply #9 on:** February 19, 2009, 09:16:58 AM »

ok cool just log in and write storys dont forget to ad tags and put it in a category and thats about it. whrite about anything tech/gaming/modding/hacking etc related i would love it if we had a lot more writers keep the news fresh and awsome

News:

Author Topic: CSS/HTML blogger template help (Read 2030 times)

jair2k4

CSS/HTML blogger template help

robin1989

Re: CSS/HTML blogger template help

jair2k4

Re: CSS/HTML blogger template help

robin1989

Re: CSS/HTML blogger template help

Jumbo

Re: CSS/HTML blogger template help

robin1989

Re: CSS/HTML blogger template help

Jumbo

Re: CSS/HTML blogger template help

robin1989

Re: CSS/HTML blogger template help

Jumbo

Re: CSS/HTML blogger template help

robin1989

Re: CSS/HTML blogger template help