cambiar ancho y poner fondoTema Solucionado

[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.

[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

[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?

[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

[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á?

[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

[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!

[leviatan21]

cómo hago para achicar los bloques del portal?

como cuales¿? el portal está lleno de bloques

El gris lo veo como un color "triste" qué colores me recomiendas para cambiar?

Pregunta demasiado personal...

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

[cfeze]

Y cómo sería el código para poner una imagen gigante?

[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

[cfeze]

Wow Gracias....! Tengo varías consultas ahora.

http://test.clandyt.com/

Así me quedo.

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



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?



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.



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



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

Saludos cordiales.

[leviatan21]

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

---

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.

---

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

---

4) Creo que la más díficil jeje .

Ni entiendo a que te refieres

[cfeze]

Me imaginé jaja no sé como explicarlo

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.



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

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.



Gracias Leviatan

Saludos cordiales.

[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

[cfeze]

Perfecto casí terminado jeje.

última cosa, se podrá lograr esto?



por



Se entiende? Que sea curvado.

Gracias!

Saludos cordiales!