El estilo de los bloques en mi sitio tiene un border de 1 pixel y padding de 4. Necesito personalizar el bloque HTML únicamente, para quitarle esas características.
¿Como puedo hacer para modificar solo el estilo de ese tipo de bloques, o crear un nuevo estilo para los mismos y aplicarlo?
Desde ya se agradece toda ayuda, saludos!
Federico
La configuración de los bloques obedece al tema seleccionado, debes buscar en el tema la hoja de estilos donde aparece dicha configuración.
Saludos
La configuración de los bloques obedece al tema seleccionado, debes buscar en el tema la hoja de estilos donde aparece dicha configuración.
Saludos
Gracias por la respuesta Carlos. El asunto es que en la hoja de estilos se define un estilo para todos los bloques en general. Entonces, si lo modifico, cambiarán todos los bloques. Y mi idea es cambiar solamente el estilo del bloque HTML.
Supongo que debería agregar un estilo específico para ese bloque y aplicarlo. Eso es lo que no se como hacer.
Supongo que debería agregar un estilo específico para ese bloque y aplicarlo. Eso es lo que no se como hacer.
Hola Federico,
Tu requerimiento tiene una cantidad de aristas que ni siquiera se me habían
ocurrido.
Pero como hoy me agarraste inspirado, creo que las cubrí todas...
Ya veremos qué nos dice la realidad...
Bien, para lograr lo que quieres hay que considerar cuatro escenarios (cada uno
tiene varias posibilidades de edición vía CSS) y de ahí variarle según las
necesidades y gustos personales:
1) Se modifican los bordes de "todos" los elementos de todos los bloques HTML de
TODO EL SITIO (portada y cursos):
.block_html{
border: 10px solid fuchsia;
}
.block_html .header{
border: 10px solid red;
margin:0;
padding:0;
}
.block_html .title{
border: 10px solid green;
}
.block_html .header .title h2{
border: 10px solid aqua;
}
.block_html .content{
border:10px solid blue;
margin:0;
padding:0;
}
http://moodle.org/mod/forum/post.php?edit=637370
2) Se modifican los bordes de "todos" los elementos de los bloques HTML de la
PORTADA (se excluyen los cursos):
#site-index .block_html{
border: 10px solid fuchsia;
}
#site-index .block_html .header{
border: 10px solid red;
margin:0;
padding:0;
}
#site-index .block_html .title{
border: 10px solid green;
}
#site-index .block_html .header .title h2{
border: 10px solid aqua;
}
#site-index .block_html .content{
border:10px solid blue;
margin:0;
padding:0;
}
3) Se modifican los bordes de "todos" los elementos de los bloques HTML de
TODOS LOS CURSOS (se excluye la portada):
#course-view .block_html{
border: 10px solid fuchsia;
}
#course-view .block_html .header{
border: 10px solid red;
margin:0;
padding:0;
}
#course-view .block_html .title{
border: 10px solid green;
}
#course-view .block_html .header .title h2{
border: 10px solid aqua;
}
#course-view .block_html .content{
border:10px solid blue;
margin:0;
padding:0;
}
4) Se modifican los bordes de "todos" los elementos de los bloques HTML de
UN CURSO EN ESPECÍFICO (se excluyen la portada y los demás cursos):
.course-X .block_html{
border: 10px solid fuchsia;
}
.course-X .block_html .header{
border: 10px solid red;
margin:0;
padding:0;
}
.course-X .block_html .title{
border: 10px solid green;
}
.course-X .block_html .header .title h2{
border: 10px solid aqua;
}
.course-X .block_html .content{
border:10px solid blue;
margin:0;
padding:0;
}
Donde la "X" debe ser sustituida por el "id" del curso deseado.
Por ejemplo, las instrucciones CSS para modificar los bloques del "curso 5"
seguirían un formato como el siguiente:
.course-5 .block_html{
border: 10px solid fuchsia;
}
NOTA: El "id" del curso se obtiene del URI (dirección de Internet) del mismo
(id=2, id=3, id=4, etc.).
Es importante notar que si se elige el "id=1", entonces estamos modificando la
portada (para Moodle la portada es el "curso 1"), por lo que esta forma de realizar
los cambios y la referida en el inciso 2) son equivalentes, ya que llevan al mismo
resultado.
Por otra parte, conviene incluir las indicaciones referidas en la última
CSS registrada en el archivo "config.php" del tema en uso (dicha hoja
aparece en $THEME->sheets ).
Si se usa el tema "standard", lo que procede es agregarlas al final del
archivo "styles_color.css"
Ya para terminar, una advertencia: en algunas partes eliminé el margen
y el "padding" (no sé cómo traducir esta palabra) de los elementos.
Ello, pues Moodle los configura (en otra CSS) de manera que éstos aparecen
separados del elemento que los contiene ("padre"), generándose el efecto visual de
que hay un "borde blanco" entre ellos.
Anexo una imagen de cómo se ve un bloque HTML con las modificaciones
incluidas más arriba.
Saludos
PD
Es posible modificar un bloque HTML en específico, pero hay que "rastrear"
su "id" analizando el código de la página Web que lee el navegador de Internet.
Dicho "id" es algo como "instX", donde "X" es un número que Moodle le asigna
a cada bloque. La lógica de edición de la CSS sería la misma que la mencionada
en el inciso 1) de este post, sólo que colocando primero el "id": #instX
Tu requerimiento tiene una cantidad de aristas que ni siquiera se me habían
ocurrido.
Pero como hoy me agarraste inspirado, creo que las cubrí todas...
Ya veremos qué nos dice la realidad...
Bien, para lograr lo que quieres hay que considerar cuatro escenarios (cada uno
tiene varias posibilidades de edición vía CSS) y de ahí variarle según las
necesidades y gustos personales:
1) Se modifican los bordes de "todos" los elementos de todos los bloques HTML de
TODO EL SITIO (portada y cursos):
.block_html{
border: 10px solid fuchsia;
}
.block_html .header{
border: 10px solid red;
margin:0;
padding:0;
}
.block_html .title{
border: 10px solid green;
}
.block_html .header .title h2{
border: 10px solid aqua;
}
.block_html .content{
border:10px solid blue;
margin:0;
padding:0;
}
http://moodle.org/mod/forum/post.php?edit=637370
2) Se modifican los bordes de "todos" los elementos de los bloques HTML de la
PORTADA (se excluyen los cursos):
#site-index .block_html{
border: 10px solid fuchsia;
}
#site-index .block_html .header{
border: 10px solid red;
margin:0;
padding:0;
}
#site-index .block_html .title{
border: 10px solid green;
}
#site-index .block_html .header .title h2{
border: 10px solid aqua;
}
#site-index .block_html .content{
border:10px solid blue;
margin:0;
padding:0;
}
3) Se modifican los bordes de "todos" los elementos de los bloques HTML de
TODOS LOS CURSOS (se excluye la portada):
#course-view .block_html{
border: 10px solid fuchsia;
}
#course-view .block_html .header{
border: 10px solid red;
margin:0;
padding:0;
}
#course-view .block_html .title{
border: 10px solid green;
}
#course-view .block_html .header .title h2{
border: 10px solid aqua;
}
#course-view .block_html .content{
border:10px solid blue;
margin:0;
padding:0;
}
4) Se modifican los bordes de "todos" los elementos de los bloques HTML de
UN CURSO EN ESPECÍFICO (se excluyen la portada y los demás cursos):
.course-X .block_html{
border: 10px solid fuchsia;
}
.course-X .block_html .header{
border: 10px solid red;
margin:0;
padding:0;
}
.course-X .block_html .title{
border: 10px solid green;
}
.course-X .block_html .header .title h2{
border: 10px solid aqua;
}
.course-X .block_html .content{
border:10px solid blue;
margin:0;
padding:0;
}
Donde la "X" debe ser sustituida por el "id" del curso deseado.
Por ejemplo, las instrucciones CSS para modificar los bloques del "curso 5"
seguirían un formato como el siguiente:
.course-5 .block_html{
border: 10px solid fuchsia;
}
NOTA: El "id" del curso se obtiene del URI (dirección de Internet) del mismo
(id=2, id=3, id=4, etc.).
Es importante notar que si se elige el "id=1", entonces estamos modificando la
portada (para Moodle la portada es el "curso 1"), por lo que esta forma de realizar
los cambios y la referida en el inciso 2) son equivalentes, ya que llevan al mismo
resultado.
Por otra parte, conviene incluir las indicaciones referidas en la última
CSS registrada en el archivo "config.php" del tema en uso (dicha hoja
aparece en $THEME->sheets ).
Si se usa el tema "standard", lo que procede es agregarlas al final del
archivo "styles_color.css"
Ya para terminar, una advertencia: en algunas partes eliminé el margen
y el "padding" (no sé cómo traducir esta palabra) de los elementos.
Ello, pues Moodle los configura (en otra CSS) de manera que éstos aparecen
separados del elemento que los contiene ("padre"), generándose el efecto visual de
que hay un "borde blanco" entre ellos.
Anexo una imagen de cómo se ve un bloque HTML con las modificaciones
incluidas más arriba.
Saludos
PD
Es posible modificar un bloque HTML en específico, pero hay que "rastrear"
su "id" analizando el código de la página Web que lee el navegador de Internet.
Dicho "id" es algo como "instX", donde "X" es un número que Moodle le asigna
a cada bloque. La lógica de edición de la CSS sería la misma que la mencionada
en el inciso 1) de este post, sólo que colocando primero el "id": #instX
Una "errata" a la posdata de mi post previo:
Para modificar un bloque en específico, debe seguirse la lógica del primer inciso,
pero sustituyendo ".block_html" por "#instX" y no, como se indicó previamente,
colocando el "id" al inicio del comando.
Por ejemplo, si el bloque en cuestión tuviera el id="inst35", las indicaciones
CSS serían las siguientes:
#inst35 {
border: 10px solid fuchsia;
}
#inst35 .header{
border: 10px solid red;
margin:0;
padding:0;
}
#inst35 .title{
border: 10px solid green;
}
#inst35 .header .title h2{
border: 10px solid aqua;
}
#inst35 .content{
border:10px solid blue;
margin:0;
padding:0;
}
Para modificar un bloque en específico, debe seguirse la lógica del primer inciso,
pero sustituyendo ".block_html" por "#instX" y no, como se indicó previamente,
colocando el "id" al inicio del comando.
Por ejemplo, si el bloque en cuestión tuviera el id="inst35", las indicaciones
CSS serían las siguientes:
#inst35 {
border: 10px solid fuchsia;
}
#inst35 .header{
border: 10px solid red;
margin:0;
padding:0;
}
#inst35 .title{
border: 10px solid green;
}
#inst35 .header .title h2{
border: 10px solid aqua;
}
#inst35 .content{
border:10px solid blue;
margin:0;
padding:0;
}
Hola Victor, simplemente genial, te has armado un verdadero manual sobre personalización de estilo en bloques!
Te comento lo que hice y como me fue, ya que lo tengo CASI resuelto:
Agregué el siguiente código en en styles_layout.css, basándome en el que armaste vos:
#site-index .block_html{
color:#FFFFFF;
border: none;
margin: 0;
padding: 0;
}
#site-index .block_html .header{
border: none;
margin: 0;
padding: 0;
}
#site-index .block_html .title{
border: none;
margin: 0;
padding: 0;
}
#site-index .block_html .header .title h2{
border: none;
margin: 0;
padding: 0;
}
#site-index .block_html .content{
border: none;
margin: 0;
padding: 0;
color:#555555;
}
Esto eliminó los márgenes tal como quería. Pero todavía me sigue apareciendo un margen a la derecha y otro abajo, ahora de 3 y 4 pixels. Y un borde de 1 pixel.
Este borde sale porque sigue aplicando un estilo definido en aadvark.css (el estilo que estoy usando). Te copio completo el fragmento de estilo para bloques de aadvark.css:
.sideblock {
color:#555555;
border: gray 1px dotted !important;
background: #ffffff url('images/sideblocks/sidegrad.jpg') repeat-x !important;
}
/***Este es el border que me tiene a maltraer, si lo modifico, se modifican todos los bloques, obviamente ***/
.sideblock .content {
color:#555555;
padding: 4px;
border: 0px;
}
.sideblock .contentcenter {
text-align: center; padding-right: 30px;
}
.contentimage {
border: 0px; padding: 0px;
}
.sideblock .header {
background: transparent !important;
}
.sideblock .header h2 {
padding-top: 4px;
background: transparent !important;
}
.sideblock .header .hide-show-image {
padding-top: 4px;
}
.sideblock .footer {
border:0px;
margin-top: 4px;
margin-bottom: 4px;
font-size:0.85em;
text-align: center;
}
.sideblock .header, .sideblock .header h2 {
color: #505050;
font-size:1em;
border: 0px;
background: transparent !important;
}
.sideblock .content .post .head .date,
.sideblock .content .post .head .name {
color: #555555;
}
.columnc1 {
background: #ffffff;
}
Los demás márgenes no ubico de donde los toma, pero no se ven afectados por los cambios que hice en styles_layout.css
Adjunto una imagen para que se entienda mas claramente.
Y mil gracias otra vez!
Te comento lo que hice y como me fue, ya que lo tengo CASI resuelto:
Agregué el siguiente código en en styles_layout.css, basándome en el que armaste vos:
#site-index .block_html{
color:#FFFFFF;
border: none;
margin: 0;
padding: 0;
}
#site-index .block_html .header{
border: none;
margin: 0;
padding: 0;
}
#site-index .block_html .title{
border: none;
margin: 0;
padding: 0;
}
#site-index .block_html .header .title h2{
border: none;
margin: 0;
padding: 0;
}
#site-index .block_html .content{
border: none;
margin: 0;
padding: 0;
color:#555555;
}
Esto eliminó los márgenes tal como quería. Pero todavía me sigue apareciendo un margen a la derecha y otro abajo, ahora de 3 y 4 pixels. Y un borde de 1 pixel.
Este borde sale porque sigue aplicando un estilo definido en aadvark.css (el estilo que estoy usando). Te copio completo el fragmento de estilo para bloques de aadvark.css:
.sideblock {
color:#555555;
border: gray 1px dotted !important;
background: #ffffff url('images/sideblocks/sidegrad.jpg') repeat-x !important;
}
/***Este es el border que me tiene a maltraer, si lo modifico, se modifican todos los bloques, obviamente ***/
.sideblock .content {
color:#555555;
padding: 4px;
border: 0px;
}
.sideblock .contentcenter {
text-align: center; padding-right: 30px;
}
.contentimage {
border: 0px; padding: 0px;
}
.sideblock .header {
background: transparent !important;
}
.sideblock .header h2 {
padding-top: 4px;
background: transparent !important;
}
.sideblock .header .hide-show-image {
padding-top: 4px;
}
.sideblock .footer {
border:0px;
margin-top: 4px;
margin-bottom: 4px;
font-size:0.85em;
text-align: center;
}
.sideblock .header, .sideblock .header h2 {
color: #505050;
font-size:1em;
border: 0px;
background: transparent !important;
}
.sideblock .content .post .head .date,
.sideblock .content .post .head .name {
color: #555555;
}
.columnc1 {
background: #ffffff;
}
Los demás márgenes no ubico de donde los toma, pero no se ven afectados por los cambios que hice en styles_layout.css
Adjunto una imagen para que se entienda mas claramente.
Y mil gracias otra vez!
Hola Federico,
En teoría, si colocas tus indicaciones CSS al final de la última
hoja de estilo indicada en el "config.php" del tema en uso, Moodle
respetaría el margen y padding que tu asignes (se "brincaría" las
configuraciones previas).
Es decir, lo que colocas de la hoja de estilo del tema en cuestión,
configura la clase ".sideblock".
Las demás clases como "contentimage" o "columnc1" no creo que
afecten (de hecho por lo que pones, no afectan), porque la plataforma
asigna dos clases a los bloques HTML:
Entonces, lo que hace el tema es irse por la configuración de "sideblock",
pero según mi lógica, si la configuración de la otra clase (osea "block_html")
se hace despúes (osea una vez que se ha establecido lo requerido para
"sideblock"), entonces se respeta el formato de esta última.
Para probar esto con más calma y orden, puedes crear incluso otra CSS
y darla de alta en el "config.php" del tema en uso, colocando su nombre
(sólo su nombre, no la extensión .css) al final de la línea correspondiente.
Si no te funciona, si me pasas la dirección de donde se descarga el tema, igual y le
echo un vistazo.
Saludos
PD
1) Cabe la posibilidad de que el tema en cuestión inserte algunas "div" u otras
cosas, muy al estilo "custom corners", en cuyo caso, habría que checar
directamente el código "html", para ver qué otras clases o id's afectan a los
bloques HTML, pero creo que eso es menos probable.
2) No me llamo Víctor, sino David
En teoría, si colocas tus indicaciones CSS al final de la última
hoja de estilo indicada en el "config.php" del tema en uso, Moodle
respetaría el margen y padding que tu asignes (se "brincaría" las
configuraciones previas).
Es decir, lo que colocas de la hoja de estilo del tema en cuestión,
configura la clase ".sideblock".
Las demás clases como "contentimage" o "columnc1" no creo que
afecten (de hecho por lo que pones, no afectan), porque la plataforma
asigna dos clases a los bloques HTML:
class="block_html sideblock"
Entonces, lo que hace el tema es irse por la configuración de "sideblock",
pero según mi lógica, si la configuración de la otra clase (osea "block_html")
se hace despúes (osea una vez que se ha establecido lo requerido para
"sideblock"), entonces se respeta el formato de esta última.
Para probar esto con más calma y orden, puedes crear incluso otra CSS
y darla de alta en el "config.php" del tema en uso, colocando su nombre
(sólo su nombre, no la extensión .css) al final de la línea correspondiente.
Si no te funciona, si me pasas la dirección de donde se descarga el tema, igual y le
echo un vistazo.
Saludos
PD
1) Cabe la posibilidad de que el tema en cuestión inserte algunas "div" u otras
cosas, muy al estilo "custom corners", en cuyo caso, habría que checar
directamente el código "html", para ver qué otras clases o id's afectan a los
bloques HTML, pero creo que eso es menos probable.
2) No me llamo Víctor, sino David
Hola DAVID (de donde habré sacado lo de Victor??? mis diculpas)
Mirá, hice lo siguiente, sin lograr resultados:
1. Agregué el código relativo a block_html al final de la hoja de estilo del tema (aadvark.css)
NO FUNCIONÓ
2. Generé una hoja de estilo blockhtmlstyles.css con el código correspondiente, y la agregué en el config.php del tema de este modo:
$THEME->sheets = array('aardvark','blockhtmlstyles');
Esto tampoco anduvo.
Por las dudas, te voy pasando el link de descarga del tema:
http://moodle.org/mod/data/view.php?d=26&rid=2618
Gracias, saludos!
Mirá, hice lo siguiente, sin lograr resultados:
1. Agregué el código relativo a block_html al final de la hoja de estilo del tema (aadvark.css)
NO FUNCIONÓ
2. Generé una hoja de estilo blockhtmlstyles.css con el código correspondiente, y la agregué en el config.php del tema de este modo:
$THEME->sheets = array('aardvark','blockhtmlstyles');
Esto tampoco anduvo.
Por las dudas, te voy pasando el link de descarga del tema:
http://moodle.org/mod/data/view.php?d=26&rid=2618
Gracias, saludos!
Hola Federico,
Ya revisé esto y la verdad es que sí está medio complicado, porque
estás usando imágenes y no palabras.
Yo creo que ahí es donde toda la lógica se rompe y hay que empezar a hacer
"malabarismos", pues en el tema que usas, las imágenes se rigen por el tema "standard".
De alguna manera esto es un "problema" común, porque los temas "derivados"
(como el que estás usando), requieren de las CSS del tema "padre", pues
sino, cómo con unas cuantas líneas, modifican toda la plataforma.
Es decir, desde mi punto de vista, creo que no hay una solución "óptima", pero sí
hay una solución.
Y la que yo implementaría, partiría de considerar lo siguiente:
1) No se debe modificar el tema "standard", pues otros temas lo pueden estar
usando
2) No es posible colocar "tags" HTML en los títulos de los bloques (la plataforma
no está configurada para ello). Si bien yo no veo mal en dar esta "libertad", a veces
por cuestiones de relativa seguridad, se prefiere no autorizarla.
3) No se debe hacer "override" de las configuraciones de los "sideblocks"
que usa el tema "aardvark_pro", pues ello afectaría a todos los bloques (de tipo
HTML y de otra clase).
En este contexto, la idea sería dar de alta el bloque, y colocar en el título un
caracter poco visible, como el punto " ." , la línea vertical " | " o cualquier otro.
Entonces, habría que colocar hasta el final de la hoja de estilo del tema en uso lo
siguiente (incluyo cosas "extra", para fines ilustrativos, pero la idea sería eliminar
lo que no sea útil):
#site-index #instX {
border: 10px solid fuchsia !important;
}
#site-index #instX .header{
border: 10px solid red;
margin: 0;
padding: 0;
}
#site-index #instX .title{
border: 10px solid green;
}
#site-index #instX .header .title h2{
border: 10px solid aqua;
margin: 0;
padding: 0;
}
#site-index #instX .header .title h2 {
color: #a1c4d9;
height:29px;
background-image: url(http://localhost/moodle/file.php/1/public/image.jpg) !important;
background-repeat: no-repeat;
}
#site-index #instX .content{
border:10px solid blue;
margin:0;
padding:0;
}
NOTA: Debe cambiarse lo que se encuentra en color rojo.
Esta configuración se muestra el bloque 1 de la figura incluida más abajo, y es
la que recomendaría en lo personal, aunque hay que hacer pruebas, pues no
se está asignando anchura a la imagen vía CSS, lo que puede ser una "mala
práctica".
Otro "problema" es que se debe "rastrear" el "id" del bloque a modificar,
pero se considera que esto es lo "mejor", pues así no se afecta a otros bloques.
No obstante, estas indicaciones cumplen perfectamente los estándares
internacionales en materia de CSS.
En el bloque 2 de la figura referida, muestro el "punto" que se incluyó en la
línea del título.
Obvio, esto se presta a una mega discusión en términos de accesibilidad.
Obvio también, no hay argumento para defender este "truco" desde esta
perspectiva.
Para no incurrir en esta falla, se requiere usar "tags" HTML en el título de
los bloques (Contra: se "rompería" con el supuesto 2 descrito más arriba).
Y en este sentido, podría seguirse lo indicado, por ejemplo aquí o aquí, con sus
correspondientes "pros" y "contras" (seguro hay otras posibilidades, pero
habrá que pensarlas).
Finalmente, en el bloque 3 de la figura anexada, se ilustra cómo si no se
usara una imagen en el título del bloque, lo incluido en los "posts" previos aplicaría
totalmente y sólo habría que hacer unos "min-overrides" vía el comando
"!important".
Esto hace pensar que quizá sería bueno usar textos en los títulos y no
imágenes.
También podría evitarse el uso de un título y colocar la imagen en el cuerpo
del bloque, lo que daría muchísimas posibilidades de manipulación del
objeto, aunque ello implicaría que no aparecería la flecha para expandir los
bloques (ubicada a la derecha del título), rompiéndose con la uniformidad
de la interfase (aunque quizá dicha flecha pueda colocarse "manualmente",
habría que evaluarlo).
En fin, en verdad parece que no hay una solución "óptima"...
Bien, espero que llegues a la solución que más convenga a tu situación y,
de ser posible, la compartas por aquí junto con una reflexión de por qué
tomaste la decisión respectiva.
Saludos
PD Otra posibilidad que tal vez valiera la pena considerar, sería dar de alta las
CSS del tema Standard en el "config.php", copiarlas a la carpeta correspondiente y
modificarlas al gusto. Ello implicaría modificar también la siguiente línea en dicho
archivo: $THEME->standardsheets = false; Pero ¿todo esto por un bloque?
Ya revisé esto y la verdad es que sí está medio complicado, porque
estás usando imágenes y no palabras.
Yo creo que ahí es donde toda la lógica se rompe y hay que empezar a hacer
"malabarismos", pues en el tema que usas, las imágenes se rigen por el tema "standard".
De alguna manera esto es un "problema" común, porque los temas "derivados"
(como el que estás usando), requieren de las CSS del tema "padre", pues
sino, cómo con unas cuantas líneas, modifican toda la plataforma.
Es decir, desde mi punto de vista, creo que no hay una solución "óptima", pero sí
hay una solución.
Y la que yo implementaría, partiría de considerar lo siguiente:
1) No se debe modificar el tema "standard", pues otros temas lo pueden estar
usando
2) No es posible colocar "tags" HTML en los títulos de los bloques (la plataforma
no está configurada para ello). Si bien yo no veo mal en dar esta "libertad", a veces
por cuestiones de relativa seguridad, se prefiere no autorizarla.
3) No se debe hacer "override" de las configuraciones de los "sideblocks"
que usa el tema "aardvark_pro", pues ello afectaría a todos los bloques (de tipo
HTML y de otra clase).
En este contexto, la idea sería dar de alta el bloque, y colocar en el título un
caracter poco visible, como el punto " ." , la línea vertical " | " o cualquier otro.
Entonces, habría que colocar hasta el final de la hoja de estilo del tema en uso lo
siguiente (incluyo cosas "extra", para fines ilustrativos, pero la idea sería eliminar
lo que no sea útil):
#site-index #instX {
border: 10px solid fuchsia !important;
}
#site-index #instX .header{
border: 10px solid red;
margin: 0;
padding: 0;
}
#site-index #instX .title{
border: 10px solid green;
}
#site-index #instX .header .title h2{
border: 10px solid aqua;
margin: 0;
padding: 0;
}
#site-index #instX .header .title h2 {
color: #a1c4d9;
height:29px;
background-image: url(http://localhost/moodle/file.php/1/public/image.jpg) !important;
background-repeat: no-repeat;
}
#site-index #instX .content{
border:10px solid blue;
margin:0;
padding:0;
}
NOTA: Debe cambiarse lo que se encuentra en color rojo.
Esta configuración se muestra el bloque 1 de la figura incluida más abajo, y es
la que recomendaría en lo personal, aunque hay que hacer pruebas, pues no
se está asignando anchura a la imagen vía CSS, lo que puede ser una "mala
práctica".
Otro "problema" es que se debe "rastrear" el "id" del bloque a modificar,
pero se considera que esto es lo "mejor", pues así no se afecta a otros bloques.
No obstante, estas indicaciones cumplen perfectamente los estándares
internacionales en materia de CSS.
En el bloque 2 de la figura referida, muestro el "punto" que se incluyó en la
línea del título.
Obvio, esto se presta a una mega discusión en términos de accesibilidad.
Obvio también, no hay argumento para defender este "truco" desde esta
perspectiva.
Para no incurrir en esta falla, se requiere usar "tags" HTML en el título de
los bloques (Contra: se "rompería" con el supuesto 2 descrito más arriba).
Y en este sentido, podría seguirse lo indicado, por ejemplo aquí o aquí, con sus
correspondientes "pros" y "contras" (seguro hay otras posibilidades, pero
habrá que pensarlas).
Finalmente, en el bloque 3 de la figura anexada, se ilustra cómo si no se
usara una imagen en el título del bloque, lo incluido en los "posts" previos aplicaría
totalmente y sólo habría que hacer unos "min-overrides" vía el comando
"!important".
Esto hace pensar que quizá sería bueno usar textos en los títulos y no
imágenes.
También podría evitarse el uso de un título y colocar la imagen en el cuerpo
del bloque, lo que daría muchísimas posibilidades de manipulación del
objeto, aunque ello implicaría que no aparecería la flecha para expandir los
bloques (ubicada a la derecha del título), rompiéndose con la uniformidad
de la interfase (aunque quizá dicha flecha pueda colocarse "manualmente",
habría que evaluarlo).
En fin, en verdad parece que no hay una solución "óptima"...
Bien, espero que llegues a la solución que más convenga a tu situación y,
de ser posible, la compartas por aquí junto con una reflexión de por qué
tomaste la decisión respectiva.
Saludos
PD Otra posibilidad que tal vez valiera la pena considerar, sería dar de alta las
CSS del tema Standard en el "config.php", copiarlas a la carpeta correspondiente y
modificarlas al gusto. Ello implicaría modificar también la siguiente línea en dicho
archivo: $THEME->standardsheets = false; Pero ¿todo esto por un bloque?
Hola David, creo que tengo resuelto el tema. Personalicé dos bloques HTML que contenían imágenes.
Tomando como modelo la solución que proponías, agregué las siguientes líneas al final de la hoja de estilos de mi tema:
#site-index #inst35 {
border: none !important;
}
#site-index #inst35 .header .title h2 {
height:5px;
}
#site-index #inst7 {
border: none !important;
}
#site-index #inst7 .header .title h2 {
height:5px;
}
Para hacer esto ubiqué el ID de cada bloque (abrí la página en mi navegador, seleccioné "ver código fuente" y busqué el id del bloque a partir del nombre de las imágenes que había agregado a cada uno).
PD: en relación a las flechas para expandir, ya las tenía previamente deshabilitadas.
Adjunto el resultado, mil gracias por la ayuda.
Tomando como modelo la solución que proponías, agregué las siguientes líneas al final de la hoja de estilos de mi tema:
#site-index #inst35 {
border: none !important;
}
#site-index #inst35 .header .title h2 {
height:5px;
}
#site-index #inst7 {
border: none !important;
}
#site-index #inst7 .header .title h2 {
height:5px;
}
Para hacer esto ubiqué el ID de cada bloque (abrí la página en mi navegador, seleccioné "ver código fuente" y busqué el id del bloque a partir del nombre de las imágenes que había agregado a cada uno).
PD: en relación a las flechas para expandir, ya las tenía previamente deshabilitadas.
Adjunto el resultado, mil gracias por la ayuda.
Hola a Todos, también me gustaria saber como hago para cambiar el titulo del bloque por ejemplo el bloque de "personas" cambiarlo por "directorio de personal" .
Gracias
Gracias