Cambiar menú y logo

[icognito]

¡Hola a todos de nuevo!

Tengo un problema, que seguramente se resuelve fácil, pero no doy con la solución. Tengo Drupal 7 y el tema funcionando perfectamente. Podéis verlo en www.golineuro.es. El caso es que arriba, está el logo a la izquierda y el menú (es un superfish) a la derecha. El caso es que lo quiero justo al revés, o sea, tal y como están pero el logo a la derecha y el menú a la izquierda.

He probado a ponerle float: left (ahora tiene right) y al logo, le he añadido float: right. Lo que ocurre es que el logo se pega al menú y el menú al logo, o sea se juntan en el centro el lateral derecho del logo con el izquierdo del menú. Y lo que yo quiero es que el logo se me vaya a la derecha (alineado con el margen derecho) y el menú a la izquiera (alineado con el margen izquierdo).

¿Cómo puedo hacerlo?.

[pzin]

La idea de flotarlos cada uno a un lado está muy bien. Ahora sólo hiciera falta pensar porqué no se quedan como quieres. ¿Has probado a cambiar las demás propiedades de .col1 y .col2? Porque por ahí pudiera andar alguna solución.

De todas formas, deberías de preguntar en el subforo de aplicaciones prefabricadas, supongo que ya para la próxima.

[mariogl84]

Por un lado, flota .col2 a la izquierda y .col1 a la derecha. Luego tienes que ajustar los elementos de dentro (si sólo haces eso, se te quedan como has dicho tú, pegados en el centro). Dentro de .col2, tienes que flotar #superfish-1 a la izquierda (o quitarle el float, no creo que lo necesite). Y dentro de .col1, tienes que alinear la imagen del logo a la derecha, para esto basta con que le des a .col2 un text-align:right .

En resumen:

Código:

.section-1 .col1 {
    float:right;
    text-align:right;
    [...]
}

.section-1 .col2 {
    float:left;
    [...]
}

#superfish-1 {
    float:left;   // o quitarle el float
    [...]
}

Así debería quedar como quieres. Fíjate que las dos columnas llevan unos márgenes, si quieres que queden bien pegadas al borde se los tendrás que quitar.

[icognito]

Muchas gracias. Mariogl84, no veo .section-1 .col1 ni col2. Pego, a continuación, el código relativo a la cabecera y el superfish, a ver:

Código:

/*** Header ***/
#header {
	position: relative;
}

.section-1 {
	background: url(../images/bg-row.gif) no-repeat center 0 #ffffff;
}
.section-2 {
	background: url(../images/bg-row2.jpg) no-repeat center 0 #ffffff;
}
.section-3 {
	background: url(../images/bg-footertop.jpg) no-repeat center 0 #ffffff;
	padding: 56px 0 27px;
}

.region-footertop .block h2 {
	font-size: 17px;
	color: #424242;
}

#header #logo {
	display: inline-block;
	margin:125px 0px 47px 0;
}
#header #site-name-slogan {
  float: left;
}
#header #site-name {
  font-family: Helvetica, Helvetica Neue, Arial, sans-serif;
  font-size:30px;
  font-weight:bold;
  line-height:normal;
  margin:0;
}
#header #site-name a { text-decoration:none}


/*****************Main menu*****************/
#superfish-1 { 
	background:none;
	float:right;
	margin:0px;
	position:relative;
	width:auto;
}
	#superfish-1 li {
		background: url(../images/bg-li.gif) no-repeat 0 0;
		border: 0;
		overflow:inherit;
		padding:0px;
		text-align:center;
	}
	#superfish-1 li.first { background: none;}
		#superfish-1 a {
			border:0;
			color:#424242;
			font-family:'Droid Sans', sans-serif;
			font-size:17px;
			font-weight: bold;
			padding:150px 9px 31px;
			/*text-transform: uppercase;*/
			text-decoration:none;
		}
		#superfish-1 > li > a:hover, #superfish-1 > li > a.active, #superfish-1 > li > a.sfHover{
			background: url(../images/bg-menu.gif);
			color:#fff;
		}

	#superfish-1 ul {
		background:#242424;
		border:0px solid #1b1b1b;
		display:none;
		padding:15px 0;
		top:200px !important;
		width:140px !important;
	}
	.sf-navbar > li > ul { margin-top:3px;}
	
		#superfish-1 ul li {
			background:none;
			border:0 !important;
			height:auto;
			padding:0;
		}
		#superfish-1 ul li a:visited, #superfish-1 ul li a {
			border:0;
			color:#fff;
			font-size: 11px;
			font-weight:normal;
			font-family: Arial;
			padding:7px 0px 7px 0px !important;
			text-align:center;
			text-transform: uppercase;
		}
		#superfish-1 ul li a:hover, #superfish-1 ul li a.active { background: url(../images/bg-drop.gif) !important;}

	#superfish-1 ul li ul{
		left:160px !important;
		padding:10px 0 !important;
		top:0 !important;
	}
	#superfish-1 ul li ul li {
		background:none;
		margin-bottom:1px;
	}
