#caja CSS

[josegremarquez]

CSS: Más Allá de los Estilos Básicos

CSS es una herramienta indispensable para darle vida a nuestras páginas web. Sin embargo, un mal uso puede llevar a problemas de rendimiento, mantenimiento y compatibilidad. En este artículo, exploraremos los conceptos fundamentales de CSS, desde los selectores básicos hasta las convenciones de escritura, y te daremos algunos consejos para evitar errores comunes. Selectores CSS: La Base de…

[necromancercoding]

CÓDIGO #137 | No Mires: The Return of the King

LEE LAS INSTRUCCIONES O NO TE FUNCIONARÁ. Links en dichas instrucciones.

♦ Pon los créditos en la descripción del código, al final de tu texto. Vienen puestos por defecto, no los modifiques. ♦ Todos los colores y fuentes son modificables. Si no sabéis cambiar algo, preguntadme por ask y os echaré una mano. ♦ Las fuentes utilizadas son Archivo Black, Open Sans y Space Mono.

Este es un código que sirve para esconder tu foro a invitados, como su predecesor, No mires 1.0. Ya sea porque tu foro es un foro privado o porque estás todavía terminándolo, si no te gusta tener a mirones cotilleando esta es la mejor manera de hacerlo. A diferencia del 1.0, No mires TROTK (o No mires 2.0) sí permite el registro de nuevas cuentas, por lo que es ideal para foros privados. Esto además funciona perfectamente ya tengáis la activación en sin activación, usuario o administrador. El diseño incluye tanto la caja de presentación como, en caso de tener los registros permitidos, la zona de registro. Todo está integrado y los invitados no verán absolutamente nada del diseño de tu foro.

Explicación de cómo instalarlo/editarlo bajo el cut.

TEMPLATES:

Dirígete primero a tu template overall_header. Al final del todo, inserta la siguiente línea:

<div id="nomiresSafe">

Ahora, dirígete a tu template overall_footer_begin. Justo antes de esta línea (la primera, deberías tenerla cerca del comienzo de tu template):

<!-- END html_validation -->

Vas a poner un <div>, sin cerrar. En su lugar, lo vas a cerrar después de dicha línea. Quedaría:

<div> <!-- END html_validation --> </div>

CSS:

Inserta este CSS al final de tus estilos en Visualización -> Imágenes y Colores -> Colores & CSS. Revisa las variables para modificar lo que corresponda.

JS:

Inserta este JS en una nueva hoja marcada para todas las páginas en Módulos -> HTML & Javascript -> Gestión de los códigos Javascript.

Revisa las variables: tienes cinco de personalización, y dos de funcionamiento. De esta última sección, sólo 1 de ellas (NMacceptSignUp) deberías editar; si pones un 0, no permitirás registros, si pones un 1, aceptarás registros.

Eso es todo, tu módulo de No Mires: The Return of The King debería estar funcionando a la perfección. ¡Gracias por usarlo!

[thecozycorgi]

Codember2024 - Pulse

Buenas a todos, para este challenge del codember2024 organizado por @elalmacen-rp e inspirándome en pulsos, he decidido compartir un código en el que vengo trabajando hace tiempo y es un código que permite hacer que el código bbcode de la lanzada de dados se vuelva un HTML fácil de estilizar con CSS. Además, también permite modificar las lanzadas de dados para que, en vez de un número se muestre información en HTML como se muestra en la imagen permitiendo personalizar aún más cada lanzada de dado.

Os dejo los códigos comentados con notas para mejor edición, agradezco like/reblog si van a utilizar los mismos.

Ante cualquier duda, mis ask están abiertos.

Códigos

Nota: en codepen está el código HTML ya "transformado" para que puedan visualizar el estilo y cómo se vería. Además, no se puede visualizar los iconos de font awesome por cuestiones de licencia.

Para instalar correctamente, copiar el código JS en un nuevo JavaScript habilitado en todas las páginas para que también se pueda ver en el historial de mensajes (preview).

Crear un dado con el nombre 'Pulse' de seis caras, para visualizar el ejemplo. Lanzar dados de manera normal.

Aquí os dejo un pequeño video para que puedan ver cómo crear los dados y agregarle información con el JSON para que se visualice una vez que se realizan las lanzadas de dados:

Pueden incluir todo el HTML que deseen, desde imágenes, más cajas interiores, etc.

Cada nombre de dado, en el ejemplo 'Pulse', agrega una nueva clase: roll-nombre (en el ejemplo, roll-pulse) permite personalizar cada lanzada de dados a gusto permitiendo más versatilidad a la hora de diseñar el mismo.

[copiarypegar]

Bordes sombras y gradientes con CSS

En este articulo te voy a explicar, de forma rápida y simple, algunas características para aplicar a cajas y textos, los bordes, sombras y gradientes con CSS. En los comienzos de la web, se utilizaban trucos para lograr estos mismos efectos mediante imágenes pero desde la llegada de CSS tenemos una forma más fácil y estándar de hacerlo. Bordes redondeados Veamos primero un ejemplo de como…

[prensabolivariana]

