Temas de blogger

En las clases anteriores como en la de personalizar título de gadgets, hemos practicado la modificación básica de algunos códigos, para acercarnos al efecto deseado. De todas formas te dejo una explicación de todos los significados para que puedas adaptarlo. .PageList { text-align:center !important; } .PageList li { display:inline !important;  float:none !important; } Esta parte del código, lo llevan todos, es para centrar las pestañas. Si lo quieres a un margen basta con cambiar  center  por  right  o  left , según quieras derecha o izquierda, respectivamente. .tabs-inner .section:first-child { margin: -10px 0px 30px 0px;  /*posición del menú*/ } .tabs-inner .section:first-child ul { border-top: 0px solid #000; /*bordes del menú arriba*/ border-bottom: 0px dotted #000; /*bordes del menú abajo*/ } En esta parte podemos cambiar todo lo que queramos para que se adapte a nuestro gusto. Cambiar el color, que ahora está en negro #000 o el tamaño de la líne...

.PageList { text-align:center !important; } .PageList li { display:inline !important; float:none !important; } .tabs-inner .section:first-child { margin: -10px 0px 30px 0px; /*posición*/ } .tabs-inner .section:first-child ul { border-top: 0px solid #000;/*bordes del menú*/ border-bottom: 0px dotted #000;/*bordes del menú*/ } .tabs-inner .widget ul { background: #8fb59e; height: 50px; margin-bottom: 0; margin-top: 0; margin-left: -30px; margin-right: -30px; } .tabs-inner .widget li a { display: inline-block; padding: 20px;/*espacio entre pestañas*/ font:normal bold 12px Arial; text-transform: uppercase; letter-spacing: 3px; color: #fff; border-$startSide: 0px solid #fff; border-$endSide: 0px solid #fff; } .tabs-inner .widget li:first-child a { border-$startSide: none; } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #8fb59e; background-color: #fff; text-decoration: none; }

.PageList { text-align:center !important; } .PageList li { display:inline !important; float:none !important; } .tabs-inner .section:first-child { margin: -10px 0px 30px 0px; /*posición*/ } .tabs-inner .section:first-child ul { border-top: 2px solid #8fb59e;/*bordes del menú*/ border-bottom: 2px dotted #8fb59e;/*bordes del menú*/ } .tabs-inner .widget ul { height: 50px; margin-bottom: 0; margin-top: 0; margin-left: -30px; margin-right: -30px; } .tabs-inner .widget li a { display: inline-block; padding: 20px;/*espacio entre pestañas*/ font:normal bold 12px Arial; text-transform: uppercase; letter-spacing: 3px; color: #8fb59e; border-$startSide: 0px solid #fff; border-$endSide: 0px solid #fff; } .tabs-inner .widget li:first-child a { border-$startSide: none; } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #666; background-color: transparent; text-decoration: none; }

.PageList { text-align:center !important; } .PageList li { display:inline !important; float:none !important; } .tabs-inner .section:first-child { margin: -10px 0px 30px 0px; /*posición*/ } .tabs-inner .section:first-child ul { border-top: 0px solid #000; border-bottom: 0px dotted #000; } .tabs-inner .widget ul { background: #8fb59e; border-radius: 50px; height: 50px; margin-bottom: 0; margin-top: 0; margin-left: -30px; margin-right: -30px; } .tabs-inner .widget li a { display: inline-block; padding: 20px; font:normal bold 12px Arial; text-transform: uppercase; letter-spacing: 3px; color: #fff; border-$startSide: 0px solid #fff; border-$endSide: 0px solid #fff; } .tabs-inner .widget li:first-child a { border-$startSide: none; } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #666; background-color: transparent; text-decoration: none; } MENÚ DE PÁGINAS CON LÍNEA ARRIBA Y ABAJO: .PageList { text-align...

.PageList { text-align:center !important; } .PageList li { display:inline !important; float:none !important; } .tabs-inner .section:first-child { margin: -10px 0px 30px 0px; } .tabs-inner .section:first-child ul { border-top: 0px solid #000; border-bottom: 0px dotted #000; } .tabs-inner .widget ul { background: #8fb59e; height: 50px; margin-bottom: 0; margin-top: 0; margin-left: -30px; margin-right: -30px; } .tabs-inner .widget li a { display: inline-block; padding: 20px; font:normal bold 12px Arial; text-transform: uppercase; letter-spacing: 3px; color: #fff; border-$startSide: 0px solid #fff; border-$endSide: 0px solid #fff; } .tabs-inner .widget li:first-child a { border-$startSide: none; } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #666; background-color: transparent; text-decoration: none; }

¡¡Hola!! No sabes lo contenta que estoy con esta clase. Es tan útil y tan sencilla que te va a encantar tanto como a mi. Además te comparto un truco muy útil de diseño. Llega el momento de personalizar nuestro menú de páginas, para que quede molón, limpio, claro, atractivo. Como siempre digo, en cosa de diseño es  mejor algo sencillo  pero  "cuco"  y ya sabes que para los títulos del sidebar he elegido  el fondo Washi-Tape  , y para el menú he diseñado ( usando el washi de los títulos de sidebar ) un Washi Tape más largo y me ha encantado como ha quedado de fondo de menú. Me quedo con ese.  Os lo comparto  para que puedas descargarlo  y usarlo y además te regalo  un truco para cambiarle el color  y que así puedas conseguir el color de tu paleta de colores. TRUCO PARA CAMBIAR COLOR DE CUALQUIER BACKGROUND O IMAGEN DE FONDO. Podría ponerme a diseñar varios colores para que te los descargaras pero tendría qu...