Veréis, la cuestión es que quiero crear un estilo para las citas, de tal forma que queden en un cuadradito de color, tal y como hace Rinzewind en su maravilloso blog
Para tal menester, le pedí el código que utilizaba para dichos cuadritos o formato de citas, respondiéndome lo siguiente:
Rinzewind escribió: Lo tengo hecho con CSS. Utilizando el elemento <blockquote>, por
ejemplo, lo que tengo es:
blockquote {
border: 1px #9cf solid;
padding: 0em 0.5em;
margin-left: 1.5em;
background-color: #eee;
}
Si lo que quieres es usarlo para los comentarios, lo que tienes que
hacer es una clase DIV:
div.comentario {
border: 1px #9cf solid;
padding: 0em 0.5em;
margin-left: 1.5em;
background-color: #eee;
}
Y luego meter el contenido de los comentarios en algo como <div
class="comentario">...</div>.
Se supone que el asunto debería ser fácil; primero creo el estilo "comentario" y, luego, en <head> coloco el enlace correspondiente a dicho estilo. Cómo no.
Pero resulta que trabajo con blogger, por lo que no puedo crear diversos .txt para mayor comodidad, y todo el código html de la página va en un sólo archivo, éste, sin ir más lejos:
Código: Seleccionar todo
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES" "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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
/* **************************
Plantilla adaptada a Blogger por Blog and Web
Diseño original por Free CSS Templates.
Encuentra esta y más plantillas en:
http://www.blogandweb.com
Recuerda que esta plantilla es gratuita y esta
bajo una licencia Creative Commons Atribution.
Puedes usarla para fines personales o comerciales
pero NO REMOVER LOS CREDITOS
Algunos iconos por famfamfam.com
Una bonita forma de agradecer es dando un link a Blog and Web.
***************************** */
/* Definición de variables
====================
<Variable name="enlacecolor" description="Color de los enlaces (links)"
type="color" default="#FFFFFF" value="#000000">
<Variable name="colortituloblog" description="Color del título del blog"
type="color" default="#FFFFFF" value="#8c0000">
<Variable name="descripcioncolor" description="Color de la descripción del blog"
type="color" default="#FFFFFF" value="#4c4c4c">
<Variable name="colortituloentrada" description="Color del título de las entradas"
type="color" default="#000000" value="#000000">
<Variable name="colortituloslateral" description="Color de los titulos en la barra lateral"
type="color" default="#FFFFFF" value="#cc0000">
<Variable name="colortextolateral" description="Color del texto en la barra lateral"
type="color" default="#666" value="#666666">
<Variable name="colorenlaceencima" description="Color del link al pasar el mouse"
type="color" default="#999" value="#7f7f7f">
*/
#outer-wrapper {
}
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}
/*-- (Genrales) --*/
body {
/*background: url(http://bp1.blogger.com/_Zuzii37VUO4/RkKknOMBSbI/AAAAAAAAA50/cGu2veAt6g8/s1600/img1.gif) repeat-x left top; */
background: #FFF url(http://img507.imageshack.us/img507/4350/3a2mx2.jpg) no-repeat right top;
text-align: justify;
font-family: Tahoman, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
}
h1 {
}
h2, h3 {
margin-top: 0px;
}
h4, h5, h6 {
}
p, ol, ul, dl, blockquote {
}
a {
color: $enlacecolor;
}
a:hover {
text-decoration: none;
}
img { border: 2px solid #000000; }
.img1 {
float: left;
margin: 5px 15px 0px 0px;
}
/*-- (Cabecera) --*/
#header-wrapper {
width: 820px;
height: 60px;
margin: 0px 0px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#header-wrapper h1 {
float: left;
margin: 0px 20px 10px 50px;
padding-top: 20px;
font-size: 43px;
letter-spacing: -2px;
color: $colortituloblog;
}
#header-wrapper p {
margin: 0px 20px 20px 50px;
padding-top: 70px;
font-size: 15px;
font-weight: italic;
letter-spacing: -1px;
color: $descripcioncolor;
}
#header-wrapper a {
text-decoration: none;
color: $colortituloblog;
}
#content-wrapper {
width: 880px;
margin: 28px 20px 5px 50px;
padding: 20px 0px 0px 0px;
}
/*-- (Menú) --*/
/*-- (Principal) --*/
#main-wrapper {
float: right;
width: 520px;
margin: 18px auto;
background-color: #CC441B;
padding: 0px 0px 0px 0px;
border: 3px solid #000000;
color: #FFFFFF;
}
#main-wrapper a {
}
#main-wrapper a:hover {
}
.post {
padding: 0 2em 1em 3em;
border-bottom: 1px dashed #823D47;
}
.post-title {
margin-bottom: .5em;
font-size: 1.5em;
color: $colortituloentrada;
}
.post-title a{
color: $colortituloentrada;
}
.post-body {
}
.date-header {
padding: 2em 2em 0 3em;
color: #000000;
font-size:10px;
}
.post-footer {
color: #000000;
font:x-small;
}
.post-footer a{
color: #000000;
}
/*-- (Lateral) --*/
#sidebar-wrapper {
float: left;
width: 240px;
}
.sidebar .widget {
margin-bottom: 1em;
color: #FFFFFF;
}
#sidebar-wrapper ul{
list-style: none;
padding: 0 20px; 0 0;
}
#sidebar-wrapper li{
margin-bottom: 0;
}
#sidebar-wrapper h2 {
background: url(http://bp2.blogger.com/_Zuzii37VUO4/RkKkneMBScI/AAAAAAAAA58/SeSRONzTaZg/s1600/img2.gif) no-repeat;
padding: 0px 0 5px 20px;
text-transform: uppercase;
font: 18px Tahoma, Arial, Helvetica, sans-serif;
font-weight: bold;
border-bottom: 1px dashed #CC441B;
color: $colortituloslateral;
}
.widget-content {
}
#sidebar-wrapper a {
font: 15px;
color: #000000;
}
/*-- (Pie de página) --*/
#footer-wrapper {
width: 900px;
margin: 10px 0px;
padding: 3px 0px;
color: #787878;
}
#footer-wrapper .links {
clear:both;
margin: 0px;
padding-right: 40px;
text-align: right;
font-size: 10px;
}
#footer-wrapper a {
color: #FF4000;
}
/*-- (Iconos)-- */
.post-labels {
padding-left:20px;
padding-top:5px;
background:transparent url(http://bp2.blogger.com/_Zuzii37VUO4/RfI1_yAns8I/AAAAAAAAAYI/5m8K2kkqYRw/s1600/etiqueta_naranja.gif) center left no-repeat;
}
.post-author {
padding-left:20px;
padding-top:5px;
background: url(http://bp1.blogger.com/_Zuzii37VUO4/RfebZS0300I/AAAAAAAAAcw/dBZjEJ39hDE/s1600/autor.gif) center left no-repeat;
}
.feed-links {
padding-left:20px;
padding-top:5px;
background: url(http://bp0.blogger.com/_Zuzii37VUO4/Rj7ME-MBRJI/AAAAAAAAAwM/IOo-YUYR5aM/s1600/icono-feed.gif) center left no-repeat;
}
]]></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='Esos Discos Estúpidos (cabecera)' 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='Entradas del blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Text1' locked='false' title='La letra pequeña' type='Text'/>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Afiliados' type='HTML'/>
<b:widget id='Label1' locked='false' title='Categorías' type='Label'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Archivo' type='BlogArchive'/>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</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'>
<!-- RECUERDA QUE ESTA PLANTILLA ES GRATUITA, POR FAVOR NO REMUEVAS LOS CREDITOS -->
<p class='links'> 2008 Diseño original por
<a href='http://www.freecsstemplates.org/'>Free CSS Templates</a>
| Adaptación a Blogger por
<a href='http://blogandweb.com/'>Blog and Web</a></p>
</div>
</div></div> <!-- end outer-wrapper -->
</body>
</html>
He intentado introducir el DIV para las citas en "main content" y sucedáneos, y nada de nada; desesperación y locura.
Así pues; ¿seríais tan amables y buenas personas como para introducir en el anterior código html el div para citas y tal y cual? Vamos, de manera que, a la hora de postear, tan sólo tenga que introducir el código <div class="cita"></div> para que el texto entre dichos comandos aparezca en el deseado marco de color.