Ociel Alí López* El alto nivel de desestabilización que ha experimentado el territorio panameño en las últimas semanas responde a múltiples reacciones en contra de la estrategia, acelerada por la actual administración de Donald Trump, que busca hacer de Panamá el “patio trasero” de EE.UU., utilizando un tridente: amenaza militar, iniciativa diplomática y operatividad de empresas norteamericanas, algunas ya famosas por su accionar violento. A partir de la aprobación en marzo pasado de la ley 462, que introduce reformas en la Caja del Seguro Social (CSS), han venido acentuándose las protestas a todo lo largo y ancho del país, tanto en las principales ciudades como en los campos más alejados y fronterizos. Esta semana la tensión fue en aumento. Dicha reforma no debe ser vista solo como parte de un “plan de ajuste” económico para recortar “gasto social”, sino como un intento de exacerbar las ganancias de las grandes empresas transnacionales que explotan diversas áreas en la nación centroamericana y que han comenzado a jugar más fuerte en la medida en que Washington privilegia una política de presión hacia Panamá por todos los frentes, desde el económico hasta el militar, no solo para garantizar el control sobre el canal de Panamá sino para posicionar una “cabeza de playa” en la región, después que los gobiernos de Colombia, Chile y Perú, aliados históricos, le han venido abriendo sus puertas a la inversión china. La estrategia de EE.UU. para hacer de Panamá el “patio trasero” utiliza un tridente: amenaza militar, iniciativa diplomática y operatividad de empresas norteamericanas, algunas ya famosas por su accionar violento. Desde la juramentación del presidente de EE.UU., Donald Trump, su gobierno ha mostrado interés particular en Panamá, tomando medidas concretas para apoderarse del control del canal. En los cuatro meses de la nueva administración, el país centroamericano ha sido visitado por el secretario de Estado de EE.UU, Marco Rubio, por el secretario de Defensa, Pete Hegseth, y por el jefe del Comando Sur, el almirante Alvin Holsey. Todos regodeados con un discurso supremacista en contra de China quien, desde hace años, se ha convertido en el principal socio comercial de Panamá y el destino de la mayor parte de sus exportaciones. Además de los discursos altisonantes de Trump, en los que adjudica a EE.UU. la propiedad del canal, un conjunto de pasos han afianzado su rápido y belicoso posicionamiento sobre el istmo. El 9 de abril, ambos gobiernos firmaron un memorando de entendimiento que permite la incursión de militares estadounidenses al país y el trabajo conjunto entre ambas fuerzas armadas. Pero antes, el presidente panameño, José Raúl Mulino, abiertamente amenazado desde Washington, abandonó la iniciativa comercial china de la Ruta de la Seda,  lo que afecta el financiamiento a proyectos de infraestructura y corta el flujo a las exportaciones panameñas. También gestionó la venta forzosa de puertos de empresas chinas al estadounidense fondo de inversiones BlackRock. El 23 de abril, Mulino planteó la reapertura de la empresa canadiense de minería, First Quantum Minerals, lo que significa retomar los contratos derogados por la Corte Suprema de Justicia(CSJP) en 2023, luego de una profunda y larga insurrección popular en contra de la explotación de la mina a “cielo abierto” más grande de Centroamérica. Al día siguiente del anuncio, la compañía canadiense informó que suspendió una demanda internacional contra Panamá en la que exigía 20.000 millones de dólares, en compensación a la medida tomada por el alto tribunal. EE.UU., apoyado por Mulino, parece estar posicionándose en Panamá para aumentar su influencia y ganancias, y en poco tiempo quiere convertirlo en su “zona de confort”, en la que el Estado panameño está perdiendo las facultades para tomar decisiones en torno a las relaciones comerciales con el resto del mundo, y también para dirimir sus conflictos internos por medio de sus propias instit...

[lisablasstudio]

Monday's image: February 17, 2025

Jerome Caja, Dead Bird and Broken Eggs, Nail polish on metal tray, 12.07 x 12.07 x 0.64 centimeters, 1989, San Francisco Museum of Modern Art, California

#mc_embed_signup{background:#fff; false;clear:left; font:14px Helvetica,Arial,sans-serif; width: 600px;} /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

Subscribe to Monday's image

* indicates required

Email Address *

First Name

Last Name

(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';}(jQuery));var $mcj = jQuery.noConflict(true);

[msrlunatj]

Introducción a CSS: Estilizando la Web

Introducción

CSS (Cascading Style Sheets) es el lenguaje que se utiliza para describir la presentación de un documento escrito en HTML o XML. Mientras que HTML estructura el contenido de la web, CSS se encarga de darle estilo, desde la disposición de los elementos hasta los colores y las fuentes. Si estás empezando en el mundo del desarrollo web, aprender CSS es esencial para crear sitios atractivos y funcionales. En este blog, te proporcionaré una introducción a CSS, cubriendo sus conceptos básicos y algunas prácticas recomendadas para que puedas comenzar a diseñar páginas web impresionantes.

1. ¿Qué es CSS?

CSS es un lenguaje de hojas de estilo que permite definir cómo se muestran los elementos de un documento HTML en la pantalla, en papel o en otros medios. Gracias a CSS, puedes separar la estructura de un sitio web de su presentación, lo que facilita el mantenimiento y la escalabilidad del diseño.

a) Características Principales de CSS:

Selección de Elementos: CSS te permite seleccionar y aplicar estilos a elementos HTML específicos o a grupos de elementos.

Diseño Responsivo: CSS facilita la creación de diseños que se adaptan a diferentes tamaños de pantalla, desde dispositivos móviles hasta monitores de escritorio.

Control de Estilos Visuales: Con CSS, puedes controlar el color, el tamaño, la fuente, el espacio entre elementos, y mucho más.

2. Cómo Empezar con CSS

Para comenzar a usar CSS, puedes incluir las reglas de estilo directamente en un archivo HTML o en un archivo CSS separado. A continuación te muestro cómo hacerlo:

a) CSS en Línea:

Puedes aplicar estilos directamente en los elementos HTML utilizando el atributo style.

b) CSS Interno:

Puedes definir un bloque de CSS dentro de la etiqueta <style> en el <head> de tu documento HTML.

