Usa la plantilla de manámaná del 8-nov-2006

Por solicitud de AJX en Hacking this blog aquí teneis la plantilla que utilizo actualmente en manámaná sin los estilos de texto y con comentarios a la inserción de JPEGs para cabeceras. La plantilla original es Underwater para Blogger Beta, por Hans Oosting desde Beautiful Beta sobre un trabajo de Ramani's Hackosphere, yo sólo he modificado los estilos de texto, columnas, bordes, espaciados, cabeceras, etc. para adaptarlo a mis necesidades de estilo. Si usais esta plantilla por favor haced referencia a Beautiful Beta.

Tened en cuenta que soy aprendiz en CSS así que mi aproximación al diseño es más o menos de prueba-maldice-corrige y probablemente no podré responder a vuestras preguntas. Considerad también que ya he insertado algunos widgets y hacks adicionales así que probablemente necesitareis algo de adaptación antes de que sea operativo en vuestro blog. Y, recordad, ¡haced copia de seguridad de vuestro template antes de modificar nada!.

Importante: Sólo publico aquí la sección <head>, no he tocado el resto del template original aún. Si quereis el completo descargaros Underwater y substituir su sección <head> por la mía:

<head>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Underwater
Designer: Hans Oosting
Artwork: Vladstudio
Date: 23 Sep 2006
-----------------------------------------------
Styles modified by Noir (thanks Hans for your great work!)
-----------------------------------------------
*/
/* Variable definitions
====================
<Variable name="bodyBgColor" description="Main Background
Color"
type="color" default="#666666" value="#666666">
<Variable name="mainBgColor" description="Blog Background
Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="borderColor" description="Border Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="headerTextColor" description="Blog Header
Text Color"
type="color" default="#ffffff" value="#666666">
<Variable name="descriptionTextColor" description="Blog Description
Text Color"
type="color" default="#999999" value="#999999">
<Variable name="sidebarTitleTextColor" description="Sidebar
Title Text Color"
type="color" default="#666666" value="#666666">
<Variable name="dateHeaderColor" description="Date Header
Color"
type="color" default="#996633" value="#7f7f7f">
<Variable name="postHeaderColor" description="Post Header
Color"
type="color" default="#AA2F51" value="#AA2F51">
<Variable name="textColor" description="Text Color"
type="color" default="#000000" value="#000000">
<Variable name="linkColor" description="Link Color"
type="color" default="#AA2F51" value="#AA2F51">
<Variable name="visitedlinkColor" description="Visited Link
Color" type="color" default="#D56685" value="#D56685">
<Variable name="bqBgColor" description="Blocquote Background
Color" type="color" default="#ffcc66" value="#e6e6e6">
<Variable name="bqTextColor" description="Blocquote Text Color"
type="color" default="#660000" value="#666666">
<Variable name="bodyFont" description="Text Font"
type="font" default="normal normal 90% Arial, sans-serif;"
value="normal normal 77% Arial, sans-serif">
<Variable name="headerFont" description="Blog Header Font"
type="font" default="normal normal 210% Verdana, Arial, Sans-serif;"
value="italic bold 392% Arial, sans-serif">
<Variable name="descriptionFont" description="Blog Description
Font"
type="font" default="normal normal 210% Verdana, Arial, Sans-serif;"
value="italic bold 150% Arial, sans-serif">
<Variable name="sbHeaderFont" description="Sidebar Header
Font" type="font" default="normal normal 210% Verdana, Arial,
Sans-serif;" value="italic bold 165% Arial, sans-serif">
<Variable name="dateHeaderFont" description="Date Header Font"
type="font" default="normal normal 210% Verdana, Arial, Sans-serif;"
value="normal normal 101% Arial, sans-serif">
<Variable name="postHeaderFont" description="Post Header Font"
type="font" default="normal normal 210% Verdana, Arial, Sans-serif;"
value="italic bold 147% Arial, sans-serif">
*/
/* BODY
---------------------- */
body {
background-color: $mainBgColor;
/*
Substitute the URL for your chosen header URL and retire the forwardslashes
ad asteriscs. Image at this example from the original Underworld template of
Beautiful Beta http://beautifulbeta.blogspot.com/.
background: url(http://home.planet.nl/~hansoosting/images/bubblebg.jpg) repeat-x
fixed;
*/
margin: 0;
padding: 0;
text-align: center;
font: $bodyFont;
color: $textColor;
}
/* OUTER WRAPPER
----------------------- */
#outer-wrapper {
width: 98%;
margin: 0 1% 0 1%;
background-color: $mainBgColor;
border: 1px solid #cccccc;
}a:link {
color: $linkColor;
}
a:visited {
color: $visitedlinkColor;
}
a img {
border-width: 0;
}
/* HEADER
----------------------------------------------- */
#header-wrapper {
margin-top: 10px;
padding: 0;
background-color: transparent;
text-align: left;
}
#header {
width: 98%;
height: 100px;
background-color: $bodyBgColor;
/*
Substitute the URL for your chosen header URL and retire the forwardslashes
ad asteriscs. Image at this example from a header of http://mmana.blogspot.com
background: url(http://photos1.blogger.com/blogger2/1287/4081/1600/header_06.1.gif)
left;
/*
margin: 0 auto;
color: $headerTextColor;
padding: 0;
border: 3px solid $borderColor;
}
#header h1 {
padding-top: 10px;
margin: 0 14px .1em;
line-height: 1.2em;
font: $headerFont;
color: $headerTextColor;
}
#header a {
color: $headerTextColor;
text-decoration: none;
}
#header .description {
display: block;
margin: 10px; 14px;
padding: 0 0 40px;
line-height: 1.4em;
font: $descriptionFont;
color: $descriptionTextColor;
}
/* Content
----------------------------------------------- */
.clear {
clear: both;
}#content-wrapper {
width: 98%;
margin: 0 auto;
padding: 0 0 10px;
text-align: left;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-left: 1%;
width: 62%;
float: left;
background-color: transparent;
border: 1px solid #cccccc;
padding: 5px 5px 5px 5px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#left-sidebar-wrapper {
margin-left: 1%;
width: 16%;
float: left;
background-color: transparent;
border: 1px solid #cccccc;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#right-sidebar-wrapper {
margin-right: 1%;
width: 16%;
text-align:right;
float: right;
background-color: transparent;
border: 1px solid #cccccc;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
/* Headings
----------------------------------------------- */
h2, h3 {
margin: 0;
}
/* POSTS
----------------------------------------------- */
.date-header {
margin: 2px 0 0;
font-weight: normal;
color: $dateHeaderColor;
font: $dateHeaderFont;
text-align: right;
border-bottom: 1px solid $borderColor;
}
.post
margin: 2px 2px 5px 2px;
padding: 10px 10px 10px 10px;
border: 1px solid #cccccc;
}
.post-title {
margin: 0 0 0 0;
padding: 5px;
font: $postHeaderFont;
color: $postHeaderColor;
line-height: 1.1em;
}
.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
color: $postHeaderColor;
font: $postHeaderFont;
}
.post-footer {
/*font-size: 85%;*/
color: #999999 /*$textColor*/;
}
.post img {
padding: 4px;
border: 1px solid #cccccc;
}
.post blockquote {
margin: 1em 20px;
padding: 5px 5px;
border-top: 1px solid $borderColor;
border-bottom: 1px solid $borderColor;
background-color: $bqBgColor;
color: $bqTextColor;
}/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 78%;
}
#comments-block dd p {
margin: 0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
margin: 1.0em 0 .5em;
padding: 2px 2px;
background-color: $mainBgColor;
/*
background: url(http://home.planet.nl/~hansoosting/images/bubblestrip.jpg) top
left;
*/
font: $sbHeaderFont;
color: $sidebarTitleTextColor;
border: solid 1px double $mainBgColor;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin: 0;
padding: 0 0 .5em 15px;
text-indent: -15px;
line-height: 1.0em;
}
.sidebar {
color: $textColor;
line-height:1.3em;
}
.sidebar .widget {
margin-bottom: 1em;
}
.sidebar .widget-content {
margin: 0 5px;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: right;
margin: 2px;
padding: 0;
border: 3px solid #cccccc /*$borderColor*/;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font-weight: bold;
line-height: 1.6em;
font-size: 78%;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
/* Footer
----------------------------------------------- */
#footer {
clear: both;
text-align: right;
color: $textColor;
margin: 2px;
border: 1px solid #cccccc /*$borderColor*/;
}
#footer .widget {
margin:.5em;
padding-top: 20px;
font-size: 85%;
line-height: 1.5em;
text-align: left;
}
]]></b:skin>
<script src='http://www.anniyalogam.com/widgets/hackosphere.js' type='text/javascript'/>
</head>

+ ,

1 Comment:

  1. admin said...
    9/11/06 11:29  
    Muchas gracias!!! Y qué rápido has contestado! Ahora mismo me voy a meter en el "período de pruebas", espero que salga bien :) Saludos.

Post a Comment



Subscribe to: Enviar comentarios (Atom)