Topics

Bueno el tema es para los que hacemos paginas web con fines lucrativos, ¿como andan los precios en sus países? por ejemplo acá es muy difícil hay muchos desarrolladores freelance que por 100 dolares hacen un sitio web de calidad dudosa, entonces los clientes se atienen a eso y no quieren pagar lo que realmente cuesta el trabajo.  por ejemplo esta http://sistemsenterprise.com/ la hice por 400 dolares gringos, es toda en HTML y de muy bajo costo, pero también esta està otra para un hotel http://puntateonoste.com por esa cobre 1700 dolares y así van variando lo precios según la calidad que el cliente quiera.

Ahora trabajo en una del gobierno municipal de cierto lugar por la que cobraré de 2500 a 3 mil (de ahí saldrá mi nuevo ps3 y mi pantalla LED jeje)  bueno el caso es que me gustaría conocer en su país como andan los precios de este servicio.

Saludines.

Estoy tratando de agregarle una clase diferente a un par de link. lo hago de esta forma porque es la uynica que no me da error al cargar la plantilla.


<div class="sp_right"><a class="leermas" href="', $article['article']['link'], '">',  $article['article']['new_comment'], '</div>
</div>
En cierta manera funciona pero me sale así.  me escribe los signos ">



¿Alguien que me ayude a corregir el error?

Saludos.

Una de las cosas que siempre queremos, es tener un foro con un diseño original, por eso en este pequeña guía abordaremos un poco sobre como personalizar un theme SMF a nuestro gusto y crear un theme sencillo pero bonito para nuestro foro.

En la guía iremos personalizando paso a paso  el theme Curve default de SMF 2.0.2 hasta conseguir un nuevo diseño.

Pueden ir siguiendo la guía para que vayamos aprendiendo juntos y si alguien tiene ideas o aportes serán bien recibidas de esa forma seria mas interactiva y entretenida.

Los pasos que describire no son ley, ni estan escritos en piedra, es solo mi punto de vista y la forma en que yo lo hago. Tal vez lo sientan un poco lento ya que iré redactando mientras edito, pero con paciencia aprenderemos mejor.

Si van siguiendo la guía paso a paso les aseguro que al terminar el theme ustedes también habrán aprendido algo.


Herramientas necesarias:

-Servidor local para instalar SMF
-Editor de imagenes (Gimp, Photoshop, ect)
-Editor de texto (Notedpad++)

Comencemos:

I- Visualizar el diseño y decidir a que va orientado.[/color]
Este probablemente sea uno de los puntos mas difíciles en la creación de un theme y consiste en definir los colores y ver hacia que publico orientaremos el theme. Si nuestro foro es sobre bodas lógicamente el theme no será negro o si es sobre bandas de rock no lo haremos rosado con amarillo, entonces esta parte es importante. yo ya tengo una idea en la cabeza así que a comenzar (espero me salga).


II-Cambiando el color de fondo[/color]

lo primero que haremos será cambiar el fondo del theme por el color que queramos.

En Index.css
[/color]
Buscamos:

body
{
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;
font: 78%/130% "Verdana", "Arial", "Helvetica", sans-serif;
margin: 0 auto;
padding: 15px 0;
}
Este es el codigo CSS que define el estilo del fondo de nuestro foro

Explicación el código:

background: la propiedad background define el color o imagen que tendra el fondo, #E9EEF2 establece el color, url(../images/theme/backdrop.png) es la imagen de fondo, repeat-x que se repetira de manera horizontal, repeat-y repite de manera vertical, no-repeat es para que la imagen no se repita
font: establece el tamaño de la fuente en el foro, el primer porcentaje es el tamaño de la fuente y el segundo el tamaño del interlineado

Nosotros podemos experimentar con los valores y asi adecuarnos al que mas nos guste.

Ya hice la primer modificación al theme default y me quedo así.





III- Cambiando diseño y color en las categorias y subforos.

El theme curve de SMF utiliza una imagen llama da main_block.png para definir el diseño y los colores del foro esta imagen se puede modificar para darle a nuestro diseño los colores o el estilo que queramos.  Esta imagen la encontramos en la carpeta Themes\default\images\theme.

Esta es la imagen


/*En algunos diseños la imagen puede variar y otros no la traen dependiendo el estilo del theme, como esta guia esta totalmente basada en el theme curve si la usaremos.*/

Modificando las categorias

El fondo de las categorias esta definido por este codigo:

buscamos:

h4.catbg, h4.catbg2 , h3.catbg , h3.catbg2 , .table_list tbody.header td.catbg
{
background: url(../images/theme/main_block.png) no-repeat 100% -160px;
padding-right: 9px;
}
y

div.cat_bar
{
background: #99abbf url(../images/theme/main_block.png) no-repeat 0 -160px;
padding-left: 9px;
height: 31px;
overflow: hidden;
margin-bottom: 1px;
}
Esta parte establece el diseño que tendrán las categorías, como dije antes la imagen main_block.png se encarga de la forma y el color de esta seccion.

background: url(../images/theme/main_block.png) no-repeat 100% -160px; (Establece que parte de la imagen main_block.png se usará de fondo, 100% -160px; estas son las coordenadas de el area de la imagen que usaremos,100% es el final de la imagen de izquierda a derecha, y -160 es el pixel 160 de ariba hacia abajo mas adelante explicare lo de las coordenadas de manera gráfica así me entenderán mejor  )

en el segundo código esta la altura que tendrá height: 31px;.

Para darle un color diferente basta con cambiarle el color a esta sección en la imagen main_block.png

Les dejo una imagen de main_block.png  con su equivalente en el foro para que vean que sección modificar para cada área del foro



Una ves modificado un poco el archivo main_block.png me quedo así.



