el color de fondo del bloque

cfeze · #1

Hola chicos, les comento.

Quiero personalizar mi bloque pero solamente la imagen y el color de fondo de la fig1, no tengo mucho manejo de .css sé que mis bloques tienen el diseño de forabg pero también veo otros class y me confunde

La idea es copiar el estilo que usan los bloques y ponerle otro nombre de "class" (?) así no afecta a otras partes del sitio, me entienden?

fig1
Imagen

Código: Seleccionar todo

<!-- $Id: latest_members.html,v 1.1 2008/02/09 08:18:15 angelside Exp $ //-->
<div class="forabg">
	<div class="inner">
		<span class="corners-top"><span></span></span>
		<ul class="topiclist">
			<li class="header"><dl><dt>{L_LATEST_MEMBERS}</dt></dl></li>
		</ul>
		<ul class="topiclist forums">
			<li><dl>
                 <dd class="posts_portal" style="width:100%;">
			<span style="float:left;"><strong>Username</strong></span>
			<span style="float:right;padding-right:10px;"><strong>{L_JOINED}</strong></span><br />
			<!-- BEGIN latest_members -->
			<span style="float:left;"><a href="{latest_members.U_USERNAME}"><span<!-- IF latest_members.USERNAME_COLOR -->{latest_members.USERNAME_COLOR}<!-- ENDIF -->>{latest_members.USERNAME}</span></a></span>
			<span style="float:right;padding-right:10px;">{latest_members.JOINED}</span><br style="clear:both" />
			<!-- END latest_members -->
				</dd>
			</dl></li>
		</ul>
		<span class="corners-bottom"><span></span></span>
	</div>
</div>

<br style="clear:both" />

Saludos cordiales

leviatan21 · #2

cfeze escribió:Hola chicos, les comento.

Quiero personalizar mi bloque pero solamente la imagen y el color de fondo de la fig1, no tengo mucho manejo de .css sé que mis bloques tienen el diseño de forabg pero también veo otros class y me confunde La idea es copiar el estilo que usan los bloques y ponerle otro nombre de "class" (?) así no afecta a otras partes del sitio, me entienden?

fig1

¿ Que parte es la que quieres cambiar ?

Yo lo que veo es que el estilo tiene una o dos fallas que se aprecian al ver tu portal, hay remanentes de colores celestes y azules que son propios de prosilver, y eso sería fácil de solucionar

cfeze · #3

Sisisi

Lo que quiero es cambiar la imagen(http://www.clandyt.com/styles/dyt/theme ... g_list.gif) por otra y poner un fondo, no sé, por ejemplo, verde.

Yo creo que si hago esto se va ver afectado tmb en el foro, o me equivoco? ya que comparte el mismo estilo

leviatan21 · #4

cfeze escribió:Yo creo que si hago esto se va ver afectado tmb en el foro, o me equivoco? ya que comparte el mismo estilo

Así es, si cambias la imagen, cambiará para todo el foro, por eso como tu dices hay que hacer algo especial, como agregarle una clase o identificador único.

Si lo haces con un identificador, sólo puedes utilizarlo una única vez y sería algo así :

1) En la plantilla :

Buscar :

Código: Seleccionar todo

<!-- $Id: latest_members.html,v 1.1 2008/02/09 08:18:15 angelside Exp $ //-->
<div class="forabg">

Reemplazar por :

Código: Seleccionar todo

<!-- $Id: latest_members.html,v 1.1 2008/02/09 08:18:15 angelside Exp $ //-->
<div class="forabg" id="latest_members">

2) en la hoja de estilo :
Abrir :

Código: Seleccionar todo

raíz/styles/dyt/theme/stylesheet.css

Debajo de todo, agregar :

Código: Seleccionar todo

#latest_members.forabg {
	background-color:green;
	background-image: url("{T_THEME_PATH}/images/gradient_verde.gif");
}

Para este ejemplo, debes subir tu nueva imagen para el fondo en raíz/styles/dyt/theme/images/gradient_verde.gif luego desde el ACP, actualizar Plantillas y Tema para el estilo dyt

cfeze · #5

leviatan21 escribió:Yo lo que veo es que el estilo tiene una o dos fallas que se aprecian al ver tu portal, hay remanentes de colores celestes y azules que son propios de prosilver, y eso sería fácil de solucionar

Cómo hago para solucionar eso?

Gracias!

leviatan21 · #6

Prueba con estos cambios

Abrir :

Código: Seleccionar todo

raíz/styles/dyt/theme/colours.css

Buscar :

Código: Seleccionar todo

.forabg {

    background-color: #0076b1;

    background-image: url("{T_THEME_PATH}/images/bg_list.gif");

}

Reemplazar por :

Código: Seleccionar todo

.forabg {
    background-color: #747374;
    background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}

Buscar :

Código: Seleccionar todo

ul.forums {

    background-color: #eef5f9;

    background-image: url("{T_THEME_PATH}/images/gradient.gif");

}

Reemplazar por :

Código: Seleccionar todo

ul.forums {
    background-color: #ECECEC;
    background-image: url("{T_THEME_PATH}/images/gradient.gif");
}

Recuerda refrescar el Tema desde el ACP

cfeze · #7

Sigue igual

pd: actualicé el theme

Saludos y gracias por responder

leviatan21 · #8

El primer cambio no lo veo realizado, el segundo si y funciona OK

cfeze · #9

Dammm sigue igual..

Quería saber si se puede hacer esto?

Imagen

Estoy haciendo un curso de css pero mi nivel es básico y no logro conseguir eso.

Muchas gracias Leviatan. Sos mi inspiración a seguir

leviatan21 · #10

cfeze escribió:Dammm sigue igual..

No no sigue igual, ahora ya no hay nada azul en los bloques

cfeze escribió:Quería saber si se puede hacer esto?

Mejor que te ayude alguien con mas experiencia que yo con ese tema

DaVidU · #11

para ello habría que separar el contenido de una etiqueta en dos etiquetas creando una nueva con los "span" del mismo estilo, la etiqueta de arriba usaría la imágen con el titulo de cada bloque y la etiqueta de abajo el contenido del bloque con un color sólido para que pueda alagarse o acortase el bloque sin sufrir cambios en la imagen usada

phpBB España Oficial