c) CSS Externo:

La mejor práctica es usar un archivo CSS separado para mantener el estilo y el contenido por separado.

Contenido de styles.css:

3. Conceptos Básicos de CSS

CSS se basa en reglas que constan de selectores y declaraciones. A continuación te explico los conceptos más importantes:

a) Selectores:

Los selectores indican qué elementos HTML deben ser estilizados.

Selector de Elemento:

Selector de Clase:

Selector de ID:

b) Propiedades y Valores:

Las propiedades son aspectos específicos del estilo que se aplican a los elementos, como color, fuente, y margen.

Propiedad color: Cambia el color del texto.

Propiedad font-size: Cambia el tamaño de la fuente.

Propiedad margin: Define el espacio exterior alrededor de un elemento.

c) Especificidad y Herencia:

La especificidad determina qué reglas CSS se aplican cuando hay conflictos, y la herencia permite que ciertos estilos se transmitan a los elementos hijos.

Especificidad:

Herencia:

4. Diseño de Páginas Web con CSS

CSS permite controlar el diseño y la disposición de los elementos en una página web, facilitando la creación de sitios visualmente atractivos y organizados.

a) Modelos de Caja (Box Model):

Cada elemento en CSS se representa como una caja que comprende márgenes, bordes, rellenos y el contenido.

b) Layouts (Diseños):

CSS proporciona varias técnicas para organizar elementos en una página, incluyendo Flexbox y Grid.

Flexbox:

Grid Layout:

c) Media Queries y Diseño Responsivo:

Las media queries permiten que los diseños se adapten a diferentes tamaños de pantalla, lo que es fundamental para crear sitios web responsivos.

5. Recursos para Aprender Más CSS

Documentación Oficial:

MDN Web Docs: Una guía completa que cubre todo lo que necesitas saber sobre CSS.

Tutoriales en Línea:

CSS-Tricks: Un sitio repleto de tutoriales, ejemplos y trucos para mejorar tu uso de CSS.

W3Schools: Un recurso fácil de seguir para aprender los fundamentos de CSS con ejemplos prácticos.

Libros Recomendados:

“CSS: The Definitive Guide” de Eric A. Meyer: Un recurso profundo para desarrolladores que quieren dominar CSS.

“CSS Secrets” de Lea Verou: Este libro revela técnicas avanzadas para crear efectos y diseños sorprendentes con CSS.

Conclusión

CSS es una herramienta poderosa para cualquier desarrollador web. Desde controlar la apariencia básica de los elementos hasta diseñar sitios complejos y responsivos, el dominio de CSS te permitirá crear experiencias web atractivas y profesionales. Comienza practicando con los conceptos básicos, y poco a poco, profundiza en las técnicas más avanzadas para llevar tus diseños al siguiente nivel.

[mandrivaone07]

El cursor no se ve en temas oscuros de Linux > gtk dark theme invisible cursor

Desde que se dio el cambio del escritorio Gnome 2 al 3, muchas cosas cambiaron para mal, pues antes por ejemplo, era muy sencillo personalizar un tema de colores sin mayor afectación. En el explorador de archivos Thunar, este pequeño gran detalle no se aprecia, porque a la hora de renombrar un archivo, nos tira una ventana, como si fuéramos a la pestaña de propiedades en la caja o en nautilus.

LA SOLUCIÓN

Hay que abrir y editar -, sino crear uno- un archivo denominado "gtk.css" ubicado en la dirección:

/home/usuario/.config/gtk-3.0/gtk.css

Añadir el siguiente código parecido al "css"

* { caret-color: #4D4DFF; }

El color que escogí, para el cursor que parpadea fue un azul moradito "blurple" -como luce el texto del enlace-, aunque podría ser un tono amarillo también, por el adecuado contraste.

RECUERDE CERRAR LA SESIÓN, PARA QUE LOS CAMBIOS SE HAGAN EFECTIVOS EN EL NUEVO INICIO.👌🏽

[luxwebhosting]

Elementos ilimitados para Elementor Pro (Premium)

Todos los complementos son totalmente únicos, diseñados individualmente para adaptarse a su sitio web Elementor Page Builder. El paquete de complementos más grande para Elementor Page Builder con +700 complementos. Qué está incluido en este mega paquete Más de 700 complementos únicos con infinitas posibilidades Diseño de importación con un clic desde la página Elementor Page Builder Importa solo los complementos que quieras usar Actualizaciones de por vida Soporte disponible las 24 horas, los 7 días de la semana para ayudarlo Bien documentada Nuestra biblioteca de complementos crece cada día y obtendrá todas nuestras actualizaciones Capacidad para personalizar el HTML y CSS de los complementos fácilmente Deslizadores simples (20) Pancartas (24) Tablas de Precios (21) Pestañas de contenido (22) Testimonios y Reseñas (23) Carruseles (21) Cajas de contenido (43) Miembros del equipo (26) Encabezados de sitios web (20) Efectos iHover (20) Efectos de desplazamiento de iconos (9) Efectos de desplazamiento de enlace (21) Botones (11) Contenido acordeones (23) Cuenta atrás del temporizador (23) Pestañas de contenido (22) Menús de comida (24) Iconos de redes sociales (21) Cajas de productos (26) Gráficos de Google (7) Ventanas emergentes de teaser de video (20) Widgets (10) Cajas Flip (15) Galerías de videos (7) Horario de apertura (15) Reproductores de audio MP3 (15) Contadores de estadísticas (23) Listas de viñetas (25) Pies de página (20)#LuxWebHosting #DiseñoWeb #GestiónWeb #SEO #Hosting #RegistroDeDominios #NegociosEnLínea #PreciosFlexibles #ServiciosWeb #InteligenciaArtificial #EliminaciónDeInformación #SeguridadWeb #RespetuososConElMedioAmbiente #CertificadosEnGoogleYBing #FacturaBoletaOReciboPorHonorarios #RUC #AlojamientoWeb #TiendasOnline #SistemasClonScript #WebInformativas #WebRepresentativas #WebDeTodoTipo #PasarelasDePagoAutomatizados #PosicionamientoOrgánico #PosicionamientoPago Read the full article

[madeinsevilla93]

Hola, Anomalí! :) Sé que pasas por aquí poco, pero tenía una duda sobre el skin de LLS que subiste hace poco, precisamente proque estaba usando Beautiful pain antes. Me preguntaba, en la caja del perfil de mensajes, aunque yo tengo para verse 7 campos, sólo enseña 5. ¿Es por algo en el diseño? Porque en el código veo que los campos son "flex" (entiendo que debería comprimirse hacia arriba a medida que pongo más campos). Y me preguntaba si se podría poner foto en el perfil como en BP :) Gracias ♥

Hola! Pues es raro por eso que comentas: los campos del perfil están en Flex así que deberían ajustarse solos. Prueba una cosa:

PA > Usuarios y Grupos > Perfiles

Dentro de los campos, asegúrate de que el label tiene color y no está en transparente (ejemplo). Da igual el color que les pongas porque después lo arregla el CSS, pero me parece que la forma que elegí para citar los labels necesitaba que estos tuvieran algún color.

Es lo único que se me ocurre, si te sigue fallando háblame por privado o algo para verlo desde el navegador.

Y sobre la foto pequeña en el perfil, claro, puedes hacerle las ediciones que quieras.

Un saludo!

[justadrunkenwhaler]

Pure CSS - Modales

Primero que nada, ¿qué es un modal?

Es un elemento que se muestra por encima del resto del contenido de un sitio web, centrando en él toda la atención. Un modal se mantiene oculto hasta que el usuario lo abre por decisión propia o a través de una acción indirecta. Además, el usuario no podrá volver al contenido del sitio hasta que interactúa/cierra el modal.

Ahora bien, ¿por qué hacer un modal con CSS?

Soy programador y me gusta solucionar las cosas con JavaScript siempre que puedo. Este sería un caso para ello. No obstante, los foros (foroactivo, jcink, etc) no permiten el uso de JS para sus usuarios, así que debemos buscar alternativas para este tipo de elementos.

Veamos lo que haremos en acción antes de empezar a trabajar:

Tal vez un gif no sea la mejor opción, así que les dejo un enlace al código 100% funcional: https://codepen.io/codetatoe/full/PLVzra

Ahora así, manos a la obra.

En el código anterior pueden ver el HTML mínimo necesario para crear un modal.

Los dos primeros elementos son un label y un input de tipo checkbox. El input nos permitirá determinar si nuestro modal se está visualizando (checked) o si está oculto. Es necesario que este input tenga un ID, no lo olviden.

Por defecto, no podremos ver el modal.

Además, el de control input será ocultado con CSS:

Por otro lado, el label será nuestro elemento de control. Cuando el usuario haga clic sobre él, abrirá el modal. Pueden darle el estilo que quieran, solo hay dos detalles de importancia:

- Debe llevar un atributo for cuyo valor sea el ID de nuestro input.

- Debe estar al mismo nivel que nuestro modal para hacer uso del sibling selector (+).

Ahora bien, notarán que no solo hay un label, sino que hay tres. ¿Por qué tantos? Si se fijan en el codepen que les di arriba, hay dos formas de cerrar el modal: haciendo clic en la cruz de la caja blanca o en el fondo negro. Eso se puede hacer gracias a esos dos labels extras. Ahora bien, no es necesario tener dos opciones de cierre, pero es lo que se acostumbra.

En la imagen anterior podemos ver dos cosas:

La primera es el estilo que tendrá el fondo de nuestro modal una vez se muestre. Por cierto, para que sea posible interactuar (hacer clic para cerrar) con el fondo (pero no con el contenido) pueden usar el siguiente código:

En mi caso utilizo un color negro a través del cual podemos ver un poco de lo que hay detrás, así no hacemos sentir al usuario que le sacamos del sitio web. También agregué una transición para que no se muestre de sopetón.

Lo segundo es donde ocurre toda la magia. Cuando el input se encuentra checked, aplicaremos ciertos estilos al modal. En este caso: aumentamos por completo su opacidad y lo hacemos visible. Aunque parezca redundante agregar estas dos propiedades, es necesario para:

- Lograr una transición: opacidad

- Evitar interacciones con el modal cuando está cerrado: visibilidad

Con esto... ¡Está hecho! Ahora tenemos un modal 100 por 100 funcional que se mueve a base de puro CSS.

Pueden darle el estilo que deseen a los botones, al contenido del modal y demás. Todo eso excede el objetivo de este tutorial así que no me enfocaré en ello. Además, arriba tienen mi código de ejemplo que pueden visitar si les queda alguna duda.

Hasta la próxima.

[josegremarquez]

La propiedad display en CSS: Desde lo básico a los diseños más avanzados.

La propiedad display determina el tipo de caja que un elemento forma y cómo se comporta dentro del flujo del documento. En otras palabras, indica si un elemento se mostrará como un bloque, una línea o si se ocultará por completo. Valores de la propiedad display La propiedad display admite varios valores, cada uno con un comportamiento específico: Valores básicos: block: Crea un bloque que…

[necromancercoding]

CÓDIGO #131 | Keeping tabs.