Hasta el momento he hecho poco pero voy editando el theme y al mismo tiempo redactando la guia asi que me toma algo de tiempo. Instalare un foro DEMO para que vayan viendo las modificaciones al diseño.

/**************************************************
Dejo el archivo main_block.psd y Menu_gfx.psd separados en capas para que se les haga mas fácil editarlo.  

main_block.psd
http://www.mediafire.com/?xnj790zjtemoljo
menu_gfx.png
http://www.megaupload.com/?d=RVRSDAHT
***********************************************************************/

Bueno, iré a preparar un poco de café y seguimos.

Modificar la tabla de los foros

El código CSS que define el estilo de la tabla de los foro y la de los temas es el siguiente.

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg, #preview_body
{
color: #000;
background-color: #e7eaef;
}
.windowbg2
{
color: #000;
background-color: #f0f4f7;
}
.windowbg3
{
color: #000;
background-color: #cacdd3;
}
Estos atributos no solo definen el estilo de los foros también la del índice de temas y otras secciones del foro.  En este ejemplo yo añadiré un nuevo atributo para darle un diseño independiente al board.

Para hacer esto en el archivo

Index.css

Al final agregamos un nuevo atributo ID de la siguiente forma

.newboard
{

   background: #fff;

}
Y un efecto hover para que al pasar el mouse sobre el titulo se sombree de otro color.

.newboard:hover
{

   background: #DCE7FA;
   
}
Luego abrimos el archivo

BoardIndex.template.php (este archivo que se encarga de la estructura de el área de los foros)

buscar

<tr id="board_', $board['id'], '" class="windowbg2">
<td class="icon windowbg"', !empty($board['children']) ? ' rowspan="2"' : '', '>
reemplazar por

<tr id="board_', $board['id'], '" class="newboard">
<td class="icon"', !empty($board['children']) ? ' rowspan="2"' : '', '>
Buscar

</td>
<td class="stats windowbg">
Reemplazar por:

</td>
<td class="stats">
Y ahora ya tenemos un efecto bonito en el área de las categorías de los foros. Les recuerdo que ustedes pueden jugar con los estilos para darle mejores efectos, en ves de color bien pueden poner una imagen, sombras, bordes redondos y cosas así que harán nuestro diseño mas profesional.

Para modificar el tamaño, fuente y color de los titulos

en index.css

.table_list tbody.content td.info a.subject
{
font-weight: bold;
font-size: 110%;
color: #d97b33;
}
Dejo una captura para que vean y también en la demo pueden ver los avances y si tienen consultas pueden hacerlas.




 
 

Este es un  tip muy sencillo que agrega un estilo diferente a los post del administrador o otros grupos de usuarios.

Demo: http://despeloterosunidos.com/index.php?topic=615.msg14299#msg14299

Comencemos

En Display.template.php   de tu theme.

buscamos:
<div class="', $message['approved'] ? ($message['alternate'] == 0 ? 'windowbg' : 'windowbg2') : 'approvebg', '">
Y reemplazamos por:
<div class="', $message['approved'] ? ($message['alternate'] == 0 ? 'windowbg' : 'windowbg2') : 'approvebg',' grupstyle_',$message['member']['group_id'],'">

En Index.css

agregamos: /*Pueden jugar con el css code  para personalizar el estilo de la forma que mas les guste*/


.grupstyle_1
{
padding: 2px 5px;
font-size: 0.9em;
line-height: 1.3em;
border: 1px solid #F3F3F3;
background: #D7EEFE;
margin: 3px 0 3px 0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-box-shadow: 2px 2px 5px #999;
        -moz-box-shadow: 2px 2px 5px #999;
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Si quieren hacer lo mismo con los moderadores u otros grupos entonces solo agregan al css:

.grupstyle_2
{
padding: 2px 5px;
font-size: 0.9em;
line-height: 1.3em;
border: 1px solid #F3F3F3;
background: #D7EEFE;
margin: 3px 0 3px 0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-box-shadow: 2px 2px 5px #999;
     -moz-box-shadow: 2px 2px 5px #999;
}
y van variando .grupstyle_2, .grupstyle_3, .grupstyle_etc segun el grupo de usuarios al que le quieran aplicar un nuevo diseño en sus post.

Saludos.

Bueno quería compartir esto con ustedes, mi comunidad ya cumple dos años, tenemos un equipo de futbol formado por los usuarios del foro (jugamos contra empresas), también de paintball. Por problemas con el hosting perdimos toda la DB de los 2 años, y por eso perdimos usuarios y muuuuchos post..

Algunas fotos de los miembros en reuniones del foro.
En un partido de fut


en el paintball


Reunion cervecera..jeje


Les dejo el post donde lo anunciamos para que lo lean y pues si a alguno le gusta nuestra comunidad con gusto lo recibimos..

http://despeloterosunidos.com/index.php?topic=532.0


Saludos.

/*P.D: el efecto deslizante de las celdas del perfil es exclusivo jeje (lo hice hoy) , si tengo tiempo el lunes se los comparto*/

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

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

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:

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

He buscado desde que me descargué este tema como centrar el avatar he probado muchas formas pero no lo he conseguido alguien podria ayudarme? lo que quiero es que aparesca en el centro de la celda del perfil en los mensajes. No quiero que este alineado hacia la derecha como está actualmente.

dejo una imagen.







Gracias.

Hola a todos he hecho unas pequeñas modificacions al theme Sublox pero no he podido remover las estadisticas que salen en la parte de arriba y me gustaria hacerlo.

lo he buscado en BoardIndex.template pero no lo encuentro. o no se si es alguna opcion en las configuraciones pero tambien ya la busqué y no la encontré.

Podrian ayudarme con el codigo?

Gracias...