¿Cómo editar mi theme? [OBSOLETO]

Started by [darksteel], April 09, 2005, 01:12:52 PM

Previous topic - Next topic

[darksteel]

 ;D Bueno de nuevo por aquí escribiendo manuales cortos....

[ Introducción ]
      Aquí os dare un manual de como modificar themes de smf o Temas a su gusto, basado en otro manual en inglés ( las imágenes ).

Abrimos el Style.css del theme default:

Links visitados y no visitados:

Quote/* Normal, standard links. */
a:link
{
color: #000000;
text-decoration: underline;
}
a:visited, a:hover
{
color: #323232;
text-decoration: underline;
}




Links en cascadas:

Quote/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
color: #000000;
text-decoration: none;
}
a.nav:hover
{
font-weight: bold;
color: #cc3333;
text-decoration: underline;
}


Fondo o Backgraund:
Quote
body
{
background-color: white;
margin: 0px;
padding: 0px;
}



Letra de los botonesy en las cajas de texto:
Quote
/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
font-size: 9pt;
color: #000000;
font-family: Tahoma, arial, helvetica, serif;
}



Cajas de selección ( opciones ):
Quote
/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
font-size: 8pt;
font-weight: normal;
color: #000000;
font-family: Tahoma, arial, helvetica, serif;
}


Líneas HR <hr>
Quote
/* Standard horizontal rule.. */
hr, .hrcolor
{
height: 1px;
border: 0;
color: #666666;
background-color: #666666;
}


Las famosas Citas ó Quotes:

Quote/* A quote, perhaps from another post. */
.quote
{
color: #000000;
background-color: #C3B8D0;
border: 1px solid #000000;
margin: 1px;
padding: 1px;
font-size: x-small;
}


El tag [ code ]

Quote/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #cccccc;
border: 1px solid #000000;
padding: 1px;
font-family: "courier new", helvetica, "times new roman", serif;
font-size: x-small;
width: 99%;
margin: 1px auto 1px auto;
white-space: nowrap;
overflow: auto;
}


Código y Citas header osea el color que dirá Cita o Código:

Quote/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
color: #000000;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
}


Editor o Caja de texto donde se publica un mensaje Se ajusta editando el porcentaje.

Quote/* The main post box - this makes it as wide as possible. */
.editor
{
width: 96%;
}



Fondo de palabras en el buscador, cuando buscas y obtioenes el resultado por defecto lo da Amarillo vean la imágen para que entiendan.

Quote/* Highlighted text - such as search results. */
.highlight
{
background-color: yellow;
font-weight: bold;
color: black;
}


Los fondos de los mensajes y usados en otras partes del foro los Windowsbg

Quote/* Alternating backgrounds... */
.windowbg
{
color: #000000;
background-color: #E1E1E1;
}
.windowbg2
{
color: #000000;
background-color: #F0F0F0;
}



Títulos de mensajes:

Quote/* Titles - such as table headers. */
.titlebg, tr.titlebg td, .titlebg a:link, .titlebg a:visited
{
color: white;
font-style: normal;
background-color: #6B8EAE;
}
.titlebg a:hover
{
color: #dfdfdf;
}


Fondos de las categorías:
Quote
/* The category headers, page indexes, and such things - catbg2 is used for "new" posts. */
.catbg, .catbg2
{
font-weight: bold;
background-color: silver;
color: #000000;
}
.catbg
{
background-image: url(images/titleback.gif);
}
.catbg2
{
background-image: url(images/titleback.jpg);
}




titleback.gif

titleback.jpg

Colores de Bordes ( tablas ) y fondo...:

Quote/* The borders around things. */
.bordercolor
{
background-color: #828181;
}
.tborder
{
border: 1px solid #828181;
background-color: #FFFFFF;
padding: 2px;
}






Ahora van las cajas de información en el top arriba:

Quote
/* This is for the special header boxes on the top - it's not used elsewhere. */
.headertitles
{
background-color: #6B8EAE;
border: 1px solid #6B8EAE;
}
.headerbodies
{
border: 1px solid #7A7777;
background-color: #EFEFEF;
background-repeat: repeat-x;
background-position: bottom;
}




Imagenes por:Patrick Tutorial Theme

Para entender nesecitan saber algo de HTML y de colores :).

[darksteel]



Luis "[darksteel]" Alvarado.
Spanish Support
¿Qué es el repair_settings?
No doy soporte por PM, publica tu duda en el foro y tendras respuestas mas rapidas.
My forum:
www.caamboard.com

::Winsmurf::

Mas que html, los colores hay que tenerlos claros. Pero si tienes problemas con los colores, busca en tu editor de html. Como el dreamweaver o el FP

Saludos
MaxBox

[darksteel]




Luis "[darksteel]" Alvarado.
Spanish Support
¿Qué es el repair_settings?
No doy soporte por PM, publica tu duda en el foro y tendras respuestas mas rapidas.
My forum:
www.caamboard.com


victoralia


[darksteel]




Luis "[darksteel]" Alvarado.
Spanish Support
¿Qué es el repair_settings?
No doy soporte por PM, publica tu duda en el foro y tendras respuestas mas rapidas.
My forum:
www.caamboard.com

