[tutorial]Darle otro estilo a las quotes en SMF

Les traigo una pequeña guía de como darle un estilo diferente a los quotes de smf.

Después de haberlo hecho les quedará  así.






En sources/subs.php

Buscar

Code: [Select]

array(
'tag' => 'quote',
'before' => '<div class="quoteheader"><div class="topslice_quote">' . $txt['quote'] . '</div></div><blockquote>',
'after' => '</blockquote><div class="quotefooter"><div class="botslice_quote"></div></div>',
'block_level' => true,
),
array(
'tag' => 'quote',
'parameters' => array(
'author' => array('match' => '(.{1,192}?)', 'quoted' => true),
),
'before' => '<div class="quoteheader"><div class="topslice_quote">' . $txt['quote_from'] . ': {author}</div></div><blockquote>',
'after' => '</blockquote><div class="quotefooter"><div class="botslice_quote"></div></div>',
'block_level' => true,
),
array(
'tag' => 'quote',
'type' => 'parsed_equals',
'before' => '<div class="quoteheader"><div class="topslice_quote">' . $txt['quote_from'] . ': $1</div></div><blockquote>',
'after' => '</blockquote><div class="quotefooter"><div class="botslice_quote"></div></div>',
'quoted' => 'optional',
// Don't allow everything to be embedded with the author name.
'parsed_tags_allowed' => array('url', 'iurl', 'ftp'),
'block_level' => true,
),
array(
'tag' => 'quote',
'parameters' => array(
'author' => array('match' => '([^<>]{1,192}?)'),
'link' => array('match' => '(?:board=\d+;)?((?:topic|threadid)=[\dmsg#\./]{1,40}(?:;start=[\dmsg#\./]{1,40})?|action=profile;u=\d+)'),
'date' => array('match' => '(\d+)', 'validate' => 'timeformat'),
),
'before' => '<div class="quoteheader"><div class="topslice_quote"><a href="' . $scripturl . '?{link}">' . $txt['quote_from'] . ': {author} ' . $txt['search_on'] . ' {date}</a></div></div><blockquote>',
'after' => '</blockquote><div class="quotefooter"><div class="botslice_quote"></div></div>',
'block_level' => true,
),
array(
'tag' => 'quote',
'parameters' => array(
'author' => array('match' => '(.{1,192}?)'),
),
'before' => '<div class="quoteheader"><div class="topslice_quote">' . $txt['quote_from'] . ': {author}</div></div><blockquote>',
'after' => '</blockquote><div class="quotefooter"><div class="botslice_quote"></div></div>',
'block_level' => true,
),
Reemplazar por

Code: [Select]

array(
'tag' => 'quote',
'before' => '<blockquote><div class="quoteheader"><div class="topslice_quote">' . $txt['quote'] . '</div></div>',
'after' => '</blockquote><div class="quotefooter"><div class="botslice_quote"></div></div></center>',
'block_level' => true,
),
array(
'tag' => 'quote',
'parameters' => array(
'author' => array('match' => '(.{1,192}?)', 'quoted' => true),
),
'before' => '<blockquote><div class="quoteheader"><div class="topslice_quote">' . $txt['quote_from'] . ': {author}</div></div></center>',
'after' => '</blockquote><div class="quotefooter"><div class="botslice_quote"></div></div>',
'block_level' => true,
),
array(
'tag' => 'quote',
'type' => 'parsed_equals',
'before' => '<blockquote><div class="quoteheader"><div class="topslice_quote">' . $txt['quote_from'] . ': $1</div></div>',
'after' => '</blockquote><div class="quotefooter"><div class="botslice_quote"></div></div>',
'quoted' => 'optional',
// Don't allow everything to be embedded with the author name.
'parsed_tags_allowed' => array('url', 'iurl', 'ftp'),
'block_level' => true,
),
array(
'tag' => 'quote',
'parameters' => array(
'author' => array('match' => '([^<>]{1,192}?)'),
'link' => array('match' => '(?:board=\d+;)?((?:topic|threadid)=[\dmsg#\./]{1,40}(?:;start=[\dmsg#\./]{1,40})?|action=profile;u=\d+)'),
'date' => array('match' => '(\d+)', 'validate' => 'timeformat'),
),
'before' => '<blockquote><div class="quoteheader"><div class="topslice_quote"><a href="' . $scripturl . '?{link}">' . $txt[''] . '@ {author} </a></div></div>',
'after' => '</blockquote><div class="quotefooter"><div class="botslice_quote"></div></div>',
'block_level' => true,
),
array(
'tag' => 'quote',
'parameters' => array(
'author' => array('match' => '(.{1,192}?)'),
),
'before' => '<blockquote><div class="quoteheader"><div class="topslice_quote">' . $txt['quote_from'] . ': {author}</div></div>',
'after' => '</blockquote><div class="quotefooter"><div class="botslice_quote"></div></div>',
'block_level' => true,
),

