Bueno, abro este hilo con la idea de, poder solventar algunas dudas que tengo sobre el nuevo sistema de BlankTheme y de ese modo, que le sea de ayuda a otros users también que, imagino que al igual que yo, este nuevo sistema le es "nuevo" y de ese modo, como todo lo nuevo, algo dificil de saber configurar.
Parto de cero, con muy poquitos conocimientos sobre el nuevo sistema de BlankTheme y quiero personalizar un theme a mi estilo/gusto.
Para ello, cojo y uso el dpXanIris ya creado por nestormateo sobre BlankTheme y a partir de ese, realizo los cambios, pues sus cambios serian iguales en un BlankTheme sin ningun cambio que en ese, aunque si creeis oportuno empezar los cambios sobre un BlankTheme no modificado, hacemos eso, xD.
La primera duda que me asalta (y son muchas, pero vamos de una en una, xD) es como cambiarle el ancho al theme, este nuevo theme trae un ancho (no se sus medidas exactas) más pequeñas a las que yo quisiera poner, todo el ancho de la pantalla, si no existe la posibilidad de hacerlo variable respecto a la resolucion del monitor, si me gustaria ponerle un ancho como, por ejemplo, el usado en esta web, en dev postnuke, asi pues, ¿como puedo cambiarle el ancho al theme?
Bien! seguro que de este hilo vamos a sacar un muy buen manual de BlankTheme.
Ojalá Krator se nos una al propósito
COMENZAR UN THEME SOBRE BLANKTHEME
Efectivamente, como ya hay themes con sus diseños sobre BlankTheme
vale modificarlos en vez de comenzar con el BlankTheme de cero,
pero igual menciono lo que yo hago cuando voy a pasar un diseño a BlankTheme:
1) Renombro el theme y cambio todas las definiciones de lenguaje _BLANKTHEME_* por _NUEVONOMBRE_*
2) Cambio ancho del theme, imágenes de fondo y demás estilos con el nuevo diseño
3) A la vez de los estilos, voy cambiando las plantillas base de ser necesario
4) Cambio la configuración por defecto dependiendo del diseño
5) Verifico que funcionen todas las configuraciones de columnas y demás cosas
6) Añado los créditos del diseñador en el footer
Y bueno, vas a ver que lo nuevo es más sencillo!
CAMBIARLE EL ANCHO A LA PÁGINA
En la línea 78 del /styles/screen/basemod.css, vas a ver esto:
Mira que uso el 99% de la pantalla
el lio, es que según recomendaciones que he leido
el punto máximo óptimo es 90em (90 letras por decirlo así)
ya que de ahi en adelante los párrafos de la web pierden legibilidad.
Además, cuando aumentes el tamaño de letra,
la página se volverá más grande acorde a los deseos del usuario.
Esa es la idea detras del tamaño de la página.
Pero si quieres el 99% siempre (así sea para monitores de 2048x... de resolución
quita la línea de tope máximo (max-width) y siempre va a quedar de 99%
Nota: Muchas de las cosas de BlankTheme se controlan desde los estilos:
/style/screen/basemod.css - Todo lo que son anchos, altos, márgenes y rellenos del theme en general
/style/screen/content.css - Tipografía, colores, estilos específicos de los elementos y de algunas zonas de Zikula
Para que lo tengas en cuenta
A ver si Krator se nos une al tema en cuestión y podemos sacar de este hilo un estupendo manual para todos los users
Bueno, vamos empezando ir dandole a la tecla, xDD.
Me tomo nota del proceso que haces cuando diseñas un theme basado en BlankTheme
Sobre la duda en cuestion (intentare resumir para enfocar directamente la cuestion en si y que sea de mas ayuda a todos los users y a ese futuro manual :
Después de varias pruebas, me he liado un poco con este concepto, el 99% no lo he modificado y he cambiado el valor de max-widht, por ejemplo, le he puesto 100em, en ese momento, la anchura de la página a aumentado a una resolución que la veo muy óptima para lo que yo buscaba, pero no he visto que el tamaño de las letras aumentasen o disminuyeran, por eso me he liado con este concepto. Si dejo el max-widht a 100em y el widht a 80% (por pone un ejemplo) entonces disminye el ancho de la pagina (es deducible que al 80% del 100em).
Por lo tanto, segun mis deducciones (corrigeme si me equivoco) el width 99% nos lo fija al 99% de la anchura que tenemos asignada en el max-widht.
Y si eliminamos la linea max-width dejando el 99% siempre tendremos, como ancho de página, el ancho que nos da nuestro monitor.
Una vez hecho este cambio me he fijado en el tamaño de los bloques, al hacer mas ancha mi página he visto que, el bloque izquierdo (por ejemplo) su menu era grande porque era ancho, quedando visualmente "descompensado" el bloque central con los bloques laterales, asi pues, siguiendo tus indicaciones, me he mirado de arriba a abajo el archivo /style/screen/basemod.css.
Me he topado con la linea 343 que pone esto:
Bien, si modifico el width del col2 contains the left blocks o del col3 contains the right blocks (bloque izquierdo o bloque derecho) a un porcentaje inferior, efectivamente, el ancho de los bloques disminuye.
Pero si modifico el width del bloque central (col1 is the main column) a un porcentaje inferior, el tamaño del ancho aumenta en lugar de disminuir.
Bueno, si mis deducciones/avances son correctos, proseguire con siguiente duda, sino, a corregir este punto, xD.
Saludos
P.D. Tu nota, me ha venido como anillo al dedo para localizar muchas cosas
Jejejejee
has tocado un punto que hace muy poco logré entender en esto de los Themes "fluidos" (de ancho no fijo) y es la relación de min-width, width y max-width. Lo voy a explicar con varios escenarios:
MIN-WIDTH, WIDTH y MAX-WIDTH
Un monitor de 640x480:
El width de la página está a 99%, o sea que el navegador calcula y saca que el ancho es 634px (calcula el 99% del espacio disponible en la pantalla). Luego verifica el min-width: 760px. Como el 99% es menor que 760px, hace que el ancho mínimo de la página sea el que dice min-width (760px). O sea que en un monitor de resolución baja vas a tener scroll horizontal porque los 760px no caben en los 640 del monitor. Afortunadamente ya no hay de esos o si? jejejeje
La pagina queda en: 760px.
Monitor de 1024x864:
El navegador calcula el 99% y pone el ancho de la página a 1014px. Luego mira el min-width y como el width es mayor, no hace nada. Luego mira el max-width en 90em y hace el cálculo: 90x12px (cuando tienes la letra en 12px) = 1080px. Como el ancho 1014 es menor, en resultado, lo deja como ancho de la pagina.
La pagina queda en: 1014px.
Monitor 1440x900:
El navegador calcula el 99% y le da 1426px. Verifica el min-width y lo cumple, sigue con el max-width: 1080px (como habíamos visto en la anterior resolución cuando tienes una letra de 12px) y claro, el 99% se ha pasado el límite máximo, por lo que el ancho máximo de la página lo ajusta a 1080px.
La pagina queda en: 1080px.
Para entender esto de las unidades en el CSS encontré esto: http://www.ignside.net/man/css/unidades.php
Ahora, si usas el manipulador de tamaño de letra (las "lupas") que trae BlankTheme para redimensionar la letra, va a hacer variar el max-width.
Digamos que tengas la letra a 14px. Cuando calcule 90em = 90x14px = 1260px y la página se hará más grande en monitores de altas resoluciones.
Esta sección merece toda una página del manual, tal y como se ha explicado aqui, jejejeje
LAS 3 COLUMNAS FLUIDAS DE DPXANIRIS
Ahora, la técnica que usé en las 3 columnas de BlankTheme trata de:
tener la columna 2 y 3 (#col2 y #col3) flotantes a derecha e izquierda (con los bloques)
y la columna 1 (#col1) no flotante con márgenes para darle cabida a las flotantes (contenido principal) no te confundas, sencillamente es una notación reducida:
margin: 0 20% es igual a 0 20% 0 20%, márgenes izquierdo y derecho a 20%,
con ese margen les deja espacio a las otras 2 flotantes de 20%
y la columna principal se queda con el resto del espacio.
Es una técnica que se digiere con algo de experiencia en CSS
Nota: en CSS los márgenes (margin) y rellenos (padding) se pueden definir en una sola linea así:
margin/padding: [arriba] [derecha] [abajo] [izquierda];
entonces, si yo digo: margin: 0 20% 0 30%, quiere decir que arriba y abajo margen 0, a la derecha 20% y a la izquierda 30%. Fácil no?
es decir, si le cambias el width a #col2 o #col3, tienes que cambiarle el margen a #col 1 en la misma proporción. Digamos:
Pones #col2 y #col3 a 30%, necesitas el margen de #col1 en "0 30%" tambien ves?
Si las pones al 20%, necesitas el margen en "0 20%".
Si quieres diferentes anchos: #col2 a 30% y #col3 a 20%, pon el márgen en "0 20% 0 30%".
(aunque este movimiento requiere otros ajustes para otra configuración de columnas)
Estas son cuestiones de CSS que uno va asimilando con el tiempo, viendo ejemplos y leyendo por aqui y por aca
Aquí estoy chicos...buf, ya veo que le habéis dado bien al tema.
Yo por falta de tiempo es que no doy, aún ni empecé con los permisos que me diste nestor, pero recopilaré la info que ya dimos en otros hilos si os parece bien.
Manejo de las columnas para todos los módulos
Ejemplo con el módulo "Buscar"
1. Ve a templates\config y edita el fichero pageconfigurations.ini.
2. Genera una entrada del tipo:
Así tu modulo "Buscar", aparece unicamente con los bloques a la izquierda.
Por añadir información, te comentaré lo que ya me enseñó nestor, y es que puedes poner esto a tu gusto, para ello, haces el primer paso que indiqué.
con file = , puedes añadir tu propio fichero ini, como file = miestilo.ini
en esa misma carpeta, creas tu fichero ini y lo rellenas al mismo estilo que los demás, pero a tu gusto.
Esencial poner page = miestilo.htm, pues esa será la plantilla.
Luego en templates\modules, creas un fichero miestilo.htm al estilo de los demás.
Aquí defines el estilo, (2 o 3 columnas, o grid) en el value del "template".
Y abajo defines el orden en el que aparecen de izquierda a derecha, por ejemplo, 21, es columna izquierda y contenido central.
Espero haberme explicado.
Introducir un Flash en la cabecera
Aqui te muestro lo que he hecho yo:
He buscado un código compatible con todos los navegadores y he dado con este:
Separé el object y param para que me lo dejara postear. Tendrás que volverlo a unir Ok? Igualmente, puedes sustituir el banner.swf por el nombre de tu flash.
Entonces, lo pongo en las plantillas base (2col.htm,3col.htm y grid.htm) justo enseguida de:
En ese theme le he quitado el #navtop y he ocultado el título y el slogan desde content.css poniéndoles display:none;
Entonces, prueba a poner tu swf dentro de la carpeta de /images/design
lo nombras banner.swf o el nombre de tu flash, acomodas el código y pruebas.
Eso es todo por el momento, espero que esto contribuya a que os manejéis mejor con los themes. Suerte.
Una edición, vale más que mil palabras EdicionMania
No más preguntas, señoria
Con tu explicación y los ejemplos, y las pruebas que estuve haciendo, es un aspecto que creo, ha quedado muy bien explicado y claro
Como bien dices, esta sección, merece toda una página del manual
Asi pues, teniendo nuestro ancho de página configurado a nuestro gusto y la anchura de los bloques en página inicial, prosigo al siguiente punto
Entro a distintas secciones de la web, y en unas secciones aparecen todas las columnas (bloque central, izquierdo y derecho) y en otras solo izquierdo y central, y por ejemplo, en este ultimo caso, (seccion noticias que solo muestra bloque izquierdo y columna central) el tamaño de ancho del bloque izquierdo es superior al que habia definido inicialmente que visionaba en el indice.
Asi pues, mi siguiente consulta (o consultas, xDD):
Como hacer que, estemos en la seccion que estemos, mostrandose la cantidad de bloques que sean, el tamaño de los bloques laterales (izquierdo y derecho) sea igual al que hemos definido anteriormente en el indice? No digo el central porque, si entramos a noticias por ejemplo, la idea es que el bloque izquierdo tenga misma anchura que en indice, pero en este caso, el central que corresponde a noticias, coja al resto del ancho que queda.
La cosa marcha
Salu2
Edito: Tarde en darle al Enviar y no si la contestación de Krator, que ya se ha unido a la causa
A lo que comentas Krator de abrir el archivo pageconfigurations.ini y ahi indicar a cada módulo los bloques a usar (con la configuración/descripción que has dado), una duda me asalta ¿es necesario especificar módulo a módulo o hay otro modo que sea "genérico" para todos los módulos como en Xanthia 2.0?
Lo desconozco, pero Xanthia 3, siempre usará su plantilla generica "master.htm" para todo módulo que no esté definido ahí, según sospecho.
A ver si nestor confirma o desmiente este dato.
Un saludo.
Una edición, vale más que mil palabras EdicionMania
Exacto, todo lo que no se especifique queda a cargo del master.htm .
Son genéricas las plantillas nocolumns.htm, norightcolumn.htm y noleftcolumn.htm para casos en los que quieras configurar un módulo rápidamente. Para el master los valores se mueven en: /templates/config/themevariables.ini
Allí dicen qué plantilla y configuración usar para el master.
Esos valores se pueden cambiar desde el panel de administración de Xanthia 3 si el archivo es escribible, pero bueno, allí entra en juego la seguridad del sitio. Debería ser escribible con 644 en los hostings bien configurados y seguros .
Ahora edito este post para ampliar la info sobre configuraciones y plantillas en Xanthia
Ok, entiendo
Todo lo que no se especifique queda a cargo del master.htm y sus valores se mueven en /templates/config/themevariables.ini.
Revisando ambos archivos observo, y deduzco, deben tener los mismos valores en, por ejemplo, assign var='base' value='3col'
base = 3col
Siendo la base a usar 3col, pues si tuviesen valores distintos, no seria de "logica".
Bueno, sigamos que ya me he desocupado de unos deberes que me tenian preso desde ayer
el themevariables.ini y el master.htm no necesariamente deben tener los mismos valores, lo que pasa es que en el master las asignaciones están comentadas (están entre <--[* *]--> .) Pero por consistencia, si, cuando no quieras mover el .ini descomentas las asignaciones en el master.htm y lo haces desde allí, sino que como comentaba, cuando el ini es escribible, podeis mover los valores desde el panel de Xanthia sin tener que mover plantillas via FTP.
CONFIGURACIÓN DE THEMES XANTHIA 3
Bueno, como ya han visto, hay una colección de archivos .ini en la carpeta /templates/config de cada theme Xanthia 3. Allí hay 3 archivos indispensables:
pageconfigurations.ini : Como bien observó Krator, allí se asigna un archivo .ini específico a módulos específicos. Generalmente se asigna el master el *home y el *admin, que por decirlo así, son las secciones básicas de cuqluier sitio. Luego vienen definiciones específicas: para algunos módulos, su .ini : [News] file = news.ini, [Pages] file = pages.ini, etc. Ya veremos qué tienen dichos archivos.
themevariables.ini : allí se definen las variables que el theme quiera tener para usar en sus plantillas. En el caso de BlankTheme, usamos una variable $base para la plantilla base a utilizar, $layout para la configuración, y unas $use* que son para habilitar o no características como controlador del tamaño de letra, y decidir si el menu superior se va a manejar con el plugin uselinks o con la posición de bloques "navtop".
themepalette.ini : Aunque en el momento no se usa mucho, aqui se definen las paletas de colores a usar. Aplica más a los módulos antiguos que a los nuevos, que todo lo tienen en sus estilos. Ahora que lo pienso, yo voy a vaciar esos colores porque los módulos que uso no usan las paletas
y bueno, ya las variables y las paletas definidas, el theme usa el .ini definido por el pageconfigurations.ini.
Si va a mostrar el módulo News, usa el .ini que le pongamos en [News]. Si va a mostrar Pages, y no tenemos una sección [Pages] entonces va a utilizar el [master]. Si es la página principal usa [*home], y si es el panel de administración: [*admin].
Tomemos como ejemplo el [News] file = news.ini :
Alli se define la plantilla a usar (que debe estar en /templates/modules, en este caso news.htm.
la paleta a usar, y dos opciones adicionales que son para tener más control CSS de los bloques y el contenido principal: los contenedores #pn-maincontent y los .pn-block; luego se explican de ser necesario.
Por último, lo importante de el .ini de cada módulo, es que puede definir una plantilla específica para un bloque cualquiera (que deben estar en /templates/blocks) dependiendo de su ID (la caja de login con tal plantilla), o para toda una posición de bloques (left, right, center, navtop, ...), o por el tipo de bloques (todos los menus con tal plantilla). Eso nos da todo el control sobre la personalización de los bloques. Una vez escogida la plantilla news.htm, se configura dentro de esa plantilla la base a usar (2col, 3col, grid) y con qué configuración (layout).
Para ver las posibilidades ver esta tabla:
http://code.zikula.org/blanktheme/wiki/DocsLayouts#Availabledistributionsandzones
luego añado algunas imágenes de como son esas distribuciones.
Bueno me uno al post como el super ignorante a ver si me ilumináis en algunos temas que me gustaría poder dominar con blanktheme. Estos temas son:
- Como se puede probar una actualización de blanktheme sin cargarnos el actual? podemos crera un directorio blanktheme298 y sobreescribir los ficheros de templates/config.php?
- Como se puede poner un logo a blanktheme?
- Cual es la forma correcta y facil de cambiar los colores? se crea una paleta con nombre distinto y se pone ahí los valores?
Creo que con esto para empezar es suficente por ahora
Jelou!!! No me habia olvidado de este post , estuve liado con unas cosas y tuve poco tiempo
x rufo 22:
A tu primera pregunta, si, asi es, renombrando como indica nestor en su primer post.
A la segunda, si es posible, luego cojo mis apuntes y te indico, aunque mis apuntes son para cambiar el logo.
A la tercera, ahi aun estoy verde, xDD.
Siguiendo con la tematica del hilo, zenkius como siempre nestor por tus explicaciones
He seguido haciendo pruebas con el theme, y para ampliar un poquito esto, he conseguido hacer que, el ancho de los bloques cuando cambiamos del index, sea el mismo que el del index, ya sea en 2 col o 3 col.
Para ello, en el archivo basemod.css, vamos a la linea 278 y tenemos esto:
Donde tenemos ahora mismo seleccionado el 75% para el main column y el 25 para la columna de la izquierda, si no me equivoco, estos valores cogen el porcentaje del ancho de pagina que tenemos y le da el porcentaje definido correspondiente a cada columna.
En ese mismo archivo, mas abajo tenemos para definir en caso de tener las 3 columnas (central, izquierda y derecha).
Cambiando esos valores he visto como cambiaban los anchos de los bloques, eso si, las pruebas las he hecho solo con 2 columnas.
Para configurar teniendo 3 columnas, ahi me lio un poco, porque aparece:
El main column con 20%, y el left y right column tambien con 20%, eso me desorienta un poco, porque segun habia visto, la suma de los porcentajes de todas las columnas debia de dar el 100%.
Aunque tambien, en esa misma parte del archivo hace mencion a 123layout, 312 y 132 que supongo es ahi donde se configura para el bloque central por ejemplo, pero aun me "descuadra" respecto al main column del codigo con ese 20%.
@rufo:
1) sí, renombrarlo y los archivos de version también, mira el post #2.
2) el logo depende de como sea de largo, o como lo deseas posicionar.
Yo lo haría con estilos, moviendo a la derecha el título y slogan.
Voy a poner un logo por defecto en BlankTheme ok?
3) Las paletas de colores no sirven al momento
en content.css están la mayoría de definiciones de colores
general, títulos, enlaces, tablas, secciones
entonces ayudado por Firebug, podrías ver donde cambiar los colores
o definir un nuevo color para zonas especiales que quieras
@gnrx:
Mira el 4to post
la sección LAS 3 COLUMNAS FLUIDAS DE DPXANIRIS
alli expliqué la lógica de esas 3 columnas
espero que me entiendas
Ok nestor, releido ese post y con las pruebas que hice ayer, ahora lo veo mas claro
Me pongo a hacer pruebas con ambas columnas para ver esas configuraciones, pero como te comento, con lo probado ayer y releido el post, ya lo veo mucho mas claro
Estare un par de dias off line, pero luego retomamos el tema
Navegación
Personalizando BlankTheme