foxmulder

Ya no se ven las imagenes y eran muy útiles para ver que parte del foro se está modificando.

¿Podriais arreglarlo?

Gracias.

matiesderiver

Quote from: foxmulder on May 29, 2005, 09:48:19 AM
Ya no se ven las imagenes y eran muy útiles para ver que parte del foro se está modificando.

¿Podriais arreglarlo?

Gracias.

Aca estan las imagenes:
http://patrick.hardcorecoders.net/tutorials/

Saludos ;)

[darksteel]

Quote from: foxmulder on May 29, 2005, 09:48:19 AM
Ya no se ven las imagenes y eran muy útiles para ver que parte del foro se está modificando.

¿Podriais arreglarlo?

Gracias.

Estoy ya arregkandola, gracias por acordarme.

darksteel-



Luis "[darksteel]" Alvarado.
Spanish Support
¿Qué es el repair_settings?
No doy soporte por PM, publica tu duda en el foro y tendras respuestas mas rapidas.
My forum:
www.caamboard.com

Pedi que me borren

Muy bueno el mini-tutorial, Dark

Para manejar los colores les recomiendo, el Kolorok 2.1
Que ademas de paleta, sirve para ver el codigo de cualquier color en pantalla, con solo señalarlo con el mouse.

Se puede descargar desde aqui:
http://www.maitea.com/kolorok.html

oros

#10
Estoy intentando adaptar los colores al estilo de mi página (fondo negro y texto amarillo) y tras mirar y remirar el archivo style.css no he sido capaz de aplicar el amarillo al texto sin problemas.

Me he visto "obligado" a cambiar el texto a otro color en las cajas de selección (o como se llamen  :-X , me refiero a lo que vemos al escribir un post como "cambiar color") ya que no se puede cambiar el blanco del fondo (o no es recomendable como dicen en el foro en inglés).

Pero no acabo aqui...  :-[ todos los cuadros de texto aparecen también con el blanco de fondo y no sé si se puede o no cambiar el fondo a otro color o si es necesario cambiar la letra a una más oscura. Y en este último caso se puede cambiar sólo cuando esté un cuadro de texto detrás ???.

Espero haberme explicado y que me podais ayudar.

También he visto que el fondo de los botones (gris claro) no me permite ver bien el texto en amarillo, pero no lo he buscado tanto como lo de los cuadros de texto. Igual me apaño y todo...  ::)
webmaster de hxxp:www.escacsgava.com [nonactive]
webnovato de hxxp:www.escacsgava.com/foro [nonactive]

otif

oros, busca en el archivo css los tags de "body", "select", "input", "textarea" y modifica sus colores o colocalos sino existen, te recomiendo que antes hagas una copia por si algo sale mal,

espero te sirva de ayuda

Leo.J90

Q se tiene q saber para editar themes?---> X/Html (100%), Css (100%), Php (35%) y Sql (25%)... si no saben ni siquiera html, no toquen, pregunten 1ero..

mast3er

Quote from: X.Cyclop on November 04, 2005, 11:57:17 AM
Q se tiene q saber para editar themes?---> X/Html (100%), Css (100%), Php (35%) y Sql (25%)... si no saben ni siquiera html, no toquen, pregunten 1ero..
no creo qeu sea tan asi, yo se html, css, y estoy aprendiendo a fondo PHP y SQL. Y edito los themes sin problemas, y lo hacia cuando solo sabia html y aprendi css a las patadas.

Acordate que tambien tenes que saber modificar las imagenes y todo lo que es graficos porque o si no no llegas a ningun lado
URL del foro: www.master.com.ar/foros
Theme usado: Apollo
Version: 1.1RC2

Leo.J90

Bueno, talvez me equivoqué con los porcentajes, pero de Php creo que con saber lo básico ya basta. ;)

reydelmundo11

Pero para editar un theme completamente hay que saber tambien php, ahi solo editas las hojas de estilo.
Saludos  ;)
Obtenga su foro smf gratis en:

Leo.J90

Quote from: reydelmundo11 on February 10, 2006, 10:22:35 AM
Pero para editar un theme completamente hay que saber tambien php, ahi solo editas las hojas de estilo.
Saludos  ;)
El aspecto solamente con Html y/o Css, agregar o quitar cosas ya es con Php. :P

manolain

¿Cómo cambio el color del texto del título del foro, el que sale grande en la esquina superior izquierda?
¿Cómo cambio también la posición de ese texto, para que esté en la derecha? (y el logo a la izquierda)?

Gracias

NeLVi

Manolain, tienes que editar el archivo del template "index.template.php"

Y buscar las etiquetas en html que tienes que editar, que son donde aparezca el logo y ese texto que quieres cambiar.

;)

Leo.J90

Quote from: manolain on April 05, 2006, 03:43:22 PM
¿Cómo cambio el color del texto del título del foro, el que sale grande en la esquina superior izquierda?

styles.css

Quote from: manolain on April 05, 2006, 03:43:22 PM¿Cómo cambio también la posición de ese texto, para que esté en la derecha? (y el logo a la izquierda)?
index.template.php

Advertisement: