Miércoles, 14 Noviembre 2018

Etiqueta CSS para módulos

¡ Compartelo en tus REDES SOCIALES ! y siguenos en TWITTER

9 años 2 semanas antes
Avatar de ovaliente
ovaliente
Invitado
Invitado
Autor del tema
Etiqueta CSS para módulos #7336
Hola,

Estoy intentando ponerle un decorado más artistico a los titulares de mis módulos, entonces lo que he hehcho es agregarle la línea Background y luego intentar hacer un diseño en ilustrator,

Bueno todo bien, pero tengo un problema y es que los nombres de los módulos se ven chuecos ya que las letras se pegan al primer pixel del background, se ven así:

img269.imageshack.us/img269/241/problemayr.jpg

El código es este:
div.moduletable_tabs h3 {
	margin: 0 0 5px;
	padding-bottom: 5px;
	font-family: Verdana, sans-serif;
	font-size: 115%;
	text-transform: capitalize;
	color: #FFFFFF;
	background: url(../images/barra_modulos.png) no-repeat;

Me pregunto si se le puede poner la etiqueta de Padding con respecto al background, o en su defecto cómo podría hacer para cambiarlo para que se vea de manera correcta??

Muchas gracias de antemano :D

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

9 años 2 semanas antes
Avatar de monclee
monclee
Invitado
Invitado
Etiqueta CSS para módulos #7341
Si checa si ese texto esta dentro de una celda en una tabla o en un div, ahi puedes aplicar el padding de manera mas efectiva..

tambien veo que tienes 5 px de padding hacia abajo (bottom) . Eso podria estar causando ese espacio por lo que parece que el texto se "levanta",

Saludos

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

9 años 2 semanas antes
Avatar de ovaliente
ovaliente
Invitado
Invitado
Autor del tema
Etiqueta CSS para módulos #7342
Hola Monclee, mucahs gracias por responder.

Este es la etiqueta completa:
/* MODULE STYLES
--------------------------------------------------------- */
div.moduletable h3,
div.moduletable_default h3,
div.moduletable_menu h3,
div.moduletable_text h3,
div.moduletable_hilite h3,
div.moduletable_tabs h3 { 
    margin: 0 0 5px; 
    padding-bottom: 5px; 
    font-family: Verdana, sans-serif; 
    font-size: 115%; 
    text-transform: capitalize; 
    color: #FFFFFF; 
    background: url(../images/barra_modulos.png) no-repeat;

A eso te refieres???

Muchas gracias

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

9 años 2 semanas antes 9 años 2 semanas antes por ovaliente.
Avatar de ovaliente
ovaliente
Invitado
Invitado
Autor del tema
Etiqueta CSS para módulos #7343
Utilizo el Firebug pero no encuentro las propiedades del texto exacto. Mira, aquí te dejo lo que aparece en el panel derecho del firebug cuando examino el titulo del módulo:
addons.css (línea 18) 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
background:transparent none repeat scroll 0 0;
border:0 none;
font-size:100%;
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:0;
}
addons.css (línea 18)
Heredado desdeh3
div.moduletable h3, div.moduletable_default h3, div.moduletable_menu h3, div.moduletable_text h3, div.moduletable_hilite h3, div.moduletable_tabs h3 {
color:#3145BC;
font-family:Verdana,sans-serif;
font-size:115%;
text-transform:capitalize;
}
template.css (línea 638)
.contentheading, .componentheading, h1, h2, h3, h4, h5 {
font-family:Cambria,Times,serif;
font-weight:bold;
line-height:1.2;
}
template.css (línea 65)
h3 {
font-size:150%;
}
template.css (línea 61)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
addons.css (línea 18)
Heredado desdediv#Mod163.ja-moduletable
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
addons.css (línea 18)
Heredado desdediv.ja-mass
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
addons.css (línea 18)
Heredado desdediv#ja-right.column
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
addons.css (línea 18)
Heredado desdediv.main
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
addons.css (línea 18)
Heredado desdediv#ja-container.wrap
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
addons.css (línea 18)
Heredado desdediv#ja-wrapper
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
addons.css (línea 18)
Heredado desdebody#bd.fs3
body#bd {
color:#000000;
}
template.css (línea 22)
body.fs3 {
font-size:12px;
}
template.css (línea 29)
body {
color:#000000;
font-family:Arial,sans-serif;
line-height:1.5;
}
template.css (línea 15)
body {
line-height:1;
}
addons.css (línea 34)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
addons.css (línea 18)
Heredado desdehtml
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}

Espero que me puedas ayudar, gracias.

Voy a activar mi pagina para que entres y pudas comprobarlo tu mismo, creo que asi seria mas comodo para ti

Mi pagina es www.etc.pe

Muchas gracias :D

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

9 años 2 semanas antes
Avatar de monclee
monclee
Invitado
Invitado
Etiqueta CSS para módulos #7346
ve a esta hoja de estilos

www.etc.pe/templates/ja_teline_iii/css/template.css

Busca este codigo y ahi estan los margenes,
div.moduletable h3,
div.moduletable_default h3,
div.moduletable_menu h3,
div.moduletable_text h3,
div.moduletable_hilite h3,
div.moduletable_tabs h3 {
	margin: 0 0 5px; 
    padding-bottom: 5px; 
    font-family: Verdana, sans-serif; 
    font-size: 115%; 
    text-transform: capitalize; 
    color: #FFFFFF; 
    background: url(../images/barra_modulos.png) no-repeat;

}

primero como te decia en la otra respuesta quita el margen inferior, prueba con margin: 0 0 -5px; y puedes ir acomodando ahi a tu gusto, en realidad podrias tener margin: 0 0 -5px 0; cada numero indica un margen es decir

superior 0, derecho 0, inferior -5px, izquierdo 0px;

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

9 años 2 semanas antes
Avatar de ovaliente
ovaliente
Invitado
Invitado
Autor del tema
Etiqueta CSS para módulos #7347
Hola Monclee,

Creo que si hago eso, se moverá todo al mismo tiempo. O sea, es decir, si le pongo 40 px de margen, como el bakcround es el background del texto también se moverá al ritmo del texto y se seguirá viendo de la misma manera.

Lo que me gustaría hacer es que mis titulares de los módulos se vean así, por eso cree esa barra celeste en degradé y la transforme a un png y la indexe como background. No sé si lo habré hecho mal o hay alguna forma mejor de hacerlo.

Muchas gracias :)

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

9 años 2 semanas antes 9 años 2 semanas antes por monclee.
Avatar de monclee
monclee
Invitado
Invitado
Etiqueta CSS para módulos #7352
hay amigo jajaja ni siquiera probaste a jugar con los codigos que te di...

mira inserta esto

padding: 2px 1px 5px 7px;

y quita o elimina

padding-bottom: 5px;

El padding a diferencia del margen no afecta el fondo, :) en fin te aclaro porque luego creen que me enojo, simplemente si jugaran mas con lo que se les da descubririan muchas cosas mas que se pueden hacer, pero no me molesto para nada, al contrario entre mas aprenda mejor, asi que espero poder ayudarte en el futuro. :)

Saludos

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

9 años 2 semanas antes
Avatar de ovaliente
ovaliente
Invitado
Invitado
Autor del tema
Etiqueta CSS para módulos #7363
jajaja Muchas gracias Monclee, funciono!!! eres un genio jajaja

Sin embargo, sabes?? no me dijiste padding sino margin: (Te cito):

"primero como te decia en la otra respuesta quita el margen inferior, prueba con margin: 0 0 -5px; y puedes ir acomodando ahi a tu gusto, en realidad podrias tener margin: 0 0 -5px 0; cada numero indica un margen es decir"

jajaja bueno en fin muchas gracias por la ayuda, funcionó de maravilla.

Sabes aunque sin embargo pasaba algo ya desde antes y es que como la cajita aquella que he creado como imágen, en los módulos de posición left, no se ve tan bien ya que el largo de la línea supera al ancho de los módulos de left.

Podría crear nuevamente la barrita esa celeste, pero ahora más chica y colocarla pero que sólo afecte a los módulos de left y rigth??? lo haría con un suffix class???

Muchas gracias Monclee por la ayuda :D

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

9 años 2 semanas antes
Avatar de monclee
monclee
Invitado
Invitado
Etiqueta CSS para módulos #7364
Si mira asi de primeras lo que se me ocurre es crear otra imagen y con el class suffix pues darle esa nueva imagen de fondo..

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

9 años 2 semanas antes
Avatar de ovaliente
ovaliente
Invitado
Invitado
Autor del tema
Etiqueta CSS para módulos #7365
Claro, me pod´rias decir como crear sufix class, de verdad me gusta´ria saberm o sea cómo darme cuenta (a partir del firebug) en dónde poner el sufix clase, le asinaría este nombre "_barratitulo" luego tendríaq ue crear una etiqueta que altere su bakground, pero cómo creo esta y en donde la ubico???

Muchas gracias monclee :D

Por favor, Identificarse o Crear cuenta para unirse a la conversación.

Temas Relacionados

Asunto temas relacionadosRelevanciaFecha del último post
Añadir etiqueta value="1" a menú actívo6.97Miércoles, 05 Diciembre 2012
Cambiar etiqueta meta name="robots" de un artículo6.89Miércoles, 21 Septiembre 2011
Etiqueta en artículo K2 me rompe todos los artículos.6.89Sábado, 01 Noviembre 2014
Agregar en articulos la etiqueta Nuevo igual q en foro6.82Lunes, 25 Octubre 2010
como puedo poner una etiqueta en la parte superior de cada articulo6.68Jueves, 23 Febrero 2017
Crear posicion para modulos6.3Miércoles, 22 Abril 2009
IDE para debugear modulos en Joomla6.3Viernes, 02 Julio 2010
Módulos de fotos y vídeos para jomsocial6.23Viernes, 10 Diciembre 2010
Problema con configuración lenguage para módulos6.23Miércoles, 29 Junio 2011
Ayuda con modulos de pago para joomshopping6.23Martes, 05 Agosto 2014
Tiempo de carga de la página: 0.460 segundos