Página 1 de 2

cambiar ancho y poner fondo

Publicado: 20 Oct 2010, 15:21
por cfeze
Hola gente!

La verdad el template attruum me cautivo pero quiero modificar algunas cosas.

Se podrá modificar el ancho? Lo veo muy chiquito.

Y poner una imagen de fondo.

Saludos cordiales.

cambiar ancho y poner fondo

Publicado: 20 Oct 2010, 16:30
por leviatan21
Para el ancho, prueba con estos cambios :

Abrir :
raíz/styles/Attriuum/theme/common.css

Buscar :

Código: Seleccionar todo

.wrapper {
    width: 1000px;
    margin: 0 auto;
    padding: 0;
} 
Reemplazar por :

Código: Seleccionar todo

.wrapper {
/*    width: 1000px;    */
    margin: 0 auto;
    padding: 0;
} 
Buscar :

Código: Seleccionar todo

#umain2 {
    background: url('{T_THEME_PATH}/images/userbar-main-bg2.png') 0 0 no-repeat;
    height: 130px;
    width: 952px;
} 
Reemplazar por :

Código: Seleccionar todo

#umain2 {
/*    background: url('{T_THEME_PATH}/images/userbar-main-bg2.png') 0 0 no-repeat;    */
    background: url('{T_THEME_PATH}/images/userbar-main-bg2.png') 0 0 repeat-x;
    height: 130px;
/*    width: 952px;    */
} 
Buscar :

Código: Seleccionar todo

#mainbody {
    width: 900px;
    background: #fff;
    padding: 4px;
    margin: 0;
} 
Reemplazar por :

Código: Seleccionar todo

#mainbody {
/*    width: 900px;    */
    background: #fff;
    padding: 4px;
    margin: 0;
} 
Guardar los cambios, subir el archivo al servidor vía FTP y desde el ACP actualizar el tema para el estilo Attriuum

Re: cambiar ancho y poner fondo

Publicado: 22 Oct 2010, 20:03
por cfeze
Gracias leviatan.

Realmente, no era lo que yo quería no me especifique bien. El ancho lo quería a 1200 px.
Estuve conversando con varios visitantes de la pag y me comentaron que la haga dinámica la web. No sé a lo que se refiere eso. Me podrías explicar eso y cómo serían los resultados si lo hago de forma dinámica la web?

Re: cambiar ancho y poner fondo

Publicado: 22 Oct 2010, 20:43
por leviatan21
El cambio que yo te sugerí hace el ancho dinámico, es decir, hace que el foro sea tan ancho como el monitor del usuario que visita al foro :roll:

Re: cambiar ancho y poner fondo

Publicado: 22 Oct 2010, 21:35
por cfeze
Creo que estoy entendiendo... Yo en realidad no quería que se vea todo el ancho. Por ejemplo en las pantallas 1280x1024 que se vean los bordes con el centro y 1024x768 solamente el centro. Se podrá?

cambiar ancho y poner fondo

Publicado: 22 Oct 2010, 22:14
por leviatan21
Creo que lo que buscas, se puede lograr con estos cambios :

Abrir :
raiz/styles/Attriuum/theme/colours.css

Buscar :

Código: Seleccionar todo

html, body {
    color: #536482;
    background-color: #FFFFFF;
}
 
Reemplazar, por:

Código: Seleccionar todo

html, body {
    color: #536482;
/*    background-color: #FFFFFF;    */
}
 
Abrir :
raíz/styles/Attriuum/theme/common.css
Buscar :

Código: Seleccionar todo

body {
    /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-family: Verdana, Helvetica, Arial, sans-serif;
    
    background-color: #242424;
    color: #828282;
    /*font-size: 62.5%;             This sets the default font size to be equivalent to 10px */
    font-size: 10px;
    margin: 0;
}
 
Reemplazar, por :

Código: Seleccionar todo

body {
    /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-family: Verdana, Helvetica, Arial, sans-serif;
    
    background-color: #242424;
    color: #828282;
    /*font-size: 62.5%;             This sets the default font size to be equivalent to 10px */
    font-size: 10px;
/*    margin: 0;    */
    margin: 0 auto;
    max-width : 1024px;
}
 
Recuerda actualizar el tema :cachas:

Re: cambiar ancho y poner fondo

Publicado: 22 Oct 2010, 22:56
por cfeze
Perfecto!

Unas preguntas, cómo hago para achicar los bloques del portal?
Mmm El gris lo veo como un color "triste" qué colores me recomiendas para cambiar? o Cómo insertar una imagen que se repita por todo el fondo?

