No soy capaz de colocar las imágenes donde quiero  

Hola Ivan,

Las plantillas están divididas en posiciones

 http://bentrone-cp17.webjoomla.es/?tp=1 

a las que se asignan módulos. Estas posiciones en la plantilla vienen definidas en la programación de la misma y en las CC (hojas de estilos).

Para que la imagen de la teleoperadora vaya hacia arriba. Hay que modificar las CSS de la plantilla:
/templates/yoo_downtown/warp/css/layout.css

#headerbar .module {
    float: right;
    margin-right: 0;
    margin-top: 35px;
    max-width: 400px;
}

y modificar el margen superior

#headerbar .module {
    float: right;
    margin-right: 0;
    margin-top: 1px;
    max-width: 400px;
}

Saludos

Hola, el #headerbar. module no existía y se lo he añadido, solo había uno que era #headerbar ¿cual es la diferencia? Ahora pone la imágen mas arriba que el logo, creo que el descuadre que hay ahora es por como está hecha la imágen del logo, tengo que recortarla. ¿Donde puedo ver algo de información de como funciona todo esto así como las propiedades que se pueden utilizar?. He probado a poner lo mismo con "logo. module" y no hace ni caso :).

ahora ha quedado:

/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License ( http://www.yootheme.com/license)  */

@import url(../warp/css/layout.css);


/* Spacing
----------------------------------------------------------------------------------------------------*/

.module,
#header,
#content { margin: 10px; }

#breadcrumbs { margin: 15px 10px 5px 10px; }

#toolbar,
#footer { margin: 0 10px; }

#footer .module { margin: 0; }

#headerbar { 
	/*Pablo*/
	/*padding: 20px 0;*/
	/*padding: 0 0 20px 0*/
}

/*Jose*/
#headerbar .module {    float: right;    margin-right: 0;    margin-top: 1px;    /*max-width: 400px;*/   background: url(../images/menubar.png) 0 0 repeat;
}
/*Jose*/


/* Blocks
----------------------------------------------------------------------------------------------------*/

/* Toolbar */
#block-toolbar { padding: 5px 0; }

/* Main */
#block-main { padding: 10px 0; }

/* Bottom */
#block-bottom { padding: 20px 0; }

/* Footer */
#block-footer {
	padding: 20px 0;
	background: url(../images/footer.png) 0 0 repeat-x;
}


/* Layout
----------------------------------------------------------------------------------------------------*/

/* Toolbar */
#toolbar {
	line-height: 24px;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
}

/* Menu */
#menubar {
	padding: 10px;
	background: url(../images/menubar.png) 0 0 repeat;
}

/* System */
#content {
	padding: 15px;
	background: url(../images/content.png) 0 0 repeat;
}

/* Footer */
#footer {
	font-size: 12px;
	text-align: left;
}

#totop-scroller {
	display: block;
	position: absolute;
	top: 10px;
	right: 0;
	z-index: 1;
	width: 29px;
	height: 30px;
	background: url(../images/totop_scroller.png) 0 0 no-repeat;
	text-decoration: none;
}

#totop-scroller:hover { background-position: 0 -35px; }

donde puedo ver la configuración de "Logo", para ponerlas igual?

Hola Ivan,

¿Tienes algún módulo publicado en la posición "logo"?

Saludos

Solo el logo

Hola Ivan,

Actualmente veo el logo (izquierda) y la imagen del soporte (derecha) a la misma altura ¿has coregido el problema?.

Saludos

lo he movido con el código que he puesto arriba pero aun así están descuadradas las imágenes; ahora está la del teléfono más arriba y es que modificando los pixel del margen de arriba podría cuadrarlo pero me gustaría que lo hiciese la página automáticamente igual que lo hace en el módulo "Logo" ya que no entiendo porqué no las cuadra automáticamente si son de la misma altura las dos imágenes. De hecho, si pones la página esa para ver la estructura de los módulos se ve que algo está mal porque no cuadran las posiciones de varias cosas y luego en la vista real aparecen de distinta manera.

También me gustaría saber donde puedo encontrar info acerca de como es un poco la estructura de joomla y como funciona todo; las capas, módulos, propiedades, etc... Gracias por adelantado.

Hola Ivan,

Puedes cuadrar las imagenes, pero hay que jugar con ellas, y con las CSS, cambiar el margin-top:

#headerbar .module {
    background: url("../images/menubar.png") repeat scroll 0 0 transparent;
    float: right;
    margin-right: 0;
    margin-top: 12px;
}

