Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje27-08-2008, 23:21 (UTC)    
Título del mensaje: [Css] Crea tu propio diseño Iceblue [Tutorial Sencillo]

Haga su propio diseño CSS Iceblue

Iceblue libre proceso de diseño:

Este código podría ser como un "marco básico".

Parte Basica y sencilla

Cita:

<style type="text/css">
<!--
/* Diseño de herramientas */
table.edit_main_table{width: 100% !important;}
td.edit_main_tr{width: 100% !important;}
table.edit_second_table{width: 100% !important;}
td.edit_header_full{width: 100% !important;}
td.edit_header_full table{width: 100% !important;}
table.edit_third_table{width: 100% !important;}
td.edit_navi_headbg{width: 15% !important;}
table.edit_rechts_tabelle{width: 100% !important;}
td.edit_rechts_bottom{width: 15% !important;}
td.edit_rechts_cbg{width:100%;}

/* Link y el formato de texto */
p, div, b{color: #000000;}
td.nav a{color:#XXXXXX;
font-size: 12px;
text-decoration: none;}

a:hover {color: #XXXXXX;
font-size: 12px;
text-decoration: none;}

a: link {color: #XXXXXX;
font-size: 12px;
text-decoration: none;}

a:active {color: #XXXXXX;
font-size: 12px;
text-decoration: none;}

a:visited {color: #XXXXXX;
font-size: 12px;
text-decoration: none;}

/*Antecedentes, detrás de diseño */
body{
background-image: url();
background-color: #XXXXXX;
color: #000000 !important;}

(----O antecedentes con imagen
body{
background-image: url(http://Here background image);
color: #000000 !important;}-----)

/ * Cabecera fijo y centrado * /
td.edit_header_full { td.edit_header_full (
width: 100% !important; ancho: 100%! importante;
background-repeat:no-repeat; fondo-repito: si no se repita;
background-position:center center; antecedentes de posición: centro centro;
background-image: url (http://Here header image) ;} fondo de la imagen: url (http://Here imagen de cabecera)

/* Remove Track header */ / * Eliminar cabecera de pista * /
td.headline {visibility:hidden;} td.headline (visibilidad: oculto;)


/* Navigation */ / * Navegación * /
td.nav { td.nav (
text-decoration: none; text-decoration: none;
color: #000000 ; color: # 000000;
width: 185px; width: 185px;
height: 40px; altura: 40px;
background-image: url (http://Here Button 1.jpg) ;} fondo de la imagen: url (http://Here Botón 1.jpg)

td.nav:hover { td.nav: hover (
color: #000000 ; color: # 000000;
width: 185px; width: 185px;
height: 40px; altura: 40px;
background-image: url (http://Here Button 2.jpg) ;} fondo de la imagen: url (http://Here Botón 2.jpg)

td.edit_navi_headbg { td.edit_navi_headbg (
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
background-image: url(); fondo de la imagen: url ();
background-color: #XXXXXX ; fondo-color: # XXXXXX;
width: 185px; width: 185px;
background-repeat: repeat-y;} antecedentes de repetir: repetir-y

td.edit_below_nav { td.edit_below_nav (
visibility: hidden; visibilidad: oculto;
width: 185px;} width: 185px;)

td.edit_below_nav img { td.edit_below_nav IMG (
visibility: hidden; visibilidad: oculto;
width: 1px;} ancho: 1px;)

td.nav_heading { td.nav_heading (
width: 89px; width: 89px;
height: 80px; altura: 80px;
background-image: url (http://Image(bild) of Navigation.jpg) ; fondo de la imagen: url (http://Image (bild) de Navigation.jpg);
background-color: #XXXXXX ; fondo-color: # XXXXXX;
padding-top: 0px; padding-top: 0px;
font-weight: bold; font-weight: bold;
font-size: 15px; font-size: 15px;
text-decoration: none;} text-decoration: none;)

td.edit_navi_headbg table { td.edit_navi_headbg cuadro (
width: 185px;} width: 185px;)

.menu { . menú (
width: 185px; width: 185px;
color: #000000 ! important; color: # 000000! importante;
font-weight: bold; font-weight: bold;
padding-left: 35px; padding-left: 35px;
font-size: 12px;} font-size: 12px;)

.menu a { . menú (
color: #000000 ; color: # 000000;
font-weight: bold; font-weight: bold;
padding-left: 35px; padding-left: 35px;
text-decoration: none; text-decoration: none;
font-size: 12px;} font-size: 12px;)


/* Text box link formatting */ / * El recuadro de texto de formato vínculo * /
td.edit_content a { td.edit_content a (
color: #XXXXXX ; color: # XXXXXX;
font-size: 12px; font-size: 12px;
text-decoration: none;} text-decoration: none;)

td.edit_content a:hover { td.edit_content a: hover (
color: #XXXXXX ; color: # XXXXXX;
font-size: 12px; font-size: 12px;
text-decoration: none;} text-decoration: none;)

/* Text box background */ / * El recuadro de texto de fondo * /
td.edit_content { td.edit_content (
background-image:url(); fondo de la imagen: url ();
background-color: #XXXXXX ;} fondo-color: # XXXXXX;)


/* Titles about page remove */ / * Títulos acerca de la página eliminar * /
td.headline2 {visibility:hidden;} td.headline2 (visibilidad: oculto;)
td.idcp {visibility:hidden;} td.idcp (visibilidad: oculto;)

td.edit_content_top { td.edit_content_top (
height: 25px; altura: 25px;
background-image: url(); fondo de la imagen: url ();
background-color: #XXXXXX ;} fondo-color: # XXXXXX;)

td.edit_content_bottom { td.edit_content_bottom (
background-image: url(); fondo de la imagen: url ();
background-color: #XXXXXX ;} fondo-color: # XXXXXX;)

td.edit_content_bottom2 { td.edit_content_bottom2 (
background-image: url(); fondo de la imagen: url ();
background-color: #XXXXXX ; fondo-color: # XXXXXX;
text-align: right;} - alinear texto: derecho;)

td.edit_rechts_cbg { td.edit_rechts_cbg (
margin: 0px; margin: 0px;
background-image: url(URL); fondo de la imagen: url (URL);
background-color: #XXXXXX ;} fondo-color: # XXXXXX;)


/* Rights boxes */ / * Derechos cajas * /
td.edit_rechts_sbg { td.edit_rechts_sbg (
background-image: url(); fondo de la imagen: url ();
width: 0px;} width: 0px;)

td.sidebar_heading { td.sidebar_heading (
background-image: url(); fondo de la imagen: url ();
background-color: #XXXXXX ; fondo-color: # XXXXXX;
border-bottom: 0px double #XXXXXX ;} frontera de fondo: 0px doble # XXXXXX;)

.shouty, .shouty2, .shouty3, .shouty4, .shouty5 { . shouty,. shouty2,. shouty3,. shouty4,. shouty5 (
background-image: url(); fondo de la imagen: url ();
background-color: #XXXXXX ; fondo-color: # XXXXXX;
color: #000000 ; color: # 000000;
font-weight: bold;} font-weight: bold;)

td.edit_rb_footer { td.edit_rb_footer (
background-image: url(); fondo de la imagen: url ();
background-color: #XXXXXX ; fondo-color: # XXXXXX;
border-bottom: 0px solid #XXXXXX ;} frontera de fondo: 0px solid # XXXXXX;)

td.edit_rechts_bottom { td.edit_rechts_bottom (
background-image: url(); fondo de la imagen: url ();
background-color: #XXXXXX ;} fondo-color: # XXXXXX;)

-->
</style> </ style>



Explicación:
colores
Naranja = colores colores de texto o enlace
verde = colores diseño / colores de fondo
Red = clases




-----------------------------------------------------------------------------------------------------------
Parte avanzada


Un elemento invisible: :

Cita:

Here td. class (visibility: hidden;)

Here td. class (background-image: url ();background-color: transparent;)



-----------------------------------------------------------------------------------------------------------
Intercambio imagen de fondo:

Aquí TD. class ( background-image: url ( http://here your image URL ); clase ( background-image: url (http://here your image URL);
background-color: # XXXXXX;)

-----------------------------------------------------------------------------------------------------------

Aquí encontrará las "clases" en el diseño de nuevo:




Modificar el diseño -> Configuracion avanzada -> Texto en la parte superior de la página!

______________









Ultima edición por wedmasterayuda el Mie Ago 27, 2008 7:27 pm; editado 3 veces
Mensaje28-08-2008, 15:55 (UTC)    
Título del mensaje:

Muchas Gracias
______________
No Te Olvides De Entrar En http://djchuchu.foroactivo.com/
Mensaje28-08-2008, 16:02 (UTC)    
Título del mensaje:

que codigo de plantilla mas largo nunca vi uno asi osea si que lo vi era de la plantilla css designs pero igual grasias
______________

Plantillas | CSS | HTML | Normas del foro | Contacto | Tutoriales
Mail de ayuda: contacto@radioflash.com

Mensaje28-08-2008, 20:17 (UTC)    
Título del mensaje:

¿Que es lo de geht nicht que señala a la publicidad? ¿para que sirve?
______________
Mensaje28-08-2008, 23:42 (UTC)    
Título del mensaje:

Ps es una foto en ingles traduce es simple pero aslo de la forma simple no veas la foto eso es ya para avanzado
______________







Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group