LIVE PREVIEW & DOWNLOAD.

♦ Sexto prompt del Codember 2023 (Database) de @elalmacen-rp. Traigo una tablilla 'base' (aka, el CSS es sólo de ejemplo, la idea es que lo modifiquéis para que se ajuste a vuestro diseño) para contener todos los registros en una sola tabla. Tiene 6 pestañas por defecto, pero se pueden añadir más (instrucciones bajo el cut). Puedes alfabetizar cada columna haciendo click en su nombre. ♦ Esta es una tablilla pensada para administradores, pues tiene JS. Las pestañas y la alfabetización no funcionarán si no tienes acceso al PA para poner el JS. ♦ Puedes usar esta tablilla como base, está pensada para que podáis modificarla a gusto. Eso sí, porfaplis, poned los créditos en vuestra caja habitual. ♦ Todos los colores y fuentes son modificables. Si no sabéis cambiar algo, preguntadme por ask y os echaré una mano.

El JS debe estar marcado para Todas las páginas. Puedes tener el CSS directamente en tu panel o de forma externa en tu overall_header, antes de </head>.

Debes agregar una caja de texto ([role="text"]) por cada columna; si una tab no tiene una caja de reglas, simplemente mostrará las normas generales (que siempre irán marcadas por [data-tab="general"]). Las data-tab deben de ser únicas para cada columna, como puedes ver en el ejemplo, y las comparten en las cajas de texto ([role="text"], en las tabs (<span> dentro de [role="tabs"]) y las diferentes columnas dentro de [role="table-head"] y [role="user"].

IMPORTANTE: Si un usuario no aplica para una columna (supongamos, siguiendo el ejemplo, que uno de ellos no tiene vivienda), incluye igualmente el <b> en su sitio correspondiente. Puedes poner - o N/A o algo similar, pero no borres el <b> o se te descuadrará toda la tabla. También recomiendo mantener cierta 'gramática' en las columnas del mismo tipo, para que la alfabetización sea más útil (por ejemplo, no pongas 6º curso y luego pongas en otro Sexto curso).

PARA AGREGAR NUEVAS PESTAÑAS: Como se explica en el primer punto, cada pestaña debe tener sus columnas, su botón y su caja de reglas. Por lo que tendrás que agregar una caja de texto:

<div role="text" data-tab="sangre">Normas de pureza de sangre.</div>

Una pestaña:

<span data-tab="sangre">Sangre</span>

Y columnas:

<div role="table-head"> <b data-tab="general">Usuario</span> [--resto de columnas--] <b data-tab="sangre">Sangre</b> </div> <div role="user"> <b data-tab="general"><a href="#" style="color:#8a4343;">Alexandre E. Baldi</a></span> [--resto de columnas--] <b data-tab="sangre">Mestizo</b> </div>

[bettyleg]

TUTORIAL: Cómo postear codes largos (y que no se rompa todo)

Tutorial nivel básico.

¿Recuerdas las veces que posteaste una cronología/relaciones/cualquier tablilla larga y por un div mal cerrado todo se rompió. Si la tablilla era de verdad muy larga la búsqueda de los div rotos se hacía interminable. DIGA NUNCA MÁS (?) Hoy les enseñaré un pequeño truco. 

Haré este tutorial con la cronología de Call Out My Name. Por si no lo recuerdan, es esta:

El código es largo, si tengo muchos temas abiertos se vuelve un dolor de cabeza tener que postear todo justo después del último div del modulo. ¡Ah! Demasiado. 

Verán, cuando yo posteo el código tal y cómo está en pastebin, foroactivo lo toma y lo coloca de esta forma:

Todo normal, un código HTML super bonito, ahí se ve mejor las dependencias, cuál caja encierra cual caja. ¿Ven que la clase “b5b-temas” esta repetido tanto en “temasAbiertos” como en “temasCerrados”? Adentro tengo un subtitulo y también modulos. ¡Perfecto!  A la hora de postear ese código interminable es un dolor de cabeza. Lo voy a intentar separar, es decir hacer esto:

Se ve mucho mejor, tengo un salto de línea para cada “b5b-modulT”. Es difícil olvidarse de cerrar algún div o, por lo menos, se verá más fácil en el caso que suceda (que claramente puede pasar).

Lo previsualizo y Foroactivo me dice, no mi ciela, no es lo mismo y obtengo esto:

Y es realmente el mejor de los casos porque hay veces en donde todo es demasiado horrible JAJA Como ven, hay mucha separación entre los módulos de los temas, no se ve igual que antes.  Cuando voy a ver el código me doy cuenta de esto:

A cada salto de línea Foroactivo me lo tradujo como un “br” 

¿Qué es un br? “El elemento br inserta un quiebre de línea, causando que el texto continúe en una línea nueva.”

Esa es la razón por la que nuestro código se ve tan extraño y separado. Aquí es donde entra el truco.

Sabiendo de antemano que “b5b-temas” es la caja contenedora de todos los “b5b-modulT” (Se puede ver en esta imagen, esta super bien identado)  Voy a agregarle al CSS este simple código:

  .b5b-temas > br{display:none}

Esto quiere decir que todos los br que sean “el primer hijo” dentro de “b5b-temas” no harán el salto de línea, no funcionarán.   Esto de que tienen que ser “el primer hijo” se debe al símbolo “>”. Es decir si yo hago más saltos de líneas pero dentro de “b5b-modulT” NO van a verse afectados a esta anulación, sino que seguirán haciendo un salto de línea.

Aquí esta muy bien explicado el funcionamiento de este, como de otros símbolos de CSS.

Y LISTO. Podemos editar nuestro código de esta forma

Y nada se romperá en el camino. 

[rorro182]

Tutorial - Firma/caja con hover

Hola buenas! ¿Quieren que les enseñe a hacer una caja dentro de una caja dentro de una caja y que las cajas tengan hover y aparezcan? ¿OK? Bueno vamos

Advetencia: El tutorial es largo porque mi intención es que vos, si, vos, muchachito que nunca hiciste una tablilla y siempre que copias una y la pegas rompes el foro, puedas hacerte una firma. Así que... yo te avisé, luego no me llores (?)

¡LA CAJA!

1- Lo primero que haremos será una caja y le asignaremos un "class", en este caso, usé "tutohov1". Esta caja puede estar decorada con las propiedades que quieras, aunque si vas a utilizar este código para una firma, es importante que uses el alto y ancho de la firma para que no se deforme. En cualquier caso, la única propiedad excluyente que hay que usar si o si es "overflow: hidden;" para evitar que haya contenido que se escape de la caja más tarde. Intenta no dar estilo a la caja con style="propiedades"; ya que vamos a utilizar css, mejor hacerlo ahí mismo. En este caso las propiedades que yo utilicé fueron: width: largo de la caja height: alto de la caja background: el fondo overflow: el contenido que rebasa la caja. En este caso es Hidden border-top: marco superior de la caja border-bottom: marco inferior de la caja

El fondo: Se puede utilizar un color en el fondo simplemente poniendo el código de ese color luego de "background:", por ejemplo "background: #191919;". En caso de querer usar una imagen, se puede utilizar "background-image", pero es más sencillo (para mí) poner "background: url(url de la imagen);". Si la imagen no queda centrada en el fondo, luego del parentesis agregamos "center"; si queda centrada pero recortada y queremos que la imagen llene la caja, luego del center agregamos "cover". Debería quedar así: "background: url(url de la imagen) center/cover".

Overflow: El overflow sirve para decirle a la caja qué hacer cuando algo sobrepasa los límites que configuramos. Si damos "auto", por ejemplo, lo que hará será crear una scrollbar para mostrar el contenido. En este tutorial haremos que algo sobresalga de esa caja pero no queremos que se vea estando fuera, por lo que utilizaremos "hidden" para ocultarlo.

Nota: Si vas a centrar la caja con html o bbcode, todo el contenido de la caja también se centrará. Para evitar eso, en el estilo de la caja agregamos "text-align: left;". Es importante que siempre que termines de configurar una propiedad, separes el código con ";" y mucho más si es el último.

Lo que más aconsejo es no utilizar [center], de todos modos. La mejor manera de alinear tu cajita al centro del area de la firma sería agregando la propiedad: “margin: 0 auto;” Esto lo que hace es decirle al código que arriba y abajo el margen es 0, pero que izquierda y derecha es “auto” y buscará centrarse.

Es posible alinear las cosas dentro de la caja si sabes manejarte con Flex, pero no es el punto de este tuto :p

Actualmente nuestro código debería estar más o menos así:

CAJA <div class="tutohov1"></div>

CSS

.tutohov1 {width: 450px; height: 200px; background: url(http://i.imgur.com/FQzmHtu.jpg) center/cover; overflow: hidden; border-top: 5px solid #191919; border-bottom: 5px solid #191919; text-align: left;}

La caja dentro de la caja 

2- Luego de tener la caja principal "tutohov1", vamos a crear otra caja dentro de esta. En este caso la llamé "tutohov2". Lo mismo que la anterior, pueden decorarla de la manera que quieran, pero es importante que la posicionen para poder moverla con libertad dentro de la caja principal, para eso con "position: relative" nos bastará. Para este paso, es muy importante colocar "opacity: 0" para que la caja no se vea; luego la haremos aparecer (repito, luego la personalizas como quieras, usando un transform, posicionandola fuera de la caja, etc. en este tutorial me gustó usar opacity). En este caso las propiedades fueron: width: largo de la caja height: alto de la caja padding: relleno de la caja background: fondo de la caja position: posicionamiento de la caja top: distancia en pixeles entre la caja 2 y el borde superior de la caja 1 left: distancia en pixeles entre la caja 2 y el borde izquierdo de la caja 1 transition: tiempo que queremos que tarde la animación en concluir opacity: 0. Opacidad de la caja, 0 el más bajo, 1 el más alto. De esta manera ocultamos la caja font-family: fuente a utilizar font-size: tamaño de la fuente text-transform: utilizado para que todo el texto se transforme en mayusculas en este caso. Padding: Este es el relleno de la caja que usamos para que las letras no estén pegadas al borde. Cuando creas un padding, el tamaño de la caja cambia en relación a los pixeles o centimetros que uses de relleno. Por eso si queremos que la caja tenga 150pixeles de ancho pero 5pixeles de relleno, es importante ponerle a la caja un ancho de 140pixeles ya que los otros lados se rellenarán, llegando a 150. Transition: Esto es para que el efecto no salga de la nada. Con la transición, haremos que aparezca de a poco, logrando una animación.

Ahora nuestro código está así:

CAJA <div class="tutohov1"><div class="tutohov2">TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO </div></div>

CSS .tutohov1 {width: 450px; height: 200px; background: url(http://i.imgur.com/FQzmHtu.jpg) center/cover; overflow: hidden; border-top: 5px solid #191919; border-bottom: 5px solid #191919} .tutohov2 {width: 240px; height: 140px; padding: 5px; background: rgba(255,255,255,0.8); position: relative; top: 25px; left: 25px; transition: 2s; opacity: 0; font-family: calibri; font-size: 10px; text-transform: uppercase;}

La caja dentro de la caja dentro de la caja

3- El último paso antes de aplicar el hover es opcional y solo si queremos que haya más de 1 hover en la caja. En este caso, lo que haremos será crear esa barrita roja que viene desde la derecha y se posiciona sobre la caja 2.

Nuevamente hacemos una caja y la colocamos dentro de la caja 2, la decoramos como queramos, pero esta vez cambiamos el posicionamiento. En lugar de ser "relative", utilizaremos “absolute”,. Usamos top y left para posicionar como queramos; se pueden dar valores negativos.

(Ahora ¿Por qué una en relative y la otra en absolute? Bueno, esto es porque al estar en “relative” la caja 1, los valores que le demos a la caja 2, que está en absolute, tomarán como origen la caja 1. Es por eso que si a la caja 2 le damos “left: 0px″, se va a posicionar justo en el borde interno de la caja 1)

En este caso vamos a necesitar que la caja desaparezca, pero no lo vamos a hacer con opacity, sino con el mismo posicionamiento. En left, le daremos un valor bastante alto que abarque el ancho de la caja principal (la que tiene el fondo) y el de la caja chiquita que acabamos de crear, de este modo, lograremos que la caja nueva se salga de la caja principal, pero como usamos "overflow: hidden" en la caja no lo veremos.

Las propiedades que usé para decorar esta tercera caja son las mismas que las anteriores, pero se agrega una que usaremos para la animación. transition: 3s - En este caso usamos un segundo más que para la transición de la caja 2 transition-delay: 0s - 0 por ahora, luego lo configuraremos bien. Esta propiedad retrasa la animación por los segundo que queramos. Si queremos que la caja aparezca 20 segundos después de colocar el puntero encima, entonces es "20s".

Y por ahora vamos así:

CAJA <div class="tutohov1"><div class="tutohov2">Texto texto texto texto Texto texto texto texto <div class="tutohov3">PRUEBA</div></div></div>

CSS

.tutohov1 {width: 450px; height: 200px; background: url(http://i.imgur.com/FQzmHtu.jpg) center/cover; overflow: hidden; border-top: 5px solid #191919; border-bottom: 5px solid #191919} .tutohov2 {width: 240px; height: 140px; padding: 5px; background: rgba(255,255,255,0.8); position: relative; top: 25px; left: 25px; transition: 2s; opacity: 0; font-family: calibri; font-size: 10px; text-transform: uppercase;} .tutohov3 {width: 240px; padding: 5px; background: #a01221; position:absolute; top: 110px; left:500px; text-align: center; letter-spacing: 3px; color: #fff; transition: 3s; transition-delay: 0s;}

Animando la aparición de las cajas

4- Y finalmente llegamos al hover, que es lo importante de este tutorial. Con esto, lo que haremos será, mediante CSS, lograr ciertas animaciones para que las cosas que ocultamos en el paso 2 y 3, aparezcan. Para hacer esto, trabajaremos en el css utilizando los nombres de las cajas. Como queremos que tenga acción cuando pasemos el ratón sobre la caja 1, entonces lo que haremos será colocar el css de esta manera .tutohov1:hover De este modo, ya estamos indicando cuando pasarán las cosas. Cuando pasemos el ratón sobre la caja 1. Ahora queremos trabajar sobre la caja 2. Decirle al css qué pasa con la caja 2 cuando pasamos el ratón sobre la caja 1. Eso se logra de la siguiente manera: .tutohov1:hover .tutohov2 ¿Se acuerdan que en el paso 2, la caja la ocultamos con opacity: 0?. Bueno, ahora la haremos aparecer cuando el ratón pase sobre la caja 1, así que lo que haremos será darle la propiedad "opacity: 1", lo hacemos de la siguiente manera: .tutohov1:hover .tutohov2 {opacity: 1;} Lo mismo vamos a hacer para la caja 3, el valor excesivo que le pusimos en "left" para hacerla desaparecer, lo bajaremos a 0 para que se posicione sobre el margen de la caja 2. Así mismo, también cambiaremos el valor de la transición para que tarde 1 segundo en aparecer luego de hacer hover; es solo algo visual que yo quería agregar para que la caja 3 diera tiempo a la caja 2 a terminar su animación antes de hacer la suya. .tutohov1:hover .tutohov3 {left: 0px; transition-delay: 1s;} Y ahora nuestro código está así

CAJA <div class="tutohov1"><div class="tutohov2">Texto texto texto texto Texto texto texto texto <div class="tutohov3">PRUEBA</div></div></div>

CSS

.tutohov1 {width: 450px; height: 200px; background: url(http://i.imgur.com/FQzmHtu.jpg) center/cover; overflow: hidden; border-top: 5px solid #191919; border-bottom: 5px solid #191919} .tutohov2 {width: 240px; height: 140px; padding: 5px; background: rgba(255,255,255,0.8); position: relative; top: 25px; left: 25px; transition: 2s; opacity: 0; font-family: calibri; font-size: 10px; text-transform: uppercase;} .tutohov3 {width: 240px; padding: 5px; background: #a01221; position:absolute; top: 110px; left:500px; text-align: center; letter-spacing: 3px; color: #fff; transition: 3s; transition-delay: 0s;} .tutohov1:hover .tutohov2 {opacity: 1;} .tutohov1:hover .tutohov3 {left: 0px; transition-delay: 1s;}

Algunas cosas que hay que saber

Como estamos usando foroactivo, no podemos poner el css suelto, sino que vamos a usar "style" para mostrar el css. No podemos hacer saltos de linea si usamos style, por lo que debemos borrarlos y dejar el código de corrido. Luego encerramos el css en "< style > < / style >" Eso es todo lo que necesitamos para hacer esta cajita en un post. Si queremos que se vea en la firma, lo más probable es que Foroactivo no nos deje por ser demasiado largo. Para eso, lo mejor sería crear una cuenta en dropbox y en ella subir el css. Para ello, lo que haremos será crear un archivo de texto, meter el CSS dentro y cambiarle la extensión ".txt" a ".css", luego la ponemos en la carpeta de Dropbox, buscamos el link y colocamos la hoja de estilo en la firma de la siguiente manera: Código:<link rel="stylesheet" type="text/css" href="link de dropbox">Esto también puede usarse en el post para ahorrar espacio. En tal caso, esto anula lo explicado al principio del punto 5.

Importante con Dropbox: Porque nunca nada va a ser tan fácil como lo esperamos, dropbox nos va a dar un link que cuando lo pongamos en la hoja de estilo no nos va a servir

Nuestro querido dropbox nos va a querer contentar dandonos un link como este:

https://www.dropbox.com/s/7t9aipcok8erqom/ds%20firma.css?dl=0

Pero no nos sirve. Nosotros necesitamos que se vea así:

https://dl.dropboxusercontent.com/s/ID

Entonces vamos a tomar el link que dropbox nos dio, y vamos a copiar todo lo que viene después de /s/ en el link, al final borramos el ?dl=0 y pegamos eso en la parte que dice ID en el link válido que puse abajo. Debería quedar así:

https://dl.dropboxusercontent.com/s/7t9aipcok8erqom/ds%20firma.css

Y con eso ya debería funcionar.

Y así termina este turorial, no olvides darle like si te ha gustado, suscribirte a mi canal para más tutoriales así y dejar tu comentario, ya que eso me animaría a hacer muchos más. Te ha hablado Rorro y nos vemos en el próximo video... (?)

[prensabolivariana]

Ociel Alí López* El alto nivel de desestabilización que ha experimentado el territorio panameño en las últimas semanas responde a múltiples reacciones en contra de la estrategia, acelerada por la actual administración de Donald Trump, que busca hacer de Panamá el “patio trasero” de EE.UU., utilizando un tridente: amenaza militar, iniciativa diplomática y operatividad de empresas norteamericanas, algunas ya famosas por su accionar violento. A partir de la aprobación en marzo pasado de la ley 462, que introduce reformas en la Caja del Seguro Social (CSS), han venido acentuándose las protestas a todo lo largo y ancho del país, tanto en las principales ciudades como en los campos más alejados y fronterizos. Esta semana la tensión fue en aumento. Dicha reforma no debe ser vista solo como parte de un “plan de ajuste” económico para recortar “gasto social”, sino como un intento de exacerbar las ganancias de las grandes empresas transnacionales que explotan diversas áreas en la nación centroamericana y que han comenzado a jugar más fuerte en la medida en que Washington privilegia una política de presión hacia Panamá por todos los frentes, desde el económico hasta el militar, no solo para garantizar el control sobre el canal de Panamá sino para posicionar una “cabeza de playa” en la región, después que los gobiernos de Colombia, Chile y Perú, aliados históricos, le han venido abriendo sus puertas a la inversión china. La estrategia de EE.UU. para hacer de Panamá el “patio trasero” utiliza un tridente: amenaza militar, iniciativa diplomática y operatividad de empresas norteamericanas, algunas ya famosas por su accionar violento. Desde la juramentación del presidente de EE.UU., Donald Trump, su gobierno ha mostrado interés particular en Panamá, tomando medidas concretas para apoderarse del control del canal. En los cuatro meses de la nueva administración, el país centroamericano ha sido visitado por el secretario de Estado de EE.UU, Marco Rubio, por el secretario de Defensa, Pete Hegseth, y por el jefe del Comando Sur, el almirante Alvin Holsey. Todos regodeados con un discurso supremacista en contra de China quien, desde hace años, se ha convertido en el principal socio comercial de Panamá y el destino de la mayor parte de sus exportaciones. Además de los discursos altisonantes de Trump, en los que adjudica a EE.UU. la propiedad del canal, un conjunto de pasos han afianzado su rápido y belicoso posicionamiento sobre el istmo. El 9 de abril, ambos gobiernos firmaron un memorando de entendimiento que permite la incursión de militares estadounidenses al país y el trabajo conjunto entre ambas fuerzas armadas. Pero antes, el presidente panameño, José Raúl Mulino, abiertamente amenazado desde Washington, abandonó la iniciativa comercial china de la Ruta de la Seda,  lo que afecta el financiamiento a proyectos de infraestructura y corta el flujo a las exportaciones panameñas. También gestionó la venta forzosa de puertos de empresas chinas al estadounidense fondo de inversiones BlackRock. El 23 de abril, Mulino planteó la reapertura de la empresa canadiense de minería, First Quantum Minerals, lo que significa retomar los contratos derogados por la Corte Suprema de Justicia(CSJP) en 2023, luego de una profunda y larga insurrección popular en contra de la explotación de la mina a “cielo abierto” más grande de Centroamérica. Al día siguiente del anuncio, la compañía canadiense informó que suspendió una demanda internacional contra Panamá en la que exigía 20.000 millones de dólares, en compensación a la medida tomada por el alto tribunal. EE.UU., apoyado por Mulino, parece estar posicionándose en Panamá para aumentar su influencia y ganancias, y en poco tiempo quiere convertirlo en su “zona de confort”, en la que el Estado panameño está perdiendo las facultades para tomar decisiones en torno a las relaciones comerciales con el resto del mundo, y también para dirimir sus conflictos internos por medio de sus propias instit...