Respecto a temas que señalas que estan mal, indicarte que todavia no se ha inventado la web en la cual poniendo imagenes del tamaño que deseemos y en la posición que queramos, se ajuste ella misma automáticamente. Hay que ajustarse a los tamaños definidos en las hojas de estilo de la plantilla, y si no se puede ajustar, pues hay que modificar las CSS.

Te serán de utilidad los tutoriales de https://www.webempresa.com/creacion-web-joomla/videotutoriales-joomla.html para conocer los conceptos de Joomla!.

Saludos

Disculpa, creo que no me he explicado bien. Sé que no hay nada que se haga solo, yo lo que quería decir es que no sé porque si tengo dos imagenes que tienen el mismo tamaño, no entiendo el motivo por el cual una de ellas se alinea de una manera distinta a la otra si no he tocado ninguno de los módulos. Muchas gracias.

Hola Ivan,

Disculpa que creo que soy yo el que no se ha explicado correctamente.

Si la plantilla original es: http://www.yootheme.com/demo/themes/joomla/2011/downtown/
¿donde indica que si pones una imagen a la derecha de logotipo, la misma tenga que quedar alineada a la misma altura? a parte de que las imagenes que has puesto no tienen el mismo tamaño (en altura si, pero no en anchura). ¿Y si en esa posición ponemos un buscador, tambien tendría que quedar alineado con el logo, eso que tiene distintas dimensiones?

Son zonas distintas, y cada una esta "gobernada" por CSS distintas, por lo tanto se comportan de diferente manera.

Accediendo a tu sitio web, veo que modificando las CSS, ya se muestran alineadas las imagenes, por lo que entiendo que podemos cerrar esta consulta, ¿correcto?.

Saludos

Muchas gracias Jordi, he conseguido cuadrarlas modificando el css pero, ¿donde podría ver el css que afecta al logo para luego aplicar el mismo a headerbar con la excepción de la alineación derecha?. La verdad es que creí que con que fuesen de igual algura (sin importar demasiado el ancho siempre que no fuese excesivo) no afectaría a la posición vertical de las mismas. Veo que de repende ahora me ocure lo mismo con el módulo de yoologin que no se porqué ahora también se desplaza más para abajo, sobre todo cuando cargo la web en una ventana de explorador relativamente estrecha; voy a intentar solucionarlo de la misma manera a ver que pasa 🙂

Solo tengo dos pequeñas consultas más, espero que me podáis ayudar con ellas (tampoco quiero hacerme pesado):

1 - La imágen del teléfono, aunque ahora está cuadrada en altura con la del logo, no sé que pasa que cuando mueves el ratón por cerca de ella una vez refrescada la página, se desplaza sola un poco a la izquierda. He estado viendo el código pero no encuentro el motivo de este raro comportamiento.

2 - Por otra parte, y esto ya no tiene mucho que ver con la colocación de las imágenes, en la sección tienda, al desplegar la opción buscar (colocando el ratón sobre ella) del menú principal, este menú se despliega por detrás de la barra donde tengo la ruta (justo debajo); como si la barra de la ruta estuviese en una capa mas adelante que la del menú. ¿podría de alguna manera arreglar esto?.

Muchas gracias.

Hola Ivan,

Respecto a encontrar las CSS que afectan a determinadas posiciones te será de utilidad usar Firebug:

1 - La imágen del teléfono, aunque ahora está cuadrada en altura con la del logo, no sé que pasa que cuando mueves el ratón por cerca de ella una vez refrescada la página, se desplaza sola un poco a la izquierda. He estado viendo el código pero no encuentro el motivo de este raro comportamiento.

He navegado por el sitio web, y el comportamiento que me indicas no lo visualizó, ni navegando por los diferentes apartados del sitio web, ni refrescando ...

2 - Por otra parte, y esto ya no tiene mucho que ver con la colocación de las imágenes, en la sección tienda, al desplegar la opción buscar (colocando el ratón sobre ella) del menú principal, este menú se despliega por detrás de la barra donde tengo la ruta (justo debajo); como si la barra de la ruta estuviese en una capa mas adelante que la del menú. ¿podría de alguna manera arreglar esto?.

He navegado con Firefox y con IE 9, y no veo lo que indicas, adjunto captura de pantalla.

Saludos

Muchas gracias Jordi y Luis,veré de ir viendo todo con ese programa.