en el index.css de tu theme buscar

Code: [Select]

blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote
{
font-size: 12px;
color: #555;
line-height: 1.4em;
background: url(../images/theme/quote.png) 0.1em 0.1em no-repeat;
border-top: 2px solid #999;
border-bottom: 2px solid #999;
padding: 1.1em 1.4em;
margin: 0.1em 0 0.3em 0;
overflow: auto;
}

blockquote.bbc_standard_quote
{
background-color: #fff;
}
blockquote.bbc_alternate_quote
{
background-color: #fff;
}

code.bbc_code
{
display: block;
font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
font-size: x-small;
background: #ebf1e3;
border-top: solid 1px #cbd1c6;
border-left: solid 1px #cbd1c6;
border-right: solid 1px #fff;
border-bottom: solid 1px #fff;
line-height: 1.5em;
padding: 3px 1em;
overflow: auto;
white-space: pre;
max-height: 24em;
}

Y remplazamos por:

Code: [Select]

/* Inicio de quotes */

.quoteheader, blockquote blockquote .quoteheader
{
color: #7a899c;
    background: url(../images/theme/bgheaderquote.png) repeat-x;
height:30px;

}


blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote
{
font-size: 12px;
color: #555;
line-height: 1.4em;
border-top: 1px solid #CCCCCC;
border-bottom: 1px outset #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
padding: 0.1em 0.1em;
margin: auto;
overflow: auto;
Width: 90%;

-moz-border-radius:4px 4px 4px 4px;
    -webkit-border-radius:4px 4px 4px 4px;
}

blockquote.bbc_standard_quote
{
background-color: #F8F8F8;
}
blockquote.bbc_alternate_quote
{
background-color: #f8f8f8;
}
/*fin quotes*/

code.bbc_code
{
display: block;
font-family: "dejavu sans mono", "monaco", "lucida console", "courier new", monospace;
font-size: x-small;
background: #ebf1e3;
border-top: solid 1px #cbd1c6;
border-left: solid 1px #cbd1c6;
border-right: solid 1px #fff;
border-bottom: solid 1px #fff;
line-height: 1.5em;
padding: 3px 1em;
overflow: auto;
white-space: pre;
max-height: 24em;
}

Y luego subimos la imagen adjunta a la carpeta /images/theme   de tu theme

Puede funcionar para cualquier theme auuque esta guia es con el theme sunblox de smfsimple. pero en otros seria basicamente lo mismo.

Dejo un link a una cita en mi foro, para que vean como queda.

http://despeloterosunidos.com/index.php?topic=51.msg2339#msg2339

Saludos

Excelente! +1

Muy bueno! +0.99

Tengo un Index.css diferente... podrias mirarlo a ver si puedo realizar esta operacion?

No quiero tocar algo y acabar de destruir mi foro xD

te quedo excelente el estilo del quote seguramente lo uso +1 para ti

Tengo un Index.css diferente... podrias mirarlo a ver si puedo realizar esta operacion?

No quiero tocar algo y acabar de destruir mi foro xD

Link de tu pagina, para ver el teme que usas

http://multipsp.skn1.com/

Uso el Submission de Crip.