Gracias!

Re: cambiar ancho y poner fondo

Publicado: 22 Oct 2010, 23:29
por leviatan21
cfeze escribió:cómo hago para achicar los bloques del portal?
como cuales¿? el portal está lleno de bloques :mrgreen:

cfeze escribió:El gris lo veo como un color "triste" qué colores me recomiendas para cambiar?
Pregunta demasiado personal...
cfeze escribió:Cómo insertar una imagen que se repita por todo el fondo?
Todo depende de la imagen :
si es gigante para que cobra todo el ancho y el alto, y que a su vez contemple todos los posibles anchos
O si es una tipo mosaico, que generalmente son chicas y se repiten tanto a lo ancho como a lo alto
hay muchas opciones mas... todo depende de la imagen

Re: cambiar ancho y poner fondo

Publicado: 23 Oct 2010, 05:07
por cfeze
Y cómo sería el código para poner una imagen gigante?

cambiar ancho y poner fondo

Publicado: 23 Oct 2010, 05:30
por leviatan21
Yo lo que haría es subir esa imagen al servidor en la carpeta :
raiz/styles/Attriuum/theme/images/
Y suponiendo que la el archivo se llame bg_attruum.gif
Abriría el archivo :
raíz/styles/Attriuum/theme/common.css
Buscaría esto :

Código: Seleccionar todo

body {
    /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-family: Verdana, Helvetica, Arial, sans-serif;
    
    background-color: #242424; 
Y debajo agregaría esto :

Código: Seleccionar todo

    background: url('{T_THEME_PATH}/images/bg_attruum.gif') 0 0 no-repeat; 
guardaría el cambio, subiría el archivo al servidor vía FTP y desde el ACP actualizaría el tema para el estilo Attriuum

Re: cambiar ancho y poner fondo

Publicado: 23 Oct 2010, 21:30
por cfeze
Wow Gracias....! Tengo varías consultas ahora.

http://test.clandyt.com/

Así me quedo.

1) Cómo hago para achicar el borde (blanco).

Imagen

2) Cómo hago para achicar el ancho de los bloques en el portal los que están en la derecha e izquierda (portal.php)?

3) Es un pequeño detalle pero estaría weno arreglarlo. Me aparece una línea blanca arriba. Cómo lo elimino?

Imagen

4) Creo que la más díficil jeje .
Puse la imagen grande pero cuando achico la web (el ancho) el centro se mueve pero la imagen no.

Imagen

Lo que quiero es que se quede "pegado" con el centro. También remover ese borde gris que aparece en los costados.

Imagen

Ju! En fin, gracias por el soporte en los anteriores post

Saludos cordiales.

cambiar ancho y poner fondo

Publicado: 23 Oct 2010, 21:52
por leviatan21
cfeze escribió:1) Cómo hago para achicar el borde (blanco).
Abrir :
raíz/styles/Attriuum/theme/common.css
Buscar :

Código: Seleccionar todo

#bshadl {
    background: url('{T_THEME_PATH}/images/body-shad-l.png') 0 0 repeat-y;
    padding-left: 42px;
}

#bshadr {
    background: #fff url('{T_THEME_PATH}/images/body-shad-r.png') 100% 0 repeat-y;
    padding-right: 42px;
} 
en las 2 apariciones de 42px cambiar a 22px

cfeze escribió:2) Cómo hago para achicar el ancho de los bloques en el portal los que están en la derecha e izquierda (portal.php)?
no creo que puedas, hay varios bloques que no pueden ser mas angostos de lo que ya son.

cfeze escribió:3) Es un pequeño detalle pero estaría weno arreglarlo. Me aparece una línea blanca arriba. Cómo lo elimino?
La imagen de fondo es así, tiene una linea en blanco arriba de todo, deberías editarla y cambiarla :
raíz/styles/Attriuum/theme/images/toolbar-bg.png

cfeze escribió:4) Creo que la más díficil jeje .
Ni entiendo a que te refieres :lol:

Re: cambiar ancho y poner fondo

Publicado: 23 Oct 2010, 23:18
por cfeze
Me imaginé jaja no sé como explicarlo :mrgreen:

Mirá http://www.test.clandyt.com si achicas la ventana del navegador (ancho) vas a ver que el cuerpo del medio se mueve y la imagen no.

Imagen

Lo que quiero es que se quede "pegado" con el cuerpo del medio. Quiero poner un fondo estilo a esto, obviamente otro. Imagen

Es decir el mismo efecto de este template http://demo.rockettheme.com/phpbb3/?style=infuse (sé q no dan soporte a templates de rockettheme pero sólo es para mostrar lo que quiero)

También remover ese borde gris que aparece en los costados en mi template porque al poner un fondo se ven bordes grises.

Imagen

Gracias Leviatan :cerveza:

Saludos cordiales.

cambiar ancho y poner fondo

Publicado: 24 Oct 2010, 06:21
por leviatan21
No se si te gustará, asi que recalco : realiza una copia de seguridad antes de hacer los cambios :

Abrir :
raíz/styles/Attriuum/theme/common.css
Buscar :

Código: Seleccionar todo

body {
    /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-family: Verdana, Helvetica, Arial, sans-serif;
    background: url('{T_THEME_PATH}/images/bg_attruum.jpg') 0 0 no-repeat;     
    background-color: #242424;    
    color: #828282;    
    /*font-size: 62.5%;             This sets the default font size to be equivalent to 10px */
    font-size: 10px;
/*    margin: 0;    */
    margin: 0 auto;
    max-width : 1024px;
} 
Reemplaza por :

Código: Seleccionar todo

body {
    /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
    font-family: Verdana, Helvetica, Arial, sans-serif;
    background: url('{T_THEME_PATH}/images/bg_attruum.jpg') 50% 0 no-repeat;
    background-color: #242424;    
    color: #828282;    
    /*font-size: 62.5%;             This sets the default font size to be equivalent to 10px */
    font-size: 10px;
/*    margin: 0;    */
    margin: 0 auto;
    max-width : 1024px;
    min-width:800px;
} 
Buscar :

Código: Seleccionar todo

#body-bg {
    background: #242424 url('{T_THEME_PATH}/images/body-bg.png');

    padding: 0;
    margin: 0;
}

#shad-l {
    background: url('{T_THEME_PATH}/images/userbar-shad-l.png') 0 0 no-repeat;
    padding-left: 24px;
    height: 130px;
}

#shad-r {
    background: url('{T_THEME_PATH}/images/userbar-shad-r.png') 100% 0 no-repeat;
    padding-right: 24px;
    height: 130px;
} 
Reemplazar por :

Código: Seleccionar todo

#body-bg {
/*
    background: #242424 url('{T_THEME_PATH}/images/body-bg.png');
*/
    padding: 0;
    margin: 0;
}

#shad-l {
/*
    background: url('{T_THEME_PATH}/images/userbar-shad-l.png') 0 0 no-repeat;
    padding-left: 24px;
*/
    height: 130px;
}

#shad-r {
/*
    background: url('{T_THEME_PATH}/images/userbar-shad-r.png') 100% 0 no-repeat;
    padding-right: 24px;
*/
    height: 130px;
} 
Buscar :

Código: Seleccionar todo

#bshadl {
    background: url('{T_THEME_PATH}/images/body-shad-l.png') 0 0 repeat-y;
    padding-left: 42px;
}

#bshadr {
    background: #fff url('{T_THEME_PATH}/images/body-shad-r.png') 100% 0 repeat-y;
    padding-right: 42px;
} 
Reemplazar por :

Código: Seleccionar todo

/*
#bshadl {
    background: url('{T_THEME_PATH}/images/body-shad-l.png') 0 0 repeat-y;
    padding-left: 42px;
}

#bshadr {
    background: #fff url('{T_THEME_PATH}/images/body-shad-r.png') 100% 0 repeat-y;
    padding-right: 42px;
}
*/ 
Buscar :

Código: Seleccionar todo

#footer-l {
    padding-left: 20px;
    background: url('{T_THEME_PATH}/images/footer-l.png') 0 0 no-repeat;
    height: 128px;
}

#footer-r {
    padding-right: 20px;
    background: url('{T_THEME_PATH}/images/footer-r.png') 100% 0 no-repeat;
    height: 128px;
} 
Reemplazar por :

Código: Seleccionar todo

#footer-l {
/*
    padding-left: 20px;
    background: url('{T_THEME_PATH}/images/footer-l.png') 0 0 no-repeat;
*/
    height: 128px;
}

#footer-r {
/*
    padding-right: 20px;
    background: url('{T_THEME_PATH}/images/footer-r.png') 100% 0 no-repeat;
*/
    height: 128px;
} 
De mas está decir que debes actualizar el tema desde el ACP

Re: cambiar ancho y poner fondo

Publicado: 24 Oct 2010, 20:39
por cfeze
Perfecto casí terminado jeje.

última cosa, se podrá lograr esto?

Imagen

por

Imagen

Se entiende? Que sea curvado. :)

Gracias!

Saludos cordiales!