Publicado en Javascript

Cambiar el color de los Labels en Morris Chart

Usando el template Concept, al momento de usar los gráficos Morris de linea, me di cuenta que al agregar mas lineas el color de los labels no cambiaba y se repetian solos tres colores.

Al codigo original le agregue una tercera linea (“Serie C”) con color morado. Aqui esta el codigo:

Codigo del archivo Morrisjs.js

if ($('#morris_line').length) {
            // Use Morris.Area instead of Morris.Line
            Morris.Line({
                element: 'morris_line',
                behaveLikeLine: true,
                data: [
                    { y: '2006', a: 10, b: 20  , c: 11},
                    { y: '2007', a: 65, b: 45  , c: 22},
                    { y: '2008', a: 50, b: 40  , c: 33},
                    { y: '2009', a: 75, b: 65  , c: 44},
                    { y: '2010', a: 50, b: 40  , c: 55},
                    { y: '2011', a: 75, b: 65  , c: 66},
                    { y: '2012', a: 100, b: 90 , c: 77}
                ],

                xkey: 'y',
                ykeys: ['a', 'b', 'c'],
                labels: ['Series A', 'Series B', 'Series C'],
                   lineColors: ['#5969ff', '#ff407b', '#9440ed'],
                     resize: true,
                        gridTextSize: '14px'
            });

        }

Sigue leyendo “Cambiar el color de los Labels en Morris Chart”

Publicado en CSS, Tutoriales

Un buen ejemplo para centrar un DIV con CSS

Este un buen ejemplo para centrar un DIV con codigo CSS.

Esta probado para IE7, Firefox 2, Opera 9 y Safari 3

<style>
.centrar
{
position: absolute;
/*nos posicionamos en el centro del navegador*/
top:50%;
left:50%;
/*determinamos una anchura*/
width:400px;
/*indicamos que el margen izquierdo, es la mitad de la anchura*/
margin-left:-200px;
/*determinamos una altura*/
height:300px;
/*indicamos que el margen superior, es la mitad de la altura*/
margin-top:-150px;
border:1px solid #808080;
padding:5px;
}

</style>

<div class=’centrar’>
div centrado
</div>

Sigue leyendo “Un buen ejemplo para centrar un DIV con CSS”

Publicado en Tutoriales, Web 2.0

Tutorial : Como crear menu horizontal css estilo Windows Vista

css menu vista

Hace unos dias que me estaba paseando por la web vi algunos menus muy atractivos visualmente pero que dejaban mucho que desear en la manera en la que se implemento el codigo, y eso que eran de esos menus de pago en las que te dan opciones de personalizacion y demas.

Bueno el que mas me llamo la atencion fue uno que tenia ese look estilo windows vista tan vistozo, pero por ningun lado encontre un tutorial para darle el look estilo vista, asi que me anime a hacerlo yo mismo y para ello use mi freworks para el diseño de las imagenes de fondo y el dreamweaver para el xhtml y el css auqnue pueden usar cualquier otro editor.

Ahora si manos a la obra :

Sigue leyendo “Tutorial : Como crear menu horizontal css estilo Windows Vista”

Publicado en CSS

Homero Simpson en CSS

No me puedo creer / que lo hayan codificado: Homer Simpson en CSS!!

Para quienes no sepan qué son, para qué sirven o cómo funcionan las Hojas de Estilo o CSS, el anuncio no significará nada.

Pero si les decimos que CSS es una especie de lenguaje con el que diseñar eficientemente las páginas web (o sea: su estructura y apariencia. Tablas, fuentes, fondo…) seguro que compartirán su sorpresa con nosotros.

Sigue leyendo “Homero Simpson en CSS”

Publicado en AJAX, Apple, CSS, Javascript, Mac OSX, Web 2.0, XHTML

Navegacion estilo Dock (Mac OS) para nuestra Web

dock

Si eres de las personas a las que les gusta el estilo de navegacion que proporciona el Dock de Mac O.S.X pues en Cosas Sencillas nos comparten algunos enlaces sobre como podemos lograr un efecto similar, junto con un ejemplo para que lo veamos como funciona Sigue leyendo “Navegacion estilo Dock (Mac OS) para nuestra Web”