By CCSS Owner
Bueno, hoy les vengo con un tuto escrito de como editar su diseño CSS paso por paso y como referencia les pongo el mío, además les recomiendo seguir el codigo con el notepad.
Codigo:
Primero debemos entender lo siguiente
Decoracion en el texto
font-color: #------ (color de fuente #------ , son hex busquen el número del color aqui http://html-color-codes.info/codigos-de-colores-hexadecimales/)
font-size: #px (tamaño de fuente es normal, se sigue el tamaño con referencia a el tamaño de MS Word)
font-weight: ------ (normal:normal , center: centrado, left:izquierda, right: derecha ,normal es igual a izquierda)
font-decoration: ------ (decoracion del texto como dotted , puntos, lined , en una linea... busquenlos en internet)
font-family: Arial (La fuente del texto ej Century Gothic, Comic Sans MS, Times New Roman... Tambien se pueden guiar con Word)
Con esto ya saben algo de como editar el texto en su diseño.
Resoluciones de imagenes
Width : (ancho) #px
Height : (largo) #px
No me pregunten sobre las posiciones (position:absolute,fixed...) y no se le ocurran editar si no saben que es, normalmente para imagenes y como se quieran mostrar pero eso lo dejan asi, si en algun caso no les sale buscan en internet que estoy para editar el diseño.
Bien ahora vamos
/*esto en HTML son comentarios y no se toman en cuenta asi que si quieren los dejan*/
/* link de abajo*/
Color:(color de fuente, colores en letras Ej White ,Inglés Claro)
Background-color:(color de subrayado o de fondo, tambien hexadecimal)
Lo que esta abajo lo dejan igual.
/*header*/
Editar banner debajo de la publi
td.edit_header_full{height: 104px;background-image:url(AQUI PONEN LA URL DE LA IMAGEN DEL BANNER CON LAS RESOLUCIONES 921 x 104 PIXELES PARA SABER LO MIDEN EN PAINT);background-repeat:no-repeat;body-background:url(lo dejan en blanco)}
object.objekt{position: absolute;left: 921px;top: 104px;}
/*lo de la arriba es la resolución, si la desean cambiar lo hacen, recuerden el orden es Width x height*/
/*navigation*/
Navegacion de la derecha (botones)
Hay variedad de botones GIF o PNG en la web o si quieren los crean a su gusto.
td.edit_navi_headbg{background-image: url(DEJAR EN BLANCO);width: 15%;}
td.nav_heading{background-image: url(URL DE LA FOTO DONDE EN MI PAGINA DICE NAVEGACION);height: 33px;padding-center: 27px;font-size: 14px;font-weight: normal;font-family: Century Gothic}
td.nav{background-image: url(BOTON QUE LOS VISITANTES VEN AL ENTRAR SIN HACER NADA);height: 33px;}
td.nav:hover{background-image: url(BOTON QUE LOS VISITANTES VEN A PASAR EL CURSOR SOBRE LA IMAGEN, HOVER);height: 33px;}
td.nav a{color: #ffffff;text-decoration: none;font-size: 12px;font-family: Century Gothic}/*<-DECORACION DEL TEXTO DEL BOTON NORMAL*/
td.nav a:hover{color: #ffffff;text-decoration: none;font-size: 13px;font-family: Century Gothic}/*DECORACION DEL TEXTO HOVER*/
td.nav a:visited{color: #E6E2DE;font-size: 11px;font-weight: normal;}/*DECORACION DEL TEXTO A LAS PAGINAS QUE UN VISTANTE HAYA ENTRADO, COMO EN GOOGLE QUE A LAS PAGINAS VISITADAS TE SALE EN CAFÉ, AQUI ELIGES EL COLOR*/
td.edit_below_nav{visibility: hidden;}/*ESTO LO DEJAN NORMAL*/
/*content*/
Contenido, donde pones todo lo de la pagina.
td.edit_rechts_cbg{background-image: url(IMAGEN QUE VA ABAJO DE LOS BOTONES);width: 100%;}
td.edit_content_top{height: 33px;background-image: url(IMAGEN QUE VA ARRIBA DEL CONTENIDO, EN MI PAGINA ES LA IMAGEN VERDE QUE ESTA ARRIBA DE ESTO);font-size:14px;font-weight:normal;text-align: center;}
td.edit_content{background-image:url(IMAGEN DE FONDO DEL CONTENIDO);background-color:;}
td.edit_content div{color: #fff;font-size: 12px;font-weight: normal;}<- DECORACION
td.edit_content p{color: #fff;font-size: 12px;font-weight: normal;}<. DECORACION
td.edit_content font{color: #FFFFFF;font-size: 12px;font-weight: normal;font-family: Century Gothic}<- DECORACION DEL TEXTO
td.edit_content_bottom{background-image: url(IMAGEN QUE VA ABAJO DEL CONTENIDO, LO VERDE QUE ESTA ABAJO);height: 33px;}
td.edit_content_bottom2{background-image: url(IMAGEN DONDE DICE LOS VISITANTES);height: 38px;}
td.headline2{visibility: hidden;}/*LO DEJAN IGUAL*/
/*Rechte Boxen*/
Box de la derecha (los 5)
td.sidebar_heading{background-image: url(IMAGEN QUE VA ARRIBA DE LOS BOX Y DONDE ESTA EL TEXTO);height: 33px;font-size: 14px;font-weight: normal;font-family: Century Gothic;text-align: center;}/*<-DECORACION DEL TEXTO*/
.shouty, .shouty2, .shouty3, .shouty4, .shouty5{background-image: url(IMAGEN DE FONDO DEL CONTENIDO DE LAS BOX);background-color: #000000;border: 4px lined #0009B5;}
td.edit_rechts_bottom{background-image: url(IMAGEN DE FONDO DE TODA LA COLUMNA DE LAS BOX);width: 15%;}
td.edit_rb_footer{background-image: url(IMAGEN DE FONDO QUE VA ABAJO DEL CONTENIDO DE LAS BOX);}
/*Rechter Streifen*/
Otra decoracion para las box
td.edit_rechts_sbg{background-image: url(IMAGEN QUE VA ABAJO DE LAS 5 BOX, RECOMENDABLE DEJAR EN BLANCO);visibility: hidden;position: absolute;right: 0px;}
--> </style>
.
.
.
.
.
.
.
Bueno espero que les haya gustado el tuto, si tienen alguna duda me escriben en contacto.
Recuerden que cada imagen tiene que estar alojada en algun servidor como PWG y copiar el link de ella para ponerlas en el diseño CSS
Proximamente pondré un tutorial de como cambiar los fondos en la web con HTML
¡No dudes en comentar este tuto!
.gif)
!