/****************************************/

[pzin]

less-style.css líneas 15 y 21.

Deberías usar inspeccionar elemento en el menú contextual de tu navegador.

[icognito]

Pero las líneas 15 y 21 está referidas a footertop, o sea, a la parte de abajo y no al header ¿no?

[pzin]

No sé cómo funciona Drupal. En el archivo que hace de CSS están en esas líneas. Seguramente Drupal crea esa archivo de forma dinámica. Tendrás que fijarte a ver de dónde puede salir.

[mariogl84]

¿El código CSS no lo has escrito tú? ¿Estás usando algún framework?

[pzin]

Iniciado por mariogl84

¿El código CSS no lo has escrito tú? ¿Estás usando algún framework?

Está usando un CMS. Se menciona alguna vez en el tema...

[mariogl84]

Sí, me refería a algún framework de CSS. Es que tiene pinta de que ese código no lo ha escrito él, y quizá esté usando un sistema de grids o algo así.

Pero tienes razón, también puede ser cuestión del Drupal, que algún módulo le esté generando ese código.

[icognito]

Disculpad que haya tardado tanto en contestar, no he tenido conexión a Internet hasta hace un rato.

No, no lo he escrito yo. Es Drupal 7. Originalmente publiqué el post en prefabricados, pero lo movieron aquí.

[pzin]

¿Conseguiste solucionarlo?

[mariogl84]

Bueno, es que realmente tienes dos cuestiones: una de Drupal (dónde localizar ese código) y otra de CSS (modificar ese código para que se vea como quieres). La segunda creo que la tienes más o menos solucionada con lo que te hemos dicho por aquí.

Para encontrar ese código: ¿has buscado en todo el fichero less-style.css? A lo mejor está en otra línea. A unas malas, lanza una búsqueda de texto en todos los archivos de tu sitio, para ver si lo encuentras. Si simplemente es el css del tema, no tendrás problema en modificarlo. Si se genera dinámicamente tendrás que volver a preguntar en prefabricados.

¿Estás usando algún módulo que te construye el layout de la web o algo así?

[icognito]

El sitio está hecho a partir de una plantilla que he modificado. Para las demás modificaciones no he tenido ningún problema cuando he cambiado style.css. Pero esta modificación se me resiste .

Voy a mirar en less-style.css a ver. Gracias. Os tendré al tanto, je,je,je.

[mariogl84]

Quizá ese sea el archivo resultante de una compilación de LESS. Busca algún archivo que tenga la extensión .less, a ver si encuentras esas líneas ahí.

[icognito]

Hola a todos. Pues efectivamente, como decía mariogl84, hay un archivo llamado less-style.less que contiene las líneas que me comentábais. He añadido los cambios pero sigue saliendo exactamente igual. Es más si renombro el archivo less.style.less la web se sigue mostrando perfectamente tal y como está. ¿alguna idea?

[mariogl84]

Ese CSS está creado usando LESS (lesscss.org), y aunque quites el archivo original, te estará mostrando el css generado en la caché.

Para salir del paso, puedes cargar un css tuyo que sobreescriba esas propiedades (si usas los mismos selectores que en ese archivo, bastará con que tu css se cargue después, si no tendrás que añadir !important). Para hacerlo en condiciones, tendrías que saber si ese código lo está generando el theme o algún módulo, y ver cómo se está compilando el less.